-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathshop.html
137 lines (124 loc) · 4.03 KB
/
shop.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Shop</title>
</head>
<style>
body {
background-image: url('https://tse1.mm.bing.net/th?id=OIP.Si2yClNE_p1VWSLi1kEeAQHaE8&pid=Api&P=0&h=180');
background-repeat:no-repeat;
background-size:cover;
}
body {margin:0;}
.navigationbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navigationbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navigationbar a:hover {
background: #ddd;
color: black;
}
.heading {
font-size: 25px;
font-family: walterturncoat;
}
.mainblock {
text-align: left;
padding-left: 10px;
padding-right: 10px;
background: #f2f2f2;
opacity: 1;
}
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
color:peru;
}
td {
border: 1px solid #ddd;
padding: 15px;
text-align: center;
vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
}
.image-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
img {
width: 60%;
height: auto;
margin-bottom: 10px;
}
.label-box {
padding: 5px 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
</style>
<body>
<div class="navigationbar" style="text-align:center; position: absolute;">
<a href="Assignment02.html" target="_self"><label>Back</label></a>
</div>
<br>
<br>
<div class="mainblock">
<h1 class="heading" style="text-align: center; font-size: 30px;">Shop</h1>
</div>
<table>
<tr>
<td>
<div class="image-container">
<img src="https://www.borneoescapade.com/wp-content/uploads/2016/09/secret-recipe-logo-vector-720x340-672x340.png" alt="Secret Recipe">
<br>
<div class="label-box">Chef dhruv's Secret Sauce</div>
<br>
<span style="color: mediumslateblue;">For all you know, it could be a 1 dollar ketchup bottle. You really want to gamble?</span>
<br>
<span style="color:crimson;">Price: $1,000,000</span>
</div>
</td>
<td>
<div class="image-container">
<img src="https://res.cloudinary.com/teepublic/image/private/s--yczCfOeq--/t_Preview/b_rgb:ffffff,c_limit,f_jpg,h_630,q_90,w_630/v1446236083/production/designs/254764_1.jpg" alt="dhruv's Fried Chicken">
<div class="label-box">JFC</div>
<br>
<span style="color: mediumslateblue;">This bucket of dhruv's Fried Chicken includes 3 pc. Chicken Wings, 3 pc. Chicken Popcorn and 3 pc. Peri Peri Smoked BBQ Chicken Fingers.</span>
<br>
<span style="color:crimson;">Price: $29.99</span>
</div>
</td>
<td>
<div class="image-container">
<img src="http://www.organizedmom.net/wp-content/uploads/2018/02/waffles1.jpg" alt="dhruv's Kitchen WaffleMaker">
<br>
<div class="label-box">dhruv's Kitchen's Waffle Maker</div>
<br>
<span style="color: mediumslateblue;">Handcrafted in collaboration with Sony, this highly advanced waffle maker can let you cook waffles to your own liking! Just say "Hey Waffle", and tell it how you want your waffles - crispy, soft, warm, hot, red velvet flavoured etc. And in just a matter of seconds, your waffles would be cooked!</span>
<br>
<span style="color:crimson;">Price: $9999.99</span>
</div>
</td>
</tr>
</table>
</body>
</html>