Skip to content

Commit d17938a

Browse files
GitHer-JayGitHer-Jay
committed
Add files via upload
1 parent dab7c05 commit d17938a

File tree

2 files changed

+131
-0
lines changed

2 files changed

+131
-0
lines changed

‎Assignments/module-2/index.html

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
5+
<title>Responsive Layout</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" type="text/css" href="style.css">
8+
9+
</head>
10+
<body>
11+
<h1>Our Menu</h1>
12+
13+
<div class="box">
14+
<p class="content-name name1">Chicken</p>
15+
<p class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
16+
</div>
17+
18+
<div class="box">
19+
<p class="content-name name2">Beef</p>
20+
<p class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
21+
</div>
22+
23+
<div class="box">
24+
<p class="content-name name3">Sushi</p>
25+
<p class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
26+
</div>
27+
28+
</body>
29+
</html>

‎Assignments/module-2/style.css

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
*{
2+
box-sizing: border-box;
3+
}
4+
5+
body{
6+
margin: 0;
7+
padding: 0;
8+
font-family: "Comic Sans MS", cursive, sans-serif;
9+
}
10+
11+
.row{
12+
margin-top: 5%;
13+
margin-bottom: 5%;
14+
}
15+
16+
h1 {
17+
margin-bottom: 15px;
18+
text-align: center;
19+
color: #ff4532;
20+
font-size: 50px;
21+
}
22+
23+
24+
.box{
25+
width: 100%;
26+
overflow: none;
27+
}
28+
29+
30+
.content-name{
31+
overflow: none;
32+
text-align: center;
33+
border: 4px solid black;
34+
width: 100px;
35+
height: 40px;
36+
padding: 5px;
37+
float: right;
38+
margin-right: 36px;
39+
margin-top: 0px;
40+
font-weight: bold;
41+
position: relative;
42+
}
43+
44+
.content{
45+
border: 5px solid black;
46+
width: 90%;
47+
height: auto;
48+
margin: 2.5%;
49+
color: black
50+
font-size: 25px;
51+
padding: 2%;
52+
padding-top: 55px;
53+
background-color: rgba(0,0,0,0.3);
54+
}
55+
56+
.name1{
57+
background-color: #FFB6C1;
58+
}
59+
60+
.name2{
61+
color: white;
62+
background-color: #FF0000;
63+
}
64+
.name3{
65+
background-color: #FFFF00;
66+
}
67+
68+
69+
/********** Large devices only **********/
70+
@media (min-width: 992px) {
71+
.col-lg-4 {
72+
float: left;
73+
width: 33.33%;
74+
}
75+
}
76+
/********** Medium devices only **********/
77+
@media (min-width: 768px) and (max-width: 991px) {
78+
.col-md-6,.col-md-12 {
79+
float: left;
80+
}
81+
.col-md-6 {
82+
width: 50%;
83+
}
84+
.col-md-12 {
85+
margin-left: -10px;
86+
width: 100%;
87+
}
88+
.name3{
89+
margin-right: 65px;
90+
width: 100px;
91+
}
92+
}
93+
94+
@media (min-width: 0px) and (max-width: 767px) {
95+
.col-sm-12 {
96+
float: left;
97+
width: 100%;
98+
}
99+
.content-name{
100+
margin-right: 30px;
101+
}
102+
}

0 commit comments

Comments
 (0)