Task

Create a website for UNCP-ACM Student Chapter. There will be at least two web pages.

The index page should look like image-1 (with theme-1 CSS) or image-2 (with theme-2 CSS) - you may choose your own colors and fonts. These images were created by using the same content file (index.html), but using two different themes (theme1.css, and theme2.css). You may include any suitable pictures, text, links or video.

The second page contains mainly a form with html-5 elements and attributes. This web page is used to allow the new members to register with the site (register.html; see image-3).

Deliverables

You will submit a single zipped file that includes the following:

two HTML files (the main page index.html and the registration form register.html),

two CSS themes (theme1.css and theme2.css), another CSS file (register.css)

all the required images and any other resources for the web sites

screen shots of the web pages (3), and

the screen shots of validation results of (5 pages- 2 html files and 3 CSS files)

Plan

First make a plan. Sketch the layout (you may use VISIO). Roughly, your sketch should look like the images given in the last pages. You may add more details.

The following divisions should be included in the layout;wrapper, header, footer, main, left top , left bottom, right top, right bottom, logo and nav (see images 1 & 2).

For these divisions, you may choose the appropriate width, height, color, padding, margin etc.

Use a fixed-layout plan. That is, the layout will not shrink or expand if the browsers size changed.

HELP: See layout with CSS Box model (advanced: see Flexbox)

https://www.w3schools.com/css/css_boxmodel.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

https://internetingishard.com/html-and-css/css-box-model/

https://university.webflow.com/lesson/the-box-model-layout

Two code segments are provided in the boxes at the end of this file (provides partial solution for index.html [(activity-1) and them1.css (activity-2)]. Store them in the same folder before testing. If you want, you may start with them and build your pages incrementally. But, I strongly suggest not to use them. It may spoil your creativity.

There are 5 activities listed below (creating 5 files). Some of the steps need to be conducted in parallel. For example, before testing wrapper in Activity-1 step-6, you must have created the css file theme-1 (at least with the declaration for wrapper division: activity-2 step-1). Incremental development is encouraged.

Activity-1 (creating index.html: 40 points)

Start with HTML-5 Doctype declaration

Declare the Charset (html5).

Include appropriate title (e.g. UNCP-ACM Student Chapter).

Include external CSS theme link (call it theme1.css). This file will be created in Activity-2)

Include Bootstrap declarations (if you are using).

Include the wrapper, and test it. (see Activity 2)

Incrementally include other boxes, and check the layouts.

The header division should include logo (floats left) and navigational links (floats right).

The top left box includes a login form.

Both fields username and passwords should be set as required

The password type should be used.

The link for registering a new member should open the registration form (register.html- see image 3) in a new window. This file will be created in activity-4

The Mid box contains an image and an external link to a video.

Image should be in the center, and include appropriate alternate text (need not to be oval)

Other boxes, bottom-left, top-right, and right bottom all contains appropriate links and images.

The footer section includes copyright information.

Include the headings and lines if necessary.

Include IDs or Class names, if necessary.

Activity-2 (creating theme1.css: 30 points)

Declare style for Wrapper (outside box)

Declare styles for html5 elements such as header, footer and nav

Declare styles for all other boxes.

Declare styles for other elements, such as img, headings, rulers, etc.

Incrementally, check your implementation.

When you are satisfied, take a snap shot of the screen.

Activity-3(creating theme-2.css: 10 points)

Save theme1 and save another copy as theme2.css.

Create a new theme: change the old colors and fonts.

On the index.html, change the external CSS link from theme1.css to theme2.css.

Check the main page again, when you are satisfied take a snapshot.

Activity-4(creating register.html)

Start with HTML-5 Doctype declaration

Declare the Charset (html5).

Include appropriate title (e.g. UNCP-ACM Student Chapter).

Include CSS link (register.css created in Activity-5)

Include Bootstrap declarations (if you are using)

Wherever possible, use html5 form elements.

Email input should be email type.

Telephone input should be tel.

include place folders and patterns

Set all the fields as required.

Open your file in a browser, and if you are satisfied take a snap shot.

Activity-5(creating register.css)

Include styles for

Field

Legend

Label

Include styles for other elements, if necessary.