nicolas899 · nicolas899 · Oct 3, 2022 · Oct 8, 2022 · Oct 10, 2022 · Oct 16, 2022
diff --git a/03-HTML Y CSS/01- CLASE 1/miprimerweb.html b/03-HTML Y CSS/01- CLASE 1/miprimerweb.html
@@ -0,0 +1,19 @@
+<html>
+    <head>
+        <title>
+            Ejercicio de Introducción a HTML en OpenBootcamp
+        </title>
+    </head>
+    <body>
+        <p>Este es mi primer comentario de dos líneas</p>
+        <p>Aprendiendo a documentar mi código con OpenBootcamp</p>
+
+        <h4>Videos favoritos</h4>
+
+        <ul>
+            <li><a href="https://www.youtube.com/watch?v=JPTJQVoLpEs&ab_channel=ClubAtl%C3%A9ticoBelgrano">Gol del Coky, belgrano campeon</a></li>
+            <li><a href="https://www.youtube.com/watch?v=yMyoyy069bk&ab_channel=BochaHouriet">Argentina Campeon relato del bocha</a></li>
+            <li><a href="https://www.youtube.com/watch?v=BLx8Z7MnrJc&ab_channel=ClubAtl%C3%A9ticoBelgrano">Recibimiento Belgrano</a></li>
+        </ul>
+    </body>
+</html>
diff --git a/03-HTML Y CSS/02- CLASE 2 FORMULARIO/formulario2.html b/03-HTML Y CSS/02- CLASE 2 FORMULARIO/formulario2.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<head>
+    <title>
+        Ejercicio 02/2 - Tablas en HTML
+    </title>
+</head>
+<body>
+    <h4>
+        LIBROS FAVORITOS
+    </h4>
+    <table>
+        <tr>
+            <th>Titulo</th>
+            <th>Autor</th>
+            <th>Año de publicacion</th>
+            <th>Enlace de amazon</th>
+        </tr>
+        <tr>
+            <td>Las venas abiertas de america latina</td>
+            <td>Eduardo Galeano</td>
+            <td>2006</td>
+            <td><a href="https://www.amazon.com/-/es/Eduardo-Galeano/dp/9682325579">Link</a></td>
+        </tr>
+        <tr>
+            <td>Don quijote de la mancha</td>
+            <td>Miguel de Cervantes</td>
+            <td>2017</td>
+            <td><a href="https://www.amazon.com/Miguel-Cervantes/dp/997818211X/ref=d_pd_sbs_sccl_3_16/136-3556171-2932264?pd_rd_w=NEqWK&content-id=amzn1.sym.3676f086-9496-4fd7-8490-77cf7f43f846&pf_rd_p=3676f086-9496-4fd7-8490-77cf7f43f846&pf_rd_r=2QG1SHYB5NV9V0KRYV8K&pd_rd_wg=exk0p&pd_rd_r=35b478d2-9e7f-4fe2-bc46-de18273db88c&pd_rd_i=997818211X&psc=1">Link</a></td>
+
+        </tr>
+
+        <tr>
+            <td>El alquimista</td>
+            <td>Paulo Coelho</td>
+            <td>2022</td>
+            <td><a href="https://www.amazon.com/-/es/Paulo-Coelho/dp/0062511408/ref=d_pd_sbs_sccl_2_4/136-3556171-2932264?pd_rd_w=UP89I&content-id=amzn1.sym.3676f086-9496-4fd7-8490-77cf7f43f846&pf_rd_p=3676f086-9496-4fd7-8490-77cf7f43f846&pf_rd_r=Q12PY2CHPY612SA2SGWQ&pd_rd_wg=ts5Fo&pd_rd_r=dde8f9bb-c87f-4b81-b6a5-d02c99c0d873&pd_rd_i=0062511408&psc=1">Link</a></td>
+        </tr>
+    </table>
+
+</body>
diff --git a/03-HTML Y CSS/02- CLASE 2 FORMULARIO/formularios.html b/03-HTML Y CSS/02- CLASE 2 FORMULARIO/formularios.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Ejercicio 02 - Formularios en HTML</title>
+
+    </head>
+    <body>
+        <p>Formulario </p>
+        <form action="/">
+            <div>
+                <label for="nombredeusuario">Nombre</label>
+                <input type="text" name="nombredeusuario" id="nombredeusuario">
+            </div>
+            <div>
+                <label for="edad">edad</label>
+                <input type="number" name="edad" id="edad">
+            </div>
+            <br>
+                <div>
+                    <label for="frase">Frase favorita</label>
+                    <textarea name="frase" id="frase" cols="50" rows="5"></textarea>
+                </div>
+            <br>
+            <button type="submit">enviar</button>
+            <button type="reset">reset</button>
+
+        </form>
+
+
+    </body>
+
+</html>
diff --git a/03-HTML Y CSS/02- CLASE 2 FORMULARIO/resultado.htm b/03-HTML Y CSS/02- CLASE 2 FORMULARIO/resultado.htm
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<HTMl>
+    <head>
+        <title>Resultados</title>
+    </head>
+    <body>
+        <p>
+            Aqui se mostraran los resultados 
+        </p>
+    </body>
+
+</HTMl>
diff --git a/03-HTML Y CSS/03-MULTIMEDIA/EJERCICIO 1/INDICE.html b/03-HTML Y CSS/03-MULTIMEDIA/EJERCICIO 1/INDICE.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<head>
+    <title>Ejercicio multimedia</title>
+</head>
+<body>
+    <p><a href="imagenes.html">01-Aprendiendo a utilizar imágenes</a></p>
+    <p><a href="videos.html">02- Aprendiendo a ultilizar los videos</a></p>
+    <p><a href="audios.html">03- Aprendiendo a utilizar los audios</a></p>
+</body>
diff --git a/03-HTML Y CSS/03-MULTIMEDIA/EJERCICIO 1/audios.html b/03-HTML Y CSS/03-MULTIMEDIA/EJERCICIO 1/audios.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<head>
+    <title>
+        Aprendiendo a usar los audios
+    </title>
+</head>
+<body>
+    <h3>Argentina campeon, Relato Bocha Houriet</h3>
+
+    <audio controls autoplay loop>
+        <source src="bocha.mp3" type="audio/mp3">
+    </audio>
+</body>
diff --git a/03-HTML Y CSS/03-MULTIMEDIA/EJERCICIO 1/bocha.mp3 b/03-HTML Y CSS/03-MULTIMEDIA/EJERCICIO 1/bocha.mp3
diff --git a/03-HTML Y CSS/03-MULTIMEDIA/EJERCICIO 1/golazo.mp4 b/03-HTML Y CSS/03-MULTIMEDIA/EJERCICIO 1/golazo.mp4
diff --git a/03-HTML Y CSS/03-MULTIMEDIA/EJERCICIO 1/imagenes.html b/03-HTML Y CSS/03-MULTIMEDIA/EJERCICIO 1/imagenes.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<head>
+    <title>
+        Aprendiendo a utilizar imágenes
+    </title>
+</head>
+<body>
+    <h3>
+        Videojuego Favorito
+    </h3>
+    <img src="https://image.api.playstation.com/vulcan/ap/rnd/202301/0312/yM0eeJui8AFByeP5BC5XV5j9.png" alt="LOGO FIFA 23">
+</body>
diff --git a/03-HTML Y CSS/03-MULTIMEDIA/EJERCICIO 1/videos.html b/03-HTML Y CSS/03-MULTIMEDIA/EJERCICIO 1/videos.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<head>
+    <title>
+        Aprendiendo a usar audios
+    </title>
+</head>
+<body>
+    <h3>Gol del campeonato coky suvieller</h3>
+    <video width="600" height="400" controls autoplay muted loop>
+        <source src="golazo.mp4" type="video/mp4">
+
+    </video>
+</body>
diff --git a/03-HTML Y CSS/04-CSS/EJERCICIO CSS/Estilos.css b/03-HTML Y CSS/04-CSS/EJERCICIO CSS/Estilos.css
@@ -0,0 +1,9 @@
+h2 {
+    color: blue;
+}
+
+
+.elemento-1 {
+    font-size: 2rem;
+    color: red
+}
diff --git a/03-HTML Y CSS/04-CSS/EJERCICIO CSS/ejercicioscss.html b/03-HTML Y CSS/04-CSS/EJERCICIO CSS/ejercicioscss.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ganando precisión con los selectores en CSS</title>
+    <link rel="Stylesheet" href="Estilos.css">
+</head>
+
+<body>
+    <h1 Lista id="titulo"> Lista de Compras</h1>
+    <h2 class="encabezado"> Articulos de compras</h2>
+
+    <ul>
+        <li class="elemento-1">arroz</li>
+        <li id="elemento-2">milanesas</li>
+        <li id="elemento-3">pan</li>
+        <li id="elemento-4">mayonesa</li>
+        <li id="elemento-5">queso</li>
+
+    </ul>
+
+    <h2 class="encabezado2">Supermercados cerca</h2>
+    <ol>
+        <li class="elemento-1">carrefour</li>
+        <li id="elemento-2">walmark</li>
+        <li id="elemento-3">dino</li>
+        <li id="elemento-4">disco</li>
+        <li id="elemento-5">vea</li>
+
+    </ol>
+
+</body>
+</html>
+
+<!---
+    1-Crea un nuevo documento HTML con el título "Ganando precisión con los selectores en CSS"
+
+2-Crea un nuevo fichero CSS e impórtalo en el documento HTML principal
+
+3-Dentro del body crea una sección con los siguientes elementos:
+
+Encabezado que contenga el texto "Lista de la compra"
+
+4-Añade en el encabezado un atributo id con el valor "titulo"
+
+5-Añade también un atributo class con el valor "encabezado"
+
+6-Una lista desordenada con cinco elementos que representen artículos de la compra
+
+Cada uno de los elementos debe tener un id como sigue: primer elemento "elemento-1", segundo elemento "elemento-2", etc.
+
+7-Una lista ordenada con cinco elementos que representan los supermercados más cercanos a tu casa
+
+Al igual que en la lista anterior, cada uno de los elementos debe tener un id como sigue: primer elemento "elemento-1", segundo elemento "elemento-2", etc.
+
+8-Modifica el CSS para que el primer elemento de cada lista se muestre de color rojo
+
+9-A través del encadenamiento de selectores, haz que el primer elemento de la primera lista tenga un tamaño de letra de 2rem
+-->
diff --git a/03-HTML Y CSS/05-CLASE5/belgranos.css b/03-HTML Y CSS/05-CLASE5/belgranos.css
@@ -0,0 +1,11 @@
+.flexbelgrano{
+    display: flex;
+    background-color: white;
+    height: 600px;
+    flex-wrap: wrap;
+}
+
+.img1{
+    height: 300px;
+    width: 300px;
+}
diff --git a/03-HTML Y CSS/05-CLASE5/ejercicio.html b/03-HTML Y CSS/05-CLASE5/ejercicio.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Club Atletico Belgrano</title>
+    <link rel="stylesheet" href="belgranos.css">
+</head>
+<body>
+    <div class="flexbelgrano">
+        <img class="img1" src="guille.jpg" alt="guille">
+        <img class="img1" src="juanca.jpeg" alt="juanca">
+        <img class="img1" src="fvasquez.jpeg" alt="franco">
+        <img class="img1" src="pablo.jpg" alt="pablo">
+        <img class="img1" src="picante.jpg" alt="picante">
+        <img class="img1" src="ruso.jpg" alt="ruso">
+    </div>
+
+</body>
+</html>
diff --git a/03-HTML Y CSS/05-CLASE5/fvasquez.jpeg b/03-HTML Y CSS/05-CLASE5/fvasquez.jpeg
diff --git a/03-HTML Y CSS/05-CLASE5/guille.jpg b/03-HTML Y CSS/05-CLASE5/guille.jpg
diff --git a/03-HTML Y CSS/05-CLASE5/juanca.jpeg b/03-HTML Y CSS/05-CLASE5/juanca.jpeg
diff --git a/03-HTML Y CSS/05-CLASE5/pablo.jpg b/03-HTML Y CSS/05-CLASE5/pablo.jpg
diff --git a/03-HTML Y CSS/05-CLASE5/picante.jpg b/03-HTML Y CSS/05-CLASE5/picante.jpg
diff --git a/03-HTML Y CSS/05-CLASE5/ruso.jpg b/03-HTML Y CSS/05-CLASE5/ruso.jpg
diff --git a/03-HTML Y CSS/06-ANIDACION DE SELECTORES/05-EJERCICIO/ejer6.css b/03-HTML Y CSS/06-ANIDACION DE SELECTORES/05-EJERCICIO/ejer6.css
@@ -0,0 +1,14 @@
+span.idbtn::before {
+    content:'pasa por encima';
+    font-size: small;
+}
+
+.btn1:hover{
+    color: white;
+    background-color: green;
+}
+
+span:active::before{
+    content: '¡hecho! ---->';
+    font-size: small;
+}
diff --git a/03-HTML Y CSS/06-ANIDACION DE SELECTORES/05-EJERCICIO/ejercicio.html b/03-HTML Y CSS/06-ANIDACION DE SELECTORES/05-EJERCICIO/ejercicio.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Selectores,pseudo-clases y pseudo.ekementos en CSS</title>
+    <link rel="stylesheet" href="ejer6.css">
+</head>
+<body>
+
+    <div><button class="btn1"><span class="idbtn"></span></button></div>
+
+</body>
+</html>
+
+<!--Crea un nuevo documento HTML con el título "Selectores, pseudo-clases y 
+    pseudo-elementos en CSS"
+
+Crea un nuevo fichero CSS e impórtalo en el documento HTML principal
+
+Crea un botón con el texto "Pasa por encima" (TIP: Este texto debes agregarlo a 
+través de un pseudo-elemento)
+
+Utiliza las pseudo-clases para que cuando se pase el ratón por encima de este botón, 
+el texto se vuelva blanco y el fondo de color verde
+
+Utiliza los pseudo-elementos para cambiar el texto del botón a "¡Hecho!" -->
diff --git a/03-HTML Y CSS/07-FORMULARIO/LOGIN-FORM/login.html b/03-HTML Y CSS/07-FORMULARIO/LOGIN-FORM/login.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login</title>
+    <link rel="stylesheet" href="logincs.css">
+</head>
+<body class="cuerpo">
+    <div class="container">
+        <h3>Registrate en los formularios</h3>
+        <div class="buttons">
+            <button class="google-btn">
+                <picture>
+                    <img src="https://cdn1.iconfinder.com/data/icons/google-s-logo/150/Google_Icons-09-512.png" alt="Logo google">
+                </picture>
+                <span>Registrarse con Google</span>
+
+            </button>
+            <button class="Twiter-btn">
+                <picture>
+                    <img src="https://img.freepik.com/vector-premium/icono-twitter-iconos-redes-sociales-estilo-corte-papel_505135-257.jpg?w=2000" alt="Logo twiter">
+                </picture>
+
+            </button>
+
+        </div>
+
+        <div class="separator">
+            <hr>
+            <span>o....</span>
+            <hr>
+        </div>
+
+        <form action="" method="">
+            <div class="seccion-inputs">
+                <label for="name">
+                    <span>Name</span>
+                    <input id="name" name="name">
+                </label>
+
+                <label for="username">
+                    <span>Username</span>
+                    <input id="username" name="username">
+                </label>
+
+            </div>
+
+            <label for="email">
+                <span>email</span>
+                <input id="email" name="email">
+            </label>
+
+            <label for="password">
+                <span>Paswword</span>
+                <input type="password" id="password" name="password" placeholder="6+characters">
+            </label>
+
+            <label for="checkbox" class="checkbox-label">
+                <span>Acepto los terminos y condiciones</span>
+                <input type="checkbox" id="checkbox" >
+            </label>
+
+            <button type="submit" class="submit-btn">crear cuenta</button>
+
+        </form>
+
+    </div>
+</body>
+</html>