scrimba
Build Components in HTML, CSS & JS
Personalized Navbar - The JS πŸ’»
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Personalized Navbar - The JS πŸ’»
AboutCommentsNotes
Personalized Navbar - The JS πŸ’»
Expand for more info
index.css
run
preview
console
body {
margin: 0;
font-family: 'Roboto', sans-serif;
}

.navbar {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background: #0e2957;
padding: 1em;
margin: 0;
}

.link {
text-decoration: none;
color: white;
font-size: 1.1rem;
margin: 0.5em;
transition: all 500ms;
}

.link:hover, .link:focus {
color: #fff582;
}

.name-input-container {
margin: 1em;
}
@media (min-width: 1000px) {
.navbar {
flex-direction: row;
justify-content: space-around;
}
}
Console
/index.html
-5:50