Hi @zawseng13
Great job completing and submitting this challenge, its looking great!
I was taking a look at your index.html file, I saw something you might be interested in.
Inside the <body></body> element you have used a <div></div> element, the use of semantic HTML could be improved.
<div class="card">
<div class="image">
<img src="images/image-equilibrium.jpg" alt="" class="mainImg" />
<div>
<img src="images/icon-view.svg" alt="" />
</div>
</div>
<h3>Equilibrium #3429</h3>
<div class="description">
Our Equilibrium collection promotes balance and calm.
</div>
<div class="price-days">
<div class="price">
<img src="images/icon-ethereum.svg" alt="" />
0.041 ETH
</div>
<div class="days">
<img src="images/icon-clock.svg" alt="" />
3 days left
</div>
</div>
<div class="creator">
<img src="images/image-avatar.png" alt="" class="avatar" />
Creation of <span>Jules Wyvern</span>
</div>
<div class="attribution">
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
>Frontend Mentor</a
>. Coded by <a href="mailto:[email protected]">Zaw Seng</a>.
</div>
</div>
Here's what I suggest,
-
use a
<main></main>element to wrap the content, documentation here -
we can also use a <footer></footer> element to place the
.attributionclass outside of the main flow of the page, documentation here
So the solution could look something like this
<main>
<div class="card">
<div class="image">
<img src="images/image-equilibrium.jpg" alt="" class="mainImg" />
<div>
<img src="images/icon-view.svg" alt="" />
</div>
</div>
<h3>Equilibrium #3429</h3>
<div class="description">
Our Equilibrium collection promotes balance and calm.
</div>
<div class="price-days">
<div class="price">
<img src="images/icon-ethereum.svg" alt="" />
0.041 ETH
</div>
<div class="days">
<img src="images/icon-clock.svg" alt="" />
3 days left
</div>
</div>
<div class="creator">
<img src="images/image-avatar.png" alt="" class="avatar" />
Creation of <span>Jules Wyvern</span>
</div>
</div> // Close the .main-card class here
</main>
<footer>
<div class="attribution">
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
>Frontend Mentor</a
>. Coded by <a href="mailto:[email protected]">Zaw Seng</a>.
</div>
</footer>
Sorry for the really long comment! I hope this helps,
Above all, your solution is looking great! Well done!
Marked as helpful
@zawseng13
Posted
Thank you very much for the tips.I will try them on my next challenge. @Deanogit
