Skip to content

Commit 0ae8da6

Browse files
the-code3rthe-code3r
committed
first commit
1 parent e09b781 commit 0ae8da6

4 files changed

Lines changed: 141 additions & 11 deletions

File tree

‎README.md‎

-32 Bytes
Binary file not shown.

‎baekr.html‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎css/style.css‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
* {
2+
box-sizing: border-box;
3+
font-family: Arial, sans-serif;
4+
margin: 0;
5+
padding: 0;
6+
}
7+
8+
body {
9+
padding: 20px;
10+
}
11+
12+
h1 {
13+
font-size: 175%;
14+
margin-bottom: 20px;
15+
text-align: center;
16+
}
17+
18+
.container {
19+
overflow: hidden;
20+
}
21+
22+
.section {
23+
position: relative;
24+
border: 1px solid black;
25+
padding: 40px 20px 20px 20px;
26+
margin-bottom: 20px;
27+
color: white;
28+
}
29+
30+
.section-title {
31+
position: absolute;
32+
top: 10px;
33+
right: 10px;
34+
border: 1px solid black;
35+
padding: 5px 10px;
36+
font-size: 125%;
37+
font-weight: bold;
38+
color: white;
39+
}
40+
41+
.chicken {
42+
background-color: #e67e22;
43+
}
44+
45+
.chicken .section-title {
46+
background-color: #d35400;
47+
}
48+
49+
.beef {
50+
background-color: #27ae60;
51+
}
52+
53+
.beef .section-title {
54+
background-color: #1e8449;
55+
}
56+
57+
.sushi {
58+
background-color: #2980b9;
59+
}
60+
61+
.sushi .section-title {
62+
background-color: #1c5980;
63+
}
64+
65+
p {
66+
font-size: 100%;
67+
line-height: 1.5;
68+
}
69+
70+
@media (min-width: 992px) {
71+
.section {
72+
float: left;
73+
width: 33.3333%;
74+
margin-right: 1.5%;
75+
}
76+
.section:last-child {
77+
margin-right: 0;
78+
}
79+
}
80+
81+
@media (min-width: 768px) and (max-width: 991px) {
82+
.chicken, .beef {
83+
float: left;
84+
width: 48%;
85+
margin-right: 4%;
86+
}
87+
.beef {
88+
margin-right: 0;
89+
}
90+
.sushi {
91+
float: none;
92+
width: 100%;
93+
margin-top: 20px;
94+
}
95+
}
96+
97+
@media (max-width: 767px) {
98+
.section {
99+
float: none;
100+
width: 100%;
101+
margin-bottom: 20px;
102+
}
103+
}

‎index.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>Responsive Design - Assignment 1</title>
7+
<link rel="stylesheet" href="css/style.css" />
8+
</head>
9+
<body>
10+
<div style="display: flex; justify-content: center; align-items: center; height: 100px;">
11+
<h1>Our Menu</h1>
12+
</div>
13+
14+
<div class="container">
15+
<section class="section chicken">
16+
<div class="section-title">Chicken</div>
17+
<p>
18+
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
19+
</p>
20+
</section>
21+
22+
<section class="section beef">
23+
<div class="section-title">Beef</div>
24+
<p>
25+
Lorem Ipsum is a placeholder text used in the printing and typesetting industry to show font style and size.
26+
</p>
27+
</section>
28+
29+
<section class="section sushi">
30+
<div class="section-title">Sushi</div>
31+
<p>
32+
Lorem Ipsum is used to fill spaces and estimate the page design before adding real content.
33+
</p>
34+
</section>
35+
</div>
36+
</body>
37+
</html>
38+

0 commit comments

Comments
 (0)