Personal Portfolio Webpage - Build a Personal Portfolio Webpage (Step 12, navbar should be always on top)

HTML-CSS
1

Tell us what’s happening:

Somehow, after working more on the projects and adding other elements, the last 12 step stopped working.

The navbar is fixed on the viewport and set to a high z-index value, which always show on top of other elements.

12. Your #navbar element should always be at the top of the viewport.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>Lukaswbrr Portfolio</title>
    <link href="styles.css" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Sawarabi+Gothic&display=swap" rel="stylesheet">
  </head>
  <body>
    <nav id="navbar">
      <a href="#projects">Projects</a>
      <a href="#areas">Areas</a>
      <a href="#welcome-section">Contact</a>
    </nav>
    <section id="welcome-section">
      <div id="welcome-section-overlay">
        <h1 class="sawarabi-gothic-regular">Lukaswbrr</h1>
        <span><i class="">Lucas Weber</i></span>
        <p class="sawarabi-gothic-regular">Software engineer student from Brazil that likes web development, game development and software development</p>
        <p class="sawarabi-gothic-regular" id="greetings">Pleased to meet you.</p>
        <div class="contact-grid" id="contact">
          <a href="https://github.com/Lukaswbrr" id="profile-link" target="_blank">Github</a>
        <a href="mailto:contactlukasdemo@gmail.com" target="_blank">contactlukasdemo@gmail.com</a>
      </div>
      
      </div>
      
    </section>
    <section id="projects">
      <!-- make project go sideways (is javascript necessary?)
      it contains
      - main title
      - tags (python, godot, etc)
      - brief description
      - background image blurred
      - screenshots
      - video!-->
      <h1>Projects</h1>
      <div id="projects-grid">
        <a href="https://github.com/Lukaswbrr/Demo-Scripter" class="project project-tile" id="project-ds">
        <div class="project-overlay">
          <span class="project-header">Demo Scripter</span>
          <i class="project-type">Godot Engine</i>
          <section class="project-desc">
            <p>A visual novel framework inspired by NScripter made in Godot Engine.</p>
          </section>
        </div>
        </a>
        <a href="https://github.com/Lukaswbrr/Ikemen-GO-Launcher" class="project project-tile" id="project-ikl">
        <div class="project-overlay">
          <span class="project-header">IKEMEN GO Launcher</span>
          <i class="project-type">Godot Engine</i>
            <section class="project-desc">
              <p>A launcher made for handling IKEMEN Go games.</p>
            </section>
        </div>
        </a>
        <a href="https://github.com/Lukaswbrr/fray-documentation-research" class="project project-tile" id="project-fdr">
        <div class="project-overlay">
          <span class="project-header">Fray Documentation Research</span>
          <i class="project-type">Godot Engine, Documentation</i>
            <section class="project-desc">
              <p>Research project made for helping Pyxus document Fray, a combat framework made in Godot Engine.</p>
            </section>
        </div>
        </a>
        <a href="https://github.com/Lukaswbrr/magicpaste2anki" class="project project-tile" id="project-mp2a">
        <div class="project-overlay">
          <span class="project-header">Magic Paste 2 Anki</span>
            <i class="project-type">Python</i>
              <section class="project-desc">
                <p>A python program made for quickly adding notes to Anki, using Anki Connect.</p>
              </section>
        </div>
        </a>
        <a href="https://lukaswbrr.itch.io/the-mythical-consumer-of-worlds" class="project project-tile" id="project-tmcw">
          <div class="project-overlay">
            <span class="project-header">The Mythical Consumer of Worlds</span>
            <i class="project-type">Godot Engine</i>
              <section class="project-desc">
                <p>A Godot Wild Jam #83 submission game made with a team of 4 members.</p>
              </section>
          </div>
        </a>
        <a href="https://lukaswbrr.itch.io/3d-ball-game" class="project project-tile" id="project-3bg">
        <div class="project-overlay">
          <span class="project-header" >3D Ball Game</span>
            <i class="project-type">Godot Engine</i>
              <section class="project-desc">
                <p>My first Godot 3.5 game made in 2023 while following BornCG's Godot 3.1 game tutorial</p>
              </section>
        </div>
        </a>
        <a href="https://lukaswbrr.github.io/Product-Landing-Page/" class="project project-tile" id="project-tcfw">
          <div class="project-overlay">
            <span class="project-header">Touhou Cirno Fumos Website</span>
            <i class="project-type">HTML, CSS</i>
              <section class="project-desc">
                <p>A joke website about selling Cirno Fumos from Touhou. Made for the freecodecamp's Responsible Web Design course.</p>
              </section>
          </div>
        </a>
        
      </div>
      <div class="projects-buttons">
        <button id="prev-button">Prev</button>
        <button id="next-button">Next</button>
      </div>
    </section>
    <section id="areas">
      <h1>Areas of Interest</h1>
      <div class="areas-grid">
        <ul>
          <li>Software Engineer</li>
          <li>Software Development</li>
          <li>Web Development</li>
          <li>Game Development</li>
        </ul>
      </div>
    </section>
    <script>
      const projects = document.getElementById("projects-grid");
      const prevButton = document.getElementById("prev-button");
      const nextButton = document.getElementById("next-button");
      const styles = window.getComputedStyle(projects)

      const panels = document.querySelectorAll('.project-tile');
      const panelCount = panels.length;

      let currentIndex = 0;
      
      prevButton.addEventListener('click', () => {
          console.log("works");
          if (currentIndex - 1 < 0) {
            currentIndex = panelCount - 1;
          } else {
            currentIndex = currentIndex - 1;
          }

          projects.style.transform = `translateX(-${currentIndex * 100}%)`
      })
      // make it somehow the projects grid go to left
      nextButton.addEventListener('click', () => {
          console.log("works");
          projects.style.color = "pink";
          if (currentIndex + 1 > panelCount - 1) {
            currentIndex = 0;
          } else {
            currentIndex = currentIndex + 1;
          }
          projects.style.transform = `translateX(-${currentIndex * 100}%)`
      })
    </script>
  </body>
</html>

/* file: styles.css */
/* google fonts */

:root {
  --default-areas-background-size: 200vh;
}

.major-mono-display-regular {
  font-family: "Major Mono Display", monospace;
  font-weight: 400;
  font-style: normal;
}

.sawarabi-gothic-regular {
  font-family: "Sawarabi Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}


/* --- */

body {
  background-color: rgb(11, 11, 142);
}

* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: rgb(168, 255, 168);
}

.projects-buttons {
  background: linear-gradient(to left,
   rgb(255, 170, 0) 25%,
   rgb(14, 149, 207) 70%);
  display: flex;
  justify-content: center;
  gap: 50px;
}

#prev-button {
  border: 2px solid rgb(157, 0, 0);
  color: white;
  font-size: 20px;
  background-color: rgb(254, 118, 118);
  text-shadow: 1px 2px 1px black;
}

#next-button {
  color: white;
  border: 2px solid green;
  text-shadow: 1px 2px 1px black;
  font-size: 20px;
  background-color: rgb(93, 255, 85);
}

.contact-grid {
  margin-top: 30px;
}

.contact-grid > a {
  color: rgb(248, 255, 117);
  font-size: 20px;
  text-shadow: 1px 1px 1px rgb(96, 0, 0),
  1px 1px 5px rgb(255, 32, 32);
}

h1 {
  text-align: center;
  color: white;
  text-shadow: 1px 1px 1px black;
}

#navbar {
  display: flex;
  justify-content: center;
  width: 100%;
  background-color: black;
  position: fixed;
  gap: 50px;
  z-index: 10;
}

#projects {
  overflow: hidden;
}

.project-tile {
  background-color: red;
  flex: 1 0 100%;
  height: 500px;
  display: flex;
  transition: transform 0.5s ease-in-out;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#projects-grid {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)
}

#projects-grid.sliding {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-desc {
  margin-top: 35px;
}

#welcome-section {
  background: no-repeat center/170vh url("https://i.pinimg.com/originals/e6/0c/4a/e60c4ae6305c1b5d57e9954166761db9.gif");
  background-size: cover;
}

#welcome-section-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  backdrop-filter: blur(2px);
}

#welcome-section-overlay > h1 {
  color: white;
  text-shadow: 1px 2px 3px rgb(4, 0, 246),
  2px -1px 1px red;
}

#welcome-section-overlay > p {
  color: white;
  text-shadow: 1px 2px 1px rgb(1, 0, 59);
}

#welcome-section * {
  box-sizing: inherit;
}

#greetings {
  margin-top: 20px;
}

.areas-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background: no-repeat url("https://i.makeagif.com/media/9-14-2019/VhItZG.gif");
  background-position: center;
  background-size: var(--default-areas-background-size);
}

.areas-grid > ul {
  list-style-type: none;
}

.areas-grid > ul > li {
  color: white;
  font-size: 30px;
  text-shadow: 1px 1px 1px black,
  2px -2px 5px rgb(12, 9, 137),
  2px -3px 2px rgb(144, 0, 0);
}

/* PROJECTS */

.project-overlay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(3px);
  width: 100%;
  height: 100%;
}

.project-header {
  font-size: 50px;
  text-align: center;
}

.project-type {
  color: white;
  text-shadow: 2px 2px 5px black;
}

.project-desc {
  color: white;
  text-shadow: 2px 2px 1px black;
}

#project-ds {
  background: url("https://file.garden/Z9WlfxlbKAPc8Xj8/freecodecamp/personal%20portfolio/DemoScripter_logo.png") center/20%;
}

#project-ds > div > .project-header {
  color: white;
  text-shadow: 1px 1px 10px black;
}

#project-ikl {
  background: url("https://file.garden/Z9WlfxlbKAPc8Xj8/freecodecamp/personal%20portfolio/ikemen%20go%20launcher.png") center/100%;
}

#project-ikl > div > .project-header {
  color: white;
  text-shadow: 4px 4px 3px #00b3ff;
}

#project-fdr {
  background: url("https://file.garden/Z9WlfxlbKAPc8Xj8/freecodecamp/personal%20portfolio/fray%20documentation%20research.png") center;
}

#project-fdr > div > .project-header {
  color: white;
  text-shadow: 1px 3px 2px black,
  2px -3px 5px yellow,
  -2px 3px 2px blue;
  
}

#project-mp2a > div > .project-header {
  color: rgb(255, 183, 2);
  text-shadow: 1px 1px 10px rgb(255, 14, 14);
}

#project-tmcw {
  background: url("https://file.garden/Z9WlfxlbKAPc8Xj8/freecodecamp/personal%20portfolio/mythical%20consumer%20of%20worlds.png") center/100%;
}

#project-tmcw > div > .project-header {
  color: white;
  text-shadow: 1px 1px 2px rgb(255, 0, 0),
  1px 5px 2px rgb(255, 0, 0),
  1px -5px 2px rgb(255, 0, 0),
  5px 1px 2px rgb(255, 0, 0),
  -5px 1px 2px rgb(255, 0, 0);

}

#project-3bg {
  background: url("https://file.garden/Z9WlfxlbKAPc8Xj8/freecodecamp/personal%20portfolio/3d%20ball%20game.png") center/100%;
}

#project-3bg > div > .project-header {
  color: yellow;
  text-shadow: 1px 1px 3px rgb(255, 0, 0),
  1px -1px 3px rgb(255, 0, 0),
  -1px -1px 3px rgb(255, 0, 0),
  -1px 1px 3px rgb(255, 0, 0);
}

#project-tcfw {
  background: url("https://file.garden/Z9WlfxlbKAPc8Xj8/freecodecamp/personal%20portfolio/image.png") center/100%
}

#project-tcfw > div > .project-header {
  color: white;
  text-shadow: 2px 2px 2px blue,
  2px 5px 2px blue;
}

/* MEDIA QUERY */

@media (width <= 540px) {
  .areas-grid {
    background-size: 100vh;
  }
}

@media (width <= 600px) {
  .areas-grid {
    background-size: 110vh;
  }
}

@media (width <= 709px) {
  .areas-grid {
    background-size: 155vh;
  }
}

@media (width <= 709px) {
  .areas-grid {
    background-size: 155vh;
  }
}

@media (width >= 1017px) {
  .areas-grid {
    background-size: 230vh;
  }
}

@media (width >= 1117px) {
  .areas-grid {
    background-size: 280vh;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:143.0) Gecko/20100101 Firefox/143.0

Challenge Information:

Personal Portfolio Webpage - Build a Personal Portfolio Webpage

2

What is the “last 12 step”?

Which specific lines of code do you think satisfy this test?

3

Sorry for not saying what step it was, I meant the 12. Your #navbar element should always be at the top of the viewport.

The reason why I think it satisfies is because the CSS for the navbar element (in my opinion) is correct. Not sure what I did wrong, though.

4

Which specific lines of code do you think satisfy this test?

5

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.

1 Like
6 
#navbar {
  display: flex;
  justify-content: center;
  width: 100%;
  background-color: black;
  position: fixed;
  gap: 50px;
  z-index: 10;
}
7

Alright.

Where is the Restart Step button located on?

image
image589×335 24.1 KB

8

For this one, I would try with a different browser.

1 Like
9

Tested on chrome and now the issue has been fixed!

Thanks for the help!