-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathresponsive.html
More file actions
185 lines (184 loc) · 6.39 KB
/
responsive.html
File metadata and controls
185 lines (184 loc) · 6.39 KB
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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Website</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.food {
border: 2px dotted red;
border-radius: 10px;
padding: 15px;
}
.food img {
width: 75%;
}
@media screen and (max-width: 576px) {
.food {
background-color: aquamarine;
}
.container {
grid-template-columns: repeat(1, 1fr);
}
}
@media screen and (min-width: 577px) and (max-width: 992px) {
.container {
grid-template-columns: repeat(2, 1fr);
}
}
</style>
</head>
<body>
<div class="container">
<div class="food">
<img src="images/food.webp" alt="" />
<h2>item-1</h2>
<h4>prics:100</h4>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsa
deleniti cupiditate ullam eaque est nam, minima dolorem laborum eum
illum id odio illo, blanditiis doloremque fuga perferendis aperiam
sint? Maiores.
</p>
<button>Order Now</button>
</div>
<div class="food">
<img src="images/food.webp" alt="" />
<h2>item-2</h2>
<h4>prics:200</h4>
<p>
Praesentium quasi animi architecto asperiores suscipit ipsa quaerat
rerum cum obcaecati illum dolore iusto vero deserunt, error facere
aspernatur nam officia molestias ut pariatur doloribus! Sapiente rerum
a corporis suscipit!
</p>
<button>Order Now</button>
</div>
<div class="food">
<img src="images/food.webp" alt="" />
<h2>item-3</h2>
<h4>prics:300</h4>
<p>
Recusandae, tenetur vitae? Delectus, quae nihil. Iste ut illum maxime
earum aliquam, corrupti consequuntur necessitatibus fuga voluptates
sapiente! Modi nobis voluptatum est qui, laudantium aut. Aspernatur
perspiciatis possimus laboriosam alias.
</p>
<button>Order Now</button>
</div>
<div class="food">
<img src="images/food.webp" alt="" />
<h2>item-4</h2>
<h4>prics:400</h4>
<p>
Maxime, distinctio! Officia explicabo minima mollitia autem
repudiandae? Recusandae dolores nemo et officiis dolor magni deleniti
iste minima, sequi quaerat eveniet! Repellendus porro esse inventore
id recusandae hic. Excepturi, ducimus.
</p>
<button>Order Now</button>
</div>
<div class="food">
<img src="images/food.webp" alt="" />
<h2>item-5</h2>
<h4>prics:500</h4>
<p>
Magnam aliquid repellendus aut, ab earum, sunt repudiandae porro
accusantium eaque reprehenderit non rem labore neque nulla molestias
at unde modi! Ipsum deleniti voluptatum veritatis molestias blanditiis
neque vel voluptate?
</p>
<button>Order Now</button>
</div>
<div class="food">
<img src="images/food.webp" alt="" />
<h2>item-6</h2>
<h4>prics:600</h4>
<p>
Nisi error laboriosam esse doloremque velit perspiciatis accusantium
itaque quaerat dolore modi obcaecati distinctio possimus, quo
reprehenderit impedit rem facere aut quis? Non dicta voluptates
impedit odio aliquam fugit quas.
</p>
<button>Order Now</button>
</div>
<div class="food">
<img src="images/food.webp" alt="" />
<h2>item-7</h2>
<h4>prics:700</h4>
<p>
Obcaecati in voluptates aspernatur eveniet, sit tempora, cum quas
quisquam laboriosam porro aut animi tempore inventore explicabo. Sint
nemo molestiae, architecto labore voluptatem eaque! Sequi, excepturi.
Distinctio nulla expedita numquam.
</p>
<button>Order Now</button>
</div>
<div class="food">
<img src="images/food.webp" alt="" />
<h2>item-8</h2>
<h4>prics:800</h4>
<p>
Veniam esse distinctio qui pariatur voluptatum maiores, magni ut sint
possimus omnis sed soluta eveniet eius quaerat animi a reprehenderit
expedita maxime laudantium ipsum? Libero asperiores dolorem quasi
necessitatibus consequatur!
</p>
<button>Order Now</button>
</div>
<div class="food">
<img src="images/food.webp" alt="" />
<h2>item-9</h2>
<h4>prics:900</h4>
<p>
Provident consectetur dicta temporibus libero aut quidem doloremque
eligendi rem odit iure ut in iusto minima nostrum fugiat praesentium
vel voluptate, facilis architecto! Soluta debitis iusto esse,
architecto minima placeat!
</p>
<button>Order Now</button>
</div>
<div class="food">
<img src="images/food.webp" alt="" />
<h2>item-10</h2>
<h4>prics:1000</h4>
<p>
Quidem facere nihil sunt eaque nam dolores consequatur consectetur
tempora hic rem esse quam, modi sint aliquam exercitationem dicta
velit at, explicabo soluta, magni possimus recusandae veniam. Enim,
deserunt possimus.
</p>
<button>Order Now</button>
</div>
<div class="food">
<img src="images/food.webp" alt="" />
<h2>item-11</h2>
<h4>prics:1100</h4>
<p>
Cum vero accusantium iure eos repellendus minima molestias. Ea animi
voluptate veritatis inventore consequuntur aspernatur, error dolorem
numquam ullam facilis consectetur quam sit tenetur voluptatibus
necessitatibus impedit qui. Aperiam, ullam.
</p>
<button>Order Now</button>
</div>
<div class="food">
<img src="images/food.webp" alt="" />
<h2>item-12</h2>
<h4>prics:1200</h4>
<p>
Dolorem blanditiis facilis consequatur maxime, id eligendi deserunt
laboriosam minus molestiae iure suscipit tempore ab eos eius quis
officia asperiores autem laudantium. Recusandae sed cum autem quo
commodi laborum tempore!
</p>
<button>Order Now</button>
</div>
</div>
</body>
</html>