scrimba
Figma to code
Car Sales Site
CSS: Styling the Dropdown Menu
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

CSS: Styling the Dropdown Menu
AboutCommentsNotes
CSS: Styling the Dropdown Menu
Expand for more info
index.css
run
preview
console
*, *:before, *:after {
box-sizing: border-box;
}

:root {
--text-color: #565656;
--primary-color: #008AD8;
}

body {
margin: 0;
background: #F4F4F4;
font-family: 'Lexend Deca', sans-serif;
}

.container {
margin: 2.8em;
}

h1 {
margin-bottom: 0;
}

.headings p {
font-size: 1.125rem;
color: var(--text-color);
}

.filter, .labels {
display: none;
}

.search {
border: none;
padding: .8em;
border-radius: 2em;
background: white url('./assets/search.svg') no-repeat right .8em center;
width: 100%;
}

.search:focus {
outline: thin dotted;
}

.icons {
display: flex;
justify-content: space-between;
margin-bottom: 3em;
}

.far, .fas {
cursor: pointer;
}

.menu {
margin: 0 .5em;
cursor: pointer;
}

.cars, .labels {
margin: -1em -1em 2em;
padding: 1em;
border-radius: 6px;
}

.cars:hover {
background: white;
}

.car-name {
text-decoration: none;
color: var(--primary-color);
font-size: 1.22rem;
}

.car-location {
color: var(--text-color);
font-size: 1.125rem;
}

.cols-2 {
display: flex;
justify-content: space-between;
align-items: center;
}

.car-price {
font-size: 1.5rem;
margin: 0;
}
Console
/index.html
-3:47