scrimba
UI Design
Final Project
Challenge: Animating the UI
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

Challenge: Animating the UI
AboutCommentsNotes
Challenge: Animating the UI
Expand for more info
sub.css
run
preview
console
body {
background: white;
}

.sub-hero {
background: url('images/forest-bg-2.jpg');
background-size: cover;
height: 70vh;
}

.bread-wrapper {
display: grid;
justify-content: center;
margin: 3em 0 0;
}

ul.breadcrumbs {
display: flex;
margin-bottom: .5em;
}

ul.breadcrumbs li a {
color: black;
margin-right: .5em;
font-weight: bold;
}

h1 {
margin-top: 0;
}

.sub-desc {
width: 80%;
margin: 0 auto;
}

ul.featured-cabins {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 200px));
width: 100%;
place-content: center;
margin-top: 4em;
}

.cabin-cta span {
color: black;
}

.cabin-cta:after {
background: black;
}

@media (min-width: 900px) {
.hero {
padding: 4em;
}

ul.featured-cabins {
place-content: flex-start;
}

.bread-wrapper {
display: unset;
}

.sub-desc {
width: 100%;
}
}
Console
/index.html
-4:55