-
Notifications
You must be signed in to change notification settings - Fork 0
/
product_page.html
109 lines (108 loc) · 4.14 KB
/
product_page.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<html>
<head>
<title>Product Page</title>
<style>
.main{
/* display: flex; */
/* flex-wrap: wrap; */
overflow: hidden;
}
.card{
height: 40%;
width: 20%;
border: 1px solid saddlebrown;
border-radius: 5%;
padding: 0.5%;
text-align: center;
margin: 0.5%;
float: left;
}
.ctitle{
font-weight: bold;
font-size: 30px;
}
.price{
margin-bottom: 2.5%;
}
a{
color: black;
text-decoration: none;
padding: 2%;
/* margin-top: 4%; */
background-color: gray;
color: white;
border-radius: 15px;
}
</style>
</head>
<body>
<div class="main">
<div class="card">
<img src="media/icon.png" width="100%" height="60%" alt="" />
<div class="ctitle">Title</div>
<div class="cdesc">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quas,
repellat.
</div>
<div class="price">999/- <del>1999/-</del></div>
<a href="">Buy Now</a>
</div>
<div class="card">
<img src="media/icon.png" width="100%" height="60%" alt="" />
<div class="ctitle">Title</div>
<div class="cdesc">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quas,
repellat.
</div>
<div class="price">999/- <del>1999/-</del></div>
<a href="">Buy Now</a>
</div><div class="card">
<img src="media/icon.png" width="100%" height="60%" alt="" />
<div class="ctitle">Title</div>
<div class="cdesc">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quas,
repellat.
</div>
<div class="price">999/- <del>1999/-</del></div>
<a href="">Buy Now</a>
</div><div class="card">
<img src="media/icon.png" width="100%" height="60%" alt="" />
<div class="ctitle">Title</div>
<div class="cdesc">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quas,
repellat.
</div>
<div class="price">999/- <del>1999/-</del></div>
<a href="">Buy Now</a>
</div><div class="card">
<img src="media/icon.png" width="100%" height="60%" alt="" />
<div class="ctitle">Title</div>
<div class="cdesc">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quas,
repellat.
</div>
<div class="price">999/- <del>1999/-</del></div>
<a href="">Buy Now</a>
</div><div class="card">
<img src="media/icon.png" width="100%" height="60%" alt="" />
<div class="ctitle">Title</div>
<div class="cdesc">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quas,
repellat.
</div>
<div class="price">999/- <del>1999/-</del></div>
<a href="">Buy Now</a>
</div><div class="card">
<img src="media/icon.png" width="100%" height="60%" alt="" />
<div class="ctitle">Title</div>
<div class="cdesc">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quas,
repellat.
</div>
<div class="price">999/- <del>1999/-</del></div>
<a href="">Buy Now</a>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus delectus vitae nihil? Aliquam voluptate repellat expedita, voluptas quibusdam, quas pariatur vitae deserunt provident blanditiis est minus rerum quidem, inventore laudantium illo perspiciatis autem ullam. Tempore officiis commodi a culpa praesentium tempora molestias quaerat nihil? Quod exercitationem eius nostrum ea blanditiis hic error quia magnam doloremque fuga nam quae modi debitis impedit earum tempore, velit aspernatur adipisci totam quisquam porro! Qui voluptatem quia quis commodi esse rerum ullam libero culpa nam inventore ab magnam, maxime, temporibus quae ad similique quo quisquam adipisci laudantium, optio consectetur dolores. Magnam exercitationem voluptatum nisi molestias!</p>
</body>
</html>