Skip to content

Commit 235addd

Browse files
author
Garvitraj Pandey
authored
Added Code
1 parent 377c902 commit 235addd

File tree

3 files changed

+181
-0
lines changed

3 files changed

+181
-0
lines changed

‎Product_Display_Cards/Product_Card_01/code/index.html

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
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>3D Product Card</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="mainConatiner">
11+
<div class="boxWrapper">
12+
<div class="name">Crater Remixa</div>
13+
<a href="#" class="buy">Buy Now</a>
14+
<div class="circle"></div>
15+
<img src="assets/sh1.png" alt="" class="productImg">
16+
</div>
17+
</div>
18+
19+
<div class="mainConatiner">
20+
<div class="boxWrapper">
21+
<div class="name">Jordan Air NFH</div>
22+
<a href="#" class="buy">Buy Now</a>
23+
<div class="circle"></div>
24+
<img src="assets/sh2.png" alt="" class="productImg">
25+
</div>
26+
</div>
27+
<script src="vanilla-tilt.min.js"></script>
28+
<script>
29+
VanillaTilt.init(document.querySelectorAll(".boxWrapper"), {
30+
max: 25,
31+
speed: 400
32+
});
33+
34+
//It also supports NodeList
35+
VanillaTilt.init(document.querySelectorAll(".your-element"));
36+
</script>
37+
</body>
38+
</html>

‎Product_Display_Cards/Product_Card_01/code/style.css

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&display=swap');
2+
3+
*{
4+
margin: 0;
5+
padding: 0;
6+
7+
font-family: 'Inter', sans-serif;
8+
}
9+
10+
body{
11+
display: flex;
12+
justify-content: center;
13+
align-items: center;
14+
min-height: 100vh;
15+
background: #131313;
16+
17+
18+
}
19+
20+
.mainConatiner{
21+
position: relative;
22+
display: flex;
23+
justify-content: center;
24+
align-items: center;
25+
flex-wrap: wrap;
26+
width: 1200px;
27+
transform-style: preserve-3d;
28+
}
29+
30+
.mainConatiner .boxWrapper:nth-child(1){
31+
position: relative;
32+
width: 300px;
33+
height: 400px;
34+
margin: 40px;
35+
background: linear-gradient(209.38deg, #DD061C -6.35%, rgba(17, 17, 17, 0.89) 61.2%);
36+
border-radius: 20px;
37+
transform-style: preserve-3d;
38+
39+
}
40+
.mainConatiner .boxWrapper:nth-child(2){
41+
position: relative;
42+
width: 300px;
43+
height: 400px;
44+
margin: 40px;
45+
background: #fff;
46+
border-radius: 20px;
47+
transform-style: preserve-3d;
48+
49+
}
50+
51+
.mainConatiner .boxWrapper::before{
52+
content: 'NIKE';
53+
position: absolute;
54+
top: 20px;
55+
left: 20px;
56+
font-size: 6em;
57+
font-weight: 900;
58+
color: aliceblue;
59+
font-style: italic;
60+
opacity: 0;
61+
transition: 0.5s;
62+
}
63+
64+
.mainConatiner .boxWrapper::after{
65+
content: 'SHOES';
66+
position: absolute;
67+
bottom: 20px;
68+
right: 20px;
69+
font-size: 4.7em;
70+
font-weight: 900;
71+
color: aliceblue;
72+
font-style: italic;
73+
opacity: 0;
74+
transition: 0.5s;
75+
}
76+
77+
.mainConatiner .boxWrapper:hover::before,
78+
.mainConatiner .boxWrapper:hover::after{
79+
opacity: 0.09;
80+
}
81+
82+
.mainConatiner .boxWrapper .name{
83+
position: absolute;
84+
top: 0;
85+
left: 0;
86+
text-align: center;
87+
color: aliceblue;
88+
width: 100%;
89+
transform-style: preserve-3d;
90+
transform: translate3d(0,0,75px);
91+
transition: 0.5s;
92+
font-size: 1.7em;
93+
font-weight: 800;
94+
opacity: 0;
95+
z-index: 10;
96+
97+
}
98+
99+
.mainConatiner .boxWrapper:hover .name{
100+
top: 40px;
101+
opacity: 1;
102+
}
103+
104+
.mainConatiner .boxWrapper .buy{
105+
position: absolute;
106+
bottom: 0;
107+
left: 50%;
108+
font-size: 1.4em;
109+
transform-style: preserve-3d;
110+
transform: translate3d(-50%,0,75px);
111+
color: aliceblue;
112+
background: #C1081B;
113+
padding: 10px 25px;
114+
border-radius: 30px;
115+
text-decoration: none;
116+
transition: 0.5s;
117+
opacity: 0;
118+
z-index: -10;
119+
120+
}
121+
122+
.mainConatiner .boxWrapper:hover .buy{
123+
bottom: 40px;
124+
opacity: 1;
125+
}
126+
127+
.mainConatiner .boxWrapper .productImg{
128+
129+
position: absolute;
130+
top: 50%;
131+
left: 50%;
132+
max-width: 320px;
133+
transition: 0.5s;
134+
z-index: 150;
135+
transition: 0.5s;
136+
transform-style: preserve-3d;
137+
transform: translate3d(-50%,-50%,0px) rotate(-15deg);
138+
}
139+
140+
.mainConatiner .boxWrapper:hover .productImg{
141+
transform: translate3d(-50%,-50%,100px) rotate(-15deg);
142+
}

‎Product_Display_Cards/Product_Card_01/code/vanilla-tilt.min.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)