- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Course card, part 2</title>
<link href="course.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body class="subtle">
<section class="cards">
<article class="card">
<h1 class="card-heading">2D-transformations</h1>
<div class="card-meta">
<div class="card-category">
<span class="card-icon icon-tag">Category: </span>
<span>HTML, CSS</span>
</div>
<div class="card-duration">
<span class="card-icon icon-time">Course time: </span>
<span>2 hours</span>
</div>
</div>
<div class="card-content">
<figure class="card-figure">
<img class="card-img" src="img/course-2.png" alt="Muffin">
<figcaption>
<p>We will learn how to rotate, tilt, move, shrink, and magnify objects, and we will even learn how to blow them up with fireballs.</p>
</figcaption>
</figure>
<button class="card-button">Start course</button>
</div>
</article>
<article class="card">
<h1 class="card-heading">Animation</h1>
<div class="card-meta">
<div class="card-category">
<span class="card-icon icon-tag">Category: </span>
<span>HTML, CSS</span>
</div>
<div class="card-duration">
<span class="card-icon icon-time">Course time: </span>
<span>2 hours</span>
</div>
</div>
<div class="card-content">
<figure class="card-figure">
<img class="card-img" src="img/course-4.png" alt="Muffin">
<figcaption>
<p>The course covers the basics of CSS animation.</p>
</figcaption>
</figure>
<button class="card-button">Start course</button>
</div>
</article>
</section>
</body>
</html>
CSS
.cards {
}
.card {
display: flex;
flex-direction: column;
padding: 20px;
max-width: 70%;
}
.card-meta {
display: flex;
}
.card-category {
flex-grow: 1;
}
.card-img {
width: 100%;
}
/* Decorative outlines */
.cards {
outline: 2px solid rgba(0, 0, 255, 0.3);
outline-offset: 2px;
}
.card {
outline: 2px solid rgba(255, 0, 0, 0.3);
outline-offset: -2px;
}
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
Goalscompleted
0
- Assign a flexbox layout to the
.cardsblock, - and assign a margin of
10pxto the.cardcards.
Comments