Skip to content

Commit cc908d3

Browse files
abstrxtInfinityabstrxtInfinity
committed
EcomCard
1 parent 3ac3952 commit cc908d3

5 files changed

Lines changed: 281 additions & 0 deletions

File tree

‎GlassMorph_EcommerceCards/img.png‎

531 KB
Loading

‎GlassMorph_EcommerceCards/img2.png‎

60.5 KB
Loading

‎GlassMorph_EcommerceCards/img3.png‎

111 KB
Loading

‎GlassMorph_EcommerceCards/index.html‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>EcommerceCards</title>
8+
<link rel="stylesheet" href="./style.css">
9+
</head>
10+
11+
<body>
12+
<section>
13+
<div class="container">
14+
<div class="card">
15+
<div class="imgBx">
16+
<img src="./img.png" alt="X">
17+
<h2>Nike Shoes</h2>
18+
</div>
19+
<div class="content">
20+
<div class="size">
21+
<h3>Size :</h3>
22+
<span>7</span>
23+
<span>8</span>
24+
<span>9</span>
25+
<span>10</span>
26+
</div>
27+
<div class="color">
28+
<h3>Color :</h3>
29+
<span></span>
30+
<span></span>
31+
<span></span>
32+
</div>
33+
<a href="#">Buy Now</a>
34+
</div>
35+
</div>
36+
<div class="card">
37+
<div class="imgBx">
38+
<img src="./img3.png" alt="X">
39+
<h2>Nike Shoes</h2>
40+
</div>
41+
<div class="content">
42+
<div class="size">
43+
<h3>Size :</h3>
44+
<span>7</span>
45+
<span>8</span>
46+
<span>9</span>
47+
<span>10</span>
48+
</div>
49+
<div class="color">
50+
<h3>Color :</h3>
51+
<span></span>
52+
<span></span>
53+
<span></span>
54+
</div>
55+
<a href="#">Buy Now</a>
56+
</div>
57+
</div>
58+
<div class="card">
59+
<div class="imgBx">
60+
<img src="./img2.png" alt="X">
61+
<h2>Nike Shoes</h2>
62+
</div>
63+
<div class="content">
64+
<div class="size">
65+
<h3>Size :</h3>
66+
<span>7</span>
67+
<span>8</span>
68+
<span>9</span>
69+
<span>10</span>
70+
</div>
71+
<div class="color">
72+
<h3>Color :</h3>
73+
<span></span>
74+
<span></span>
75+
<span></span>
76+
</div>
77+
<a href="#">Buy Now</a>
78+
</div>
79+
</div>
80+
</div>
81+
</section>
82+
</body>
83+
84+
</html>

‎GlassMorph_EcommerceCards/style.css‎

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:weight@300;400;500;600;700;800;900&display=swap');
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
font-family: 'Poppins', sans-serif;
8+
9+
}
10+
11+
section {
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
min-height: 100vh;
16+
background: #232323;
17+
overflow: hidden;
18+
padding: 100px 20px;
19+
box-sizing: border-box;
20+
}
21+
22+
section::before {
23+
content: '';
24+
position: fixed;
25+
top: 0;
26+
left: 0;
27+
width: 100%;
28+
height: 100%;
29+
background: #ef3b36;
30+
clip-path: circle(65% at 100% -20%);
31+
}
32+
33+
section::after {
34+
content: '';
35+
position: fixed;
36+
top: 0;
37+
left: 0;
38+
width: 100%;
39+
height: 100%;
40+
background: #47aafa;
41+
clip-path: circle(35% at 0% 100%);
42+
}
43+
44+
.container {
45+
position: relative;
46+
z-index: 10;
47+
display: flex;
48+
justify-content: center;
49+
align-items: center;
50+
flex-wrap: nowrap;
51+
52+
}
53+
54+
.container .card {
55+
position: relative;
56+
width: 300px;
57+
height: 400px;
58+
margin: 20px 40px;
59+
display: flex;
60+
justify-content: center;
61+
align-items: center;
62+
flex-direction: column;
63+
background: rgba(255, 255, 255, 0.05);
64+
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
65+
backdrop-filter: blur(15px);
66+
67+
}
68+
69+
70+
.container .card .imgBx {
71+
position: relative;
72+
display: flex;
73+
justify-content: center;
74+
align-items: center;
75+
flex-direction: column;
76+
padding: 20px;
77+
transition: 0.5s ease-in-out;
78+
}
79+
80+
.container .card:hover .imgBx {
81+
transform: translateY(-100px);
82+
83+
84+
}
85+
86+
.container .card .imgBx img {
87+
max-width: 100%;
88+
margin: 0 0 20px;
89+
transition: 0.5s ease-in-out;
90+
91+
}
92+
93+
.container .card:hover .imgBx img {
94+
transform: translate(-20px, -40px) rotate(-25deg) scale(1.4);
95+
}
96+
97+
.container .card .imgBx h2 {
98+
color: #fff;
99+
font-weight: 600;
100+
}
101+
102+
.container .card .content {
103+
position: relative;
104+
bottom: 20px;
105+
display: flex;
106+
justify-content: center;
107+
align-items: center;
108+
flex-direction: column;
109+
transition: .5s ease-in-out;
110+
111+
opacity: 0;
112+
visibility: hidden;
113+
}
114+
115+
.container .card:hover .content {
116+
opacity: 1;
117+
visibility: visible;
118+
transform: translateY(-50%);
119+
}
120+
121+
.container .card .content .size,
122+
.container .card .content .color {
123+
display: flex;
124+
justify-content: center;
125+
align-items: center;
126+
padding: 8px 20px;
127+
}
128+
129+
.container .card .content .size h3,
130+
.container .card .content .color h3 {
131+
color: #fff;
132+
font-size: 14px;
133+
font-weight: 300;
134+
text-transform: uppercase;
135+
letter-spacing: 2px;
136+
margin-right: 10px;
137+
}
138+
139+
.container .card .content .size span {
140+
width: 26px;
141+
height: 26px;
142+
text-align: center;
143+
line-height: 24px;
144+
display: inline-block;
145+
color: #111;
146+
background: #fff;
147+
border-radius: 4px;
148+
margin: 0 5px;
149+
cursor: pointer;
150+
font-size: 14px;
151+
font-weight: 500;
152+
transition: .5s;
153+
}
154+
155+
.container .card .content .size span:hover {
156+
background: #9bdc28;
157+
}
158+
159+
.container .card .content .color span {
160+
width: 20px;
161+
height: 20px;
162+
background: #000;
163+
border-radius: 50%;
164+
margin: 0 5px;
165+
border: 2px solid #fff;
166+
box-sizing: border-box;
167+
cursor: pointer;
168+
}
169+
170+
.container .card .content .color span:nth-child(2) {
171+
background: #9bdc28;
172+
173+
}
174+
175+
.container .card .content .color span:nth-child(3) {
176+
background: #03a9f4;
177+
178+
}
179+
180+
.container .card .content .color span:nth-child(4) {
181+
background: #e91e63;
182+
183+
}
184+
185+
.container .card .content a {
186+
position: relative;
187+
top: 10px;
188+
display: inline-block;
189+
padding: 12px 30px;
190+
background: #fff;
191+
border-radius: 40px;
192+
font-weight: 600;
193+
letter-spacing: 1px;
194+
color: #000;
195+
text-decoration: none;
196+
text-transform: uppercase;
197+
}

0 commit comments

Comments
 (0)