Hi, i’m in the last project of the Responsive Web Design Certification course and in the last test, it says my #navbar element should be in the top of the viewport, and in my preview, it is, but when i run the code, it doesn’t pass. Could someone help me please? I don’t know what to do. Here’s my code:
HTML
My Portfolio
About
Work
Contact
Hey! I am Eduardo,
a web developer
Let's work together...
How do you take your coffee?
**This is just a fake portfolio. All the projects and contact details given are not real.
© Created for freeCodeCamp
CSS
:root {
–main-white: white;
–main-blue: rgb(50, 50, 150);
–main-gray: rgb(48,56,65);
}
@media {
html {scroll-behavior: smooth;}
}
- {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: ‘Poppins’,sans-serif;
}
body {
margin: 0;
padding: 0;
}
header {
background-color: var(–main-blue);
position: fixed;
width: 100%;
height: 60px;
display: flex;
justify-content: flex-end;
align-items: center;
z-index: 999;
}
#navbar {
margin-right: 20px;
}
a {
text-decoration: none
}
#navbar a {
color: var(–main-white);
margin: 0 10px;
font-weight: 400
}
#welcome-section {
padding-top: 10px;
background: linear-gradient(50deg, rgb(50, 50, 50), rgb(10, 10, 10));
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 0;
width: 100%
}
h1 {
color: var(–main-white);
font-size: 2.5em;
text-align: center;
}
#hey-description {
color: var(–main-blue);
font-size: 1.5em;
font-style: italic;
font-weight: 800;
}
#projects {
background-color: rgb(200, 120, 30);
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: auto;
padding: 2em
}
#projects-title {
padding-top: 60px;
text-align: center;
color: var(–main-white);
font-size: 2em;
border-bottom: 1px solid var(–main-white);
max-width: 550px;
margin-bottom: 2em
}
.project-tile {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
grid-template-rows: 400px 400px;
column-gap: 3em;
row-gap: 6em;
width: 100%;
}
.project-tile a:hover .hidden{
color: rgb(230, 100,0);
transition: 0.5s
}
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
figcaption {
text-align: center;
padding: 13px;
background-color: var(–main-gray);
}
figcaption p {
text-decoration: none;
color: var(–main-white);
}
.hidden {
color: var(–main-gray);
font-size: 1.2em;
}
button {
margin: 100px auto 70px;
background-color: var(–main-gray);
border: none;
color: var(–main-white);
padding: 5px 15px;
font-size: 1.2rem;
cursor: pointer;
}
button p {
display: inline;
font-size: 1.5em;
vertical-align: -3px;
font-weight: 600
}
button:hover {
background-color: var(–main-blue);
transition: 0.5s
}
#contact {
background-color: var(–main-gray);
width: 100%;
height: 80vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#contact h2,
#contact p,
#contact a {
color: var(–main-white)
}
#contact h2 {
font-size: 3em;
text-align: center;
}
#contact p {
font-size: 1.2em;
font-weight: 600;
text-align: center;
}
.social{
width: 80%;
max-width: 750px;
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-top: 50px
}
.social a {
margin: 0 0 15px;
font-size: 1.5em;
text-shadow: 2px 2px 2px black;
padding: 0 15px;
font-family: Poppins, sans serif;
}
.social a:hover {
transform: translateY(6px);
transition: 0.3s ease-in-out
}
footer {
display: flex;
justify-content: space-around;
background-color: var(–main-gray);
border-top: 4px solid var(–main-blue);
height: 20vh;
padding: 20px
}
footer p {
color: var(–main-white);
margin: auto 10px
}