├── css └── main.css ├── ejercicio1 ├── css │ └── main.css └── index.html ├── ejercicio2 ├── css │ └── main.css ├── img │ ├── mail.png │ ├── snapchat.png │ └── twitter.png └── index.html ├── ejercicio3 ├── css │ └── main.css ├── img │ ├── black-cat.jpg │ ├── mail.png │ ├── snapchat.png │ └── twitter.png ├── index.html └── js │ └── main.js ├── ejercicio4 ├── css │ └── main.css ├── img │ ├── black-cat.jpg │ ├── cat1.jpg │ ├── cat2.jpg │ ├── cat3.jpg │ ├── fondo.jpg │ ├── mail.png │ ├── snapchat.png │ └── twitter.png └── index.html └── index.html /css/main.css: -------------------------------------------------------------------------------- 1 | *, *:before, *:after { 2 | box-sizing: inherit; 3 | } 4 | 5 | html { 6 | box-sizing: border-box; 7 | } 8 | 9 | html, body { 10 | width: 100%; 11 | height: 100%; 12 | } 13 | 14 | body { 15 | background-color: lightgray; 16 | font-family: sans-serif; 17 | margin: 0; 18 | padding: 0; 19 | } 20 | 21 | .contenedor { 22 | border: 20px solid white; 23 | display: flex; 24 | height: 100vh; 25 | font-size: 20px; 26 | align-items: center; 27 | flex-wrap: wrap; 28 | flex-direction: column; 29 | } 30 | 31 | div[class*="item-"] { 32 | background: orange; 33 | padding: 10px; 34 | text-align: center; 35 | border: 2px solid gray; 36 | flex-basis: 500px; 37 | /*flex-grow: 1;*/ 38 | } 39 | 40 | div[class*="item-"]:nth-child(odd) { 41 | background-color: black; 42 | color: white; 43 | } 44 | 45 | div[class*="item-"]:nth-child(5) { 46 | background-color: aqua; 47 | flex-grow: 4; 48 | } 49 | -------------------------------------------------------------------------------- /ejercicio1/css/main.css: -------------------------------------------------------------------------------- 1 | *, *:before, *:after { 2 | box-sizing: inherit; 3 | } 4 | 5 | html { 6 | box-sizing: border-box; 7 | } 8 | 9 | html, body { 10 | width: 100%; 11 | height: 100%; 12 | } 13 | 14 | body { 15 | background-color: gray; 16 | font-family: sans-serif; 17 | display: flex; 18 | justify-content: center; 19 | align-items: center; 20 | } 21 | 22 | main { 23 | width: 600px; 24 | background-color: lightgray; 25 | padding: 10px; 26 | display: flex; 27 | flex-wrap: wrap; 28 | } 29 | 30 | header { 31 | background-color: white; 32 | padding: 10px; 33 | text-align: center; 34 | font-size: 15px; 35 | flex: 1 1 100%; 36 | } 37 | 38 | article { 39 | background-color: aqua; 40 | padding: 20px; 41 | width: 70%; 42 | flex: 1 1 70%; 43 | } 44 | 45 | @media (max-width: 400px) { 46 | article { 47 | flex-basis: 100%; 48 | } 49 | } 50 | 51 | aside { 52 | background-color: darkblue; 53 | padding: 20px; 54 | width: 30%; 55 | flex: 1 1 30%; 56 | } 57 | 58 | aside ul { 59 | color: white; 60 | margin: 10px; 61 | padding: 0; 62 | cursor: pointer; 63 | } -------------------------------------------------------------------------------- /ejercicio1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | FlexBox 5 | 6 | 7 | 8 |

9 |

10 |

Bienvenid@ a DOPodcast

11 |

12 |

13 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, sint. Eos quisquam aliquam eveniet et tempora eaque ab excepturi accusamus non doloribus. Itaque quae voluptate eos autem possimus iusto ullam!

14 |

Voluptates, necessitatibus adipisci eveniet! Quod quisquam animi soluta harum ab quos enim suscipit sapiente cupiditate cumque, aperiam eligendi repudiandae nihil. Possimus eum delectus blanditiis et. Atque, debitis magnam alias soluta!

15 |

16 | 23 |

24 | 25 | -------------------------------------------------------------------------------- /ejercicio2/css/main.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | width: 100%; 3 | height: 100%; 4 | } 5 | 6 | html { 7 | box-sizing: border-box; 8 | } 9 | *, *:before, *:after { 10 | box-sizing: inherit; 11 | } 12 | 13 | body { 14 | background-color: lightgray; 15 | font-family:sans-serif; 16 | display: flex; 17 | justify-content: center; 18 | align-items: flex-start; 19 | } 20 | 21 | ul.principal { 22 | border-radius: 10px; 23 | width: 90%; 24 | max-width: 1000px; 25 | padding: 10px; 26 | background: gray; 27 | list-style: none; 28 | display: flex; 29 | justify-content: space-around; 30 | } 31 | 32 | .menu { 33 | height: 32px; 34 | display: flex; 35 | justify-content: center; 36 | align-items: center; 37 | flex: 3; 38 | } 39 | 40 | .menu a { 41 | color: white; 42 | text-decoration: none; 43 | text-shadow: 1px 1px 1px black; 44 | margin: 0; 45 | padding: 0; 46 | } 47 | 48 | .social { 49 | display: flex; 50 | justify-content: center; 51 | align-items: center; 52 | flex: 1; 53 | } 54 | 55 | @media (max-width: 768px) { 56 | ul.principal { 57 | flex-wrap: wrap; 58 | margin: 20px; 59 | } 60 | .menu { 61 | flex-basis: 33%; 62 | } 63 | .social { 64 | margin-top: 20px; 65 | } 66 | } 67 | 68 | @media (max-width: 340px) { 69 | .menu { 70 | flex-basis: 100%; 71 | } 72 | } -------------------------------------------------------------------------------- /ejercicio2/img/mail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/flexbox/c99770ca07a714862a9a3b8ae3f9b8d80676dd84/ejercicio2/img/mail.png -------------------------------------------------------------------------------- /ejercicio2/img/snapchat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/flexbox/c99770ca07a714862a9a3b8ae3f9b8d80676dd84/ejercicio2/img/snapchat.png -------------------------------------------------------------------------------- /ejercicio2/img/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/flexbox/c99770ca07a714862a9a3b8ae3f9b8d80676dd84/ejercicio2/img/twitter.png -------------------------------------------------------------------------------- /ejercicio2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Flex Menu 6 | 7 | 8 | 9 |

11 | Home 12 |
14 | Trayectoria 15 |
17 | Proyectos 18 |
20 | Testimonios 21 |
23 | Legal 24 |
26 | DOPodcast 27 |
29 | Contacto 30 |
32 | 33 | 34 | 35 |
37 | 38 | 39 | 40 |
42 | 43 | 44 | 45 |

47 | 48 | -------------------------------------------------------------------------------- /ejercicio3/css/main.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | width: 100%; 3 | height: 100%; 4 | } 5 | 6 | html { 7 | box-sizing: border-box; 8 | } 9 | *, *:before, *:after { 10 | box-sizing: inherit; 11 | } 12 | 13 | body { 14 | background-color: lightgray; 15 | font-family:sans-serif; 16 | display: flex; 17 | justify-content: center; 18 | align-items: flex-start; 19 | } 20 | 21 | /* Contenedor */ 22 | main { 23 | width: 800px; 24 | display: flex; 25 | flex-direction: column; 26 | justify-content: flex-start; 27 | min-height: 100vh; 28 | } 29 | 30 | main > * { 31 | order: 999; 32 | } 33 | 34 | /* Navegación */ 35 | ul.principal { 36 | border-radius: 10px; 37 | width: 100%; 38 | padding: 10px; 39 | background: gray; 40 | list-style: none; 41 | display: flex; 42 | justify-content: space-around; 43 | } 44 | 45 | .menu { 46 | height: 32px; 47 | display: flex; 48 | justify-content: center; 49 | align-items: center; 50 | flex: 3; 51 | } 52 | 53 | .menu a { 54 | color: white; 55 | text-decoration: none; 56 | text-shadow: 1px 1px 1px black; 57 | margin: 0; 58 | padding: 0; 59 | } 60 | 61 | .social { 62 | display: flex; 63 | justify-content: center; 64 | align-items: center; 65 | flex: 1; 66 | } 67 | 68 | #movil { 69 | background-color: gray; 70 | display: flex; 71 | justify-content: center; 72 | align-items: center; 73 | border-radius: 10px; 74 | padding: 10px; 75 | display: none; 76 | } 77 | 78 | #movil a { 79 | color: white; 80 | text-decoration: none; 81 | } 82 | 83 | /* Banner central */ 84 | #banner { 85 | height: 400px; 86 | border-radius: 10px; 87 | background-image: url(../img/black-cat.jpg); 88 | background-repeat: no-repeat; 89 | background-position: center center; 90 | background-size: cover; 91 | } 92 | 93 | /* Zona contenido (texto) */ 94 | #contenido { 95 | padding: 20px; 96 | background: gray; 97 | color: white; 98 | margin: 20px 0; 99 | border-radius: 10px; 100 | } 101 | 102 | #contenido p { 103 | margin: 0; 104 | } 105 | 106 | /* Widget newsletter */ 107 | #subscribe { 108 | padding: 20px; 109 | background: gray; 110 | color: white; 111 | border-radius: 10px; 112 | margin-bottom: 20px; 113 | } 114 | 115 | #subscribe form { 116 | display: flex; 117 | justify-content: center; 118 | } 119 | 120 | #subscribe form > * { 121 | flex: 1; 122 | margin: 0 10px; 123 | } 124 | 125 | /* Footer */ 126 | footer { 127 | padding: 20px; 128 | background: gray; 129 | color: white; 130 | border-radius: 10px; 131 | margin-top: auto; 132 | text-align: center; 133 | text-shadow: 1px 1px 1px black; 134 | } 135 | 136 | /* Puntos de ruptura */ 137 | @media (max-width: 768px) { 138 | main { 139 | margin: 10px; 140 | } 141 | ul.principal { 142 | flex-wrap: wrap; 143 | display: none; 144 | order: 2; 145 | } 146 | .menu { 147 | flex-basis: 33%; 148 | } 149 | li:nth-child(4) { 150 | flex-basis: 50%; 151 | } 152 | li:nth-child(5) { 153 | flex-basis: 50%; 154 | } 155 | .social { 156 | margin-top: 20px; 157 | } 158 | #subscribe { 159 | order: 3; 160 | margin-top: 20px; 161 | } 162 | #subscribe form { 163 | flex-wrap: wrap; 164 | } 165 | #subscribe form > * { 166 | flex-basis: 100%; 167 | margin: 10px 0; 168 | } 169 | #movil { 170 | display: flex; 171 | order: 1; 172 | } 173 | } 174 | 175 | @media (max-width: 340px) { 176 | li.menu { 177 | flex-basis: 100%; 178 | } 179 | } -------------------------------------------------------------------------------- /ejercicio3/img/black-cat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/flexbox/c99770ca07a714862a9a3b8ae3f9b8d80676dd84/ejercicio3/img/black-cat.jpg -------------------------------------------------------------------------------- /ejercicio3/img/mail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/flexbox/c99770ca07a714862a9a3b8ae3f9b8d80676dd84/ejercicio3/img/mail.png -------------------------------------------------------------------------------- /ejercicio3/img/snapchat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/flexbox/c99770ca07a714862a9a3b8ae3f9b8d80676dd84/ejercicio3/img/snapchat.png -------------------------------------------------------------------------------- /ejercicio3/img/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/flexbox/c99770ca07a714862a9a3b8ae3f9b8d80676dd84/ejercicio3/img/twitter.png -------------------------------------------------------------------------------- /ejercicio3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Black Cats Rules 7 | 8 | 9 | 10 | 11 | 12 |

13 | 14 | 17 | 18 | 19 |

21 | Home 22 |
24 | Trayectoria 25 |
27 | Legal 28 |
30 | DOPodcast 31 |
33 | Contacto 34 |
36 | 37 | 38 | 39 |
41 | 42 | 43 | 44 |
46 | 47 | 48 | 49 |

51 | 52 | 53 | 54 | 55 | 56 |

57 |

Selvage blog cornhole scenester paleo, jean shorts bushwick intelligentsia chia twee brunch austin prism four loko. Marfa fanny pack neutra offal, green juice keffiyeh cray letterpress DIY VHS hell of pork belly bicycle rights. Food truck scenester kogi tofu jianbing fixie. Viral readymade banh mi, VHS 8-bit af poke swag echo park hella kogi. Ethical post-ironic PBR&B williamsburg, chillwave semiotics offal brunch. Butcher woke meditation tousled trust fund coloring book synth, schlitz messenger bag mustache XOXO before they sold out. Selvage franzen banh mi tacos freegan.

58 |

59 | 60 | 67 | 68 | 69 | 70 |

71 | 72 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /ejercicio3/js/main.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | let movil = document.getElementById('movil'); 3 | let menu = document.getElementById('principal'); 4 | 5 | movil.addEventListener('click', function(){ 6 | menu.style.display = menu.style.display == 'flex'? 'none' : 'flex'; 7 | }); 8 | })(); -------------------------------------------------------------------------------- /ejercicio4/css/main.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | width: 100%; 3 | height: 100%; 4 | } 5 | 6 | html { 7 | box-sizing: border-box; 8 | font-family: sans-serif; 9 | } 10 | *, *:before, *:after { 11 | box-sizing: inherit; 12 | } 13 | 14 | body { 15 | background-image: url(../img/fondo.jpg); 16 | background-position: center center; 17 | background-size: cover; 18 | display: flex; 19 | justify-content: center; 20 | align-items: center; 21 | } 22 | 23 | /* Contenedor principal */ 24 | main { 25 | width: 900px; 26 | min-width: 320px; 27 | min-height: 200px; 28 | display: flex; 29 | flex-wrap: wrap; 30 | } 31 | 32 | main > * { 33 | order: 999; 34 | } 35 | 36 | /* Interior del contenedor */ 37 | /* Lateral */ 38 | .lateral { 39 | background-color: rgba(0, 0, 0, .4); 40 | flex-basis: 30%; 41 | padding: 20px; 42 | display: flex; 43 | flex-direction: column; 44 | align-items: center; 45 | justify-content: flex-start; 46 | } 47 | 48 | .lateral > img { 49 | max-width: 100%; 50 | margin-bottom: 20px; 51 | } 52 | 53 | .lateral a { 54 | width: 60%; 55 | display: flex; 56 | align-items: center; 57 | justify-content: space-between; 58 | text-decoration: none; 59 | color: white; 60 | margin: 10px 0; 61 | } 62 | 63 | .lateral a:first-of-type { 64 | margin-top: auto; 65 | } 66 | 67 | /* Contenido */ 68 | .contenido { 69 | background-color: rgba(255, 255, 255, .7); 70 | flex-basis: 70%; 71 | padding: 20px; 72 | } 73 | 74 | .contenido h1 { 75 | margin-top: 0; 76 | font-size: 30px; 77 | } 78 | 79 | .contenido ul { 80 | display: flex; 81 | justify-content: space-between; 82 | flex-wrap: wrap; 83 | list-style: none; 84 | margin: 0; 85 | padding: 0; 86 | } 87 | 88 | .contenido ul li { 89 | background-color: red; 90 | flex-basis: 30%; 91 | height: 100px; 92 | background-position: center center; 93 | background-size: cover; 94 | } 95 | 96 | .contenido ul li:first-of-type { 97 | background-image: url(../img/cat1.jpg); 98 | } 99 | 100 | .contenido ul li:nth-child(2) { 101 | background-image: url(../img/cat2.jpg); 102 | } 103 | 104 | .contenido ul li:last-of-type { 105 | background-image: url(../img/cat3.jpg); 106 | } 107 | 108 | /* Respond */ 109 | @media (max-width: 705px) { 110 | body { 111 | align-items: flex-start; 112 | } 113 | main { 114 | margin: 20px; 115 | } 116 | .lateral, .contenido { 117 | flex-basis: 100%; 118 | } 119 | .contenido { 120 | order:1; 121 | } 122 | .lateral { 123 | order: 2; 124 | } 125 | } 126 | 127 | /* Util */ 128 | .dev { 129 | border: 1px solid red; 130 | } -------------------------------------------------------------------------------- /ejercicio4/img/black-cat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/flexbox/c99770ca07a714862a9a3b8ae3f9b8d80676dd84/ejercicio4/img/black-cat.jpg -------------------------------------------------------------------------------- /ejercicio4/img/cat1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/flexbox/c99770ca07a714862a9a3b8ae3f9b8d80676dd84/ejercicio4/img/cat1.jpg -------------------------------------------------------------------------------- /ejercicio4/img/cat2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/flexbox/c99770ca07a714862a9a3b8ae3f9b8d80676dd84/ejercicio4/img/cat2.jpg -------------------------------------------------------------------------------- /ejercicio4/img/cat3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/flexbox/c99770ca07a714862a9a3b8ae3f9b8d80676dd84/ejercicio4/img/cat3.jpg -------------------------------------------------------------------------------- /ejercicio4/img/fondo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/flexbox/c99770ca07a714862a9a3b8ae3f9b8d80676dd84/ejercicio4/img/fondo.jpg -------------------------------------------------------------------------------- /ejercicio4/img/mail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/flexbox/c99770ca07a714862a9a3b8ae3f9b8d80676dd84/ejercicio4/img/mail.png -------------------------------------------------------------------------------- /ejercicio4/img/snapchat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/flexbox/c99770ca07a714862a9a3b8ae3f9b8d80676dd84/ejercicio4/img/snapchat.png -------------------------------------------------------------------------------- /ejercicio4/img/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/juanwmedia/flexbox/c99770ca07a714862a9a3b8ae3f9b8d80676dd84/ejercicio4/img/twitter.png -------------------------------------------------------------------------------- /ejercicio4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Black Cats Rules 7 | 8 | 9 | 10 | 11 | 12 |

13 | 14 | 15 | 33 | 34 | 35 |

36 |

Los gatos negros te dan la bienvenida

37 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem ex aliquid pariatur ad alias necessitatibus, hic corrupti delectus. Excepturi quis incidunt ratione officia hic amet, natus tempora nesciunt ipsum, atque.

38 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem ex aliquid pariatur ad alias necessitatibus, hic corrupti delectus. Excepturi quis incidunt ratione officia hic amet, natus tempora nesciunt ipsum, atque.

39 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem ex aliquid pariatur ad alias necessitatibus, hic corrupti delectus. Excepturi quis incidunt ratione officia hic amet, natus tempora nesciunt ipsum, atque.

40 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem ex aliquid pariatur ad alias necessitatibus, hic corrupti delectus. Excepturi quis incidunt ratione officia hic amet, natus tempora nesciunt ipsum, atque.

41 | 42 | 43 | 44 |

49 |

50 |

51 | 52 | 53 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | FlexBox 5 | 6 | 7 | 8 |

9 |

1

10 |

2

11 |

3

12 |

4

13 |

5

14 |

6

15 |

7

16 |

8

17 |

9

18 |

10

19 |

20 | 21 | --------------------------------------------------------------------------------