├── .DS_Store
├── README.md
├── entrenamiento
    ├── Ejercicio Entrenamiento 6.pdf
    ├── Ejercicio entrenamiento 1.pdf
    ├── Ejercicio entrenamiento 2.pdf
    ├── Ejercicio entrenamiento 3.pdf
    ├── Ejercicio entrenamiento 4.pdf
    ├── Ejercicio entrenamiento 5.pdf
    ├── Ejercicios Entrenamiento 3 - paises.js
    └── Ejercicios Entrenamiento 4 - pokemons
    │   ├── Ejercicios Entrenamiento 4 - pokemons.js
    │   ├── bolbasaur.png
    │   ├── charmander.png
    │   ├── pikachu.png
    │   └── squartle.png
├── final
    ├── Final_00.pdf
    ├── index.html
    └── style.css
├── primer_parcial
    ├── .DS_Store
    ├── modelo_1
    │   ├── index.html
    │   └── style.css
    └── modelo_2
    │   ├── index.html
    │   └── style.css
└── segundo_parcial
    ├── index15.html
    └── index16.html


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spizzirri/programacionwebi-base/a64f5feb0a83f9a140f9df65a8abc5271c4d113e/.DS_Store


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 | [Documentacion Oficial HTML](https://html.spec.whatwg.org/multipage/)
3 | 
4 | [Documentacion Oficial CSS](https://www.w3.org/Style/CSS/)
5 | 
6 | [Documentacion no oficial HTML, CSS y JS](https://developer.mozilla.org/es/)
7 | 
8 | [Actualidad de JS](https://github.com/tc39)
9 | 


--------------------------------------------------------------------------------
/entrenamiento/Ejercicio Entrenamiento 6.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spizzirri/programacionwebi-base/a64f5feb0a83f9a140f9df65a8abc5271c4d113e/entrenamiento/Ejercicio Entrenamiento 6.pdf


--------------------------------------------------------------------------------
/entrenamiento/Ejercicio entrenamiento 1.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spizzirri/programacionwebi-base/a64f5feb0a83f9a140f9df65a8abc5271c4d113e/entrenamiento/Ejercicio entrenamiento 1.pdf


--------------------------------------------------------------------------------
/entrenamiento/Ejercicio entrenamiento 2.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spizzirri/programacionwebi-base/a64f5feb0a83f9a140f9df65a8abc5271c4d113e/entrenamiento/Ejercicio entrenamiento 2.pdf


--------------------------------------------------------------------------------
/entrenamiento/Ejercicio entrenamiento 3.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spizzirri/programacionwebi-base/a64f5feb0a83f9a140f9df65a8abc5271c4d113e/entrenamiento/Ejercicio entrenamiento 3.pdf


--------------------------------------------------------------------------------
/entrenamiento/Ejercicio entrenamiento 4.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spizzirri/programacionwebi-base/a64f5feb0a83f9a140f9df65a8abc5271c4d113e/entrenamiento/Ejercicio entrenamiento 4.pdf


--------------------------------------------------------------------------------
/entrenamiento/Ejercicio entrenamiento 5.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spizzirri/programacionwebi-base/a64f5feb0a83f9a140f9df65a8abc5271c4d113e/entrenamiento/Ejercicio entrenamiento 5.pdf


--------------------------------------------------------------------------------
/entrenamiento/Ejercicios Entrenamiento 3 - paises.js:
--------------------------------------------------------------------------------
 1 | const countries = [
 2 |   { name: "Argentina", abbreviation: "AR", continent: "América del Sur", flag: "🇦🇷", language: "Español" },
 3 |   { name: "Australia", abbreviation: "AU", continent: "Oceanía", flag: "🇦🇺", language: "Inglés" },
 4 |   { name: "Brasil", abbreviation: "BR", continent: "América del Sur", flag: "🇧🇷", language: "Portugués" },
 5 |   { name: "Canadá", abbreviation: "CA", continent: "América del Norte", flag: "🇨🇦", language: "Inglés, Francés" },
 6 |   { name: "China", abbreviation: "CN", continent: "Asia", flag: "🇨🇳", language: "Chino" },
 7 |   { name: "Colombia", abbreviation: "CO", continent: "América del Sur", flag: "🇨🇴", language: "Español" },
 8 |   { name: "Egipto", abbreviation: "EG", continent: "África", flag: "🇪🇬", language: "Árabe" },
 9 |   { name: "España", abbreviation: "ES", continent: "Europa", flag: "🇪🇸", language: "Español" },
10 |   { name: "Francia", abbreviation: "FR", continent: "Europa", flag: "🇫🇷", language: "Francés" },
11 |   { name: "Alemania", abbreviation: "DE", continent: "Europa", flag: "🇩🇪", language: "Alemán" },
12 |   { name: "India", abbreviation: "IN", continent: "Asia", flag: "🇮🇳", language: "Hindi, Inglés" },
13 |   { name: "Indonesia", abbreviation: "ID", continent: "Asia", flag: "🇮🇩", language: "Indonesio" },
14 |   { name: "Irlanda", abbreviation: "IE", continent: "Europa", flag: "🇮🇪", language: "Inglés, Irlandés" },
15 |   { name: "Italia", abbreviation: "IT", continent: "Europa", flag: "🇮🇹", language: "Italiano" },
16 |   { name: "Japón", abbreviation: "JP", continent: "Asia", flag: "🇯🇵", language: "Japonés" },
17 |   { name: "Kenia", abbreviation: "KE", continent: "África", flag: "🇰🇪", language: "Inglés, Suajili" },
18 |   { name: "México", abbreviation: "MX", continent: "América del Norte", flag: "🇲🇽", language: "Español" },
19 |   { name: "Marruecos", abbreviation: "MA", continent: "África", flag: "🇲🇦", language: "Árabe, Bereber" },
20 |   { name: "Nueva Zelanda", abbreviation: "NZ", continent: "Oceanía", flag: "🇳🇿", language: "Inglés, Maorí" },
21 |   { name: "Nigeria", abbreviation: "NG", continent: "África", flag: "🇳🇬", language: "Inglés" },
22 |   { name: "Noruega", abbreviation: "NO", continent: "Europa", flag: "🇳🇴", language: "Noruego" },
23 |   { name: "Pakistán", abbreviation: "PK", continent: "Asia", flag: "🇵🇰", language: "Urdu, Inglés" },
24 |   { name: "Perú", abbreviation: "PE", continent: "América del Sur", flag: "🇵🇪", language: "Español" },
25 |   { name: "Filipinas", abbreviation: "PH", continent: "Asia", flag: "🇵🇭", language: "Filipino, Inglés" },
26 |   { name: "Polonia", abbreviation: "PL", continent: "Europa", flag: "🇵🇱", language: "Polaco" },
27 |   { name: "Portugal", abbreviation: "PT", continent: "Europa", flag: "🇵🇹", language: "Portugués" },
28 |   { name: "Reino Unido", abbreviation: "GB", continent: "Europa", flag: "🇬🇧", language: "Inglés" },
29 |   { name: "Rusia", abbreviation: "RU", continent: "Europa/Asia", flag: "🇷🇺", language: "Ruso" },
30 |   { name: "Arabia Saudita", abbreviation: "SA", continent: "Asia", flag: "🇸🇦", language: "Árabe" },
31 |   { name: "Corea del Sur", abbreviation: "KR", continent: "Asia", flag: "🇰🇷", language: "Coreano" },
32 |   { name: "Sudáfrica", abbreviation: "ZA", continent: "África", flag: "🇿🇦", language: "Inglés, Afrikáans, Zulu" },
33 |   { name: "Suecia", abbreviation: "SE", continent: "Europa", flag: "🇸🇪", language: "Sueco" },
34 |   { name: "Suiza", abbreviation: "CH", continent: "Europa", flag: "🇨🇭", language: "Alemán, Francés, Italiano" },
35 |   { name: "Tailandia", abbreviation: "TH", continent: "Asia", flag: "🇹🇭", language: "Tailandés" },
36 |   { name: "Turquía", abbreviation: "TR", continent: "Asia/Europa", flag: "🇹🇷", language: "Turco" },
37 |   { name: "Ucrania", abbreviation: "UA", continent: "Europa", flag: "🇺🇦", language: "Ucraniano" },
38 |   { name: "Emiratos Árabes Unidos", abbreviation: "AE", continent: "Asia", flag: "🇦🇪", language: "Árabe" },
39 |   { name: "Estados Unidos", abbreviation: "US", continent: "América del Norte", flag: "🇺🇸", language: "Inglés" },
40 |   { name: "Uruguay", abbreviation: "UY", continent: "América del Sur", flag: "🇺🇾", language: "Español" },
41 |   { name: "Vietnam", abbreviation: "VN", continent: "Asia", flag: "🇻🇳", language: "Vietnamita" },
42 |   { name: "Venezuela", abbreviation: "VE", continent: "América del Sur", flag: "🇻🇪", language: "Español" },
43 |   { name: "Chile", abbreviation: "CL", continent: "América del Sur", flag: "🇨🇱", language: "Español" },
44 |   { name: "Sudán", abbreviation: "SD", continent: "África", flag: "🇸🇩", language: "Árabe, Inglés" },
45 |   { name: "Israel", abbreviation: "IL", continent: "Asia", flag: "🇮🇱", language: "Hebreo, Árabe" },
46 |   { name: "Bangladesh", abbreviation: "BD", continent: "Asia", flag: "🇧🇩", language: "Bengalí" },
47 |   { name: "Singapur", abbreviation: "SG", continent: "Asia", flag: "🇸🇬", language: "Inglés, Chino, Malayo, Tamil" },
48 |   { name: "Grecia", abbreviation: "GR", continent: "Europa", flag: "🇬🇷", language: "Griego" },
49 |   { name: "Finlandia", abbreviation: "FI", continent: "Europa", flag: "🇫🇮", language: "Finés, Sueco" },
50 |   { name: "Austria", abbreviation: "AT", continent: "Europa", flag: "🇦🇹", language: "Alemán" },
51 |   { name: "Bélgica", abbreviation: "BE", continent: "Europa", flag: "🇧🇪", language: "Holandés, Francés, Alemán" },
52 |   { name: "Hungría", abbreviation: "HU", continent: "Europa", flag: "🇭🇺", language: "Húngaro" }
53 | ];
54 | 
55 | 


--------------------------------------------------------------------------------
/entrenamiento/Ejercicios Entrenamiento 4 - pokemons/Ejercicios Entrenamiento 4 - pokemons.js:
--------------------------------------------------------------------------------
 1 | [
 2 |   {
 3 |     "nombre": "Bulbasaur",
 4 |     "poderes": [
 5 |       {
 6 |         "nombre": "Placaje",
 7 |         "energia": 10,
 8 |         "usos": 4
 9 |       },
10 |       {
11 |         "nombre": "Látigo Cepa",
12 |         "energia": 15,
13 |         "usos": 3
14 |       },
15 |       {
16 |         "nombre": "Hoja Afilada",
17 |         "energia": 20,
18 |         "usos": 3
19 |       }
20 |     ]
21 |   },
22 |   {
23 |     "nombre": "Charmander",
24 |     "poderes": [
25 |       {
26 |         "nombre": "Arañazo",
27 |         "energia": 10,
28 |         "usos": 4
29 |       },
30 |       {
31 |         "nombre": "Lanzallamas",
32 |         "energia": 30,
33 |         "usos": 2
34 |       },
35 |       {
36 |         "nombre": "Dragoaliento",
37 |         "energia": 25,
38 |         "usos": 3
39 |       }
40 |     ]
41 |   },
42 |   {
43 |     "nombre": "Squirtle",
44 |     "poderes": [
45 |       {
46 |         "nombre": "Pistola Agua",
47 |         "energia": 15,
48 |         "usos": 4
49 |       },
50 |       {
51 |         "nombre": "Burbuja",
52 |         "energia": 10,
53 |         "usos": 4
54 |       },
55 |       {
56 |         "nombre": "Placaje",
57 |         "energia": 10,
58 |         "usos": 2
59 |       }
60 |     ]
61 |   },
62 |   {
63 |     "nombre": "Pikachu",
64 |     "poderes": [
65 |       {
66 |         "nombre": "Impactrueno",
67 |         "energia": 20,
68 |         "usos": 3
69 |       },
70 |       {
71 |         "nombre": "Ataque Rápido",
72 |         "energia": 10,
73 |         "usos": 4
74 |       },
75 |       {
76 |         "nombre": "Bola Voltio",
77 |         "energia": 25,
78 |         "usos": 2
79 |       }
80 |     ]
81 |   }
82 | ]
83 | 
84 | 


--------------------------------------------------------------------------------
/entrenamiento/Ejercicios Entrenamiento 4 - pokemons/bolbasaur.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spizzirri/programacionwebi-base/a64f5feb0a83f9a140f9df65a8abc5271c4d113e/entrenamiento/Ejercicios Entrenamiento 4 - pokemons/bolbasaur.png


--------------------------------------------------------------------------------
/entrenamiento/Ejercicios Entrenamiento 4 - pokemons/charmander.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spizzirri/programacionwebi-base/a64f5feb0a83f9a140f9df65a8abc5271c4d113e/entrenamiento/Ejercicios Entrenamiento 4 - pokemons/charmander.png


--------------------------------------------------------------------------------
/entrenamiento/Ejercicios Entrenamiento 4 - pokemons/pikachu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spizzirri/programacionwebi-base/a64f5feb0a83f9a140f9df65a8abc5271c4d113e/entrenamiento/Ejercicios Entrenamiento 4 - pokemons/pikachu.png


--------------------------------------------------------------------------------
/entrenamiento/Ejercicios Entrenamiento 4 - pokemons/squartle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spizzirri/programacionwebi-base/a64f5feb0a83f9a140f9df65a8abc5271c4d113e/entrenamiento/Ejercicios Entrenamiento 4 - pokemons/squartle.png


--------------------------------------------------------------------------------
/final/Final_00.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spizzirri/programacionwebi-base/a64f5feb0a83f9a140f9df65a8abc5271c4d113e/final/Final_00.pdf


--------------------------------------------------------------------------------
/final/index.html:
--------------------------------------------------------------------------------
  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.0">
  6 |     <title>Document</title>
  7 |     <link rel="stylesheet" href="style.css">
  8 | </head>
  9 | <body>
 10 |     <header>
 11 |         <h1>Final</h1>
 12 |     </header>
 13 |     <main>
 14 |         <div class="preguntas">
 15 |             <section class="columna">
 16 |                 <article>
 17 |                     <div class="pregunta">
 18 |                         <span id="pregunta" name="pregunta">¿Cuál es tu pregunta?</span>
 19 |                         <textarea id="respuesta" name="respuesta" rows="4" cols="20" required></textarea>    
 20 |                     </div>
 21 |                 
 22 |                     <div class="nota">
 23 |                         <label for="opciones1">Nota</label>
 24 |                         <select id="opciones1" name="opcion1" required>
 25 |                             <option value="0">0</option>
 26 |                             <option value="0.5">0.5</option>
 27 |                             <option value="1">1</option>
 28 |                         </select>
 29 |                     </div>
 30 |                 
 31 |                 </article>
 32 |         
 33 |                 <article>
 34 |                     <div class="pregunta">
 35 |                         <span id="pregunta" name="pregunta">¿Cuál es tu pregunta?</span>
 36 |                         <textarea id="respuesta" name="respuesta" rows="4" cols="20" required></textarea>    
 37 |                     </div>
 38 |                 
 39 |                     <div class="nota">
 40 |                         <label for="opciones2">Nota</label>
 41 |                         <select id="opciones2" name="opcion2" required>
 42 |                             <option value="0">0</option>
 43 |                             <option value="0.5">0.5</option>
 44 |                             <option value="1">1</option>
 45 |                         </select>
 46 |                     </div>
 47 |                 
 48 |                 </article>
 49 |         
 50 |                 <article>
 51 |                     <div class="pregunta">
 52 |                         <span id="pregunta" name="pregunta">¿Cuál es tu pregunta?</span>
 53 |                         <textarea id="respuesta" name="respuesta" rows="4" cols="20" required></textarea>    
 54 |                     </div>
 55 |                 
 56 |                     <div class="nota">
 57 |                         <label for="opciones3">Nota</label>
 58 |                         <select id="opciones3" name="opcion3" required>
 59 |                             <option value="0">0</option>
 60 |                             <option value="0.5">0.5</option>
 61 |                             <option value="1">1</option>
 62 |                         </select>
 63 |                     </div>
 64 |                 
 65 |                 </article>
 66 |         
 67 |                 <article>
 68 |                     <div class="pregunta">
 69 |                         <span id="pregunta" name="pregunta">¿Cuál es tu pregunta?</span>
 70 |                         <textarea id="respuesta" name="respuesta" rows="4" cols="20" required></textarea>    
 71 |                     </div>
 72 |                 
 73 |                     <div class="nota">
 74 |                         <label for="opciones4">Nota</label>
 75 |                         <select id="opciones4" name="opcion4" required>
 76 |                             <option value="0">0</option>
 77 |                             <option value="0.5">0.5</option>
 78 |                             <option value="1">1</option>
 79 |                         </select>
 80 |                     </div>
 81 |                 
 82 |                 </article>
 83 |         
 84 |                 <article>
 85 |                     <div class="pregunta">
 86 |                         <span id="pregunta" name="pregunta">¿Cuál es tu pregunta?</span>
 87 |                         <textarea id="respuesta" name="respuesta" rows="4" cols="20" required></textarea>    
 88 |                     </div>
 89 |                 
 90 |                     <div class="nota">
 91 |                         <label for="opciones5">Nota</label>
 92 |                         <select id="opciones5" name="opcion5" required>
 93 |                             <option value="0">0</option>
 94 |                             <option value="0.5">0.5</option>
 95 |                             <option value="1">1</option>
 96 |                         </select>
 97 |                     </div>
 98 |                 
 99 |                 </article>
100 |             </section>
101 |     
102 |             <section class="columna">
103 |                 <article>
104 |                     <div class="pregunta">
105 |                         <span id="pregunta" name="pregunta">¿Cuál es tu pregunta?</span>
106 |                         <textarea id="respuesta" name="respuesta" rows="4" cols="20" required></textarea>    
107 |                     </div>
108 |                 
109 |                     <div class="nota">
110 |                         <label for="opciones6">Nota</label>
111 |                         <select id="opciones6" name="opcion6" required>
112 |                             <option value="0">0</option>
113 |                             <option value="0.5">0.5</option>
114 |                             <option value="1">1</option>
115 |                         </select>
116 |                     </div>
117 |                 
118 |                 </article>
119 |         
120 |                 <article>
121 |                     <div class="pregunta">
122 |                         <span id="pregunta" name="pregunta">¿Cuál es tu pregunta?</span>
123 |                         <textarea id="respuesta" name="respuesta" rows="4" cols="20" required></textarea>    
124 |                     </div>
125 |                 
126 |                     <div class="nota">
127 |                         <label for="opciones7">Nota</label>
128 |                         <select id="opciones7" name="opcion7" required>
129 |                             <option value="0">0</option>
130 |                             <option value="0.5">0.5</option>
131 |                             <option value="1">1</option>
132 |                         </select>
133 |                     </div>
134 |                 
135 |                 </article>
136 |         
137 |                 <article>
138 |                     <div class="pregunta">
139 |                         <span id="pregunta" name="pregunta">¿Cuál es tu pregunta?</span>
140 |                         <textarea id="respuesta" name="respuesta" rows="4" cols="20" required></textarea>    
141 |                     </div>
142 |                 
143 |                     <div class="nota">
144 |                         <label for="opciones8">Nota</label>
145 |                         <select id="opciones8" name="opcion8" required>
146 |                             <option value="0">0</option>
147 |                             <option value="0.5">0.5</option>
148 |                             <option value="1">1</option>
149 |                         </select>
150 |                     </div>
151 |                 
152 |                 </article>
153 |         
154 |                 <article>
155 |                     <div class="pregunta">
156 |                         <span id="pregunta" name="pregunta">¿Cuál es tu pregunta?</span>
157 |                         <textarea id="respuesta" name="respuesta" rows="4" cols="20" required></textarea>    
158 |                     </div>
159 |                 
160 |                     <div class="nota">
161 |                         <label for="opciones9">Nota</label>
162 |                         <select id="opciones9" name="opcion9" required>
163 |                             <option value="0">0</option>
164 |                             <option value="0.5">0.5</option>
165 |                             <option value="1">1</option>
166 |                         </select>
167 |                     </div>
168 |                 
169 |                 </article>
170 |         
171 |                 <article>
172 |                     <div class="pregunta">
173 |                         <span id="pregunta" name="pregunta">¿Cuál es tu pregunta?</span>
174 |                         <textarea id="respuesta" name="respuesta" rows="4" cols="20" required></textarea>    
175 |                     </div>
176 |                 
177 |                     <div class="nota">
178 |                         <label for="opciones10">Nota</label>
179 |                         <select id="opciones10" name="opcion10" required>
180 |                             <option value="0">0</option>
181 |                             <option value="0.5">0.5</option>
182 |                             <option value="1">1</option>
183 |                         </select>
184 |                     </div>
185 |                 
186 |                 </article>
187 |             </section>
188 |         </div>
189 | 
190 |         <div class="seccion-final">
191 |             <div class="opciones-columna">
192 |                 <label for="columna1"> 1 Columna 
193 |                     <input type="radio" name="columna" id="columna1">
194 |                 </label>
195 |                 <label for="columna1"> 2 Columnas 
196 |                     <input type="radio" name="columna" id="columna2">
197 |                 </label>
198 |             </div>
199 |     
200 |             <div class="nota-final">
201 |                 <section>
202 |                     <h2>Nota final</h2>
203 |                     <input type="number" name="notafinal" id="" readonly>
204 |                 </section>
205 |             </div>
206 |         </div>
207 |         
208 |     </main>
209 |     <footer>
210 |         DNI - Apellido y nombre del alumno
211 |     </footer>
212 | </body>
213 | </html>


--------------------------------------------------------------------------------
/final/style.css:
--------------------------------------------------------------------------------
 1 | body{
 2 |     display: flex;
 3 |     flex-direction: column;
 4 |     height: auto;
 5 |     justify-content: center;
 6 |     align-items: center;
 7 | }
 8 | 
 9 | .preguntas{
10 |     display: flex;
11 |     gap: 5em;
12 | }
13 | 
14 | article{
15 |     display: flex;
16 |     gap: 1em;
17 | }
18 | 
19 | .pregunta span{
20 |     display: block;
21 | }
22 | 
23 | .opciones-columna{
24 |     display: flex;
25 |     flex-direction: column;
26 | }
27 | 
28 | .seccion-final{
29 |     display: flex;
30 |     justify-content: space-between;
31 | }
32 | 
33 | .nota{
34 |     display: flex;
35 |     flex-direction: column;
36 | }
37 | 
38 | h2{
39 |     display: inline;
40 | }
41 | 
42 | header{
43 |     text-align: center;
44 | }
45 | 
46 | footer{
47 |     text-align: left;
48 | }


--------------------------------------------------------------------------------
/primer_parcial/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spizzirri/programacionwebi-base/a64f5feb0a83f9a140f9df65a8abc5271c4d113e/primer_parcial/.DS_Store


--------------------------------------------------------------------------------
/primer_parcial/modelo_1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Document</title>
 8 |     <link rel="stylesheet" href="./style.css">
 9 | </head>
10 | <body>
11 |     <main>
12 |         <section class="uno center">1</section>
13 |         <section class="dos center">2</section>
14 |         <section class="tres center">3</section>
15 |         <section class="cuatro center">4</section>
16 |         <section class="cinco center">5</section>
17 |         <section class="seis center">6</section>
18 |     </main>
19 | </body>
20 | </html>


--------------------------------------------------------------------------------
/primer_parcial/modelo_1/style.css:
--------------------------------------------------------------------------------
 1 | main{
 2 |     width: 100%;
 3 |     height: 100vh;
 4 | 
 5 |     display: grid;
 6 |     grid-template-areas: "uno dos  dos  cuatro"
 7 |                          "uno tres tres cuatro"
 8 |                          "cinco cinco seis seis";
 9 | }
10 | 
11 | 
12 | .center{
13 |     display: flex;
14 |     justify-content: center;
15 |     align-items: center;
16 | }
17 | 
18 | .uno{
19 |     grid-area: uno;
20 |     background-color: green;
21 | }
22 | 
23 | .dos{
24 |     grid-area: dos;
25 |     background-color: yellow;
26 | }
27 | 
28 | .tres{
29 |     grid-area: tres;
30 |     background-color: yellow;
31 | }
32 | 
33 | .cuatro{
34 |     grid-area: cuatro;
35 |     background-color: green;
36 | }
37 | 
38 | .cinco{
39 |     grid-area: cinco;
40 |     background-color: pink;
41 | }
42 | 
43 | .seis{
44 |     grid-area: seis;
45 |     background-color: blue;
46 | }
47 | 
48 | 
49 | @media screen and (width < 900px) {
50 |     main{
51 |         display: grid;
52 |         grid-template-areas: "uno uno  uno  dos"
53 |                              "tres tres tres cuatro"
54 |                              "cinco cinco cinco seis";
55 |     }
56 | }
57 | 
58 | @media screen and (width < 400px) {
59 |     main{
60 |         grid-template-areas: "uno"
61 |                              "dos"
62 |                              "tres"
63 |                              "cuatro"
64 |                              "cinco"
65 |                              "seis"
66 |     }
67 | }
68 | 


--------------------------------------------------------------------------------
/primer_parcial/modelo_2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Document</title>
 8 |     <link rel="stylesheet" href="./style.css">
 9 | </head>
10 | <body>
11 |     <main>
12 |         <section class="uno center">1</section>
13 |         <section class="dos center">2</section>
14 |         <section class="tres center">3</section>
15 |         <section class="cuatro center">4</section>
16 |         <section class="cinco center">5</section>
17 |         <section class="cinco_b center">5</section>
18 |         <section class="seis center">6</section>
19 |     </main>
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/primer_parcial/modelo_2/style.css:
--------------------------------------------------------------------------------
 1 | main{
 2 |     width: 100%;
 3 |     height: 100vh;
 4 | 
 5 |     display: grid;
 6 |     grid-template-areas: "uno tres  tres  cuatro"
 7 |                          "dos tres tres cinco"
 8 |                          "cinco_b cinco_b seis seis";
 9 | }
10 | 
11 | 
12 | .center{
13 |     display: flex;
14 |     justify-content: center;
15 |     align-items: center;
16 | }
17 | 
18 | .uno{
19 |     grid-area: uno;
20 |     background-color: yellow;
21 | }
22 | 
23 | .dos{
24 |     grid-area: dos;
25 |     background-color: yellow;
26 | }
27 | 
28 | .tres{
29 |     grid-area: tres;
30 |     background-color: green;
31 | }
32 | 
33 | .cuatro{
34 |     grid-area: cuatro;
35 |     background-color: yellow;
36 | }
37 | 
38 | .cinco{
39 |     grid-area: cinco;
40 |     background-color: yellow;
41 | }
42 | 
43 | .cinco_b{
44 |     grid-area: cinco_b;
45 |     background-color: pink;
46 | }
47 | 
48 | .seis{
49 |     grid-area: seis;
50 |     background-color: blue;
51 | }
52 | 
53 | 
54 | @media screen and (width < 900px) {
55 |     main{
56 |         display: grid;
57 |         grid-template-areas: "uno uno  uno  dos"
58 |                              "tres tres cuatro cuatro"
59 |                              "tres tres cuatro cuatro"
60 |                              "tres tres cuatro cuatro"
61 |                              "cinco cinco seis seis";
62 |     }
63 | 
64 |     .cinco_b{
65 |         display: none;
66 |     }
67 | }
68 | 
69 | @media screen and (width < 400px) {
70 |     main{
71 |         grid-template-areas: "seis"
72 |                              "cinco"
73 |                              "cuatro"
74 |                              "tres"
75 |                              "dos"
76 |                              "uno"
77 |     }
78 | 
79 |     .cinco_b{
80 |         display: none;
81 |     }
82 | }
83 | 


--------------------------------------------------------------------------------
/segundo_parcial/index15.html:
--------------------------------------------------------------------------------
  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.0">
  6 |     <title>Tema 15</title>
  7 |     <style>
  8 |         * {
  9 |             margin: 0;
 10 |             padding: 0;
 11 |         }
 12 |         body{
 13 |             width: 100%;
 14 |             height: 100vh;
 15 |             position: relative
 16 |         }
 17 |         header{
 18 |             text-align: center;
 19 |         }
 20 |         .pokemons{
 21 |             display: grid;
 22 |             grid-template-columns: 1fr 1fr 1fr 1fr;
 23 |             grid-template-rows: 10em 1em ;
 24 |             gap: 1em;
 25 |             justify-content: center;
 26 |             margin: 5%;
 27 |         }
 28 |         .pokemon{
 29 |             height: 10em;
 30 |             width: 100%;
 31 |             background-color: blueviolet;
 32 |             border-radius: 1em;
 33 |             position: relative;
 34 |             display: flex;
 35 |             align-items: center;
 36 |             justify-content: center;
 37 |         }
 38 |         .pokemon img{
 39 |             max-width: 100%;
 40 |             max-height: 100%;
 41 |         }
 42 |         .ver-pokemon{
 43 |             position: absolute;
 44 |             top: 1em;
 45 |             right: 1em;
 46 |         }
 47 |         .combatir{
 48 |             background-color: lightgreen;
 49 |             padding-left: 1em;
 50 |             padding-right: 1em;
 51 |             margin-left: 85%;
 52 |         }
 53 |         .modal{
 54 |             position: fixed;
 55 |             top: 0;
 56 |             left: 0;
 57 |             width: 100%;
 58 |             height: 100%;
 59 |             background: rgba(0, 0, 0, 0.5);
 60 |             display: none;
 61 |             justify-content: center;
 62 |             align-items: center;
 63 | 
 64 |         }
 65 |         .modal-content {
 66 |             background: white;
 67 |             padding: 2em;
 68 |             border-radius: 1em;
 69 |             width: 80%;
 70 |             max-width: 500px;
 71 |             text-align: center;
 72 |         }
 73 |     </style>
 74 | </head>
 75 | <body>
 76 |     <header>
 77 |         <h1>Elige la criatura para jugar</h1>
 78 |     </header>
 79 |     <main>
 80 |         <section class="pokemons">
 81 |             <div id="pokemon1" name="pokemon1" class="pokemon">
 82 |                 <button id="ver-pokemon1" ver="ver-pokemon1" class="ver-pokemon">Ver</button>
 83 |                 <img src="" alt="Imagen pokemon 1">
 84 |             </div>
 85 |             <div id="pokemon2" name="pokemon2" class="pokemon">
 86 |                 <button id="ver-pokemon2" ver="ver-pokemon2" class="ver-pokemon">Ver</button>
 87 |                 <img src="" alt="Imagen pokemon 2">
 88 |             </div>
 89 |             <div id="pokemon3" name="pokemon3" class="pokemon">
 90 |                 <button id="ver-pokemon3" ver="ver-pokemon3" class="ver-pokemon">Ver</button>
 91 |                 <img src="" alt="Imagen pokemon 3">
 92 |             </div>
 93 |             <div id="pokemon4" name="pokemon4" class="pokemon">
 94 |                 <button id="ver-pokemon4" ver="ver-pokemon4" class="ver-pokemon">Ver</button>
 95 |                 <img src="" alt="Imagen pokemon 4">
 96 |             </div>
 97 |             <input type="radio" name="pokemon" id="pokemon1">
 98 |             <input type="radio" name="pokemon" id="pokemon2">
 99 |             <input type="radio" name="pokemon" id="pokemon3">
100 |             <input type="radio" name="pokemon" id="pokemon4">
101 |         </section>
102 |         <Button id="btn-combatir" class="combatir"> Combatir </Button>
103 |     </main>
104 |     <section id="modal" class="modal">
105 |         <article class="modal-content">
106 |             <p>
107 |                 Pokemon seleccionado
108 |             </p>
109 |             <button> Aceptar </button>
110 |         </article>
111 |     </section>
112 | </body>
113 | </html>


--------------------------------------------------------------------------------
/segundo_parcial/index16.html:
--------------------------------------------------------------------------------
  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.0">
  6 |     <title>Tema 16</title>
  7 | 
  8 |     <style>
  9 |         *{
 10 |             padding: 0;
 11 |             margin: 0;
 12 |         }
 13 |         body{
 14 |             width: 100%;
 15 |             height: 100vh;
 16 |             position: relative;
 17 |         }
 18 |         .combate{
 19 |             display: flex;
 20 |             flex-direction: column;
 21 |             width: 100%;
 22 |             height: 100vh;
 23 |             justify-content: space-between;
 24 |         }
 25 |         .pokemon{
 26 |             height: 5em;
 27 |             background-color: blueviolet;
 28 |             border-radius: 1em;
 29 |             position: relative;
 30 |             display: flex;
 31 |             align-items: center;
 32 |             justify-content: center;
 33 |         }
 34 |         .pokemon img{
 35 |             max-width: 100%;
 36 |             max-height: 100%;
 37 |         }
 38 |         .pokemon-rival{
 39 |             align-self: flex-end;
 40 |         }
 41 |         .pokemon-usuario{
 42 |             align-self: flex-start;
 43 |         }
 44 |         .botones{
 45 |             display: flex;
 46 |             flex-direction: column;
 47 |         }
 48 |         .modal{
 49 |             position: fixed;
 50 |             top: 0;
 51 |             left: 0;
 52 |             width: 100%;
 53 |             height: 100%;
 54 |             background: rgba(0, 0, 0, 0.5);
 55 |             display: none;
 56 |             justify-content: center;
 57 |             align-items: center;
 58 | 
 59 |         }
 60 |         .modal-content {
 61 |             background: palevioletred;
 62 |             padding: 2em;
 63 |             border-radius: 1em;
 64 |             width: 80%;
 65 |             max-width: 500px;
 66 |             text-align: center;
 67 |             display: flex;
 68 |             flex-direction: column;
 69 |         }
 70 |     </style>
 71 | </head>
 72 | <body>
 73 |     <header></header>
 74 |     <main>
 75 |         <section class="combate">
 76 |             <div id="pokemon-rival" name="pokemon-rival" class="pokemon-rival">
 77 |                 <div class="pokemon">
 78 |                     <img src="" alt="Imagen pokemon rival">
 79 |                 </div>
 80 |                 <p> Energia: 100% </p>
 81 |                 <div class="botones">
 82 |                     <input type="button" value="Rendirse">
 83 |                     <input type="button" value="Lanzar poder">
 84 |                 </div>
 85 |             </div>
 86 |             <div id="pokemon-usuario" name="pokemon-usuario" class="pokemon-usuario">
 87 |                 <div class="pokemon">
 88 |                     <img src="" alt="Imagen pokemon usuario">
 89 |                 </div>
 90 |                 <p> Energia: 100% </p>
 91 |                 <div class="botones">
 92 |                     <input type="button" value="Rendirse">
 93 |                     <input type="button" value="Lanzar poder">
 94 |                 </div>
 95 |             </div>
 96 |         </section>
 97 |     </main>
 98 |     <section id="modal" class="modal">
 99 |         <article class="modal-content">
100 |             <button> Poder 1 </button>
101 |             <button> Poder 2 </button>
102 |             <button> Poder 3 </button>
103 |         </article>
104 |     </section>
105 | </body>
106 | </html>


--------------------------------------------------------------------------------