Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

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">
<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://kit.fontawesome.com/860360cd97.css" crossorigin="anonymous">
  <script src="https://kit.fontawesome.com/860360cd97.js" crossorigin="anonymous"></script>
 <title>Portfolio</title>
<section id="welcome-section"><h1>L<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQxsiOJngNDBunT8QMiLGUp1w8ZYhUPlwgHWg&usqp=CAU" alt="code" class="code"></h1></section>
</head>
<body>
 
  <nav id="navbar">
  
    <header>

<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>
  
  <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>
    </ul>
  <nav>

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

<p>a web developer</p></section>
<section id="projects"><a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form" 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>
</section>


</body>



  </html>

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

.icon{
  
  list-style-type: none;
  display:flex;
  flex-direction: row;
 letter-spacing: 3px;
 padding-top:-10px;
 padding-bottom: -5px;
 margin-bottom: -10px;
 margin-top:-120px;
 float:right;
 top:0;
}

h2{
  
  top:-100px;
  height: -100px;
 margin-top: 100px;
 text-align: center;
}
p{
  font-size: 150%;
  font-weight: bold;
  color: rgb(221,50, 100);
  text-align: center;
}
html {
  font-size: 89%;
  box-sizing: border-box;
}
body{
  
  background-color: #3478;
}
button{
  height: 40px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}
.code{
  width: 40px;
  border-radius: 10px;
}
h1{
  opacity:0;
}
h3{
  text-align: center;
  color: #fefe;
  font-size: 20;
}
.fail{
  color: white;
  text-align:center;
}
 @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/110.0.0.0 Safari/537.36

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

2

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.

4

Thanks for showing me that!! :slight_smile:

5

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