• Home
  • CSS Home Exercise

CSS Home Exercise

Let’s get your CSS skills up to par with this fun exercise. The final result should resemble something like this:

Download the initial HTML code from this link https://my.pcloud.com/publink/show?code=XZpAHM7ZkMJvAaSzqeSD8pN8oSFlw8m00AQk inside your Class folder and double-click to extract it. Then open it in Visual Studio Code.

The following boxes should exist:

  • div.header.flex
    • h1.logo
    • div.header-menu
      • a.menu-item href #about
      • a.menu-item href #news
      • a.menu-item href #contact
  • div.about.flex id=about
    • div.about-left
      • img.about-image src=link to image of you
      • h3.about-name
      • p.about-text
    • div.about-right
      • h2
      • p
  • div.news id=news
    • h2
    • div.news-story
      • h3
      • p
      • p
    • div.news-story
      • h3
      • p
  • div.contact id=contact
    • h2
    • div.contact-info.flex
      • div.contact-map
        • iframe (from google maps embed http://x.co/gmapslink
        • or use the following code directly
          <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3291.5035300186455!2d-119.85113568388252!3d34.413962880508954!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80e93f67f3314b37%3A0x4e956b7e5cb6cec2!2sUniversity+of+California%2C+Santa+Barbara!5e0!3m2!1sen!2sus!4v1540941782587" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
      • div.contact-address
        • h4
        • h5

Your stylesheet should contain the following classes and declarations

  • .logo
    • margin 0
    • padding 0
    • color red
  • .menu-item
    • color green
  • .about-left
    • width 350px
    • padding 20px
  • .about-right
    • width 100%
  • .about-image
    • width 100px
  • .about-name
    • color red
  • .news-story
    • padding 20px
  • .contact-address
    • width 50%

Comments (3)

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.