Build a Personal Portfolio - Build a Personal Portfolio

HTML-CSS
1

Tell us what’s happening:

I’m trying to build the personal portfolio website, but code keeps refusing to pass test 12. Your #navbar element should always be at the top of the viewport, even though I set the #navbar to position fixed, top 0 and left 0. I even went as far as adding right 0 and bottom auto, but it still doesn’t pass even when the preview shows that navbar is fixed to the top of the viewport

Your code so far

<!-- file: index.html —->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Personal Portfolio</title>
  </head>
  <body>
    <header id="header">
    <nav id="navbar">
      <a href="#welcome-section">ABOUT</a>
        <a href="#project-section">WORK</a>
      <a href="#footer">CONTACT</a>
    </nav>
    </header>
    <main>
    <section id="welcome-section">
      <h1>Hello! I'm Emmanuel</h1>
      <p>I'm a Graphic Designer, web developer and student at the freeCodeCamp, learning to code to obtain a certificate as a full time software developer</p>
      <a href="#footer"><span>Contact Me</span></a>
    </section>
    <section id="project-section">
      <h2 class="project-tile">These are some of my projects</h2>
      <p>I built them with the help of Google Gemini AI which explains why they could be as good as they are even without much coding skills.</p>
      <div class="project project1">
        <img src="https://gicforpropharma.com/images/contact-hero-background.jpg" alt="Image from GICFORPROPHARMA website">
        <a href="https://gicforpropharma.com">Gicforpropharma School Website</a>
      </div>
      <div class="project project2">
        <img src="https://www.mbinndemsanctuary.org/images/gallery-hero-background.jpg" alt="Mbin Ndem Peace Sanctuary Website">
        <a href="https://www.mbinndemsanctuary.org">Mbin Ndem Peace Sanctuary Website</a>
      </div>
    </section>
    </main>
    <footer id="footer">

      <div class="contact-form">
        <h2>Contact Me</h2>
        <p>Please fill out the form to contact me directly: </p>
        <form>
          <label for="name">Name: </label>
          <input type="text" id="name" name="name" placeholder="Enter your name" required>
          <label for="email">Email: </label>
          <input type="email" id="email" placeholder="Enter your email" required>
          <label for="message">Message:</label>
          <textarea id="message" placeholder="Enter your message"></textarea>
          <input type="submit" value="SEND">
        </form>
      </div>

      <div id="line"></div>
      <div class="social-icons">
      <a id="profile-link" target="_blank" href="https://forum.freecodecamp.org/u/emmanuelwantua/summary">freeCodeCamp
</a>
     <a href="#"><i class="fa fa-facebook-f"></i></a>
     <a href="#"><i class="fa fa-instagram"></i></a>
     <a href="#"><i class="fa fa-solid fa-x"></i>
</a>
     <a href="#"><i class="fa fa-linkedin-in"></i>
</a>
      </div>
      <p>Copyright &copy 2025: freeCodeCamp All Rights reserved</p>
    </footer>
  </body>
</html>

/* file: styles.css */

body {

width: 100vw;height: 100vh;padding: 0;margin: 0;background-color: #555566;}

html {font-size: 10px;margin: 0;padding: 0;}

#header {margin: 0;padding: 0;}

#navbar {position: fixed;top: 0;left: 0;right: 0;bottom: auto;width: 100%;min-height: 50px;background-color: #444466;display: flex;justify-content: space-around;align-items: center;box-shadow: 0 2px 4px rgba(0,0,0,0.5);z-index: 1000;padding: 50px 20px;}

#navbar a {font-size: 3.5rem;font-family: Arial, sans-serif;text-decoration: none;color: white;font-weight: bold;}

#welcome-section {width: 100%;height: 100vh;background: url(https://www.computersciencedegreehub.com/wp-content/uploads/2023/02/shutterstock_535124956-scaled.jpg);background-color: rgba(30,30,40, 0.9);background-blend-mode: multiply;margin: 0;display: flex;flex-direction: column;align-items: center;justify-content: center;}

#welcome-section h1 {font-size: 20rem;font-family: Impact, sans-serif;color: white;text-align: center;margin-bottom: 40px;}

#welcome-section p {font-size: 6rem;font-family: Arial, sans-serif;color: #55ccff;text-align: center;padding: 0 40px;margin-top: 0;margin-bottom: 100px;}

#welcome-section span {background-color: white;font-size: 4rem;border-radius: 50px;padding: 30px 100px;font-family: Arial, sans-serif;font-weight: bold;@keyframesmargin-top: 100px;animation: contact 5s linear infinite;}

#welcome-section a {text-decoration: none;color: black;}

@keyframes contact {0% {transform: scale(0);}100% {transform: scale(1.5);}}

#project-section {background-color: #444466;padding: 30px 0;}

#project-section h2 {color: white;font-size: 8rem;font-family: Arial, sans-serif;text-align: center;font-weight: bold;padding-bottom: 30px;border-bottom: 10px solid white;}

#project-section p {font-size: 4rem;font-family: Arial, sans-serif;color: white;text-align: center;margin-top: -40px;margin-bottom: 100px;}

.project {width: 80%;display: flex;flex-direction: column;justify-content: center;align-items: center;margin: 50px auto;background-color: #222244;border-radius: 20px;box-shadow: 5px 5px 10px rgba(0,0,0,0.5);}

.project img {width: 100%;margin: 0 0 40px 0;}

.project a {text-decoration: none;font-size: 4rem;color: white;font-family: Arial, sans-serif;font-weight: bold;text-align: center;padding-bottom: 50px;}

#footer {width: 100%;background-color: #222244;display: flex;flex-direction: column;justify-content: center;align-items: center;}

#footer a {text-decoration: none;color: white;font-size: 4rem;}

.social-icons {display: flex;justify-content: space-around;align-items: center;gap: 25px;}

#footer p {color: white;font-size: 3rem;font-family: Arial, sans-serif;}

.contact-form {font-family: Arial, sans-serif;width: 80%;display: flex;justify-content: center;flex-direction: column;align-items: center;margin: 100px 0;padding: 50px 0;background-color: rgba(255,255,255,0.2);backdrop-filter: blur(5px);border: 1px solid white;border-radius: 20px;box-shadow: 5px 5px 10px rgba(0,0,0,0.5);}

form {width: 80%;justify-content: flex-start;margin: 0 80px 0 0;}

.contact-form input {width: 100%;border-radius: 20px;padding: 20px 40px;margin: 10px 100px 40px 0;font-size: 4rem;display: flex;justify-content: center;align-items: center;}

.contact-form textarea {width: 100%;font-size: 4rem;padding: 20px 40px;border-radius: 20px;margin-top: 10px;}

.contact-form input[type=“submit”] {width: 60%;padding: 10px 60px;font-size: 4rem;margin: 80px 100px 30px 150px;display: flex;justify-content: center;align-items: center;border-radius: 20px;background-color: #5588bb;border: 1px solid white;}

.contact-form h2 {font-size: 8rem;color: white;font-weight: bold;margin: 10px 0;}

.contact-form p {font-size: 5rem;margin: 5px 0 40px 0;}

.contact-form label {color: white;font-size: 5rem;font-weight: bold;margin-bottom: -10px;}

Your browser information:

User Agent is: Mozilla/5.0 (iPhone; CPU iPhone OS 18_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.5 Mobile/15E148 Safari/604.1

Challenge Information:

Build a Personal Portfolio - Build a Personal Portfolio

https://www.freecodecamp.org/learn/full-stack-developer/lab-personal-portfolio/build-a-personal-portfolio

2

Hi there, your css code is hard to read because of the way you formatted it. Please consider formatting your code with new lines in between each declaration and indentation to indicate declarations that belong to each rule.

3

It happened automatically after I posted it here, it was well arranged and indented, and I can no longer edit.

body {
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
  background-color: #555566;
}

html {
  font-size: 10px;
  margin: 0;
  padding: 0;
}

#header {
  margin: 0;
  padding: 0;
}

#navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 50px;
  background-color: #444466;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
  z-index: 1000;
  padding: 50px 20px;
}

#navbar a {
  font-size: 3.5rem;
  font-family: Arial, sans-serif;
  text-decoration: none;
  color: white;
  font-weight: bold;
}

#welcome-section {
  width: 100%;
  height: 100vh;
  background: url(https://www.computersciencedegreehub.com/wp-content/uploads/2023/02/shutterstock_535124956-scaled.jpg);
  background-color: rgba(30,30,40, 0.9);
  background-blend-mode: multiply;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#welcome-section h1 {
  font-size: 20rem;
  font-family: Impact, sans-serif;
  color: white;
  text-align: center;
  margin-bottom: 40px;
}

#welcome-section p {
  font-size: 6rem;
  font-family: Arial, sans-serif;
  color: #55ccff;
  text-align: center;
  padding: 0 40px;
  margin-top: 0;
  margin-bottom: 100px;
}

#welcome-section span {
  background-color: white;
  font-size: 4rem;
  border-radius: 50px;
  padding: 30px 100px;
  font-family: Arial, sans-serif;
  font-weight: bold;
  margin-top: 100px;
  animation: contact 5s linear infinite;
}

#welcome-section a {
  text-decoration: none;
  color: black;
}

@keyframes contact {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1.5);
  }
}

#project-section {
  background-color: #444466;
  padding: 30px 0;
}

#project-section h2 {
  color: white;
  font-size: 8rem;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  text-align: center;
  font-weight: bold;
  padding-bottom: 30px;
  border-bottom: 10px solid white;
}

#project-section p {
  font-size: 4rem;
  font-family: Arial, sans-serif;
  color: white;
  text-align: center;
  margin-top: -40px;
  margin-bottom: 100px;
}

.project {
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 50px auto;
  background-color: #222244;
  border-radius: 20px;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
}

.project img {
  width: 100%;
  margin: 0 0 40px 0;
}

.project a {
  text-decoration: none;
  font-size: 4rem;
  color: white;
  font-family: Arial, sans-serif;
  font-weight: bold;
  text-align: center;
  padding-bottom: 50px;
}

#footer {
  width: 100%;
  background-color: #222244;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#footer a {
  text-decoration: none;
  color: white;
  font-size: 4rem;
}

.social-icons {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 25px;
}

#footer p {
  color: white;
  font-size: 3rem;
  font-family: Arial, sans-serif;
}


.contact-form {
  font-family: Arial, sans-serif;
  width: 80%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin: 100px 0;
  padding: 50px 0;
  background-color: rgba(255,255,255,0.2);
  backdrop-filter: blur(5px);
  border: 1px solid white;
  border-radius: 20px;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
}

form {
  width: 80%;
  justify-content: flex-start;
  margin: 0 80px 0 0;
}

.contact-form input {
  width: 100%;
  border-radius: 20px;
  padding: 20px 40px;
  margin: 10px 100px 40px 0;
  font-size: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-form textarea {
  width: 100%;
  font-size: 4rem;
  padding: 20px 40px;
  border-radius: 20px;
  margin-top: 10px;
}

.contact-form input[type="submit"] {
  width: 60%;
  padding: 10px 60px;
  font-size: 4rem;
  margin: 80px 100px 30px 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  background-color: #5588bb;
  border: 1px solid white;
}

.contact-form h2 {
  font-size: 8rem;
  color: white;
  font-weight: bold;
  margin: 10px 0;
}

.contact-form p {
  font-size: 5rem;
  margin: 5px 0 40px 0;
}

.contact-form label {
  color: white;
  font-size: 5rem;
  font-weight: bold;
  margin-bottom: -10px;
}

#line {
  border-bottom: 20px solid white;
}

@media screen and (min-width: 1000px) {
  #project-section {
    display: flex;
    flex-wrap: nowrap;
  }
}
4

your code works for me.
Maybe it is something about your browser, so try using a different one. (I used Chrome)

5

The code works fine as shown in the preview, but it just doesn’t pass the test so I don’t understand what’s wrong

6

Your solution works from my end. Please try one of the following steps to move forward.

Click on the “Restart Step” button and force a refresh of your page with CTRL + F5 then try to paste the code in again.

or - Try the step in incognito or private mode.

or - Disable any/all extensions that interface with the freeCodeCamp website (such as Dark Mode, Ad Blockers, or Spellcheckers), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

or - Ensure your browser is up-to-date or try a different browser.

I hope one of these will work for you.