From 212d1ccc21273e6779d2b93dda373476cb7ffd13 Mon Sep 17 00:00:00 2001 From: Hadeed Ahmad Date: Sun, 30 Jun 2024 23:23:25 +0500 Subject: [PATCH] Image --- index.html | 55 ++++++++++++++++++++++++++++++++------------- styles.css | 66 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 104 insertions(+), 17 deletions(-) diff --git a/index.html b/index.html index 5752577..1057dfc 100644 --- a/index.html +++ b/index.html @@ -1,23 +1,46 @@ - + - - - + + + - Blog preview card + Blog preview card - - - - - Learning + + + + +
+
+
+ Article illustration +
- Published 21 Dec 2023 +
+

Learning

- HTML & CSS foundations +

Published 21 Dec 2023

- These languages are the backbone of every website, defining structure, content, and presentation. +

HTML & CSS foundations

- Greg Hooper - - \ No newline at end of file +

+ These languages are the backbone of every website, defining + structure, content, and presentation. +

+
+ + +
+
+ + diff --git a/styles.css b/styles.css index 52f9e36..349eae1 100644 --- a/styles.css +++ b/styles.css @@ -4,7 +4,71 @@ font-family: "Figtree"; } +*, +*::before, +*::after { + box-sizing: border-box; +} + +* { + margin: 0; +} + +img, +picture, +video, +canvas, +svg { + display: block; + max-width: 100%; +} + body { - font-weight: 500; + background-color: #f4d04e; font-family: "Figtree"; } + +.container { + padding: 24px; + min-height: 100dvh; +} + +.card { + display: flex; + flex-direction: column; + gap: 24px; + + filter: drop-shadow(8px 8px black); + border: 1px black solid; + border-radius: 20px; + + background-color: white; + + padding: 24px; + + .image { + border-radius: 10px; + + max-width: fit-content; + height: fit-content; + overflow: hidden; + + img { + width: auto; + height: 200px; + object-fit: cover; + } + } + + .content { + display: flex; + flex-direction: column; + gap: 12px; + } +} + +.center { + display: flex; + justify-content: center; + align-items: center; +}