scrimba
Responsive Design
Think responsively
CSS Units - rems
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

AboutCommentsNotes
CSS Units - rems
Expand for more info
css
styles.css
run
preview
console
body {
margin: 0;
font-size: 10px;
font-family: 'Lato', sans-serif;
color: #2e354f;
}

.section-one {
font-size: 2em;
}

ul {
/* 1.5em = 150% */
font-size: 1.5em;
}

li {
font-size: 1.5em;
}


h1,
h2,
strong {
font-weight: 900;
}

/* Typography */

h1 {
font-size: 3em;
margin: 0;
}

h2 {
font-size: 2em;
color: #ef5839;
}

a {
color: #ef5839;
}

a:hover,
a:focus {
color: #d4b44c;
}

/* Buttons */

.btn {
display: inline-block;
padding: 10px 25px;
text-decoration: none;
}

.btn-accent {
background: #ef5839;
color: #fff;
}

.btn-accent:hover {
color: #2e354f;
background: #d4b44c;
}

.btn-white {
background: #fff;
color: #2e354f;
}

.btn-white:hover {
color: #2e354f;
background: #999;
}

/* Layout */

header {
background: #2e354f;
padding: 45px 0;
color: #fff;
}

section {
padding: 45px 0;
}

.container {
width: 620px;
margin: 0 auto;
/* border: 2px solid magenta; */
}

.section-two {
background: #2e354f;
color: #fff;
}

Console
index.html
-4:44