create these 2 html pages:
first page is called "about.html":
it should look like this:
code for this page is:
</section>
second page is called "index.html"
it should look like this:
code for this page is:
choose whatever images u want for the pages
INSTRUCTIONS:
home About Jude By: Admin Jan 1, 2018 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc mollis, nulla non elementum tincidunt, felis ligula sodales lectus, sit amet dignissim quam massa sit amet lorem. Aenean lorem risus, tempus nec, gravida eu, semper sed, ipsum. Donec risus. Pellentesque sollicitudin sapien ut neque scelerisque blandit. Praesent metus. Mauris pulvinar mattis justo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer dictum vehicula orci. Integer sed velit. Nunc in sem sit amet ligula scelerisque dapibus. Nullam commodo odio vel enim. Jude's Craft Blog categories about Jude Favourite Crafts By: Admin Jan 19, 2018 Make it yourself....here Make it yourself....here Make it yourself....here recipe index Contact Jude Morbi condimentum, odio sit amet aliquet adipiscing, nunc odio fermentum tellus, tincidunt pulvinar leo purus quis libero. Vivamus quam. Nam nec sapien quis neque condimentum sollicitudin. Morbi massa ante, malesuada et, placerat eget, consectetuer non, enim. Sed accumsan felis sit amet elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Praesent imperdiet pede et augue. Vestibulum lacinia ultricies turpis. Contact Jude at [email protected]
home Sewing and Stitching Crafts By: Admin Jan 11, 2018 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc mollis, nulla non elementum tincidunt, felis ligula sodales lectus, sit amet dignissim quam massa sit amet lorem. Aenean lorem risus, tempus nec, gravida eu, semper sed, ipsum. Donec risus. Pellentesque sollicitudin sapien ut neque scelerisque blandit. Praesent metus. Mauris pulvinar mattis justo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer dictum vehicula orci. Integer sed velit. Nunc in sem sit amet ligula scelerisque dapibus. Nullam commodo odio vel enim. Jude's Craft Blog categories about Jude craft index Poster Making By: Admin Jan 19, 2018 cft Dream thailfour Donec cursus faucibus turpis. Quisque auctor est at magna. In sagittis quam ac ante. Etiam et erat. Morbi sem. Mauris faucibus elit eu est. Nulla wisi eros, vehicula et, congue quis, consectetuer non, leo. Phasellus suscipit felis non est. Etiam venenatis hendrerit nibh. Integer a tellus. Aliquam aliquet. Sed nec orci. Quisque consequat, elit eget pulvinar suscipit, sapien ligula sagittis magna, at sodales arcu est et augue. & DIY Woodworking By: Admin Feb 4, 2018 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi condimentum, odio sit amet aliquet adipiscing, nunc odio fermentum tellus, tincidunt pulvinar leo purus quis libero. Vivamus quam. Nam nec sapien quis neque condimentum sollicitudin. Morbi massa ante, malesuada et, placerat eget, consectetuer non, enim. Sed accumsan felis sit amet elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Praesent imperdiet pede et augue. Vestibulum lacinia ultricies turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi auctor. Nulla facilisi.
Open the index.html and about.html files provided. Create an external css file (main.css) to recreate the layout below. You may use either floats or positioning to create the three columns. Add the link to the main.css in each html page. You should only have one css file for both pages. Finish coding the Favourite Crafts section on the about page. I have provided the images (fav1.jpg, fav2.jpg and fav3.jpg). The "here" link for each craft can be a dummy link. In the nav, add a link to the about Jude page on the index.html file and add a link to the index page on the about.html page. Add a link to your email address in the Contact Jude column on the about page. Change all the Jude's to your own name. The index and about pages were coded using html5 elements. Remember to account for older browsers that render these new elements as inline at the top of the css file. I have already included the link to the script for older versions of IE.
Marks will be given for ● adding link to css in the html pages - if link does not work on css - no part mark for css. Make sure to link your css -if you linked index.html only, and no about you will get only 50% of entire mark as all the about page css will be mark c -if you didnt link both htmls, you will get 0 for both other than rubric for html files - No inline or internal styles allowed • Used new html5 elements • accounting for older browsers and new html5 elements in the css • links to the home and about pages changing all the Jude's to your name ● correctly adding a link to your email, • centred layout with wrap div set a width of 90%, body background color is set to #b6e3ff • header h1 element centered bold removed and color set to #999 with text-shadow added • the nav element background color set to #d4d0d0 and links set to white ● Layout mark breakdown o 3 column layout using either floats or positioning o h2 formatting in each column including spacing, alignment and color (#666), etc. o fonts (Trebuchet MS for the content and h2's, Georgia for the h1 and links, sizes can be approximate) o formatting of each section (links, content text, images, fonts, color, border, spacings) o make sure your final work matching to the photo even if it does not mention in this written rubric • no errors in html, css file • clean html and css with no dummy class or id, and unnecessary white lines, or unnecessary elements (-10pt of mark)
create these 2 html pages: first page is called "about.html": it should look like this: code for this page is:
-
- Site Admin
- Posts: 899603
- Joined: Mon Aug 02, 2021 8:13 am