Skip to content

Commit 379e858

Browse files
thepranayguptathepranaygupta
authored
Merge pull request Dezenix#63 from DGreat49251/ProductCard
Code added for issue Dezenix#59 by Dipak Ghosh
2 parents 1d0d6a3 + 8f1953b commit 379e858

File tree

8 files changed

+291
-0
lines changed

8 files changed

+291
-0
lines changed

‎Product_Display_Cards/Product_Card_03/assets/css/index.css

+225
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,225 @@
1+
.body {
2+
font-size: 14px;
3+
font-family: 'Maven Pro', sans-serif;
4+
height: 100%;
5+
color: #aaa;
6+
background: #fff;
7+
}
8+
9+
.body,
10+
.body::after,
11+
.body::before {
12+
box-sizing: border-box;
13+
}
14+
15+
.main {
16+
max-width: 500px;
17+
margin: 20px auto;
18+
position: relative;
19+
}
20+
21+
.product {
22+
background-color: #fff;
23+
max-width: 300px;
24+
position: relative;
25+
z-index: 15;
26+
margin: 0 auto;
27+
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
28+
}
29+
30+
.product-img {
31+
max-width: 100%;
32+
}
33+
34+
.fig {
35+
margin: 0;
36+
line-height: 0;
37+
}
38+
39+
.product .product-description {
40+
position: relative;
41+
z-index: 15;
42+
background: #fff;
43+
display: flex;
44+
}
45+
46+
.product .product-description,
47+
.main {
48+
zoom: 1;
49+
}
50+
51+
.product .product-description::after,
52+
.main::after {
53+
content: "";
54+
display: table;
55+
clear: both;
56+
}
57+
58+
.product .product-description .info {
59+
padding: 15px;
60+
color: #aaa;
61+
font-size: 0.85rem;
62+
width: 75%;
63+
float: left;
64+
65+
}
66+
67+
.product .product-description .info p {
68+
margin: 0 0 15px;
69+
line-height: 1.3em;
70+
}
71+
72+
.product .product-sidebar .colors span a {
73+
text-decoration: none;
74+
}
75+
76+
.product .product-description .info h1 {
77+
font-weight: 300;
78+
color: #31353d;
79+
margin: 0 0 5px;
80+
font-size: 20px;
81+
}
82+
83+
.product .product-description .price {
84+
width: 25%;
85+
float: left;
86+
color: #9bb6aa;
87+
font-size: 3.5em;
88+
position: relative;
89+
margin-top: 25px;
90+
}
91+
92+
.product .product-description .price::before {
93+
content: "$";
94+
font-size: 0.35em;
95+
position: absolute;
96+
top: 0;
97+
left: -10px;
98+
}
99+
100+
.product .product-sidebar {
101+
height: 100%;
102+
background-color: #31353d;
103+
width: 50px;
104+
position: absolute;
105+
top: 0;
106+
right: 0;
107+
z-index: -1;
108+
transition: right 0.3s ease;
109+
border-radius: 0 2px 2px 0;
110+
}
111+
112+
.product .product-sidebar button {
113+
border: 0;
114+
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
115+
color: #fff;
116+
font-size: 0.8em;
117+
padding: 0.9em;
118+
width: 50px;
119+
height: 50px;
120+
overflow: hidden;
121+
transition: all 0.4s ease;
122+
}
123+
124+
.product .product-sidebar .buy {
125+
background: transparent url(../img/buy.png) no-repeat 15px;
126+
}
127+
128+
.product .product-sidebar .info {
129+
background: transparent url(../img/info.png) no-repeat 15px;
130+
}
131+
132+
.product .product-sidebar .size {
133+
background: transparent url(../img/sizes.png) no-repeat 15px;
134+
}
135+
136+
.product .product-sidebar .colors {
137+
background: transparent url(../img/colors.png) no-repeat 15px;
138+
}
139+
140+
.product .product-sidebar .colors span {
141+
margin-left: 40px;
142+
}
143+
144+
.product .product-sidebar .colors:hover {
145+
width: 130px;
146+
}
147+
148+
.product .product-sidebar .colors .color {
149+
padding: 10px;
150+
display: inline-block;
151+
vertical-align: middle;
152+
margin: 0;
153+
filter: alpha(opacity=70);
154+
opacity: 0.7;
155+
transition: all 0.3s ease;
156+
}
157+
158+
.product .product-sidebar .colors .black {
159+
background-color: #000;
160+
border-bottom: 2px solid #555;
161+
}
162+
163+
.product .product-sidebar .colors .white {
164+
background-color: #fff;
165+
border-bottom: 2px solid #e5e5e5;
166+
}
167+
168+
.product .product-sidebar .colors .red {
169+
background-color: #ea1535;
170+
border-bottom: 2px solid #ea566d;
171+
}
172+
173+
.product .product-sidebar .colors .color:hover {
174+
filter: alpha(opacity=100);
175+
opacity: 1;
176+
transform: scsle(1.1);
177+
}
178+
179+
.product .product-sidebar button span {
180+
filter: alpha(opacity=0);
181+
opacity: 0;
182+
white-space: nowrap;
183+
margin-left: 30px;
184+
}
185+
186+
.product .product-sidebar button:hover {
187+
width: 130px;
188+
background-color: #9bb6aa;
189+
position: relative;
190+
background-position: 15px center;
191+
border-color: #9bb6aa;
192+
}
193+
194+
.product .product-sidebar button:hover span {
195+
filter: alpha(opacity=100);
196+
opacity: 1;
197+
transform: scale(1);
198+
}
199+
200+
.product:hover .product-sidebar {
201+
right: -50px;
202+
}
203+
204+
@media screen and (max-width: 480px) {
205+
.product .product-sidebar {
206+
width: 100%;
207+
height: 50px;
208+
position: relative;
209+
bottom: 0;
210+
left: 0;
211+
top: inherit;
212+
border-radius: 0 0 2px 2px;
213+
transition: bottom 0.3s ease;
214+
}
215+
216+
.product:hover .product-sidebar {
217+
bottom: -50px;
218+
}
219+
}
220+
221+
@media screen and (max-width: 360px) {
222+
.product .product-sidebar {
223+
bottom: -50px;
224+
}
225+
}

‎Product_Display_Cards/Product_Card_03/assets/img/buy.png

1.28 KB
Loading

‎Product_Display_Cards/Product_Card_03/assets/img/colors.png

1.27 KB
Loading

‎Product_Display_Cards/Product_Card_03/assets/img/info.png

1.15 KB
Loading

‎Product_Display_Cards/Product_Card_03/assets/img/prod.png

87.3 KB
Loading

‎Product_Display_Cards/Product_Card_03/assets/img/sizes.png

1.31 KB
Loading

‎Product_Display_Cards/Product_Card_03/index.html

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Product Card by Dipak Ghosh</title>
9+
<link rel="preconnect" href="https://fonts.googleapis.com">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link href="https://fonts.googleapis.com/css2?family=Maven+Pro&display=swap" rel="stylesheet">
12+
<link rel="stylesheet" href="assets/css/index.css">
13+
</head>
14+
15+
<body class="body">
16+
<div class="main">
17+
<div class="product">
18+
<figure class="fig">
19+
<img src="assets/img/prod.png" alt="Product Image" class="product-img">
20+
</figure>
21+
<div class="product-description">
22+
<div class="info">
23+
<h1>PRODUCT NAME</h1>
24+
<p>
25+
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
26+
</p>
27+
</div>
28+
<div class="price">
29+
89
30+
</div>
31+
</div>
32+
33+
<div class="product-sidebar">
34+
<button class="buy">
35+
<span>BUY ITEM</span>
36+
</button>
37+
38+
<button class="info">
39+
<span>MORE INFO</span>
40+
</button>
41+
42+
<button class="size">
43+
<span>SIZES</span>
44+
</button>
45+
46+
<button class="colors">
47+
<span>
48+
<a href="" class="color black"></a>
49+
<a href="" class="color white"></a>
50+
<a href="" class="color red"></a>
51+
</span>
52+
</button>
53+
</div>
54+
</div>
55+
</div>
56+
</body>
57+
58+
</html>

‎Product_Display_Cards/Product_Card_03/preview.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
## CSS - Product Card Design by Dipak Ghosh
2+
3+
<h3> Tech Stack Used <img src = "https://media2.giphy.com/media/QssGEmpkyEOhBCb7e1/giphy.gif?cid=ecf05e47a0n3gi1bfqntqmob8g9aid1oyj2wr3ds3mg700bl&rid=giphy.gif" width = 32px> </h3>
4+
<p align="left"> <a href="https://www.w3.org/html/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original-wordmark.svg" alt="html5" width="40" height="40"/> </a> <a href="https://www.w3schools.com/css/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original-wordmark.svg" alt="css3" width="40" height="40"/> </a> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg" alt="javascript" width="40" height="40"/> </a> </p>
5+
6+
### Preview
7+
8+
<video src="https://github.com/Dezenix/frontend-html-css-js/blob/main/Product_Display_Cards/Product_Card_03/147500533-2e357d1e-ed84-426e-850a-f3c55ceae73d.mp4"/>

0 commit comments

Comments
 (0)