Https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage

Tell us what’s happening:
This is what I’m having problem with:
(Your portfolio should use at least one media query)…I have used one media query actually but I don’t know why its not passing…

The second issue:
( Your #navbar element should always be at the top of the viewport.)…
My navbar is actually at the top of the viewport…
Please I need help

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">

<html>

<head>

<title>My PortFolio</title>

<link rel="http://fonts.googleapis.com/css?family=Merienda+One"  href="stylesheet"/>

<meta charset="utf-8"/>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">   

<link rel="stylesheet" href="style.css"/>

</head>

<body>

    <header id="nav-header">

    <section id="container"> </section>

    <nav id="navbar" class="nav-link">

        <a class="nav-link"  href="#Home">Home</a>

        <a class="nav-link"  href="#projects">Project</a>

        <a class="nav-link"  href="#About">About</a>

        <a class="nav-link"  href="#skills">Skills</a>

        <a class="nav-link"  href="#contact">Contact</a>

    </nav>

    <section id="welcome-section">

        <h1>Hello! This is</h1>

        <h2>Zionnaire Inc</h2>

        <h3>Frontend Developer</h3>

        <p>Our Designs are Esthetically Beautiful</p>

        <p>We Love Communicating and Respect Feedbacks</p>

        <a href="tel:+2347067036335"><button class="section-btn">Hire Us</button></a>

        <div class="stickyicon-list">  

        <a href="https://twitter.com/zionnaire1" class="twitter" target="_blank">

            <i class="fa fa-twitter"></i> 

        </a>  

        <a href="https://www.linkedin.com/in/ademola-abraham" class="linkedin" target="_blank">

            <i class="fa fa-linkedin"></i>   

        </a>

        <a href="https://github.com/Zionnaire" class="github" target="_blank">

            <i class="fa fa-github"></i> 

        </a>  

        </div>

        </section>

   

    </header>

    </section>

    <section id="projects" class="projects-section">

        <h2 class="projects-header">These are some of my projects</h2>

        <div class="projects-grid">

            <a href="https://codepen.io/Zionnaire/pen/GRQZZLR" target="_blank" class="project-title">

                <img class="project-image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg" alt="project">

           

        <p class="project-tile">

            <span class="code">Tribute Page</span>

        </p>

        </a>

        <a href="https://codepen.io/Zionnaire/pen/GRQZZLR" target="_blank" class="project-title">

            <img class="project-image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png" alt="project">>

       

    <p class="project-tile">

        <span class="code">Random Quote Machine</span>

    </p>

    </a>

    <a href="https://codepen.io/Zionnaire/pen/GRQZZLR" target="_blank" class="project-title">

        <img class="project-image" src="img/Tutorial_documentation.JPG" alt="project">>

   

        <p class="project-tile">

            <span class="code">JavaScript Documentation</span>

        </p>

        </a>

        <a href="https://codepen.io/Zionnaire/pen/GRQZZLR" target="_blank" class="project-title">

            <img class="project-image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tic-tac-toe.png" alt="project">>

        <p class="project-tile">

        <span class="code">Tic Tac Toe Game</span>

        </p>

        </a>

        <a href="https://github.com/Zionnaire" class="btn-show-all" target="_blank">

            "Show all"

            <i class="fas fa-chevron-right">

                ::before

            </i>

        </a>

</section>

<section id="profile" class="profile-section">

    <div class="profile-section-header">

        <blockquote>

            Come let make you beautiful design 

            you'll love to call yours.

        </blockquote> 

        <p>Hope you're having a beautiful day?</p>

    </div>

</section>

    <section id="profile">

        <a id="profile-link" href="https://twitter.com/zionnaire1" target="_blank" class="btn profile-details">

    

            <i class="fab fa-twitter">

                Twitter

            </i>

        </a>

        <a id="profile-link" href="https://github.com/Zionnaire" target="_blank" class="btn profile-details">

            <i class="fab fa-github">

                GitHub

            </i>

        </a>

        <a id="profile-link" href="mailto:zionnaire2018@gmail.com" class="btn profile-details">

            <i class="fas fa-at">

                Send a mail

            </i>

            

        </a>

        <a id="profile-link" href="tel:+2347067036335" class="btn profile-details" target="_blank">

            <i class="fas fa-mobile-alt">

                Call Us

            </i>

            

        </a>        

    </section>

    <footer>

        <p> Zionnaire Concepts</p>

        <address>Zionnaire Plaza, Hilton Drive, Houston,

            23458; Crescents Creek.

        </address>

    </footer>

</body>

</html>

</html>
Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

body {

    display: block;

    text-align: center;

}

@media only screen and (max-width: 600px) {

  body {

    background-color: lightblue;

  }

}

#nav-header{

    display: block;

    background-image: url("img/6.jpg");

    background-attachment: scroll;

    background-repeat: no-repeat;

    background-color: white;

    background-size: 100% 90vh;

    border: solid #530A45 60px;

    text-align: left;

    padding-left: 30px;

    height: 90vh;

}

@media screen and (width: 400px) {

    #nav-header {

        margin: auto;

        height: 100%;

        width: 100%;

    }

 }

@media screen and (max-width: 815px) {

    #nav-header  {

    position: inherit;

    top: 0;

    margin: 0;

    max-height: 100%;

    border-bottom: 40px solid#530A45  ;

    

    }

  }

  #navbar {

    text-decoration: none;

    text-align: right;

    

}

.nav-link {

    background-color: whitesmoke;

    position: relative;

    font-size: 1.5rem;

    text-decoration: none;

    margin: -60px px;

    padding: 10px;

}

.nav-link:hover {

    color: goldenrod;

}

  section {

      margin: auto;

      text-align: center;

  }

#welcome-section {

    margin: -30px 0 20px ;

    color: whitesmoke;

    text-align: center;

    display: block;

    margin: 180px 40px;

    font-size: 1.5rem;

   

  }

  .section-btn {

      padding: 20px;

      text-transform: uppercase;

      border: solid#530A45 5px;

      border-radius: 10px;

      font-size: large;

      font-family: Arial, Helvetica, sans-serif;

      background-color: whitesmoke;

  }

#projects {

      display: flex;

      flex-direction: row;

      align-items: center;

  }

  .nav {

    display: flex;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    background: var(--main-red);

    box-shadow: 0 2px 0 rgb(0 0 0 / 40%);

    z-index: 10;

}

.nav-header {

   

}

#container {

    background-image: linear-gradient(right, #094453 50%, #530a45 50%);

}

#container h1 {

}

img {

    display: block;

    width: 400px;

    box-shadow: 0 2px 0 rgb(0 0 0 / 40%);

    border: solid #530A45 3px;

    margin: 20px auto;

}

a {

    color: blueviolet;

    text-decoration: none;

}

.section-btn:hover {

    color: goldenrod;

}

.stickyicon-list {   

    position: fixed;   

    top: 200px;   

    transform: translateY(-50%);             

    }         

    .stickyicon-list a {   

    display: block;   

    text-align: center;   

    padding: 8px;   

    transition: all 0.5s ease;   

    color: white;   

    font-size: 20px;

    margin-left: -90px;   

    }   

.stickyicon-list a:hover {   

        color: #000;   

        width: 10px;   

        }  

        

.twitter {   

            color: white;   

            background:  #530A45;   

            }   

.linkedin {   

            background: #0e76a8;   

            color: white;  

            } 

.github {   

             color: white;   

            background:  #530A45;   

            }   

footer{

            background-color: #530A45;

            display: block;

            text-align: center;

            padding:  0;

            margin: 0;

            font-size: 1rem;

            width: 100%;

            position: relative;

            }

footer p{

            padding: 5px 0;

            margin: 10px 0 20px 0;

            }

address {

            margin-top: -15px;

            }

Your browser information:

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

Challenge: Build a Personal Portfolio Webpage

Link to the challenge:

Please post your code.

I have copied the codes…thank you

The problem is that for this test the #navbar should have a top: 0 and position: fixed. It may be on the top but the above said properties are needed. Once you add those to the #navbar you may need to change the header part of your code.

Have you linked the css to the html using the link tag?
Sample:

<link href="styles.css">
1 Like

Thank for your expository…I have been able to rectify the code…my mistake is I missed letter ‘s’ in … all other codes worked.
I did include the #navbar as you prescribed. Thanks alot.

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).