Skip to content

Commit c1d914a

Browse files
singodiyashubham87singodiyashubham87
committed
Add NFT component
1 parent 37aad05 commit c1d914a

9 files changed

Lines changed: 221 additions & 0 deletions

File tree

‎Projects/NFTCardComponent/README.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# NFT Card Component
2+
3+
The NFT Card Component is a customizable HTML and CSS component that allows users to display and showcase non-fungible tokens (NFTs) in an attractive card format. It provides a visually appealing and informative way to present NFTs to users on your website or web application.
4+
5+
## Features
6+
7+
Display NFT images, titles, descriptions, and additional information.
8+
Customizable appearance to match your website's design.
9+
Responsive layout for optimal viewing on different devices.
10+
Interactive elements for user engagement.
11+
Easy integration into any HTML-based website or web application.

‎Projects/NFTCardComponent/images/favicon-32x32.png‎

1.04 KB
Loading

‎Projects/NFTCardComponent/images/icon-clock.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎Projects/NFTCardComponent/images/icon-ethereum.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎Projects/NFTCardComponent/images/icon-view.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎Projects/NFTCardComponent/images/image-avatar.png‎

8.62 KB
Loading

‎Projects/NFTCardComponent/images/image-equilibrium.jpg‎

13.2 KB
Loading

‎Projects/NFTCardComponent/index.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>NFT preview card component</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
10+
<body>
11+
<main>
12+
<div class="container">
13+
<figure class="equilibrium">
14+
<img class="equilibrium" src="images/image-equilibrium.jpg" alt="">
15+
<figcaption><img src="images/icon-view.svg" alt=""></figcaption>
16+
</figure>
17+
<h1>Equilibrium #3429</h1>
18+
<p class="equilibrium">Our Equilibrium collection promotes balance and calm.</p>
19+
<div class="ether">
20+
<div class="price">
21+
<img src="images/icon-ethereum.svg" alt="etherium-icon">
22+
<span>0.041 ETH</span>
23+
</div>
24+
<div class="days">
25+
<img src="images/icon-clock.svg" alt="clock-icon">
26+
<span>3 days left</span>
27+
</div>
28+
</div>
29+
<hr>
30+
<div class="end">
31+
<img src="images/image-avatar.png" alt="avatar">
32+
<p>Creation of <span>Mister Mickey</span></p>
33+
</div>
34+
</div>
35+
</main>
36+
<footer>
37+
</footer>
38+
</body>
39+
</html>

‎Projects/NFTCardComponent/styles.css‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
2+
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap');
3+
4+
*{
5+
margin: 0;
6+
padding: 0;
7+
box-sizing: border-box;
8+
}
9+
10+
:root{
11+
--Soft-blue: hsl(215, 51%, 70%);
12+
--Cyan: hsl(178, 100%, 50%);
13+
--Very-dark-blue : hsl(216, 50%, 16%);
14+
--Very-dark-blue : hsl(215, 32%, 27%);
15+
--White: hsl(0, 0%, 100%);
16+
}
17+
18+
body{
19+
font-size: 18x;
20+
background-color: hsl(217, 54%, 11%);
21+
margin: 0 1rem;
22+
height: 100vh;
23+
display: flex;
24+
flex-direction: column;
25+
align-items: center;
26+
justify-content: center;
27+
font-family: 'Outfit';
28+
}
29+
30+
.container{
31+
background-color: var(--Very-dark-blue);
32+
border-radius: .625rem;
33+
margin: 1rem;
34+
padding: 1.5rem;
35+
}
36+
37+
figure{
38+
position: relative;
39+
width: 100%;
40+
height: 100%;
41+
}
42+
43+
figure:hover > figcaption{
44+
opacity: .5;
45+
cursor: pointer;
46+
}
47+
48+
figcaption{
49+
background-color: var(--Cyan);
50+
width: 252px;
51+
height: 252px;
52+
position: absolute;
53+
left: 0;
54+
top: 0;
55+
border-radius: .625rem;
56+
display: flex;
57+
align-items: center;
58+
justify-content: center;
59+
color: var(--White);
60+
opacity: 0;
61+
}
62+
63+
figcaption img{
64+
width: 15%;
65+
opacity: 1;
66+
}
67+
68+
img.equilibrium{
69+
width: 100%;
70+
border-radius: .625rem;
71+
}
72+
73+
div.equilibrium:hover{
74+
background: var(--Cyan);
75+
}
76+
77+
h1{
78+
font-size: 17px;
79+
color: var(--White);
80+
margin: 1rem 0;
81+
}
82+
83+
h1:hover{
84+
color: var(--Cyan);
85+
cursor: pointer;
86+
}
87+
88+
p.equilibrium{
89+
color: var(--Soft-blue);
90+
margin-bottom: 1rem;
91+
}
92+
93+
div.ether{
94+
display: flex;
95+
justify-content: space-between;
96+
margin-bottom: 1rem;
97+
font-size: 15px;
98+
}
99+
100+
.price{
101+
display: flex;
102+
justify-content: center;
103+
align-items: center;
104+
color: var(--Cyan);
105+
font-weight: 600;
106+
107+
}
108+
109+
.price img{
110+
margin-right: .6rem;
111+
}
112+
113+
.days{
114+
display: flex;
115+
justify-content: center;
116+
align-items: center;
117+
color: var(--Soft-blue);
118+
}
119+
120+
.days span{
121+
margin-left: .6rem;
122+
}
123+
124+
hr{
125+
color: var(--Soft-blue);
126+
border: 1px solid;
127+
margin-bottom: 1rem;
128+
}
129+
130+
.end{
131+
display: flex;
132+
align-items: center;
133+
margin-top: .2rem;
134+
font-size: 15px;
135+
}
136+
137+
.end img{
138+
width: 11%;
139+
border: 1px solid hsl(0, 0%, 100%);
140+
border-radius: 50%;
141+
}
142+
143+
.end p{
144+
margin-left: 1rem;
145+
color: var(--Soft-blue);
146+
}
147+
148+
.end p span{
149+
color: var(--White);
150+
}
151+
152+
.end p span:hover{
153+
color: var(--Cyan);
154+
cursor: pointer;
155+
}
156+
157+
158+
@media screen and (max-width:600px){
159+
.container{
160+
max-width: 375px;
161+
}
162+
}
163+
164+
@media screen and (min-width:600px){
165+
.container{
166+
max-width: 300px;
167+
}
168+
}

0 commit comments

Comments
 (0)