Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

I don’t understand why it says:
Your portfolio should have a navbar with an id of navbar .
Your #navbar element should contain at least one a element whose href attribute starts with # .
Your #navbar element should always be at the top of the viewport.

I checked several times, where am I wrong?

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Personal Portfolio Webpage</title>
    <link rel="stylesheet" href="styles.css"/>
  </head>
 <body>
    <nav id="nav-bar">
        <ul id="nav-list">
            <li>
                <a href="#welcome-section">About</a>
            </li>
            <li>
                <a href="#projects">Work</a>
            </li>
            <li>
                <a href="#contact">Contact</a>
            </li>
        </ul>
    </nav>
    <section class="welcome-section" id="welcome-section">
        <h1>Hey I am Mimic</h1>
        <p>a web developer</p>
    </section>
    <section class="projects" id="projects">
        <h2>These are some of my projects</h2>
        <div class="project-grid">
            <a href="">
                <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg" alt="" clss="project-image"/>
                <p class="project-tile">Tribute Page</p>
            </a>

            <a href="">
                <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png" alt="" clss="project-image"/>
                <p class="project-tile">Random Quote Machine</p>
            </a>

            <a href="">
                <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png" alt="" clss="project-image"/>
                <p class="project-tile">JavaScript Calculator</p>
            </a>

            <a href="">
                <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/map.jpg" alt="" clss="project-image"/>
                <p class="project-tile">Map Data Acroos the Globe</p>
            </a>

            <a href="">
                <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/wiki.png" alt="" clss="project-image"/>
                <p class="project-tile">Wikipedia Viewer</p>
            </a>

            <a href="">
                <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tic-tac-toe.png" alt="" clss="project-image"/>
                <p class="project-tile">Tic Tac Toe Game</p>
            </a>
        </div>
    </section>
    <section class="contact" id="contact">
        <div id="contact-header">
            <h2>Let's work together...</h2>
            <p id="contact-p">How do you take your coffee?</p>
        </div>
        <div id="contact-links">
            <a href="" id="profile-link" target="_blank">GitHub</a>
        </div>
    </section>
 </body>
</html>




body{
    font-family: 'Poppins, sans-serif';
    margin: 0;
    padding: 0;
}


#nav-bar{
    background-color: #b33144;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

#nav-list{
    display: flex;
    flex-direction: row;

}

li{
    list-style: none;
}

a{
    color: white;
    text-decoration: none;
    font-size: 1.5em;
    padding:1rem 2rem;
}

a:hover{
    background: color #45567d; ;
}


#welcome-section{
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: color #000; 
    background-image: linear-gradient(
        62deg
        #3a3d40 0%,
        #181719 100%,
    );

}


h1{
    color: white;
    font-size: 4rem;
    font-weight: 700;
}

#welcome-section > p{
    color:#b33144;
    font-size: 2rem;
    font-style: italic;
    font-weight: 100;

}

.projects{
    text-align: center;
    background-color: #45567d;
    margin: 0;
    padding: 8rem 2rem;
}

h2{
    font-size: 3.2rem;
    color: white;

}



@media (max-width:800px){
    
    h2{
        font-size: 2.5rem;
    }

}


.project-img{
    height: calc(100%-4.8rem);
    width: 100%;
    object-fit: cover;
}

.project-tile{
    color: white;
    width: 100%;
    background: color #303841; 
    margin: 0;
    padding: 2rem 0;
}

.projects.grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-gap:4rem;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    margin-bottom: 6rem;
}


#contact{
    background-color: #303841;
    width: 100%;
    height: 80vh;
    padding: 1rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


#contact-p{
color: white;
font-style: italic;
font-weight: 100;
text-align: center;
font-size: 1.7rem;
}

Your browser information:

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

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

2

What id are you using on the nav element?

<nav id="nav-bar">
3

I missed it! Thank you.
now only the entry remains “Your #navbar element should always be at the top of the viewport.”

4

Did you remember to change the id in the CSS as well?

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.