-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathassignment.html
195 lines (178 loc) · 4.62 KB
/
assignment.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
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
186
187
188
189
190
191
192
193
194
195
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Assignment</title>
<style>
/********** Base styles **********/
* {
box-sizing: border-box;
}
h1 {
margin-bottom: 15px;
text-align: center;
font-family: Courier New;
}
p {
border: 2px solid black;
background-color: grey;
width: 99.5%;
height: 150px;
padding: 10px;
margin: 1px 1px 1px 1px;
font-family: Georgia;
color: white;
overflow: scroll;
}
p.head {
border: 0px hidden;
background-color: blue;
height: 50px;
width: 100px;
margin: 10px;
font-family: Helvetica;
color: white;
text-align: center;
}
/* Simple Responsive Framework. */
.row {
width: 100%;
}
div.absolute{
position: absolute;
top: 0px;
right: 0px;
left: 77%;
bottom:78%;
width: 100px;
height: 30px;
text-align: center;
font-size: 18pt;
font-family: Georgia;
margin: 1px;
padding: 1px;
background-color: white;
border: 2px solid black;
}
div.relative {
position: relative;
margin-bottom: 0.5%;
}
div.one{
background-color: pink;
}
div.two{
background-color: #bd5b5b;
}
div.three{
background-color: orange;
}
/********** Large devices only **********/
@media (min-width: 1200px) {
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
float: left;
border: 1px solid black;
}
.col-lg-1 {
width: 8.33%;
}
.col-lg-2 {
width: 16.66%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-4 {
width: 32%;
margin-right: 0.5%;
}
.col-lg-5 {
width: 41.66%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-7 {
width: 58.33%;
}
.col-lg-8 {
width: 66.66%;
}
.col-lg-9 {
width: 74.99%;
}
.col-lg-10 {
width: 83.33%;
}
.col-lg-11 {
width: 91.66%;
}
.col-lg-12 {
width: 100%;
}
}
/********** Medium devices only **********/
@media (min-width: 992px) and (max-width: 1199px) {
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
border: 1px solid black;
grid-column-gap: 20px;
}
.col-md-1 {
width: 8.33%;
}
.col-md-2 {
width: 16.66%;
}
.col-md-3 {
width: 25%;
}
.col-md-4 {
width: 33.33%;
}
.col-md-5 {
width: 41.66%;
}
.col-md-6{
width: 49%;
margin-right: 0.5%;
margin-bottom: 0.5%;
}
.col-md-7 {
width: 58.33%;
}
.col-md-8 {
width: 66.66%;
}
.col-md-9 {
width: 74.99%;
}
.col-md-10 {
width: 83.33%;
}
.col-md-11 {
width: 91.66%;
}
.col-md-12 {
width: 100%;
}
}
</style>
</head>
<body>
<h1>Our Menu</h1>
<div class="row">
<div class="col-lg-4 col-md-6 relative"><p><br>The chicken (Gallus gallus domesticus) is a type of domesticated fowl, a subspecies of the red junglefowl. It is one of the most common and widespread domestic animals, with a total population of more than 19 billion as of 2011.[1] Humans commonly keep chickens as a source of food (consuming both their meat and eggs) and, more rarely, as pets.</p>
<div class="col-lg-4 col-md-6 absolute one">Chicken</div>
</div>
<div class="col-lg-4 col-md-6 relative"><p><br>eef is the culinary name for meat from cattle, particularly skeletal muscle. Humans have been eating beef since prehistoric times.[1] Beef is a source of high-quality protein and essential nutrients.Beef skeletal muscle meat can be cut into roasts, short ribs or steak (filet mignon, sirloin steak, rump steak, rib steak, rib eye steak, hanger steak, etc.). Some cuts are processed (corned beef or beef jerky), and trimmings, usually mixed with meat from older, leaner cattle, are ground, minced or used in sausages. The blood is used in some varieties of blood sausage.</p>
<div class="col-lg-4 col-md-6 absolute two">Beef</div>
</div>
</div>
<div class="col-lg-4 col-md-12 relative"><p><br>Sushi (すし, 寿司, 鮨) is a Japanese dish of specially prepared vinegared rice (鮨飯 sushi-meshi), usually with some sugar and salt, combined with a variety of ingredients (ネタ neta), such as seafood (most commonly and often raw), vegetables, and occasionally tropical fruits. Styles of sushi and its presentation vary widely, but the key ingredient is "sushi rice", also referred to as shari (しゃり), or sumeshi (酢飯). The term sushi is no longer used in its original context and literally means "sour-tasting"</p>
<div class="col-lg-4 col-md-6 absolute three">Sushi</div>
</div>
</div>
</div>
</body></html>