Personal Portfolio Webpage - User Story 4

So I’m getting stuck on user story 4 for the project tile class

38-45 has 3 elements with a class of ‘project-tile’ so not sure where this is failing. I have been staring at this and searching for a solution for the best part of 3 hours and just cannot see it :frowning:

Any help will be greatly appreciated

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FCC Personal Portfolio</title>
        <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!--NAVIGATION-->
  <header>
      <nav class="navigation" id='navbar'>
          <h1 class='logo-name'>AB-DEV</h1>
          <ul>
              <li><a href="#">header one</a></li>
              <li><a href="#">header two</a></li>
              <li><a href="#">header three</a></li>
          </ul>
      </nav>
  </header>

  <!--WELCOME SECTION-->
    <div id="welcome-section">
        <div class="welcome-items">
            <h1 class="welcom-main">Welcome to my personal portfolio</h1>
            <p class="welcome-secondary">
                I am still trying to upskill in the basics so I doubt you will be wowed by anything listed here. I hope to use this as evidence of how far I have come in my coding/development journey and look back to think I can't beleive I was that bad.
</p>
</div>
</div>

 <!--PROJECT SECTION-->

<main>
<h1 id='projects'>Projects</h1>
        <h2>A selection of projects I have completed as part of the course.</h2>
        <div class="project-tile">
                <p><a href='https://codepen.io/barberlfc/pen/YzLrxmZ'>Project 1</a> </p>
            </div>
<div class="project-tile">
                <p><a href='https://codepen.io/barberlfc/pen/YzLrxmZ'>Project 2</a></p>
            </div>
            <div class="project-tile">
                <p><a href='https://codepen.io/barberlfc/pen/YzLrxmZ'>Project 3</a></p>
            </div>
    </main>


   </body>
</html>
/* file: styles.css */
* {
    margin: 0;
    padding: 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;    
}

body{
  background: #3E5151;  /* fallback for old browsers */
background: -webkit-linear-gradient(to top, #DECBA4, #3E5151);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, #DECBA4, #3E5151); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}


.navigation {
    display: flex;
    width: 100%;
    height: 80px;
    background: #1f2937;
    color: #f9faf8;
    justify-content: space-around;
}

.navigation ul, li{
    display: flex;
    gap: 40px;
    text-decoration:none;
}


a{
    color: #e5e7eb;
    text-decoration: none;
    list-style: none;
    text-transform: uppercase;
    margin-top: 15px;
}

.logo-name {
    width: 100px;
    height: auto;
    padding-left: 10px;
    padding-top: 10px;
    display: flex;
    justify-content:center
}

.welcome-main{
  display:flex;
  justify-content:center;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

you need a ‘projects’ section.
Right now you have the id=“projects” on an h1 element
It would be better to create a div or some kind of container element to use that id on it and to then have all the project tiles nested within it.
You can look at how you treated the welcome section for eg. It is a div that contains all the elements related to that section.

@hbar1st OMG how did I not realise that. Thank you so much

1 Like