scrimba
Responsive Design
Taking it to the next level
Using pseudo-elements to add the yellow lines
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

Using pseudo-elements to add the yellow lines
AboutCommentsNotes
Using pseudo-elements to add the yellow lines
Expand for more info
css
style.css
run
preview
console
* {box-sizing: border-box;}

body {
margin: 0;
font-family: 'Montserrat', sans-serif;
font-size: 1rem;
color: #404040;
line-height: 1.6;
}

img {
max-width: 100%;
}

/* ==================
Typography
===================== */

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

.accent-color {
color: #FFE600;
}

.page-title,
.subtitle {
grid-column: 2 / -2;
color: #000;
text-align: center;
}

.page-title {
font-size: 3rem;
margin-bottom: 0;
}

.subtitle {
margin: .5em 0 3em;
font-size: 1.125rem;
}

.hero-title {
font-size: 1.5rem;
line-height: 1.4;
margin-bottom: 0;
}

.section-title {
font-size: 1.125rem;
color: #000;
margin-top: 1.25em;
}

.section-title:first-child {
margin-top: 0;
}

/* buttons */

.btn {
padding: .5em 1.75em;
font-weight: 700;
margin-top: .5em;
text-decoration: none;
}

.btn-primary {
background: #FFE600;
color: #000;
justify-self: start;
}


/* ==================
general layout
===================== */

.main-grid {
display: grid;
grid-template-columns: minmax(1em, 1fr) minmax(0px, 500px) minmax(1em, 1fr);
grid-column-gap: 2em;
}

@media (min-width: 600px) {
.main-grid {
grid-template-columns: minmax(1em, 1fr) repeat(3, minmax(150px, 320px)) minmax(1em, 1fr);
}
}

/* navigation */

.header {
background: black;
}

.header-home {
background: transparent;
position: absolute;
width: 100%;
}



.header-content {
display: flex;
grid-column: 2 / -2;
}

.logo-link {
background-color: #FFE600;
padding-top: 2em;
}

.nav {
position: fixed;
background: #000;
width: 100%;
top: 0;
right: 0;
bottom: 0;
left: 100%;
transform: translateX(0);
transition: transform 250ms;
}

.navigation-open {
transform: translateX(-100%);
}

.nav-list {
display: flex;
list-style: none;
margin: 0;
padding: 0;
height: 100%;
align-items: center;
justify-content: space-around;
flex-direction: column;
}

.nav-link {
color: #fff;
text-decoration: none;
font-size: 3rem;
font-weight: 700;
}

.nav-link:hover,
.nav-link:focus {
color: #FFE600;
}

.close-nav {
border: 0;
background: 0;
color: #FFE600;
font-weight: 700;
font-size: 3rem;
cursor: pointer;
padding: .5em;
position: absolute;
}

.open-nav {
border: 0;
background: 0;
color: #fff;
cursor: pointer;
padding: .5em;
margin-left: auto;
font-size: 1.5em;
}

@media (min-width: 600px) {
.open-nav,
.close-nav {
display: none;
}

.nav {
position: initial;
}

.nav-list {
flex-direction: row;
justify-content: flex-start;
}

.nav-item {
margin-left: 2em;
}

.nav-link {
font-size: 1rem;
}

.header-home .nav {
background: transparent;
}
}

/* footer */

.footer {
background: #ebebeb;
padding: 4em 0;
text-align: center;

grid-template-areas:
". social ."
". main .";
}

.footer-main,
.social-list {
grid-column: 2 / -2;
}

.footer-logo,
.footer-text,
.footer-fineprint {
opacity: .3;
}

.footer-main {
grid-area: main;
}

.footer-fineprint {
font-size: .75rem;
margin-top: 4em;
}

.social-list {
grid-area: social;
list-style: none;
padding: 0;
margin: 0 0 2em;
display: flex;
justify-content: center;
}

.social-link {
color: #000;
font-size: 1.75rem;
margin: 0 .5em;
}

.social-link:hover {
color: #777;
}

@media (min-width: 600px) {
.footer {
grid-template-areas:
". main main social ."
}

.footer-main {
text-align: left;
}

.social-list {
justify-content: flex-end;
}
}

/* ==================
hero area
===================== */

.hero {
background-image: url(img/hero-bg.jpg);
background-size: cover;
background-position: bottom;
padding: 8em 0 4em;
color: #fff;
}

.hero > * {
grid-column: 2 / -2;
}

@media (min-width: 400px) {
.hero > * {
margin-right: 20%;
}
}

@media (min-width: 600px) {

.hero {
padding: 10em 0 6em;
}

.hero > * {
grid-column: 2 / span 2;
}

}


/* ==================
info section
===================== */

.info {
padding: 4em 0;
text-align: center;
}

.col {
grid-column: 2 / -2;
}

@media (min-width: 600px) {
.col {
grid-column: span 1;
}

.col:first-child {
grid-column: 2 / span 1;
}
}


/* ==================
template page
===================== */

.main-template {
padding: 4em 0;
}

.main-template > * {
grid-column: 2 / -2;
}

.main-image {
margin-bottom: 1.5em;
box-shadow: 5px 5px 0px black, 10px 10px 0 #FFE600;
}

@media (min-width: 600px) {
.main-image {
grid-column: 2;
}

.main-text {
grid-column: 3 / span 2;
}
}
Console
about.html
-5:05