This is a solution to the NFT preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Note: Delete this note and update the table of contents based on what sections you keep.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
-Firstly I obtained the details of my project like the color schemes of my card and fonts. -I then gathered dimensions for the different containers in the project. -Lastly I put it all together with positioning.
- Semantic HTML5 markup
- CSS custom properties
The project helped reinforce some of the topics that I'm learning regarding position, parent and child relationship in an html document.
To see how you can add code snippets, see below:
<body>
<div class="card">
<div class="top-container">
<img class="img" src="images/image-equilibrium.jpg" alt="">
<!-- <div class="view">
<svg class="icon" width="48" height="48" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h48v48H0z"/><path d="M24 9C14 9 5.46 15.22 2 24c3.46 8.78 12 15 22 15 10.01 0 18.54-6.22 22-15-3.46-8.78-11.99-15-22-15Zm0 25c-5.52 0-10-4.48-10-10s4.48-10 10-10 10 4.48 10 10-4.48 10-10 10Zm0-16c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6Z" fill="#FFF" fill-rule="nonzero"/></g></svg>
</div> -->
</div>
<div class="middle-container" style="margin-left: 20px;margin-bottom: 10px;">
<h1> Equilibrium #3429</h1>
<p>Our Equilibrium collection promotes balance and calm.</p>
<div class="lower-mid">
<ul>
<li style = "color: #00FFF7;"><svg class ="eth-logo"width="11" height="18" xmlns="http://www.w3.org/2000/svg"><path d="M11 10.216 5.5 18 0 10.216l5.5 3.263 5.5-3.262ZM5.5 0l5.496 9.169L5.5 12.43 0 9.17 5.5 0Z" fill="#00FFF8"/></svg> 0.041ETH</li>
<li class = "days" style = "color: #8BACD9;"><svg width="17" height="17" xmlns="http://www.w3.org/2000/svg"><path d="M8.305 2.007a6.667 6.667 0 1 0 0 13.334 6.667 6.667 0 0 0 0-13.334Zm2.667 7.334H8.305a.667.667 0 0 1-.667-.667V6.007a.667.667 0 0 1 1.334 0v2h2a.667.667 0 0 1 0 1.334Z" fill="#8BACD9"/></svg> 3 days left</li>
</ul>
</div>
</div>
<hr>
<div class="bottom-containter">
<img class="avatar" src="images/image-avatar.png" alt="avatar-img">
<p class ="footer">Creation of <span>Jules Wyvern</span><p>
</div>
</div>
</body>.proud-of-this-css {
color: papayawhip;
}const proudOfThisFunc = () => {
console.log('🎉')
}The following are some topics that I'd like to reinforce.
-Positioning -Z-indexing -Margin -rem
- Frontend Mentor - @amath95