Skip to content

Commit e1f0ec7

Browse files
Nidhikumari-4Nidhikumari-4
committed
Added Product Card
1 parent df42990 commit e1f0ec7

File tree

4 files changed

+161
-0
lines changed

4 files changed

+161
-0
lines changed

‎Product_Display_Cards/Product_Card_05/README.md

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Product Card
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">
5+
<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>
6+
<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>
7+
</p>
8+
9+
### Preview
10+
![product](https://user-images.githubusercontent.com/77065920/149333017-37928d5d-be44-4d0f-8996-6fa3c22a5f09.jpeg)

‎Product_Display_Cards/Product_Card_05/assets/bag.png

669 KB
Loading

‎Product_Display_Cards/Product_Card_05/code/index.html

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=
7+
, initial-scale=1.0">
8+
<title>HTML-CSS-product-card-design</title>
9+
<link rel="stylesheet" href="style.css">
10+
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
11+
</head>
12+
<body>
13+
<div class="container">
14+
<div class="card">
15+
<div class="badge">Hot</div>
16+
<img src="../assets/bag.png" alt="" class="bag">
17+
<div class="Product-details">
18+
<span class="Product-catagory">Women,bag</span>
19+
<h4><a href="">Women leather bag</a></h4>
20+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, possimus nostrum!</p>
21+
</div>
22+
<div class="Product-bottom-details">
23+
<div class="Product-price">
24+
<small>$96.00</small>$230.99</div>
25+
<div class="Product-links">
26+
<a href=""><i class="fas fa-heart"></i></a>
27+
<a href=""><i class="fas fa-shopping-cart"></i></a>
28+
</div>
29+
</div>
30+
</div>
31+
</div>
32+
</body>
33+
</html>

‎Product_Display_Cards/Product_Card_05/code/style.css

+118
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');
2+
*{
3+
padding: 0;
4+
margin: 0;
5+
box-sizing: border-box;
6+
}
7+
html,body
8+
{
9+
display: flex;
10+
justify-content:center;
11+
align-items: center;
12+
margin-top: 40px;
13+
font-family: 'Roboto', sans-serif;
14+
}
15+
.container{
16+
position: relative;
17+
display: flex;
18+
justify-content:center;
19+
align-items: center;
20+
width: 400px;
21+
height: 600px;
22+
background-color: #fdfdfd;
23+
}
24+
.card{
25+
position: relative;
26+
width: 380px;
27+
height: 580px;
28+
margin: 50px auto;
29+
background-color: #fafafa;
30+
box-shadow: 0 2px 7px #dfdfdf;;
31+
32+
}
33+
.badge {
34+
position: absolute;
35+
margin-top: 20px;
36+
text-transform: uppercase;
37+
font-size: 13px;
38+
font-weight: 700;
39+
background: red;
40+
color: #fff;
41+
padding: 3px 10px;
42+
}
43+
.bag{
44+
display: flex;
45+
align-items: center;
46+
justify-content: center;
47+
height: 340px;
48+
width: 380px;
49+
padding: 60px;
50+
background: #f0f0f0;
51+
}
52+
.Product-details{
53+
padding: 20px 40px;
54+
}
55+
.Product-catagory{
56+
display: block;
57+
color: #ccc;
58+
font-size: 13px;
59+
margin-bottom: 10px;
60+
font-weight: 700;
61+
text-transform: uppercase;
62+
}
63+
.Product-details h4{
64+
font-size: 20px;
65+
margin-bottom: 20px;
66+
}
67+
.Product-details h4 a{
68+
text-decoration: none;
69+
color: #363636;
70+
transition: 0.3s;
71+
}
72+
.Product-details h4 a:hover{
73+
color: #fbb72c;
74+
}
75+
.Product-details p{
76+
font-size: 16px;
77+
line-height: 22px;
78+
color: #999;
79+
}
80+
81+
.Product-bottom-details {
82+
padding: 20px;
83+
}
84+
.Product-bottom-details div{
85+
float: left;
86+
width: 50%;
87+
overflow: hidden;
88+
border-top: 1px solid #eee;
89+
padding-top: 10px;
90+
}
91+
92+
.Product-price{
93+
padding-left: 5px;
94+
font-size: 18px;
95+
color: #fbb72c;
96+
font-weight: 900;
97+
}
98+
.Product-price small{
99+
font-size: 80%;
100+
font-weight: 600;
101+
text-decoration: line-through;
102+
margin-right: 8px;
103+
}
104+
105+
.Product-links{
106+
text-align: right;
107+
}
108+
.Product-links a{
109+
display: inline-block;
110+
margin-left: 2px;
111+
color: #e1e1e1;
112+
transition: 0.3s;
113+
font-size: 20px;
114+
padding-right: 15px;
115+
}
116+
.Product-links a:hover{
117+
color: #fbb72c;
118+
}

0 commit comments

Comments
 (0)