fem-projects/blog-preview-card
Archived
1
Fork 0
Code Activity

Image

Browse source
This commit is contained in:
Hadeed 2024-06-30 23:23:25 +05:00
parent f1ced553c4
commit 212d1ccc21
2 changed files with 104 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
index.html
View file

@ -1,23 +1,46 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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
<link rel="stylesheet" href="styles.css"> rel="icon"
type="image/png"
sizes="32x32"
href="./assets/images/favicon-32x32.png"
/>
<link rel="stylesheet" href="styles.css" />
</head> </head>
<body> <body>
Learning <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 <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> </body>
</html> </html>

66
styles.css
View file

@ -4,7 +4,71 @@
font-family: "Figtree"; font-family: "Figtree";
} }
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
body { body {
font-weight: 500; background-color: #f4d04e;
font-family: "Figtree"; 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;
}