Skip to content

Commit 48e5563

Browse files
ejimenezbejimenezb
committed
Proyecto listo
1 parent a3fd711 commit 48e5563

File tree

2 files changed

+215
-43
lines changed

2 files changed

+215
-43
lines changed

‎module2-solution/CSS/styles.css

Lines changed: 156 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,208 @@
1-
/********** Large devices only **********/
2-
@media (min-width: 1200px) {
3-
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
1+
#head {
2+
padding: 10px;
3+
/* border: 1px solid black; */
4+
margin-top: 30px;
5+
display: flex;
6+
justify-content: center;
7+
align-items: center;
8+
9+
}
10+
11+
div#container {
12+
/* background-color: #00FFFF; */
13+
position: relative;
14+
top: 0px;
15+
}
16+
17+
div#container3 {
18+
/* background-color: #00FFFF; */
19+
position: relative;
20+
top: 0px;
21+
}
22+
23+
#Interno{
24+
position: relative;
25+
margin: 5%;
26+
border: 3px solid black;
27+
background-color: darkgrey;
28+
}
29+
30+
31+
#t1{
32+
color: black;
33+
font-family: Arial, Helvetica, sans-serif;
34+
/* font-size: 12px; */
35+
background-color: darksalmon;
36+
font-weight: bold;
37+
38+
position: absolute;
39+
top:0;
40+
right:0;
41+
height: 30px;
42+
width: 120px;
43+
border: 2px solid black;
44+
border-right: 0px;
45+
border-top: 0px;
46+
float: right;
47+
display: flex;
48+
justify-content: center;
49+
align-items: center;
50+
}
51+
52+
#t2{
53+
color: white;
54+
font-family: Arial, Helvetica, sans-serif;
55+
/* font-size: 12px; */
56+
background-color: firebrick;
57+
font-weight: bold;
58+
59+
position: absolute;
60+
top:0;
61+
right:0;
62+
height: 30px;
63+
width: 120px;
64+
border: 2px solid black;
65+
border-right: 0px;
66+
border-top: 0px;
67+
float: right;
68+
display: flex;
69+
justify-content: center;
70+
align-items: center;
71+
}
72+
73+
#t3{
74+
color: black;
75+
font-family: Arial, Helvetica, sans-serif;
76+
/* font-size: 12px; */
77+
background-color: khaki;
78+
font-weight: bold;
79+
80+
position: absolute;
81+
top:0;
82+
right:0;
83+
height: 30px;
84+
width: 120px;
85+
border: 2px solid black;
86+
border-right: 0px;
87+
border-top: 0px;
88+
float: right;
89+
display: flex;
90+
justify-content: center;
91+
align-items: center;
92+
}
93+
94+
#box {
95+
margin-top: 30px;
96+
width: 100%;
97+
/* height: 120px; */
98+
padding: 10px;
99+
/* border: 1px solid black; */
100+
overflow: auto;
101+
}
102+
103+
.row{
104+
width:100%;
105+
}
106+
107+
108+
/* MEDIA QUERIES */
109+
110+
/*TABLETS*/
111+
@media (min-width: 768px) and (max-width: 991px) {
112+
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
4113
float: left;
5-
border: 1px solid green;
114+
/* border: 1px solid green; */
6115
}
7-
.col-lg-1 {
116+
.col-md-1 {
8117
width: 8.33%;
9118
}
10-
.col-lg-2 {
119+
.col-md-2 {
11120
width: 16.66%;
12121
}
13-
.col-lg-3 {
122+
.col-md-3 {
14123
width: 25%;
15124
}
16-
.col-lg-4 {
125+
.col-md-4 {
17126
width: 33.33%;
18127
}
19-
.col-lg-5 {
128+
.col-md-5 {
20129
width: 41.66%;
21130
}
22-
.col-lg-6 {
131+
132+
.col-md-6 {
23133
width: 50%;
24134
}
25-
.col-lg-7 {
135+
136+
div#container3 {
137+
position: relative;
138+
left: -22px;
139+
width:105%;
140+
clear: both;
141+
}
142+
143+
.col-md-7 {
26144
width: 58.33%;
27145
}
28-
.col-lg-8 {
146+
.col-md-8 {
29147
width: 66.66%;
30148
}
31-
.col-lg-9 {
149+
.col-md-9 {
32150
width: 74.99%;
33151
}
34-
.col-lg-10 {
152+
.col-md-10 {
35153
width: 83.33%;
36154
}
37-
.col-lg-11 {
155+
.col-md-11 {
38156
width: 91.66%;
39-
}
40-
.col-lg-12 {
157+
}
158+
.col-md-12 {
41159
width: 100%;
42160
}
43161
}
44-
45-
/********** Medium devices only **********/
46-
@media (min-width: 992px) and (max-width: 1199px) {
47-
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
162+
163+
164+
/********** Large devices only **********/
165+
@media (min-width: 992px) {
166+
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
48167
float: left;
49-
border: 1px solid green;
168+
/* border: 1px solid green; */
50169
}
51-
.col-md-1 {
170+
.col-lg-1 {
52171
width: 8.33%;
53172
}
54-
.col-md-2 {
173+
.col-lg-2 {
55174
width: 16.66%;
56175
}
57-
.col-md-3 {
176+
.col-lg-3 {
58177
width: 25%;
59178
}
60-
.col-md-4 {
179+
.col-lg-4 {
61180
width: 33.33%;
62181
}
63-
.col-md-5 {
182+
.col-lg-5 {
64183
width: 41.66%;
65184
}
66-
.col-md-6 {
185+
.col-lg-6 {
67186
width: 50%;
68187
}
69-
.col-md-7 {
188+
.col-lg-7 {
70189
width: 58.33%;
71190
}
72-
.col-md-8 {
191+
.col-lg-8 {
73192
width: 66.66%;
74193
}
75-
.col-md-9 {
194+
.col-lg-9 {
76195
width: 74.99%;
77196
}
78-
.col-md-10 {
197+
.col-lg-10 {
79198
width: 83.33%;
80199
}
81-
.col-md-11 {
200+
.col-lg-11 {
82201
width: 91.66%;
83202
}
84-
.col-md-12 {
203+
.col-lg-12 {
85204
width: 100%;
86205
}
87-
}
206+
}
207+
208+

‎module2-solution/index.html

Lines changed: 59 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,75 @@
33
<html>
44
<head>
55
<meta charset="utf-8">
6-
<title>Hello Cousera Mami!</title>
6+
<title>Coursera</title>
77
<style>
88
* {
99
box-sizing: border-box;
1010
margin: 0;
1111
padding: 0;
12+
font-family: cursive ;
1213
}
1314
</style>
14-
<link rel="stylesheet" href="css/styles.css">
15+
<link rel="stylesheet" href="CSS/styles.css">
1516
<meta name="viewport" content="width=device-width, initial-scale=1">
1617
</head>
1718
<body>
18-
<h1>Hello Cousera! aqui vamos de nuevo</h1>
19-
20-
<div>
21-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam iure fugiat facere culpa ut nam
22-
repudiandae obcaecati nisi quas reiciendis! Odit veniam architecto itaque, amet exercitationem
23-
dolor consequatur aspernatur ad.</p>
19+
<!-- <div id="container"> -->
20+
<div id="head">
21+
<h1>Our Menu</h1>
22+
</div>
23+
<!-- </div> -->
24+
<div id="container" class="col-lg-4 col-md-6">
25+
<div id="Interno">
26+
<div id="t1">
27+
<p>Chicken</p>
28+
</div>
29+
<div id = "box">
30+
<p>
31+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam iure fugiat facere culpa ut nam
32+
repudiandae obcaecati nisi quas reiciendis! Odit veniam architecto itaque, amet exercitationem
33+
dolor consequatur aspernatur ad.
34+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam iure fugiat facere culpa ut nam
35+
repudiandae obcaecati nisi quas reiciendis! Odit veniam architecto itaque, amet exercitationem
36+
dolor consequatur aspernatur ad.
37+
</p>
38+
</div>
39+
</div>
40+
</div>
41+
<div id="container" class="col-lg-4 col-md-6">
42+
<div id="Interno">
43+
<div id="t2">
44+
<p>Beef</p>
45+
</div>
46+
<div id = "box" >
47+
<p>
48+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam iure fugiat facere culpa ut nam
49+
repudiandae obcaecati nisi quas reiciendis! Odit veniam architecto itaque, amet exercitationem
50+
dolor consequatur aspernatur ad.
51+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam iure fugiat facere culpa ut nam
52+
repudiandae obcaecati nisi quas reiciendis! Odit veniam architecto itaque, amet exercitationem
53+
dolor consequatur aspernatur ad.
54+
</p>
55+
</div>
56+
</div>
2457
</div>
58+
<div id="container3" class="col-lg-4">
59+
<div id="Interno">
60+
<div id="t3">
61+
<p>Sushi</p>
62+
</div>
63+
<div id = "box" >
64+
<p>
65+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam iure fugiat facere culpa ut nam
66+
repudiandae obcaecati nisi quas reiciendis! Odit veniam architecto itaque, amet exercitationem
67+
dolor consequatur aspernatur ad.
68+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam iure fugiat facere culpa ut nam
69+
repudiandae obcaecati nisi quas reiciendis! Odit veniam architecto itaque, amet exercitationem
70+
dolor consequatur aspernatur ad.
71+
</p>
72+
</div>
73+
</div>
74+
</div>
75+
2576
</body>
2677
</html>

0 commit comments

Comments
 (0)