Hello! I couldn’t pass the #navbar test in my portfolio project:
Error message: Your “#navbar” element should always be at the top of the viewport.
Any help will be appreciated!
Your code so far
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.
<!DOCTYPE html>
<html>
<head>
<title>Portfolio Web Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header id="navbar" class="nav">
<ul class="nav-list">
<li><a class="active" href="#welcome-section">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</header>
<section id="welcome-section">
<h1>Hello! I'm Lu Chi.</h1>
<p> a front-end 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/luluchi/full/abOgpyq" id="profile-link" target="_blank" class="project-tile">
<img class="project-image" src="https://i.postimg.cc/xCLKz0Vr/Tribute-Page.png" alt="Bruce Lee"/>
<div class="text-block">
<h3>Tribute Page</h3>
</div>
</a>
<a href="https://codepen.io/luluchi/full/poJMEZL" id="profile-link" target="_blank" class="project-tile">
<img class="project-image" src="https://i.postimg.cc/C5mnG5v2/Product-Landing-Page.png" alt="product landing page"/>
<div class="text-block">
<h3>Product Page</h3>
</div>
</a>
<a href="https://codepen.io/luluchi/full/BaooNNX" id="profile-link" target="_blank" class="project-tile">
<img class="project-image" src="https://i.postimg.cc/sxNDfhH3/Technical-Document-Page.png" alt="technical document page"/>
<div class="text-block">
<h3>Technical Document</h3>
</div>
</a>
<a href="https://codepen.io/luluchi/full/LYVKQGZ" id="profile-link" target="_blank" class="project-tile">
<img class="project-image" src="https://i.postimg.cc/nznL3ZQf/Survey-Page.png" alt="survey page"/>
<div class="text-block">
<h3>Survey</h3>
</div>
</a>
</div>
</section>
<section id="contact" class="contact-section">
<div class="contact-section-header">
<h2>Let's work together...</h2>
<p>How do you take your coffee?</p>
</div>
<div class="contact-links">
<a href="https://www.linkedin.com/in/lu-yang-a6b2a5124/"
target="_blank" class="btn contact-details"><img src="https://i.postimg.cc/NFgqjpRv/16090541531530099327-128.png"class="contact_icon"/></a>
<a href="mailto:example@example.com" class="btn contact-details" target="_blank"
><img src="https://i.postimg.cc/rmjZQcR7/16983312581574338606-128.png"class="contact_icon"/></a>
<a href="tel:555-555-5555" class="btn contact-details" target="_blank"
><img src="https://i.postimg.cc/Qx9SWcm2/9949026731579517867-128.png" class="contact_icon"/></a>
</div>
</section>
<footer>
<div>This is my first web page development portfolio! Keep learning! </div>
</footer>
</body>
</html>
* {
box-sizing: inherit;
margin: 0;
padding: 0;
}
body {
font-size: 1.8rem;
font-weight: 400;
line-height: 1.4;
font-family: system-ui;
}
html {
box-sizing: border-box;
}
@media screen and (min-width: 480px){
h1,
h2 {
font-weight: 700;
text-align: center;
color: white;
}
h1 {
font-size: 6rem;
}
h2 {
font-size: 4.2rem;
}
h3 {
font-size: 2rem;
}
.nav {
display: flex;
justify-content: flex-end;
position: fixed;
width: 100%;
top: 0;
left: 0;
background-color:#b02a45;
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
z-index: 10;
}
.nav-list {
display: flex;
margin-right: 2rem;
list-style: none;
float: right;
}
.nav-list a {
display: block;
color: white;
padding: 10px;
text-decoration: none;
font-size: 25px;
}
.nav-list a:hover {
background: #45567d;
}
/*Welcome section*/
#welcome-section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background-color: #000;
background-image: linear-gradient(62deg, #3a3d40 0%, #181719 100%);
}
#welcome-section > p{
color: red;
font-style: italic;
font-size: 40px;
text-align:center;
}
/*Project section*/
.projects-section{
background-color:#45567d;
width:100%;
text-align:center;
display: flex;
flex-wrap:wrap;
flex-direction: row;
}
.projects-section-header {
border-bottom: 0.2rem solid white;
margin: 4rem auto 6rem auto;
}
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-gap: 4rem;
width: 100%;
max-width: 1280px;
margin: 0 auto;
margin-bottom: 6rem;
}
.project-image {
height: calc(100% - 6.8rem);
width: 100%;
object-fit: cover;
}
.project-tile {
text-decoration: none;
}
.text-block {
position: relative;
background-color: #000;
background-image: linear-gradient(62deg, #3a3d40 0%, #181719 100%);
color: white;
padding: 1rem 0.5rem;
}
/*Contact section*/
.contact-section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
width: 100%;
height: 80vh;
padding: 0 2rem;
background-color: #000;
background-image: linear-gradient(62deg, #3a3d40 0%, #181719 100%);
}
.contact-section-header >p {
color:white;
font-style: italic;
}
.contact-links {
display: flex;
justify-content: center;
width: 100%;
max-width: 980px;
margin-top: 4rem;
flex-wrap: wrap;
}
.contact_icon {
padding: 20px;
height:150px;
}
.contact-details:hover {
transform: translateY(8px);
}
/*Footer section*/
footer {
height:100px;
font-weight: 300;
display: flex;
justify-content: space-evenly;
padding: 2rem;
border-top: 4px solid #b02a45;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.63 Safari/537.36
Challenge: Build a Personal Portfolio Webpage
Link to the challenge: