Html/Css

Project 1 For this project, you'll be building a website for the E-learning Center at Royal Commission. You will be provided a design mockup shown below, and you must replicate that design in HTML and CSS.

You will develop a responsive website that will display images, descriptions and links to each of the projects pages, total of 2 pages.

Below is the design mockup:

Please Note when Creating you website to:

• Make sure that it replicates the 2 pages above. • The headers, and footers of the 2 pages are unified

Apply the following information for:

§ HTML:

o Title : Project1_Pagetitle 402 o Use div and sections to organize your pages 
 o Images (included in the file attached)
 o H1 


o Forms: § For the form use fieldset and legend, use the proper input box § Add a dropdown menu to the fieldset applicant information that allow the user to

select one of three cities: • Jubail, Riyadh, or Yanbue

§ Add a dropdown menu to the fieldset applicant information that allow the user to select one of three facilities

§ Brainstorming Halls , Multi-Purpose Hall(MPH) , Studios

o Apply the CSS style to the elements using: Id selector or Class selector, or both


§ External CSS Style:

o Apply the styles given. Include appropriate padding and margin o All the CSS codes must be in one separate external file o Padding and Margin: You can use whatever size for both in a way that will resample the

mockup above. o Font: Arial, Helvetica, sans-serif; o For the navigation bar on the top when the mouse hover over the item the color should

change. o Colors:

#db9833 #2a6592 #F4f4f4

Submission Instructions:

• This is a Project that will be done it teams of 2 students only. Each student is expected to work effectively.

• You will be evaluated on the Output as well as the quality of your code. Your code should be simple and neat. use comments when needed.

• The output should be the same as in the given picture. • You will submit your HTML, CSS and Picture Files. Save your all file with your name

and the last three digits of your id (eg: Anwar_Saleh176.html) • Save all your files in your folder (name + last 3 digit of your id). • Compress in one zip file and upload on the blackboard for submission. • Deadline for Submission: Monday Week 15