Submitted 12 months ago
12th Project - NFT preview card component
@FrontEndHighRoller
Design comparison
SolutionDesign
Solution retrospective
It was a simple project. I just to figure out how to do an active state for the image hover element.
What I have learned:
1. HORIZONTAL LINE
- HTML empty div with the class card_horizontal_line
<div class="line"></div>
- CSS I gave it
line { height: 1px; width: 100%, background-color: var(--Soft-blue); margin-bottom: 1rem; }
Community feedback
- @amrmabdelazeemPosted 12 months ago
Hi, Good job on tackling this!
instead of using a single div for the line, you can also use either the
border-top
orborder-bottom
for other divs around it. for example the figure tag beneath it, you can use it like this:border-top: 1px solid var(--soft-blue); padding-top: 1rem;
also there is the classic
<hr>
tag.0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord