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.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
- Solution URL: My Git Repo
- Live Site URL: NFT Card Site
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
<div class="card">
<div class="header">
<img
src="images/image-equilibrium.jpg"
alt="card image"
class="cover">
</div>
<h2 class="title">
Equilibrium #3429
</h2>
<p class="body">
Our Equilibrium collection
promotes balance and calm.
</p>
<div class="details">
<p class="currency">
<img
src="images/icon-ethereum.svg"
alt="">
0.041 ETH
</p>
<p class="time">
<img
src="images/icon-clock.svg"
alt="">
3 days left
</p>
</div>
<div class="author">
<img
src="images/image-avatar.png"
alt="author pic"
class="profile">
<p>
Creation of
<span class="name">Jules Wyvern</span>
</p>
</div>
:root {
--main-bg: hsl(217, 54%, 11%);
--card-bg: hsl(216, 50%, 16%);
--line-cl: hsl(215, 32%, 27%);
--cl-soft: hsl(215, 51%, 70%);
--cl-cyan: hsl(178, 100%, 50%);
--cl-white: hsl(0, 0%, 100%);
--overlay: hsl(178, 100%, 50%, .5);
--fw-300: 300;
--fw-400: 400;
--fw-600: 600;
--fz-base: 18px;
--sm: 375px;
--lg: 1440px;
}
- Created css variables from the style guide.
- Helps to create a consise and consistent look in the card
- Also kept my code more maintainable in the long run.
I would love to sharpen my skills creation of more UI Components like nav-bars menus dropdowns etc...
- Kelvin Powell's turning design to code video on youtube - This helped me gain more insight on how to approach the challenge. I really liked this pattern and will use it going forward.
- Linkedn - David Imafidon
- Frontend Mentor - @Davemafy
- Twitter - @david_imafidon8
- Facebook - David Imafidon
Giving a big shoutout to kelvin powell on his video about effectively turning figma design files to well wirttem css code.