Tell us what’s happening:
Describe your issue in detail here.
Your code so far
I am stuck at step 11… the last step where the navbar must be kept up top all the time which it is!!! Yet it is not being recognized for some reason. Please help.
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Build a Product Landing Page</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<Welcome id="welcome-section">
<header id="header">
<nav id="navbar">
<ul>
<li><a class="nav-link" href="#Welcome"rel="internal">Welcome</a></li>
<li><a class="nav-link" href="#Beginner"rel="internal">Beginner</a></li>
</ul>
</nav></header>
<h1>Welcome to a Personal Portfolio Webpage</h1>
<section id="projects">
<h1>Welcome</h1>
<a id="profile-link"
class="project-tile" target="_blank" href="https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-css-transforms-by-building-a-penguin/step-104">Penguin</a>
</section>
<p> This is my first programming course in a long time. Responsive web design is fun and challenging at the same time.<a target="_blank" href="https://freecatphotoapp.com">Cat photos</a></p>
<h1>Beginner</h1>
<p>I started with a project of making a Cat photo app from then I went on to making a magazine. It was a task that took some time to accomplish.<p>
<h1>Animation</h1>
<p> The best part of RWD was to learn about animation and how easy it is to make a simple animation. The realization of how difficult it is to run multiple animation on a single screen became obvious to me afer just making one happy penguin!!</p>
<div class="project-tile">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
<img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
</div>
</body>
</html>
/* file: styles.css */
header {
position: fixed;
width: 30%;
top: 0;
left: 0;
background-color: white;
color: black;
font-family: 'Exo 2', sans-serif;
padding: 1em;
}
html {
font-size: 100%;
}
body {
width: 100%;
height: 100vh;
top: 10;
margin: 150;
font-family: 'Baskervville', serif;
color: linen;
background-color: rgb(80, 0, 40);
}
h1 {
font-family: 'Anton', sans-serif;
}
a {
text-decoration: none;
color: black;
display:fixed;
}
@media only screen and (max-width: 720px) {
.image-wrapper {
grid-template-columns: 1fr;
}
}
@media only screen and (max-width: 600px) {
.text-with-images {
grid-template-columns: 1fr;
}
}
.project-tile {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 16px;
max-width: 1400px;
margin: 0 auto;
padding: 20px 10px;
}
.project-tile img {
width: 100%;
max-width: 350px;
height: 300px;
object-fit: cover;
border-radius: 10px;
}
.project-tile::after {
content: "";
width: 350px;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:105.0) Gecko/20100101 Firefox/105.0
Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage
Link to the challenge:
Blockquote