- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>So many cards</title>
<link href="course.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body class="subtle">
<div class="zoomer">
<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>
<article class="card">
<h1 class="card-heading">Smooth transitions</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-1.png" alt="Muffin">
<figcaption>
<p>In this course you will learn how to smoothly change CSS properties, and you will create beautiful and functional items with shapes that are inspired by material design.</p>
</figcaption>
</figure>
<button class="card-button">Start course</button>
</div>
</article>
<article class="card">
<h1 class="card-heading">Workshop</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-5.png" alt="Muffin">
<figcaption>
<p>This is an applied course in which you will create complex interface elements and cool effects.</p>
</figcaption>
</figure>
<button class="card-button">Start course</button>
</div>
</article>
<article class="card">
<h1 class="card-heading">CSS filters</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-3.png" alt="Muffin">
<figcaption>
<p>The course will show you how you can apply filters to various items as well as to combine and animate them.</p>
</figcaption>
</figure>
<button class="card-button">Start course</button>
</div>
</article>
</section>
</div>
</body>
</html>
CSS
.cards {
display: flex;
margin: 0 auto;
width: 1000px;
}
.card {
display: flex;
flex-direction: column;
margin: 10px;
padding: 20px;
max-width: 70%;
}
.card-meta {
display: flex;
}
.card-category {
flex-grow: 1;
}
.card-content {
display: flex;
flex-grow: 1;
flex-direction: column;
}
.card-img {
width: 100%;
}
.card-button {
margin-top: auto;
}
/* Zoom styles */
.zoomer {
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
padding: 20px;
width: 200%;
transform: scale(0.5);
transform-origin: 0 0;
}
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
Goalscompleted
0
- Allow flex items to overflow in the
.cardsblock. - Then delete the maximum width from the
.cardcard and assign it the basic size of300px - and a growth factor of
1. - Then reduce the width of
.cardsto700px. Please note how the cards are reconstructed.
Comments