GCTAA Logo

Governor's Career & Technical Academy Arlington

Web Page Design I: 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 and copy it to your public_html directory on students.gctaa.net. It should look like this:
    Unstyled Navidad Page
    when you load it in a web browser.
  2. Add a style element immediately after the title element that looks like this:
      <style type="text/css">
      </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:
    Some Styled Navidad Page
  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: Styled Navidad Page