SGA0.2/Project3.html at master · Edebo/SGA0.2 · GitHub

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
<!DOCTYPE html>
<head>
<script src="/assets/jquery.js"></script>
<link href='https://fonts.googleapis.com/css?family=Londrina+Shadow' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<style>

body {
  font-family: helvetica, sans-serif;
  margin: 0 auto;
  max-width: 600px;
  background: #602040;
}
div {
  height: 200px;
  background-size: cover;
  position: relative;
  margin: 40px 0 0 0;
  border-radius: 12px;
}
h1 {
  font-family: 'Londrina Shadow', cursive;
  text-align: center;
  font-size: 75px;
  color: #aaaaaa;
  margin: 60px 0 0 0;
}
h2 {
  text-align: center;
  color: #bbbbbb;
  margin: 0px 0 70px 0;
  font-family: 'Lobster', cursive;
}
p {
  color: rgba(255,255,255,1);
  background: black;
  background: linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
  background: -webkit-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
  background: -moz-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
  padding: 10px;
  line-height: 28px;
  text-align: justify;
  position: absolute;
  bottom: 0;
  margin: 0;
  height: 20px;
  transition: height .5s;
  -webkit-transition: height .5s;
  -moz-transition: height .5s;
}

small {
  opacity: 0;
}

.show-description p {
  height: 150px;
}

.show-description small {
  opacity: 1;
}

.iyan{
  background-image: url("https://i.imgur.com/vCNYxkY.jpg");
}
.amala{
  background-image: url("https://i.imgur.com/t01jvtj.jpg");
}
.eba{
  background-image: url("https://i.imgur.com/DJjaLms.jpg");
}
.price {
  float: right;
}
@media (max-width: 500px) {
  h1 {
    font-size: 50px;
    margin-top: 20px;
    line-height: 40px;

  }
  h2 {
    font-size: 20px;
    margin: 20px 0 30px 0;
  }
  div {
    margin: 20px 12px 0 12px;
  }
  p {
    font-size: 15px;
    line-height: 24px;
  }
  small {
    font-size: 16px;
  }
}

</style>

</head>

<body>
<h1>MAMA BOLA FOODS</h1>
<h2>We delivery your meal in lagos</h2>
<div class="iyan ">
  <p>POUNDED YAM(IYAN) <span class="price">N 1000</span><br />
  <small>Pounded yam is a unique Yoruba meal in Nigeria. It is a delicacy prominent to the south-western part of Nigeria. Iyan , as it is called by natives, has its root among the people of Ekiti state in south western Nigeria.It could be complemented with any soup of one’s choice or delight depending on taste. Among the favourite soup include but not limited to Egusi, Ewedu, Efo-riro among Yorubas, Okro, Afang, Ogbono among the Igbos, and groundnut soup among Ghanaians.we deliver a plate with any soup for the price </small></p>
</div>

<div class="amala ">
  <p>AMALA <span class="price">N 1000</span><br />
  <small>This most common type of àmàlà is derived from yam. Yam, the common name for species in the genus Dioscorea, grows in Africa, Asia, the Caribbean, Oceania, and Latin America, but 95% of it is cultivated and harvested in West Africa. Yam can be barbecued, roasted, fried, grilled, boiled, smoked, and grated. Àmàlà isu is made of dried yam; this gives it a black/brownish colour when added to boiling water. Amala is high in carbohydrates and packs a lot of calories.</small></p>
</div>

<div class="eba ">
  <p>EBA <span class="price">1000</span><br />
  <small>Ẹbà can either come as yellow or an offshade of white. The yellow garri is often eaten by the Igbo tribe of Nigeria. It is made from mixing dried grated cassava with palmoil. Gari is very rich in starch and carbohydrate. It is quite heavy as a meal and a staple food of the western Nigerians. It is often eaten with richly made soups and stews, with beef, stockfish or mutton depending on personal taste</small></p>
</div>

<script>
  $('div').on('click', function() {
      $(this).toggleClass('show-description');
  });
</script>

</body>