scrimba
Responsive Design
Taking flexbox to the next level
Building a card component with flexbox - Large screens part one
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

Building a card component with flexbox - Large screens part one
AboutCommentsNotes
Building a card component with flexbox - Large screens part one
Expand for more info
css
style.css
run
preview
console
body {}

.card {
width: 90%;
margin: 0 auto;
max-width: 800px;
background: #111d4a;
color: #fff;
display: flex;
flex-direction: column;
}

.card-img {
object-fit: cover;
height: 150px;

background: yellow;
}

.card-content {
padding: 1em;
}

.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-footer {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-top: 3em;
}

.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
-5:10