Great Job JAYMALA on completing the challenge.
Note: you don't need to use all semantic elements on this challenge specifically the main element is enough the rest can be divs
I have improved your code a little bit to make it as close to the design as possible try and and compare your code with this version and see the difference and how it was improved:
HTML:-
<body>
<main>
<article>
<img src="/assets/images/illustration-article.svg" alt="illustration-article">
<div class="mark">
<p>Learning</p>
</div>
<div class="date">
Published <time datetime="2023-12-21"> 21 Dec 2023 </time>
</div>
<div class="heading">
<h1>
HTML & CSS foundations
</h1>
</div>
<div class="description">
<p>
These languages are the backbone of every website, defining structure, content, and presentation.
</p>
</div>
<div id="author">
<img src="./assets/images/image-avatar.webp" alt="image-avatar">
<p>Greg Hooper</p>
</div>
</article>
</main>
</body>
CSS:-
@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap");
:root {
--primary-color: hsl(47, 88%, 63%);
--neutral-white: hsl(0, 0%, 100%);
--neutral-grey: hsl(0, 0%, 50%);
--neutral-black: hsl(0, 0%, 7%);
}
- {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Figtree", sans-serif;
}
body {
background: var(--primary-color);
}
main {
width: 100%;
height: 100vh;
text-align: left;
display: flex;
justify-content: center;
align-items: center;
}
article {
border: 1px solid var(--neutral-black);
border-radius: 20px;
padding: 24px;
background: var(--neutral-white);
box-shadow: 7px 7px var(--neutral-black);
width: 384px;
height: 522px;
}
img {
border-radius: 10px;
margin-bottom: 24px;
}
.mark {
width: 82px;
background: var(--primary-color);
font-size: 15px;
font-weight: 800;
padding: 5px 12px;
border-radius: 4px;
margin-bottom: 12px;
}
mark {
background-color: var(--primary-color);
}
.date {
font-weight: 500;
color: var(--neutral-black);
margin-bottom: 12px;
}
.heading h1 {
color: var(--neutral-black);
font-weight: 800;
margin-bottom: 12px;
}
.heading h1:active {
color: var(--primary-color);
}
.heading h1:hover {
color: var(--primary-color);
}
.description p {
color: var(--neutral-grey);
line-height: 1.5;
font-weight: 500;
margin-bottom: 24px;
}
#author {
display: flex;
}
#author img {
width: 32px;
height: 32px;
margin-right: 10px;
margin-bottom: 0;
}
#author p {
color: var(--neutral-black);
font-weight: 800;
align-self: center;
}
