Tell us what’s happening:
**
**
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36
Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage
Link to the challenge:
Learn to Code — For Free
Preformatted text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<title>Personal Portfolio Webpage</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
</head>
<body>
<nav id="navbar" class="nav">
<ul class="nav-list">
<li>
<a href="#welcome-section">About</a>
</li>
<li>
<a href="#projects">Work</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</nav>
<section id="welcome-section" class="welcome-section">
<h1>Hey I am Sultan</h1>
<p> a web developer</p>
</section>
<section id="projects" class="projects-section">
<h2 class="projects-section-header">These are some of my projects</h2>
<div class="projects-grid">
<a href="https://codepen.io/freeCodeCamp/full/zNqgVx" target="_blank" class="project project-tile">
<img class="project-image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg" alt="project">
<p class="project-title">
<span class="code"><</span>
Tribute Page
<span class="code">/></span>
</p>
</a>
<a href="https://codepen.io/freeCodeCamp/full/qRZeGZ" target="_blank" class="project project-tile">
<img class="project-image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png" alt="project">
<p class="project-title">
<span class="code"><</span>
Random Quote Machine
<span class="code">/></span>
</p>
</a>
<a href="https://codepen.io/freeCodeCamp/full/wgGVVX" target="_blank" class="project project-tile">
<img class="project-image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png" alt="project">
<p class="project-title">
<span class="code"><</span>
JavaScript Calculator
<span class="code">/></span>
</p>
</a>
<a href="https://codepen.io/freeCodeCamp/full/mVEJag" target="_blank" class="project project-tile">
<img class="project-image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/map.jpg" alt="project">
<p class="project-title">
<span class="code"><</span>
Map Data Across the Globe
<span class="code">/></span>
</p>
</a>
<a href="https://codepen.io/freeCodeCamp/full/wGqEga" target="_blank" class="project project-tile">
<img class="project-image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/wiki.png" alt="project">
<p class="project-title">
<span class="code"><</span>
Wikipedia Viewer
<span class="code">/></span>
</p>
</a>
<a href="https://codepen.io/freeCodeCamp/full/KzXQgy" target="_blank" class="project project-tile">
<img class="project-image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tic-tac-toe.png" alt="project">
<p class="project-title">
<span class="code"><</span>
Tic Tac Toe Game
<span class="code">/></span>
</p>
</a>
<img class="project-image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tic-tac-toe.png" alt="project">
</div>
</section>
<section id="contact" class="contact-section">
<div class="contact-section-header">
<h2>Lets's work together...</h2>
<p>How do you take your coffee?</p>
</div>
<div class="contact-links">
<a href="https://facebook.com/freecodecamp" target="_blank" class="btn contact-details"><i class="fab fa-facebook-square"></i> Facebook</a>
<a id="profile-link" href="https://github.com/freecodecamp" target="_blank" class="btn contact-details"><i class="fab fa-github"></i> GitHub</a>
<a href="https://twitter.com/freecodecamp" target="_blank" class="btn contact-details"><i class="fab fa-twitter"></i> Twitter</a>
<a href="mailto:example@example.com" class="btn contact-details"><i class="fas fa-at"></i> Send a mail</a>
<a href="tel:555-555-5555" class="btn contact-details"><i class="fas fa-mobile-alt"></i> Call me</a>
</div>
</section>
<foooter>
<p>
**This is just a fake portfolio. All the projects and contact details
given are not real.
</p>
<p>
© Created for
<a href="https://www.freecodecamp.com/" target="_blank">freeCodeCamp <i class="fab fa-free-code-camp"></i></a>
</p>
</footer>
</body>
</html>
“Your #navbar element should always be at the top of the viewport.”
This is a CSS problem, the code you submitted tho it can be helpful, without the CSS its impossible to see what styles you have put onto the page.
(this may not be of much help)
Its possible for this message to appear if there are margins around the element preventing it from touching the top of the viewport.
browsers often add default styles, eg, the body usually has a margin
you can force elements to stay stuck to the viewport using ‘position’, even when scrolling the element will stay in place
body{
font-family: 'poppins' ,sans-serif;
}
#nav-bar{
background-color: #be3144;
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: flex-end;
}
#nav-list{
display: flex;
flex-direction: row;
}
li{
list-style: none;
}
a{
color: white;
text-decoration: none;
font-size: 1.5em;
padding: 1rem 2rem;
}
a:hover{
background-color: #45567d;
}
@media (max-width: 800px){
h2{
font-size: 2.5rem;
}
}
these styles are NOT being used:
your id is different
after changing the CSS file to be the same as the HTML nav id:
system
November 3, 2023, 8:19pm
6
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.
hope this moves you forward