html_css_JavaScript_projects/module2.html at master · Akshaya2012/html_css_JavaScript_projects · 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
<!DOCTYPE html>
<html>
<head>
<title>Assignment Solution for Module 2</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
    <style>
        * {
  box-sizing: border-box;
}

body{
	margin: 0;
	padding: 0;
  font-family: "Comic Sans MS", cursive, sans-serif;
}
h1 {
  margin-bottom: 15px;
  text-align: center;
  color: #000000;
  font-size: 50px;
}
.box{
  width: 100%;
  overflow: none;
}


.content-name{
  overflow: none;
  text-align: center;
  border: 4px solid black;
  width: 100px;
  height: 40px;
  padding: 5px;
  float: right;
  margin-right: 36px;
  margin-top: 0px;
  font-weight: bold;
  position: relative;
}

.content
{
  border: 5px solid black;
  width: 90%;
  height: auto;
  margin: 2.5%;
  color: black;
  padding: 2%;
  padding-top: 55px;
  background-color: rgba(0,0,0,0.3);
}

.name1{
  background-color: #FFB6C1;
}

.name2{
  color: white;
  background-color: #FF0000;
}
.name3{
  background-color: #FFFF00;
}


/********** Large devices only **********/
@media (min-width: 992px) {
  .col-lg-4 {
  	float: left;
    width: 33.33%;
  }
}
/********** Medium devices only **********/
@media (min-width: 768px) and (max-width: 991px) {
  .col-md-6,.col-md-12 {
    float: left;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-12 {
    margin-left: -10px;
    width: 100%;
  }
  .name3{
    margin-right: 65px;
    width: 100px;
  }
}

@media (min-width: 0px) and (max-width: 767px) {
  .col-sm-12 {
  	float: left;
    width: 100%;
  }
  .content-name{
    margin-right: 30px;
  }
}
    </style>
<body>
<h1>Our menu</h1>
    <div class="col-lg-4 col-md-6 col-sm-12">
        <div class="box">
  		    <p class="content-name name1">Chicken</p>
  		    <p class="content">One can eat chicken on a daily basis; however, it is good to use cooking methods like boiling, grilling, roasting or baking rather than frying as it can lead to various health problems. People with kidney problems, chronic heart disease and dyslipidemia should avoid its intake."'</p>
  	    </div>
    </div>
    <div class="col-lg-4 col-md-6 col-sm-12">
  	    <div class="box">
   		    <p class="content-name name2">Beef</p>
   		    <p class="content">Beef is one of the most popular types of meat. It's exceptionally rich in high-quality protein, vitamins, and minerals. Therefore, it may improve muscle growth and maintenance, as well as exercise performance. As a rich source of iron, it may also cut your risk of anemia.</p>
  	    </div>
    </div>
    <div class="col-lg-4 col-md-12 col-sm-12">
  	    <div class="box">
  		    <p class="content-name name3">Sushi</p>
  		    <p class="content">Sushi is a Japanese dish of prepared vinegared rice, usually with some sugar and salt, accompanying a variety of ingredients, such as seafood, often raw, and vegetables. Styles of sushi and its presentation vary widely, but the one key ingredient is "sushi rice"</p>
  	    </div>
    </div>
</body>
</html>