@QS3H
Posted
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>
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; }
Marked as helpful
@JAYMALA-963
Posted
@QS3H Thank You for your feedback. I will try your solution for sure.
