-
Notifications
You must be signed in to change notification settings - Fork 0
/
responsible.html
82 lines (78 loc) · 5.22 KB
/
responsible.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
<!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</title>
<style>
.menu-container{
display: flex;
/* last one as per video */
flex-wrap: wrap;
}
.food{
border: 3px solid rosybrown;
width: 300px;
margin: 10px;
}
.food img{
width: 75%;
}
/* @media (max-width:700px) {
.food{
background-color: orange;
}
}
@media (min-width:900px) {
.food{
background-color: red;
}
} */
</style>
</head>
<body>
<div class="menu-container">
<div class="food">
<img src="./image/image1.jpeg" alt="">
<h2>price:100</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, dolorum consectetur? Laboriosam officia esse delectus consectetur. Nihil magni laudantium natus illum aut est molestias dolorem possimus praesentium temporibus voluptate earum velit, iure eligendi non sequi laboriosam impedit sint veniam dolorum quas, vel maxime. Numquam beatae facilis aliquam nemo non quo.<br><button>order now</button></p>
</div>
<div class="food">
<img src="./image/image1.jpeg" alt="">
<h2>price:101</h2>
<p>Voluptate itaque sint quidem facilis at possimus? Illo placeat quis praesentium consectetur natus ipsa corrupti laudantium et odit. Excepturi, minus in nobis distinctio quaerat debitis odit? Quos earum, pariatur, non sint laborum quod perferendis, facilis consectetur blanditiis iure reiciendis nisi magni rem sit veniam modi. Ullam repellat veritatis dolorum mollitia.<br><button>order now</button></p>
</div>
<div class="food">
<img src="./image/image1.jpeg" alt="">
<h2>price:102</h2>
<p>Consequuntur minus possimus mollitia, voluptatum rerum rem reprehenderit harum veritatis cupiditate quae voluptatem iste blanditiis nisi, neque deleniti non necessitatibus ab, fuga recusandae sapiente aperiam facilis cum impedit provident. Explicabo eveniet maiores dolorum quidem dignissimos sunt amet eum laboriosam ut consequuntur sed, fugit ipsum quis delectus, excepturi eius cum quae?<br><button>order now</button></p>
</div>
<div class="food">
<img src="./image/image1.jpeg" alt="">
<h2>price:103</h2>
<p>Eveniet quibusdam tenetur sapiente earum dicta adipisci debitis? Repellat vel laboriosam dolores voluptas consequatur velit quasi ullam dolorem in ratione non maxime voluptates facere ea doloremque, optio pariatur, illo nesciunt? Maxime est repellat exercitationem neque aspernatur? Consectetur provident tenetur vero aperiam impedit exercitationem odit enim, sint ab amet quis deserunt!<br><button>order now</button></p>
</div>
<div class="food">
<img src="./image/image1.jpeg" alt="">
<h2>price:104</h2>
<p>Amet omnis deleniti eos voluptatem magni itaque quasi? Delectus quo voluptas, dolorum ut laudantium nostrum incidunt est eveniet ad quaerat vero dolore inventore laboriosam harum quasi molestiae optio quae aliquid exercitationem unde ipsum tempora necessitatibus aspernatur commodi. Omnis molestias harum quis quaerat dignissimos ipsam tempore at sint, quia deleniti labore.<br><button>order now</button></p>
</div>
<div class="food">
<img src="./image/image1.jpeg" alt="">
<h2>price:105</h2>
<p>Amet reiciendis, ducimus tempora necessitatibus et, vel quos rem ipsum voluptatem laborum facere hic non neque eligendi accusamus architecto adipisci. Suscipit provident, laboriosam nesciunt eius at commodi, aspernatur adipisci dicta laudantium, exercitationem architecto eveniet unde asperiores sit itaque libero labore nam facilis repellendus nemo obcaecati! Eum ex veniam aperiam illum!<br><button>order now</button></p>
</div>
<div class="food">
<img src="./image/image1.jpeg" alt="">
<h2>price:106</h2>
<p>Soluta nisi libero delectus laborum repellendus aperiam ut odio similique earum a, ducimus sunt commodi ad aspernatur unde culpa. Voluptatum rerum atque quae fuga deleniti nisi aspernatur id cumque quo reprehenderit corporis recusandae animi ipsam veniam, nesciunt repellat ipsum, numquam sunt minima quam rem iusto, expedita sapiente? Magni, vel quae?<br><button>order now</button></p>
</div>
<div class="food">
<img src="./image/image1.jpeg" alt="">
<h2>price:107</h2>
<p>Nemo sed, expedita asperiores obcaecati fugiat nesciunt animi labore voluptatem excepturi cupiditate vero laboriosam quod possimus consequatur molestias autem? Illum ipsam, sunt nesciunt quod quis ullam pariatur error reprehenderit quidem quam repudiandae officiis omnis unde nulla consequuntur fugit reiciendis. Enim necessitatibus ratione accusantium magnam nisi. Doloremque repudiandae voluptatum eaque libero.<br><button>order now</button></p>
</div>
</div>
</body>
</html>