<!DOCTYPE html>
<html lang="zxx">
<head>
<meta charset="UTF-8">
<title>Cards</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Mulish&display=swap"
rel="stylesheet"
type='text/css'
>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="background">
<div class="centering">
<div class="articles">
<article>
<figure>
<img
src="https://img.freepik.com/free-photo/wide-angle-shot-single-tree-growing-clouded-sky-during-sunset-surrounded-by-grass_181624-22807.jpg?w=900&t=st=1687123388~exp=1687123988~hmac=f3410d0a5c2f20aec66c7d763c789bf0aae9c5026366fe41ae7d18e05e7e406b"
alt="Preview"
>
</figure>
<div class="article-preview">
<h2>My Blog 1</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Praesent in mauris eu tortor porttitor accumsan.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Praesent in mauris eu tortor porttitor accumsan.
<a href="#" class="read-more" title="Read More">
Read more
</a>
</p>
</div>
</article>
<article>
<figure>
<img
src="https://img.freepik.com/free-photo/beautiful-aerial-shot-fronalpstock-mountains-switzerland-beautiful-pink-blue-sky_181624-9315.jpg?w=900&t=st=1687123407~exp=1687124007~hmac=15a1b5a4d3a5af66dfba67bdcd577f769f813bf06fc8b5e50f32f6503099bbd8"
alt="Preview"
>
</figure>
<div class="article-preview">
<h2>My Blog 2</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Praesent in mauris eu tortor porttitor accumsan.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Praesent in mauris eu tortor porttitor accumsan.
<a href="#" class="read-more" title="Read More">
Read more
</a>
</p>
</div>
</article>
<article>
<figure>
<img
src="https://img.freepik.com/free-photo/tropical-beach_74190-188.jpg?w=1800&t=st=1687169672~exp=1687170272~hmac=b66f9b9c1e344cbfe6fe2e5f65e94ebb8d418dad2e2af2b892ad9ac60e9eb79c"
alt="Preview"
>
</figure>
<div class="article-preview">
<h2>My Blog 3</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent in mauris eu tortor porttitor accumsan.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent in mauris eu tortor porttitor accumsan.
<a href="#" class="read-more">
Read more
</a>
</p>
</div>
</article>
</div>
</div>
</div>
</body>
</html>