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

Finish

Browse source
This commit is contained in:
Hadeed 2024-07-01 00:09:15 +05:00
parent 212d1ccc21
commit f7991fef96
2 changed files with 65 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
index.html
View file

@ -25,19 +25,20 @@
</div> </div>
<div class="content"> <div class="content">
<p>Learning</p> <p class="learning">Learning</p>
<p>Published 21 Dec 2023</p> <p class="date">Published 21 Dec 2023</p>
<h1>HTML & CSS foundations</h1> <h1>HTML & CSS foundations</h1>
<p> <p class="description">
These languages are the backbone of every website, defining These languages are the backbone of every website, defining
structure, content, and presentation. structure, content, and presentation.
</p> </p>
</div> </div>
<footer> <footer>
<img width="32px" height="32px" src="/images/image-avatar.webp" alt="Author avatar">
<p>Greg Hooper</p> <p>Greg Hooper</p>
</footer> </footer>
</div> </div>

65
styles.css
View file

@ -45,16 +45,13 @@ body {
background-color: white; background-color: white;
padding: 24px; padding: 24px;
max-width: 24rem;
.image { .image {
border-radius: 10px; border-radius: 10px;
max-width: fit-content;
height: fit-content;
overflow: hidden; overflow: hidden;
img { img {
width: auto;
height: 200px; height: 200px;
object-fit: cover; object-fit: cover;
} }
@ -64,6 +61,66 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: 12px;
.learning {
border-radius: 4px;
background-color: #f4d04e;
padding: 4px 12px;
width: fit-content;
font-weight: 800;
font-size: 14px;
line-height: 1.5;
}
.date {
font-weight: 500;
font-size: 14px;
line-height: 1.5;
}
h1 {
font-weight: 800;
font-size: 24px;
line-height: 1.5;
}
.description {
color: #7f7f7f;
font-weight: 500;
font-size: 16px;
line-height: 1.5;
}
@media screen and (max-width: 576px) {
.learning {
font-size: 12px;
}
.date {
font-size: 12px;
}
& h1 {
font-size: 20px;
}
.description {
font-size: 14px;
}
}
}
footer {
display: flex;
align-items: center;
gap: 12px;
p {
font-weight: 800;
font-size: 14px;
line-height: 1.5;
}
} }
} }