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%