Web Page Design : Xmas Project

Overview

'Tis the season to create a festive design and learn about fonts.

What Do I Need to Do?

1. Download navidad.html. It should look like this:
   
   when you load it in a web browser.
2. Add a style element immediately after the title element that looks like this:

     <style>
     </style>
     

3. Add this style to your style element:

     body {
         background-color: #060;
         margin: 3vw;
     }
     

   Reload the page and see how it changed.
4. Download snowtopcaps.otf and put it in the same directory with your web page.
5. Now add this style to your style element, above the body style:

     @font-face {
         font-family: 'SnowtopCaps';
         src: url(snowtopcaps.oft);
     }
     

   Add this style below the body style:

     h1 {
         text-align: center;
         background-color: #FFF;
         padding: 2vw;
         margin: 0;
         border-radius: 40%;
         border: 1vw solid #FF0C10;
         font-family: 'SnowtopCaps';
         font-weight: normal;
         font-size: 6vw;
     }
     

   Again reload the page and see how it changed. It should look like this:
   
6. Add a main html element (<main></main>) that opens before the first paragraph (after the top-level heading) of the song and closes after the last paragraph. Then add this style to your CSS:

     main { 
         display: block; 
         position: relative; 
         margin-left: auto; 
         margin-right: auto; 
         margin-top: 2vw; 
         width: 84vw; 
         height: 55vw; 
         background-image: url(https://mcnickmilestone.files.wordpress.com/2011/12/christmas-green-red-share-market.jpg); 
         background-size: 100%; 
         background-repeat: no-repeat; 
         text-align: center; 
     }
     

   Reload the page and see what you have done.
7. Add a div element with class attribute "song" (<div class="song"></div>) immediately inside the main element. Your html should have:

     <main>
     <div class="song">
     ...
     </div>
     </main>
     

8. Finally, add the following styles to your CSS style element:

     div.song {
         position: absolute;
         width: 28vw;
         background-color: #000;
         color: #FF0;
         opacity: 0.5;
         border-radius: 20%;
         margin-top: 15vw;
         margin-left: 37vw;
         padding: 2vw;
         font-size: 1.3vw;
         font-weight: bold;
     }
     footer {
         text-align: center;
         font-size: 1.5vw;
     }
     footer a, footer a:visited {
         text-decoration: none;
         color: #EFB030;
     }
     

   When you are finished, your web page should look like this: