HTML Assignment 5 Advanced Div Layouts
Create a file called HTML4_Resort.html. Then create a link to this page from your index.html page.
Your job is to create a homepage for a Tropical Island resort that matches one of these two layouts:
You are to make this look good. Your mark is 50% for completing the requirements and 50% for the professionalism of the design. Professionalism includes:
- Good color scheme (the above picture is a BAD color scheme)
- Centering where appropriate
- Margins, borders, etc. are used thoughtfully
It must contain 5 (or 6) divs:
- A top section that will hold:
- a logo
- contact information
- links bar - link to 3-5 airlines or other travel related sites
- NOTE: There seems to be an issue with links to outside pages in Replit. If you think you did the link correctly but you get some sort of Not Found error, you can ignore it and move on. No marks will be taken off for these errors to outside pages.
- 3 text content divs. (You may want to add one additional div that contains these three as that is what we did in our in-class example.)
- One for special promotions
- One for weather
- One for news (or something else that is appropriate)
- 1 to contain a major picture.
Other requirements/features:
- Suggestion only: Use color.adobe.com to find a color scheme that matches your photo:
- If it does not show you the color code, Right-Click… Inspect. The site will give you an RGB code which you can use the same way you use a color name or a hex color code.
background-color: rgb( , , );
- Must have a page background color
- Divs must have at least 2 different background colors.
- Use thick borders. Try to change the color of the border too.
- Use border-radius for your three text content boxes.
- Use styles, etc. to set up all text as you like
Assignment 4 (Vacation Resort) Marking
5 | 4 | 3 | 2 | 1 |
Page demonstrates a solid grasp of page layout techniques and all other requirements are met. Thorough attention was paid to the look and feel of the page | Page demonstrates a solid grasp of page layout techniques BUT there were occasional lapses in the layout of the divs BUT there were occasional lapses in the color scheme of the page BUT there were occasional lapses in the way content was laid out within the divs | Page demonstrates a satisfactory grasp of page layout techniques | Partially completed. | |
Assignment 4 (Vacation Resort) Marking
5 | 4 | 3 | 2 | 1 |
Page demonstrates a solid grasp of page layout techniques and all other requirements are met. Thorough attention was paid to the look and feel of the page | Page demonstrates a solid grasp of page layout techniques BUT there were occasional lapses in the layout of the divs BUT there were occasional lapses in the color scheme of the page BUT there were occasional lapses in the way content was laid out within the divs | Page demonstrates a satisfactory grasp of page layout techniques | Partially completed. | |
Missing some requirements but thorough attention was paid to the look and feel of the page |
Assignment 4 (Vacation Resort) Marking
5 | 4 | 3 | 2 | 1 |
Page demonstrates a solid grasp of page layout techniques and all other requirements are met. Thorough attention was paid to the look and feel of the page | Page demonstrates a solid grasp of page layout techniques BUT there were occasional lapses in the layout of the divs BUT there were occasional lapses in the color scheme of the page BUT there were occasional lapses in the way content was laid out within the divs | Page demonstrates a satisfactory grasp of page layout techniques | Partially completed. | |
Missing some requirements but thorough attention was paid to the look and feel of the page |