Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Hi. What is meant that my navbar should be at the top of the viewport… I’ve been stuck here for a week please help.

Your code so far

/* file: index.Ext.html */


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Personal Portfolio Webpage</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <nav id="navbar" class="nav-bar">
      <ul id="nav-list">
        <li><a href="#welcome-section">About</a></li>
        <li><a href="#projects">Work</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
    <section id="welcome-section" class="welcome">
      <h1>Hey I am Mimic</h1>
      <p>a web developer</p>
    </section>
    <section id="projects">
      <h2>These are some of my projects</h2>
        <div class="projects-grid">
          <a href="https://codepen.io/freeCodeCamp/full/zNqgVx">
            <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg" alt="tribute page" class="project-img">
            <p class="project-tile">Tribute Page</p>
          </a>

                 <a href="https://codepen.io/freeCodeCamp/full/qRZeGZ">
            <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png" alt="" class="project-img">
            <p class="project-tile">Random Qoute Machine</p>
          </a>

                 <a href="https://codepen.io/freeCodeCamp/full/wgGVVX">
            <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png" alt="" class="project-img">
            <p class="project-tile">JavaScript Calculator</p>
          </a>

                 <a href="https://codepen.io/freeCodeCamp/full/mVEJag">
            <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/map.jpg" alt="" class="project-img">
            <p class="project-tile">Map Data Across The Globe</p>
          </a>

                 <a href="https://codepen.io/freeCodeCamp/full/wGqEga">
            <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/wiki.png" alt="" class="project-img">
            <p class="project-tile">Wikipedia Viewer</p>
          </a>

                 <a href="https://codepen.io/freeCodeCamp/full/KzXQgy">
            <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tic-tac-toe.png" alt="" class="project-img">
            <p class="project-tile">Tic Tac Toe Game</p>
          </a>
        </div>
      </section>
    <section id="contact">
      <h1>Let's work together...
</h1>
<p id="contact-p">How do you take your coffee?</p>
<div id="contact-links">
  <a href="" id="profile-link" target="_blank">GitHub</a>
</div>
    </section>
  </body>
</html>

    



/* file: styles.Ext.css */

@media(max-width):
600px{
Body{
Font-size:16px;
Padding: 10px
}
.navbar{
Position:fixed;
Flex-direction:column;
Align-items:center;
}
. Project{
Margin-bottom:20px;
 }
}

Your mobile information:

WDY-LX2 - Android 14 - Android SDK 34

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

2

I looked at my code, I only used nav for the class part. The Css you are using doesn’t seem correct but it’s working for the media query.

3

Ok, it looks to me like you have a few syntax issues in your css, which I think is preventing your rules from being applied. Particularly, your media query has some issues… should start like @media(max-width: 600px) { };

To pin the the navbar to the top of the viewport, you just need a couple lines of css…
position: fixed;
top: 0; //ensures that the element is the top most element and that it sticks to the top during scroll

Fix those two things, and you’re good–just tested it with your code…

Just a side note: everything should be lower case–if you don’t have your classes and ids perfectly cased, you won’t see your changes show up.

1 Like