Skip to content

Commit 852a888

Browse files
author
Garvitraj Pandey
authored
Added html and css file
1 parent 3a174f1 commit 852a888

File tree

2 files changed

+184
-0
lines changed

2 files changed

+184
-0
lines changed

‎Product_Display_Cards/Product_Card_02/code/index.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8">
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>GlassMorph product Card</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="main-container">
11+
<ul class="box-card">
12+
<li><img src="assets/sh4.png" alt=""></li>
13+
<li><img src="assets/sh3.png" alt=""></li>
14+
<li><img src="assets/sh2.png" alt=""></li>
15+
</ul>
16+
<div class="imageBox">
17+
<h2>Adidas HX 2.0</h2>
18+
<img src="assets/sh1.png" alt="">
19+
<ul class="shoesSize">
20+
<span>Size</span>
21+
<li>6</li>
22+
<li>7</li>
23+
<li>8</li>
24+
<li>9</li>
25+
</ul>
26+
<a href="#" class="btn"> Add to Cart</a>
27+
</div>
28+
</div>
29+
</body>
30+
</html>

‎Product_Display_Cards/Product_Card_02/code/style.css

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;800;900&display=swap');
2+
3+
*{
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
font-family: 'Nunito', sans-serif;
8+
9+
}
10+
11+
body{
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
min-height: 100vh;
16+
background: url(assets/bg.jpg);
17+
background-size: cover ;
18+
background-attachment: fixed;
19+
}
20+
.main-container{
21+
position: relative;
22+
width: 400px;
23+
height: 450px;
24+
25+
}
26+
27+
.main-container .box-card{
28+
position: absolute;
29+
top: 50%;
30+
transform: translateY(-50%);
31+
z-index: 1;
32+
}
33+
34+
.main-container .box-card li{
35+
list-style-type: none;
36+
width: 100px;
37+
height: 100px;
38+
margin: 12px;
39+
display: flex;
40+
justify-content: center;
41+
align-items: center;
42+
background: rgba(255, 255, 255, 0.2);
43+
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.05);
44+
border: 0.5px solid rgba(255, 255, 255, 0.25);
45+
border-top: 1px solid rgba(255, 255, 255, 0.5);
46+
border-left: 1px solid rgba(255, 255, 255, 0.5);
47+
border-radius: 22px;
48+
backdrop-filter: blur(7px);
49+
}
50+
.main-container .box-card li img{
51+
width: 85%;
52+
transition: 0.15s;
53+
54+
}
55+
56+
.main-container .box-card li:hover img{
57+
transform: rotate(-30deg);
58+
width: 100%;
59+
}
60+
61+
.main-container .imageBox{
62+
position: absolute;
63+
top: 0;
64+
right: 0;
65+
width: 350px;
66+
height: 100%;
67+
background: rgba(255, 255, 255, 0.2);
68+
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.05);
69+
border: 0.5px solid rgba(255, 255, 255, 0.25);
70+
border-top: 1px solid rgba(255, 255, 255, 0.5);
71+
border-left: 1px solid rgba(255, 255, 255, 0.5);
72+
border-radius: 22px;
73+
backdrop-filter: blur(7px);
74+
padding: 60px 20px;
75+
padding-left: 50px;
76+
display: flex;
77+
flex-direction: column;
78+
align-items: center;
79+
justify-content: space-between;
80+
}
81+
82+
.main-container .imageBox h2{
83+
color: #252525;
84+
font-weight: 800;
85+
letter-spacing: 0.2;
86+
}
87+
88+
.main-container .imageBox img{
89+
width: 75%;
90+
transition: 0.25s;
91+
}
92+
93+
.main-container .imageBox img:hover{
94+
transform: scale(1.5) rotate(-20deg) translateX(25px) ;
95+
}
96+
97+
.main-container .imageBox .shoesSize{
98+
display: flex;
99+
justify-content: center;
100+
align-items: center;
101+
102+
103+
}
104+
105+
.main-container .imageBox .shoesSize span{
106+
color: #252525;
107+
font-size: 1.3em;
108+
letter-spacing: 0.15px;
109+
font-weight: 750;
110+
margin-right: 7px;
111+
}
112+
113+
.main-container .imageBox .shoesSize li{
114+
list-style: none;
115+
width: 30px;
116+
height: 30px;
117+
background: #fff;
118+
color: #252525;
119+
display: flex;
120+
justify-content: center;
121+
align-items: center;
122+
margin: 5px;
123+
border-radius: 5px;
124+
font-weight: 700;
125+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
126+
cursor: pointer;
127+
transition: 0.25s;
128+
129+
130+
}
131+
132+
.main-container .imageBox .shoesSize li:hover{
133+
transform: translateY(-5px);
134+
}
135+
136+
.main-container .imageBox .btn{
137+
position: absolute;
138+
bottom: -30px;
139+
background: #fff;
140+
display: inline-block;
141+
text-decoration: none;
142+
padding: 15px 30px;
143+
border-radius: 30px;
144+
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
145+
font-weight: 700;
146+
color: #252525;
147+
transition: 0.1s;
148+
149+
}
150+
151+
.main-container .imageBox .btn:hover{
152+
transform: scale(1.05);
153+
font-size: 1.1em;
154+
}

0 commit comments

Comments
 (0)