@RioCantre
Posted
Hello there! Good job with this one. Looking at your solution, I would suggest the following for you...
- Add
padding: 0.2rem;in the.main-contentrule set - Refactor the HTML structure to something like this...
<main class="main-content">
<div class="image">
....
<div class="cyan-hover-state">
....
</div>
</div>
<p class="heading">Equilibrium #3429</p>
<p class="description">Our Equilibrium collection promotes balance and calm.</p
<div>
<div class="price">
....
</div>
<div class="time-left">
....
</div>
<div>
<hr>
<div class="footer">
....
</div>
</main>
- Use Flexbox for alignments
Hope this helps and Keep it up!
Marked as helpful
@samyak317
Posted
@RioCantre Thank you for your suggestion but i have a question that I have read on google that we should use more semantic tag like articles, sections, nav, footer etc. So, what's your opinion on this. and thanks for your suggestion
@RioCantre
Posted
@samyak317 Great that you have read the importance of Semantic HTML.
The refactored version above have only one semantic tag which is the main that I wrap the whole content. You can use div within this method. Alternative is to use it this way...
<main class="main-content">
<div class="image">
....
<div class="cyan-hover-state">
....
</div>
</div>
<section>
<h1 class="heading">Equilibrium #3429</h1>
<p class="description">Our Equilibrium collection promotes balance and calm.</p
<div>
<div class="price">
....
</div>
<div class="time-left">
....
</div>
<div>
<hr>
<div class="footer">
....
</div>
</section>
</main>
There are different ways to make it simpler, the important fact is that you know what are semantic tags and use it wisely in your next projects.
@samyak317
Posted
@RioCantre Thanks for your suggestion. It will help me in the growth of this field
