Skip to content

Commit 6a09e48

Browse files
kr-vikukr-viku
committed
Create module2 solution
create an index.html file in module 2 folder.
1 parent 90fa1ed commit 6a09e48

File tree

1 file changed

+170
-0
lines changed

1 file changed

+170
-0
lines changed

‎module2-solution/index.html‎

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>module2-solution</title>
7+
</head>
8+
<style>
9+
/*basic style*/
10+
* {
11+
box-sizing: border-box;
12+
}
13+
14+
body {
15+
background-color: white;
16+
}
17+
18+
h1 {
19+
margin: 100px;
20+
text-align: center;
21+
font-family: Helvetica;
22+
font-weight: bold;
23+
font-size: 175%;
24+
}
25+
26+
section {
27+
position: relative;
28+
padding: 15px;
29+
width: 100%;
30+
}
31+
32+
p {
33+
position: relative;
34+
clear: right;
35+
}
36+
37+
div {
38+
position: relative;
39+
background-color: gray;
40+
border: 1px solid black;
41+
width: 100%;
42+
margin-left: auto;
43+
margin-right: auto;
44+
margin-bottom: auto;
45+
}
46+
47+
.sub1 {
48+
float: right;
49+
width: 100px;
50+
padding: 5px;
51+
margin: 0px;
52+
border: 1px solid black;
53+
text-align: center;
54+
font-size: 125%;
55+
font-weight: bold;
56+
background-color: rgb(214, 124, 124);
57+
58+
}
59+
60+
.sub2 {
61+
float: right;
62+
color: white;
63+
width: 100px;
64+
padding: 5px;
65+
margin: 0px;
66+
border: 1px solid black;
67+
text-align: center;
68+
font-size: 125%;
69+
font-weight: bold;
70+
background-color: maroon;
71+
72+
}
73+
74+
.sub3 {
75+
color: black;
76+
float: right;
77+
width: 100px;
78+
padding: 5px;
79+
margin: 0px;
80+
border: 1px solid black;
81+
text-align: center;
82+
font-size: 125%;
83+
font-weight: bold;
84+
background-color: rgb(223, 212, 121);
85+
86+
}
87+
88+
.content {
89+
padding: 5px;
90+
border: none;
91+
background-color: gray;
92+
font-family: Helvetica;
93+
color: black;
94+
margin: 0px;
95+
height: 200px;
96+
overflow: auto;
97+
}
98+
99+
.row {
100+
width: 90%;
101+
}
102+
103+
/*desktop version*/
104+
@media (min-width: 992px) {
105+
.column-lg-4 {
106+
float: left;
107+
width: 33.33%;
108+
}
109+
}
110+
111+
/*tablet version*/
112+
@media (min-width: 768px) and (max-width: 991px) {
113+
.colmn-md-6 {
114+
float: left;
115+
width: 50%;
116+
margin-left: auto;
117+
margin-right: auto;
118+
}
119+
120+
.colmn-md-12 {
121+
float: left;
122+
width: 100%;
123+
margin-left: auto;
124+
margin-right: auto;
125+
}
126+
}
127+
128+
/*mobile version*/
129+
@media (max-width: 767px) {
130+
.colmn-sm-12 {
131+
float: left;
132+
width: 100%;
133+
}
134+
}
135+
</style>
136+
137+
<body>
138+
<h1>Our Menu</h1>
139+
<section class="column-lg-4 colmn-md-6 colmn-sm-12">
140+
<div>
141+
<p class="sub1">Chicken</p>
142+
<p class="content">
143+
Each section should have a section title region that is always positioned at the top right corner of the
144+
section no matter the view (desktop, tablet or mobile). Copy the titles from the mockup illustration
145+
(i.e., Chicken, Beef, Sushi) or come up with your own. (Hint: use relative and absolute positioning and
146+
offsets as discussed in Lecture 22.)
147+
</p>
148+
</div>
149+
</section>
150+
<section class="column-lg-4 colmn-md-6 colmn-sm-12">
151+
<div>
152+
<p class="sub2">Beef</p>
153+
<p class="content">In the tablet view (between 768px and 991px, inclusively), the first 2 sections should be
154+
in the first row and be of equal size. The 3rd section should be in the second row and take up the
155+
entire row by itself. For a visual reference of this view, see the tablet mockup illustration below.</p>
156+
</div>
157+
</section>
158+
<section class="column-lg-4 colmn-md-12 colmn-sm-12">
159+
<div>
160+
<p class="sub3">Sushi</p>
161+
<p class="content">Pay attention to the spacing shown in the mockup illustrations. Note the spacing between
162+
sections (both horizontal and vertical). Note the horizontal spacing between the edges of the section
163+
and the edges of the browser window. Also, note the spacing between the dummy text in each section and
164+
the edges of the section. Lastly, make sure the dummy text is "pushed down" enough so it doesn't overlap
165+
the section title region. (Hint: use margins and padding and use border-box as your box-sizing as
166+
discussed in Lecture 19.)</p>
167+
</div>
168+
</body>
169+
170+
</html>

0 commit comments

Comments
 (0)