Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Tell us what’s happening:
I am not sure how to make my nav bar at the top of my view port. It is currently at the top.

Your code so far

<!-- file: index.html -->
<!DCOTYPE html>
<html lang="en">
  <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="" crossorigin="anonymous">
  <script src="" crossorigin="anonymous"></script>
<section id="welcome-section"><h1>L<img src="" alt="code" class="code"></h1></section>
  <nav id="navbar">

<ul class="link">
  <button><li><a class="nav-link" href="#about">About&nbsp</a></li></button>
  <button class="projects"><li><a class="nav-link" href="#projects">Projects&nbsp</a></li></button>
  <button><li><a class="nav-link" href="#art_and_graphics">Art and Graphics&nbsp</a></li></button>
  <button><li><a class="nav-link" href="#contact">Contact</a></li></button>
  <ul class="icon">
    <li><i class="fa-brands fa-instagram fa-2xl"></i></li>
    <li><i class="fa-brands fa-linkedin fa-2xl"></i></li>

      <section id="welcome-section"><h2>Hello There! I am Lauren Peranio</h2>

<p>a web developer</p></section>
<section id="projects"><a href="" id="profile-link" target="_blank"></a>
  <h3 class="project-tile">Take a look at some of my projects</h3><img src="file:/Screen%20Shot%202023-02-22%20at%208.33.03%20PM.png"><p class="fail">Here's an image of my code because I do not know how to embed my code from fcc to here. Also I can not get VSC to run so this is how it will be. And of course the image isn't loading. I don't know how to insert an image that I take, that's not off the internet becuase fcc has no way to up load it.</p>


/* file: styles.css */
  list-style-type: none;
 right: 10%;
 top: 0;
 float: right;
 padding-top: -10px;
 white-space: nowrap;
  flex-direction: row;
 word-spacing: 5px;
 position: relative;
  text-decoration: none;

  list-style-type: none;
  flex-direction: row;
 letter-spacing: 3px;
 padding-bottom: -5px;
 margin-bottom: -10px;

  height: -100px;
 margin-top: 100px;
 text-align: center;
  font-size: 150%;
  font-weight: bold;
  color: rgb(221,50, 100);
  text-align: center;
html {
  font-size: 89%;
  box-sizing: border-box;
  background-color: #3478;
  height: 40px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  width: 40px;
  border-radius: 10px;
  text-align: center;
  color: #fefe;
  font-size: 20;
  color: white;
 @media {max-width: 780px;}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/ Safari/537.36

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

Where in your CSS are you making the #navbar element stick to the top of the viewport?

Also, I think you need to check over your HTML a little more and make sure that all of your elements are closed correctly. It might help to run your HTML through a validator to help you find any issues.

Thanks for showing me that!! :slight_smile:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.