Poject 2 for web development. Help!

Question

I am so stuck! I am trying to build a mobile first approach to be displayed with a total of 6 images that adjust with the width of the screen. I am having issues with getting my navigation bar to float to the right of the screen, resizing the profile image, and getting the remaining images on the screen to line up as well.

Here is my html code thus far:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Responsive Layout Project</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body>

<header class="main-header">
   <div id="container">
        <h1 class="name">Morgan Hunter</h1>
       <ul class="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </header>


  <aritcle class="introduction">
    <p> Hello there!  I am a front-end web developer who loves to build responsive webpages using CSS.  I plan on finishing the Tech Degree program at Team Treehouse by December 2017.  I am excited to use the skills I have mastered throughout this journey of learning about web development!</p>
        <img src="images/responsive-layout-profile.png" alt="Layout Profile" class="profile-image" /> 
</article>
</div>

</header>

<h1>PORTFOLIO</h1>

<div class="second-container"> <section> <img src="images/portfolio-1.png" alt="first portfolio" id="marketing" class="profile-layout"> <h2>Marketing</h2> <p>This project shows the front page of a marketing website meant for a specific business I am interested in.</p>

    <img src="images/portfolio-2.png" alt="second portfolio" id="search-page" class="profile-layout">
    <h2>Search Page</h2>
    <p>This project searches through a specific database to find information that the user is tyring to look up.</p>


    <img  src="images/portfolio-3.png" alt="third portfolio" id="travel-app" class="profile-layout">
    <h2>Travel App</h2>
    <p>This project compares travel times based on different trasportation methods and tells you the best one.</p>
  </div>
</section>

 <!--End of top layout-->

 <!--Begin bottom layout-->

<div class="third container"> <section class="bottom-layout"> <img src="images/portfolio-4.png" alt="fourth portfolio" id="spots" class="profile-layout"> <h2>Map of Favorite Spots</h2> <p>This project uses mapping appis to plot points for my favorite spots in the city for a do-it yourself walking tour.</p>

    <img src="images/portfolio-5.png" alt="fifth profolio" id="gallery" class="profile-layout">
  <h2>Photo Gallery</h2>
    <p>This project shows pictures from a recent trip to the viewer and allows them to easily navigate through photos.</p>

    <img src="images/portfolio-6.png" alt="sixth portfolio" id="calculator" class="profile-layout">
  <h2>Calculator</h2>
    <P>Someone can enter in the numbers they want, and press the big blue button and get the result.</P>

</div> </section>  <div class="fourth-container"> <footer> <h3 class="contact">Contact</h3> <article>If you're interested in chatting or want more information about what I've been working on, I'd love to hear from you!</article> <address>Phone <em>+1(111) 555-1234 Email HunterNation@aol.com</em></adress> <p>Morgan Hunter</p> </div> </footer> </body> </html>

and here is my css:

style.css

{ box-sizing: border-box; }

/--Start Name and Heading--/

.name { text-align: left; }

h1 { text-align: center; }

/--Start Navigation Bar--/

.main-header, .nav { display: flex; flex-direction: column; }

.nav { margin-top: 1.5em; list-style-type: none; }

.nav { display: inline-block; color: #000000; font-size: 1.125em; font-weight: 300; float: right; padding: .4em; text-decoration: none;

}

.profile-image { width: 100px; height: auto; margin: 0;
}

/--Start container--/

img { text-align: center; max-width: 100%; height: auto; width: auto; }

.main-header { padding-top: 2em; background-color: #F4F3FA;

}

p { padding: 2%; text-align: left; float: none; vertical-align: middle; }

section {
float: left; margin: 0 auto; width: 50%; height: auto; }

.profile-layout { vertical-align: middle;

}

/* Media Queries mobile phone*/

@media (max-width: 769px) { .main-header { height: 200px; justify-content: flex-end; }

.name {
    width: 140px;

} .nav { margin-top: 3em; flex-direction: row; justify-content: space-between;

}

.nav a {
    border-bottom-color: transparent;
}

}

@media (min-width: 1024px) { .main-header { flex-direction: row; }

.name {
    margin-right: auto;
}

.nav {
    margin-top: 0;
    align-self: center;
}

} .nav li { margin-right: .65em; margin-left: .65em; }

@media (min-wdith: 320px) { .main-header: { flex-direction: row; }

.name {
    margin: auto;
}

.nav {
    margin-top: 0;
    align-self: center;
}

.nav li {
    margin-right: .65em;
    margin-left: .65em;
}

}

Help! I am stuck! Thank you so much for your time.

Answer 1 · 2017-12-24T22:45:24Z

December 24, 2017 10:45pm

Hello Morgan,

I noticed you have two closing header tags, you should remove the first one.
You have a typo in the article element with the class "introduction". You wrote "<aritcle>" instead of <article>.
There are some issues with the the closing tag order in your HTML.

I suggest you reread your code a few times to filter out the small typos or you can run your HTML through a HTML validator like W3 validator.

I hope this helps. If you have any more questions, don't hesitate!

Happy holidays!

Welcome to the Treehouse Community

Looking to learn something new?

Morgan Hunter

Morgan Hunter

Poject 2 for web development. Help!

1 Answer

Oenas Vaes

Oenas Vaes