Assignment 6 - Relative, Absolute & Fixed Positioning IT-130: Introductory Computing for the Web The topic…is AWESOME! Make this page about something that you think is awesome. Create a page using...

1 answer below »
Everything is in the file. Use superhero movies or video gamers as examples


Assignment 6 - Relative, Absolute & Fixed Positioning IT-130: Introductory Computing for the Web The topic…is AWESOME! Make this page about something that you think is awesome. Create a page using text, images and a combination of relative, absolute and fixed positioning. You will also embed a font that you downloaded from www.dafont.com with @font-face For this assignment... 1. Make a new file called a6.html 2. Use embedded CSS; that is, your CSS code will be on the same page between the and tags (which you must have before your closing tag) 3. Use

boxes with different IDs, such as div#main, like we did in class. 4. Make one box {position: relative;} that will hold 5 (or more) other boxes. 5. Make 5 boxes {position: absolute;} that are inside the "relative" box. • You can use more than 5 if you wish 6. Be sure to specify these additional properties for each "absolute" box: • top (or bottom) • left (or right) • z-index • height • width 7. Be sure to put either text or an image -- or both -- inside of each "absolute" box • Use at least 3 pictures on your page. • Use a background image if you wish. • You can use more than 3 pictures if you wish. 8. At least 3 of the "absolute" boxes should overlap in some interesting or aesthetic way • The higher the z-index, the higher the box is in the "stacking order" 9. Remember, boxes DO NOT need to have background colors -- they can be set to transparent like this: div#whatever {background-color: transparent;} Continued on the other side... 10. Make one box {position: fixed;} that will anchor to either the very top or the very bottom of the web browser. Be sure to specify these additional properties: • top (or bottom) • left (or right) • z-index -- sure this box is above all other boxes • height -- does not have to be 100% - can be smaller or a set pixel size • width -- does not have to be 100% - can be smaller or a set pixel size • Be sure to put something in this box -- don't just use a background-color 11. Use other properties that you learned in class, such as • border • border-radius • background-color • padding • overflow • text-shadow 12. Use an embedded font that you downloaded from dafont.com or another font website • Make sure the font that you use is a TTF or an OTF • Use the @font-face property • Don't forget to upload the font file along with your a6.html file Be sure to link your index.html file to a6.html so it can be graded. This assignment is due at the end of Class 14.
Answered Same DayNov 09, 2021

Answer To: Assignment 6 - Relative, Absolute & Fixed Positioning IT-130: Introductory Computing for the Web The...

Yogesh answered on Nov 11 2021
165 Votes
SOLUTION.PDF

Answer To This Question Is Available To Download

Related Questions & Answers

More Questions »

Submit New Assignment

Copy and Paste Your Assignment Here