From 212d1ccc21273e6779d2b93dda373476cb7ffd13 Mon Sep 17 00:00:00 2001 From: Hadeed Ahmad <hadeedji@gmail.com> 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 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> -<head> - <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <title>Blog preview card</title> + <title>Blog preview card</title> - <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png"> - <link rel="stylesheet" href="styles.css"> -</head> -<body> - Learning + <link + rel="icon" + type="image/png" + sizes="32x32" + href="./assets/images/favicon-32x32.png" + /> + <link rel="stylesheet" href="styles.css" /> + </head> + <body> + <div class="container center"> + <div class="card"> + <div class="image center"> + <img + src="/images/illustration-article.svg" + alt="Article illustration" + /> + </div> - Published 21 Dec 2023 + <div class="content"> + <p>Learning</p> - HTML & CSS foundations + <p>Published 21 Dec 2023</p> - These languages are the backbone of every website, defining structure, content, and presentation. + <h1>HTML & CSS foundations</h1> - Greg Hooper -</body> -</html> \ No newline at end of file + <p> + These languages are the backbone of every website, defining + structure, content, and presentation. + </p> + </div> + + <footer> + <p>Greg Hooper</p> + </footer> + </div> + </div> + </body> +</html> 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; +}