Explorer
project
css
style.css
img
text files
about.html
index.html
script.js
Dependencies
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
* {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;
}
}