scrimba
Responsive Design
Better style
Styling the main content area - BBQ Splash page
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

Styling the main content area - BBQ Splash page
AboutCommentsNotes
Styling the main content area - BBQ Splash page
Expand for more info
css
styles.css
run
preview
console
/*  font-family: 'Source Sans Pro', sans-serif;  */

body {
margin: 0;
font-family: 'Source Sans Pro', sans-serif;
font-size: 1rem;
color: #404040;
text-align: center;
}


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

h1 {
font-size: 2.25rem;
font-weight: 300;
color: #fff;
margin: 2em 0;
}

h1 + p {
color: #F18119;
font-weight: 900;
font-size: 1.3125rem;
text-transform: uppercase;
margin: 0;
}

h2 {
font-size: 1.3125rem;
}

h2 + p {
font-weight: 900;
color: #F18119;
}

.top-text {
font-size: 0.625rem;
color: #F18119;
font-weight: 900;
text-transform: uppercase;
order: -1;
}

.fine-print {
font-size: 0.625rem;
letter-spacing: 1px;
}

strong { font-weight: 900; }


/* =================
Intro section
================= */

.intro {
background-image: url(images/dark-ribs.jpg);
background-color: #404040;
padding: 0 .25em 1em;
display: flex;
flex-direction: column;
}


/* =================
main-content section
================= */

Console
index.html
-2:51