This is a solution to the [NFT preview card component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/nft-preview-card-component-SbdUL_w0U). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Step 1: HTML Markup:
Start
<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Frontend Mentor | NFT preview card component</title>
<link rel="stylesheet" href="style.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap');
</style>
</head>
<body>
<main>
<section id="card">
<div class="image">
<img class="img" src="images/image-equilibrium.jpg" alt="">
<div class="view">
<img src="images/icon-view.svg" alt="">
</div>
</div>
<h1 id="header">
Equilibrium #3429
</h1>
<p id="disc">
Our Equilibrium collection promotes balance and calm.
</p>
<div class="details">
<div class="eth">
<img src="images/icon-ethereum.svg" alt="">
<p><span id="point">0.041</span>ETH</p>
</div>
<div class="time">
<img src="images/icon-clock.svg" alt="">
<p><span id="time_left">3</span>days left</p>
</div>
</div>
<div class="div"></div>
<div class="avatar">
<img src="images/image-avatar.png" alt="" id="pic">
<p>Creation of <span id="name">Jules Wyvern</span></p>
</div>
</section>
</main>
</body>
</html>
Step 2: Styling with CSS:
Create a separate CSS file (style.css)
/*-------------------- CSS --------------------*/
* {
font-family: 'Outfit', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
}
main {
height: 100vh;
width: 100%;
background: hsl(217, 54%, 11%);
display: flex;
align-items: center;
justify-content: center;
}
#card {
width: 350px;
height: 595px;
padding: 25px;
background: hsl(216, 50%, 16%);
border-radius: 15px;
display: flex;
justify-content: space-between;
/* align-items: center; */
flex-direction: column;
}
.image {
width: 100%;
overflow: hidden;
aspect-ratio: 1/1;
position: relative;
cursor: pointer;
}
.image .img {
width: 100%;
/* height: 100%; */
object-fit: cover;
}
.view{
position: absolute;
background: hsl(178, 100%, 50%, .5);
width: 100%;
height: 100%;
top: 0;
justify-content: center;
display: none; /*for now*/
align-items: center;
}
.image:hover .view{
display: flex;
}
#header{
color: hsl(0, 0%, 100%);
font-size: 22px;
cursor: pointer;
font-weight: 600;
}
#header:hover{
color: hsl(178, 100%, 50%);
}
#disc{
color: hsl(215, 51%, 70%);
line-height: 1.8rem;
font-size: 18px;
}
.details{
display: flex;
justify-content: space-between;
}
.eth{
display: flex;
color: hsl(178, 100%, 50%);
font-weight: 600;
}
.time{
display: flex;
color: hsl(215, 51%, 70%);
font-weight: 300;
}
.details img{
height: 100%;
}
.eth p{
margin-left: 8px;
}
.time p{
margin-left: 8px;
}
.div{
width: 100%;
height: 1px ;
background: hsl(215, 32%, 27%);
}
.avatar{
display: flex;
color: hsl(215, 51%, 70%);
font-size: 16px ;
align-items: center;
}
#pic{
width: 32px;
height: 32px;
border: 1px solid hsl(0, 0%, 100%);
border-radius: 50%;
margin-right: 18px;
}
#name{
color: hsl(0, 0%, 100%);
font-weight: 400;
cursor: pointer;
}
#name:hover{
color: hsl(178, 100%, 50%);
}
@media (max-width: 375px) {
#card{
width: 328px;
height: 542px;
}
}
Congratulations!
0 Comments