Skip to content

Commit 377e302

Browse files
armincanoarmincano
committed
feat: add responsibe mobile first image gallery exercise using flexbox, media queries and breakpoints
1 parent 6267b57 commit 377e302

File tree

7 files changed

+321
-0
lines changed

7 files changed

+321
-0
lines changed

‎m2-front-end-101/s4-responsive-and-mobile-first/responsive-mobile-first-img-gallery/assets/img/Gato1.jpg

202 KB
Loading

‎m2-front-end-101/s4-responsive-and-mobile-first/responsive-mobile-first-img-gallery/assets/img/Gato2.jpg

221 KB
Loading

‎m2-front-end-101/s4-responsive-and-mobile-first/responsive-mobile-first-img-gallery/assets/img/Perros y gatos.jpg

158 KB
Loading

‎m2-front-end-101/s4-responsive-and-mobile-first/responsive-mobile-first-img-gallery/assets/style.css

+299
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,299 @@
1+
html {
2+
box-sizing: border-box;
3+
}
4+
5+
*,
6+
::before,
7+
::after {
8+
box-sizing: inherit;
9+
}
10+
11+
body {
12+
margin: 0;
13+
font-family: sans-serif;
14+
}
15+
16+
div {
17+
font-size: 0;
18+
}
19+
20+
.gallery {
21+
display: flex;
22+
flex-wrap: wrap;
23+
justify-content: center;
24+
align-items: center;
25+
}
26+
27+
.gallery-item {
28+
padding: 15px;
29+
}
30+
31+
.gallery-item img {
32+
border-radius: 6px;
33+
width: 100%;
34+
}
35+
36+
/*
37+
Pantalla Extra Large (>=1200px)
38+
*/
39+
@media (min-width: 1200px) {
40+
.col-xl-12 {
41+
width: 100%;
42+
}
43+
44+
.col-xl-11 {
45+
width: 91.66666667%;
46+
}
47+
48+
.col-xl-10 {
49+
width: 83.33333334%;
50+
}
51+
52+
.col-xl-9 {
53+
width: 75%;
54+
}
55+
56+
.col-xl-8 {
57+
width: 66.66666667%;
58+
}
59+
60+
.col-xl-7 {
61+
width: 58.33333334%;
62+
}
63+
64+
.col-xl-6 {
65+
width: 50%;
66+
}
67+
68+
.col-xl-5 {
69+
width: 41.66666667%;
70+
}
71+
72+
.col-xl-4 {
73+
width: 33.33333334%;
74+
}
75+
76+
.col-xl-3 {
77+
width: 25%;
78+
}
79+
80+
.col-xl-2 {
81+
width: 16.66666667%;
82+
}
83+
84+
.col-xl-1 {
85+
width: 8.33333333%;
86+
}
87+
}
88+
89+
/*
90+
Pantalla Large (>=992px)
91+
*/
92+
@media (min-width: 992px) and (max-width: 1199px) {
93+
.col-lg-12 {
94+
width: 100%;
95+
}
96+
97+
.col-lg-11 {
98+
width: 91.66666667%;
99+
}
100+
101+
.col-lg-10 {
102+
width: 83.33333334%;
103+
}
104+
105+
.col-lg-9 {
106+
width: 75%;
107+
}
108+
109+
.col-lg-8 {
110+
width: 66.66666667%;
111+
}
112+
113+
.col-lg-7 {
114+
width: 58.33333334%;
115+
}
116+
117+
.col-lg-6 {
118+
width: 50%;
119+
}
120+
121+
.col-lg-5 {
122+
width: 41.66666667%;
123+
}
124+
125+
.col-lg-4 {
126+
width: 33.33333334%;
127+
}
128+
129+
.col-lg-3 {
130+
width: 25%;
131+
}
132+
133+
.col-lg-2 {
134+
width: 16.66666667%;
135+
}
136+
137+
.col-lg-1 {
138+
width: 8.33333333%;
139+
}
140+
}
141+
142+
/*
143+
Pantalla Medium (>=768px)
144+
*/
145+
@media (min-width: 768px) and (max-width: 991px) {
146+
.col-md-12 {
147+
width: 100%;
148+
}
149+
150+
.col-md-11 {
151+
width: 91.66666667%;
152+
}
153+
154+
.col-md-10 {
155+
width: 83.33333334%;
156+
}
157+
158+
.col-md-9 {
159+
width: 75%;
160+
}
161+
162+
.col-md-8 {
163+
width: 66.66666667%;
164+
}
165+
166+
.col-md-7 {
167+
width: 58.33333334%;
168+
}
169+
170+
.col-md-6 {
171+
width: 50%;
172+
}
173+
174+
.col-md-5 {
175+
width: 41.66666667%;
176+
}
177+
178+
.col-md-4 {
179+
width: 33.33333334%;
180+
}
181+
182+
.col-md-3 {
183+
width: 25%;
184+
}
185+
186+
.col-md-2 {
187+
width: 16.66666667%;
188+
}
189+
190+
.col-md-1 {
191+
width: 8.33333333%;
192+
}
193+
}
194+
195+
/*
196+
Pantalla LSmall (>=576px)
197+
*/
198+
@media (min-width: 576px) and (max-width: 767px) {
199+
.col-sm-12 {
200+
width: 100%;
201+
}
202+
203+
.col-sm-11 {
204+
width: 91.66666667%;
205+
}
206+
207+
.col-sm-10 {
208+
width: 83.33333334%;
209+
}
210+
211+
.col-sm-9 {
212+
width: 75%;
213+
}
214+
215+
.col-sm-8 {
216+
width: 66.66666667%;
217+
}
218+
219+
.col-sm-7 {
220+
width: 58.33333334%;
221+
}
222+
223+
.col-sm-6 {
224+
width: 50%;
225+
}
226+
227+
.col-sm-5 {
228+
width: 41.66666667%;
229+
}
230+
231+
.col-sm-4 {
232+
width: 33.33333334%;
233+
}
234+
235+
.col-sm-3 {
236+
width: 25%;
237+
}
238+
239+
.col-sm-2 {
240+
width: 16.66666667%;
241+
}
242+
243+
.col-sm-1 {
244+
width: 8.33333333%;
245+
}
246+
}
247+
248+
/*
249+
Pantalla Extra small (<576px)
250+
*/
251+
@media (max-width: 575px) {
252+
.col-xs-12 {
253+
width: 100%;
254+
}
255+
256+
.col-xs-11 {
257+
width: 91.66666667%;
258+
}
259+
260+
.col-xs-10 {
261+
width: 83.33333334%;
262+
}
263+
264+
.col-xs-9 {
265+
width: 75%;
266+
}
267+
268+
.col-xs-8 {
269+
width: 66.66666667%;
270+
}
271+
272+
.col-xs-7 {
273+
width: 58.33333334%;
274+
}
275+
276+
.col-xs-6 {
277+
width: 50%;
278+
}
279+
280+
.col-xs-5 {
281+
width: 41.66666667%;
282+
}
283+
284+
.col-xs-4 {
285+
width: 33.33333334%;
286+
}
287+
288+
.col-xs-3 {
289+
width: 25%;
290+
}
291+
292+
.col-xs-2 {
293+
width: 16.66666667%;
294+
}
295+
296+
.col-xs-1 {
297+
width: 8.33333333%;
298+
}
299+
}

‎m2-front-end-101/s4-responsive-and-mobile-first/responsive-mobile-first-img-gallery/index.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="es">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="assets/style.css">
7+
<title>Galería de imágenes</title>
8+
</head>
9+
<body>
10+
<div class="gallery">
11+
<div class="gallery-item col-xs-12 col-sm-6 col-md-6 col-lg-6 col-xl-4 ">
12+
<img src="assets/img/Gato1.jpg" alt="Imagen 1">
13+
</div>
14+
<div class="gallery-item col-xs-12 col-sm-6 col-md-6 col-lg-6 col-xl-4 ">
15+
<img src="assets/img/Gato2.jpg" alt="Imagen 2">
16+
</div>
17+
<div class="gallery-item col-xs-12 col-sm-6 col-md-6 col-lg-6 col-xl-4 ">
18+
<img src="assets/img/Perros y gatos.jpg" alt="Imagen 3">
19+
</div>
20+
</div>
21+
</body>
22+
</html>

‎m2-front-end-101/s3-css/responsive-mobile-first.css renamed to ‎m2-front-end-101/s4-responsive-and-mobile-first/responsive-mobile-first.css

File renamed without changes.

‎m2-front-end-101/s3-css/responsive-mobile-first.html renamed to ‎m2-front-end-101/s4-responsive-and-mobile-first/responsive-mobile-first.html

File renamed without changes.

0 commit comments

Comments
 (0)