scrimba
Responsive Design
CSS Grid
Using grid for our card component
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

To see this lesson you need to be logged in. Joining Scrimba is free and gives you access to 20+ courses.Sign up
Using grid for our card component
AboutCommentsNotes
Using grid for our card component
Expand for more info
css
style.css
run
preview
console
body {
margin: 0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

.card {
width: 90%;
max-width: 800px;
background: #111d4a;
color: #fff;
}

.card-img {
object-fit: cover;
}

.card-title,
.card-read-time,
.card-btn {
font-family: 'Blinker', sans-serif;
}

.card-title {
color: #05cbe9;
font-size: 1.75rem;
margin: 0;
}

.card-body {
font-size: 1rem;
font-family: 'Source Sans Pro', sans-serif;
line-height: 1.6;
}

.card-btn {
font-size: 1.25rem;
background: #05cbe9;
color: #111d4a;
text-decoration: none;
font-weight: 700;
padding: .35em 1em;
letter-spacing: 1px;
}

.card-read-time {
margin: 0;
opacity: .6;
line-height: 1;
}

.card-read-time span {
font-weight: 700;
display: block;
font-size: 1.25em;
}
Console
index.html
-13:13