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;Course card, part 2&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;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;/section&gt; &lt;/body&gt; &lt;/html&gt;</p>

3 <p>CSS</p>

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