Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Tell us what’s happening:

my #navbar is fixed at the top of the viewport and i dont have the check for the last test. Anyone help me or tell me how to fix it

Your code so far

<!-- file: index.html -->
<!-- start navbar -->
         <div id="navbar">
            <nav>
                <ul>
                    <li>
                        <a href="#projects">Projects</a>
                    </li>
                    <li>
                        <a href="#about-me">About me</a>
                    </li>
                    <li>
                        <a href="#contact">Contact</a>
                    </li>
                </ul>
            </nav>
        </div>
        <!-- End navbar -->

/* file: styles.css */
#navbar{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height:auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    background-color: #00b9bd;
    justify-content:space-between;
    border: 2px solid #fb6900;
    z-index: 9999;
}

#navbar ul{
    list-style: none;
}

#navbar ul li{
    display: inline-flex;
    margin-right: 5px;
}

#navbar ul li a{
    text-decoration: none;
    color: #f63700;
    font-family: Impact, sans-serif;
    font-size: large;
    letter-spacing: 1px;
    padding: 15px;
}

#navbar ul li a:hover{
    background-color: #fb6900;
    color: #00dbdf;
}

Your browser information:

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

Challenge Information:

Personal Portfolio Webpage - Build a Personal Portfolio Webpage

2

Hi. If you add the standard boilerplate code at the start from another project it should pass that user story. DOCTYPE, htlm tags, head, meta (with viewport). Remember to close the html tag at the bottom.

3

I already got that. i just coppied the navbar section, and it doesnt work i can give the whole code if you want

4

Yes write your code down into the forum to show the changes. Three backticks before and after the code. . I cut and paste your code and did the above and the last story passed for me.

5

You don’t just copy Navbar, have a look at your registration form - See the code at the start before the body? All that standard stuff is missing from what you have posted above.

6

how do i post the whole code so you can see and tell me how to fix it?

7
8

It didn’t show - do you know how to do backticks? three backticks before and after the block of code. Google it and cut and paste if you can’t find on your keyboard

Post your entire code. I’ve got the CSS

9

i dont know how to do it so i’ll link a post to the code on codepen

10

That last test worked for me. Try adding doctype at the to in FCC and see if it works. It is missing from your codepen so you may have to write that back in on FCC

11

is missing from codepen cause codepen doesnt addmit it but its on it and it wont pass :frowning:

should i reset the lesson?

12

OK. I stripped out everything apart from the navbar and the boilerplate code. That last story passed for me. Only change I made was to put and / before the closing tags on Meta. I also deleted your link to cloudfare and left in the FCC links

13 
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>Portfolio</title>
        <link rel="stylesheet" href="styles.css">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    </head>
    <body>
        <!-- start navbar -->
         <div class="navbar" id="navbar">
            <nav>
                <ul>
                    <li>
                        <a href="#projects">Projects</a>
                    </li>
                    <li>
                        <a href="#about-me">About me</a>
                    </li>
                    <li>
                        <a href="#contact">Contact</a>
                    </li>
                </ul>
            </nav>
        </div>
        <!-- End navbar -->
       
    </body>
</html>
1 Like
14

i have been doing tests myself and it works everytime until i add the media query. So i cant pass cause i need the media query too

15

OK, you asked about the navbar and the last story so I focussed on that. Can you pass your navbar with the changes above? Then we can move on to media query

16

i already have fixed it myself, i had a line of code on the media query that made the body rescale for small screens, it seems that was intefeering with the navbar so i just deleted the line and it works, thnx for your help anyways :smiley:

1 Like