1 <p>HTML</p>

2 <p>&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;So many cards&lt;/title&gt; &lt;link href="course.css" rel="stylesheet"&gt; &lt;link href="style.css" rel="stylesheet"&gt; &lt;/head&gt; &lt;body class="subtle"&gt; &lt;div class="zoomer"&gt; &lt;section class="cards"&gt; &lt;article class="card"&gt; &lt;h1 class="card-heading"&gt;2D-transformations&lt;/h1&gt; &lt;div class="card-meta"&gt; &lt;div class="card-category"&gt; &lt;span class="card-icon icon-tag"&gt;Category: &lt;/span&gt; &lt;span&gt;HTML, CSS&lt;/span&gt; &lt;/div&gt; &lt;div class="card-duration"&gt; &lt;span class="card-icon icon-time"&gt;Course time: &lt;/span&gt; &lt;span&gt;2 hours&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="card-content"&gt; &lt;figure class="card-figure"&gt; &lt;img class="card-img" src="img/course-2.png" alt="Muffin"&gt; &lt;figcaption&gt; &lt;p&gt;We will learn how to rotate, tilt, move, shrink, and magnify objects, and we will even learn how to blow them up with fireballs.&lt;/p&gt; &lt;/figcaption&gt; &lt;/figure&gt; &lt;button class="card-button"&gt;Start course&lt;/button&gt; &lt;/div&gt; &lt;/article&gt; &lt;article class="card"&gt; &lt;h1 class="card-heading"&gt;Animation&lt;/h1&gt; &lt;div class="card-meta"&gt; &lt;div class="card-category"&gt; &lt;span class="card-icon icon-tag"&gt;Category: &lt;/span&gt; &lt;span&gt;HTML, CSS&lt;/span&gt; &lt;/div&gt; &lt;div class="card-duration"&gt; &lt;span class="card-icon icon-time"&gt;Course time: &lt;/span&gt; &lt;span&gt;2 hours&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="card-content"&gt; &lt;figure class="card-figure"&gt; &lt;img class="card-img" src="img/course-4.png" alt="Muffin"&gt; &lt;figcaption&gt; &lt;p&gt;The course covers the basics of CSS animation.&lt;/p&gt; &lt;/figcaption&gt; &lt;/figure&gt; &lt;button class="card-button"&gt;Start course&lt;/button&gt; &lt;/div&gt; &lt;/article&gt; &lt;article class="card"&gt; &lt;h1 class="card-heading"&gt;Smooth transitions&lt;/h1&gt; &lt;div class="card-meta"&gt; &lt;div class="card-category"&gt; &lt;span class="card-icon icon-tag"&gt;Category: &lt;/span&gt; &lt;span&gt;HTML, CSS&lt;/span&gt; &lt;/div&gt; &lt;div class="card-duration"&gt; &lt;span class="card-icon icon-time"&gt;Course time: &lt;/span&gt; &lt;span&gt;2 hours&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="card-content"&gt; &lt;figure class="card-figure"&gt; &lt;img class="card-img" src="img/course-1.png" alt="Muffin"&gt; &lt;figcaption&gt; &lt;p&gt;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.&lt;/p&gt; &lt;/figcaption&gt; &lt;/figure&gt; &lt;button class="card-button"&gt;Start course&lt;/button&gt; &lt;/div&gt; &lt;/article&gt; &lt;article class="card"&gt; &lt;h1 class="card-heading"&gt;Workshop&lt;/h1&gt; &lt;div class="card-meta"&gt; &lt;div class="card-category"&gt; &lt;span class="card-icon icon-tag"&gt;Category: &lt;/span&gt; &lt;span&gt;HTML, CSS&lt;/span&gt; &lt;/div&gt; &lt;div class="card-duration"&gt; &lt;span class="card-icon icon-time"&gt;Course time: &lt;/span&gt; &lt;span&gt;2 hours&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="card-content"&gt; &lt;figure class="card-figure"&gt; &lt;img class="card-img" src="img/course-5.png" alt="Muffin"&gt; &lt;figcaption&gt; &lt;p&gt;This is an applied course in which you will create complex interface elements and cool effects.&lt;/p&gt; &lt;/figcaption&gt; &lt;/figure&gt; &lt;button class="card-button"&gt;Start course&lt;/button&gt; &lt;/div&gt; &lt;/article&gt; &lt;article class="card"&gt; &lt;h1 class="card-heading"&gt;CSS filters&lt;/h1&gt; &lt;div class="card-meta"&gt; &lt;div class="card-category"&gt; &lt;span class="card-icon icon-tag"&gt;Category: &lt;/span&gt; &lt;span&gt;HTML, CSS&lt;/span&gt; &lt;/div&gt; &lt;div class="card-duration"&gt; &lt;span class="card-icon icon-time"&gt;Course time: &lt;/span&gt; &lt;span&gt;2 hours&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="card-content"&gt; &lt;figure class="card-figure"&gt; &lt;img class="card-img" src="img/course-3.png" alt="Muffin"&gt; &lt;figcaption&gt; &lt;p&gt;The course will show you how you can apply filters to various items as well as to combine and animate them.&lt;/p&gt; &lt;/figcaption&gt; &lt;/figure&gt; &lt;button class="card-button"&gt;Start course&lt;/button&gt; &lt;/div&gt; &lt;/article&gt; &lt;/section&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</p>

3 <p>CSS</p>

4 <p>.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; }</p>