Build a Personal Portfolio Webpage Project

1

Tell us what’s happening:
I cannot for the life of me figure out why I am still getting an error on this project test saying that I need to have the navbar remain at the top of the viewport (it’s definitely doing that). Can someone please help???

Your code so far

<!DOCTYPE html>
<head>
    <link rel="stylesheet" type="text/css" href="portfolio.css"/>
</head>
<body>
    <nav id="navbar">
        <ul>
            <li><a href="#welcome-section">Welcome</a></li>
            <li><a href="#projects">Projects</a></li>
            <li><a href="#profile-link">Profile</a></li>
        </ul>
    </nav>
    <main>
        <div id="welcome-section">
            <h1>Matty Ice</h1>
        </div>
        <div id="projects">
            <div class="project-tile">
                <a href="https://codepen.io/matthew-defusco/pen/NJLRYv" target="_blank">
                <img src="project 400x400.png" alt="project1" class="project-img">
                </a>
                <div class="title">My first successful project!</div>
            </div>
            <div class="project-tile">
                <a href="https://www.google.com/" target="_blank" class="project-tile">
                <img src="another 400-400.jpg" alt="project2" class="project-img">
                </a>
                <div class="title">Google!</div>
            </div>
        </div>
        <div id="profile-section">
            <h2>Here's my Git!</h2>
            <div id="git-link">
                <a href="https://github.com/matthew-defusco" target="_blank" id="profile-link">GitHub</a>
            </div>
        </div>
    </main>
</body>

CSS

* {
    margin: 0;
    padding: 0;
}

body {
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#navbar {
    height: 100%;
}

ul {
    position: fixed;
    width: 100%;
    list-style: none;
    text-align: center;
    background-color: #69B578;
    top: 0;
}
a {
    text-decoration: none;
    color: #D0DB97;
    font: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 2em;
}
nav ul li {
    top: 0;
    display: inline-block;
    margin: 15px;
}
#welcome-section {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
    background-color: #3A7D44;
    text-align: center;
}
h1 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;

}
#projects {
    padding-top: 125px;
    margin-top: -60px;
    background-color: #254D32;
}
.project-tile {
    display: inline-block;
    text-decoration: none;
    border: 2px solid #D0DB97;
    overflow: hidden;
}
.project-img {
    width: 100%;
    height: 100%;
}
.title {
    border: 2px solid #D0DB97;
}
#profile-section {
    background-color: #181D27;
}
#profile-section h2 {
    color: bisque;
}
#git-link {
    border: 2px solid #D0DB97;
    border-radius: 50%;
}

@media (max-width: 600px) {
    .project-tile {
        display: block;
        text-decoration: none;
    }
}

Your browser information:

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

2

Hello @matthew-defusco, welcome to the forum.

I’m not 100% sure, but I fear the reason why the test is not passing is because the fixed element on top of the page is not the one with the id="navbar" but one of its children.

Sometimes tests are really specific.

I hope this helps :smile:

3

:man_facepalming: That was it @Marmiz!! Thank you so much, they are very particular but that makes sense :smile: