scrimba
UI Design
UI Animation
Challenge 1: Responsive Design
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 1: Responsive Design
AboutCommentsNotes
Challenge 1: Responsive Design
Expand for more info
index.css
run
preview
console
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;700&family=Playfair+Display:wght@200;500&display=swap');

html, body {
margin: 0;
padding: 0;
}

body {
background: #F1F1F1 url('graph-bg.svg') no-repeat;
background-position: 0 20%;
background-size: 150%;
font-family: 'Montserrat', sans-serif;
font-weight: normal;
text-align: center;
}

h1, .quote {
font-family: 'Playfair Display', serif;
}

.phone {
position: absolute;
top: 2em;
left: 0;
right: 0;
margin: auto;
width: 250px;
}
.wrapper {
padding: .5em;
margin-top: 4em;
position: relative;
}
ul {
list-style: none;
padding: 0;
}

.left, .right {
position: relative;
}

.left {
height: 50vh;
display: grid;
place-content: center;
}

h1 {
width: 70%;
margin: 0 auto 1.5em;
}

.cta {
text-decoration: none;
background: #1DB473;
color: white;
font-weight: bold;
padding: 1em;
border-radius: .3em;
}
.right {
margin-top: 12em;
}
.right ul {
width: 80%;
margin: 0 auto 2em;
}

li {
margin-bottom: 2em;
}

li img {
width: 50px;
height: 50px;
border-radius: 50%;
}


@media (min-width: 400px) {

}

@media (min-width: 850px) {

}

@media (min-width: 1200px) {

}
Console
/index.html
-11:05