├── PROYECTO
    ├── videos.html
    ├── .DS_Store
    ├── css
    │   ├── .DS_Store
    │   ├── flexbox.css
    │   └── styles.css
    ├── images
    │   ├── .DS_Store
    │   ├── index.png
    │   └── redsocial.jpg
    ├── portfolio
    │   ├── .DS_Store
    │   └── images
    │   │   └── index.png
    ├── flexbox.html
    ├── contacto.html
    ├── demo.html
    └── index.html
├── .DS_Store
├── SLIDES
    ├── CSS.pdf
    ├── .DS_Store
    ├── Bootrstrap.pdf
    ├── INTRO-HTML.pdf
    ├── SEMANTICAS.pdf
    └── INTRO-HTML-2.pdf
├── EJEMPLO
    ├── .DS_Store
    └── spiderman.jpg
├── PORTFOLIO
    ├── .DS_Store
    ├── images
    │   ├── banner.jpg
    │   ├── index.png
    │   ├── redsocial.jpg
    │   └── unicuerno.jpg
    ├── css
    │   └── styles.css
    ├── propuestas.html
    ├── carita.html
    └── index.html
└── Roadmap del curso


/PROYECTO/videos.html:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dileofrancoj/WEB-INICIAL-YOUTUBE/HEAD/.DS_Store


--------------------------------------------------------------------------------
/SLIDES/CSS.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dileofrancoj/WEB-INICIAL-YOUTUBE/HEAD/SLIDES/CSS.pdf


--------------------------------------------------------------------------------
/EJEMPLO/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dileofrancoj/WEB-INICIAL-YOUTUBE/HEAD/EJEMPLO/.DS_Store


--------------------------------------------------------------------------------
/SLIDES/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dileofrancoj/WEB-INICIAL-YOUTUBE/HEAD/SLIDES/.DS_Store


--------------------------------------------------------------------------------
/PORTFOLIO/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dileofrancoj/WEB-INICIAL-YOUTUBE/HEAD/PORTFOLIO/.DS_Store


--------------------------------------------------------------------------------
/PROYECTO/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dileofrancoj/WEB-INICIAL-YOUTUBE/HEAD/PROYECTO/.DS_Store


--------------------------------------------------------------------------------
/EJEMPLO/spiderman.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dileofrancoj/WEB-INICIAL-YOUTUBE/HEAD/EJEMPLO/spiderman.jpg


--------------------------------------------------------------------------------
/PROYECTO/css/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dileofrancoj/WEB-INICIAL-YOUTUBE/HEAD/PROYECTO/css/.DS_Store


--------------------------------------------------------------------------------
/SLIDES/Bootrstrap.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dileofrancoj/WEB-INICIAL-YOUTUBE/HEAD/SLIDES/Bootrstrap.pdf


--------------------------------------------------------------------------------
/SLIDES/INTRO-HTML.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dileofrancoj/WEB-INICIAL-YOUTUBE/HEAD/SLIDES/INTRO-HTML.pdf


--------------------------------------------------------------------------------
/SLIDES/SEMANTICAS.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dileofrancoj/WEB-INICIAL-YOUTUBE/HEAD/SLIDES/SEMANTICAS.pdf


--------------------------------------------------------------------------------
/PROYECTO/images/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dileofrancoj/WEB-INICIAL-YOUTUBE/HEAD/PROYECTO/images/.DS_Store


--------------------------------------------------------------------------------
/PROYECTO/images/index.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dileofrancoj/WEB-INICIAL-YOUTUBE/HEAD/PROYECTO/images/index.png


--------------------------------------------------------------------------------
/SLIDES/INTRO-HTML-2.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dileofrancoj/WEB-INICIAL-YOUTUBE/HEAD/SLIDES/INTRO-HTML-2.pdf


--------------------------------------------------------------------------------
/PORTFOLIO/images/banner.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dileofrancoj/WEB-INICIAL-YOUTUBE/HEAD/PORTFOLIO/images/banner.jpg


--------------------------------------------------------------------------------
/PORTFOLIO/images/index.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dileofrancoj/WEB-INICIAL-YOUTUBE/HEAD/PORTFOLIO/images/index.png


--------------------------------------------------------------------------------
/PORTFOLIO/images/redsocial.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dileofrancoj/WEB-INICIAL-YOUTUBE/HEAD/PORTFOLIO/images/redsocial.jpg


--------------------------------------------------------------------------------
/PORTFOLIO/images/unicuerno.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dileofrancoj/WEB-INICIAL-YOUTUBE/HEAD/PORTFOLIO/images/unicuerno.jpg


--------------------------------------------------------------------------------
/PROYECTO/images/redsocial.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dileofrancoj/WEB-INICIAL-YOUTUBE/HEAD/PROYECTO/images/redsocial.jpg


--------------------------------------------------------------------------------
/PROYECTO/portfolio/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dileofrancoj/WEB-INICIAL-YOUTUBE/HEAD/PROYECTO/portfolio/.DS_Store


--------------------------------------------------------------------------------
/PROYECTO/portfolio/images/index.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dileofrancoj/WEB-INICIAL-YOUTUBE/HEAD/PROYECTO/portfolio/images/index.png


--------------------------------------------------------------------------------
/PROYECTO/flexbox.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <link rel="stylesheet" href="css/flexbox.css" />
 5 |     <meta charset="UTF-8" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Flexbox : dummy 🤓</title>
 8 |   </head>
 9 |   <body>
10 |     <!--  
11 | 
12 |         row | contenedor
13 |             col | contenido
14 | 
15 |     -->
16 |     <div class="row">
17 |       <div class="col">
18 |         <h2 class="titulo">Imagen</h2>
19 |       </div>
20 |     </div>
21 |   </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/Roadmap del curso:
--------------------------------------------------------------------------------
 1 | Roadmap del curso
 2 |     1. HTML - conceptos básicos (17/08)
 3 |     2. HTML5 + FORMULARIOS (18/08)
 4 |     3. CSS (20/08)
 5 |     4. BOOTSTRAP 4 (21/08)
 6 |     5. BOOTSTRAP 4 (25/08)
 7 |     6. CLASE PRACTICA (PROYECTO) (27/08)
 8 |     7. Javascript - Introducción a la programación (28/08)
 9 |     8. Javascript - Estructuras repetitivas y de control (1/09)
10 |     9. Funciones. Introducción al DOM (3/09)
11 |     10. DOM (4/09)
12 |     11. MySQL - Introducción (8/09)
13 |     12. NodeJS - Introducción + Routing (10/09)
14 |     13. Sistema de vistas + Envío de información (11/09)
15 |     14. Envío de correo electrónico (15/09)
16 |     15. NodeJS + MySQL  (17/09) (ver)
17 |     16. Cierre
18 | 
19 | 


--------------------------------------------------------------------------------
/PORTFOLIO/css/styles.css:
--------------------------------------------------------------------------------
 1 | .header {
 2 |   height: 45vh;
 3 |   background-image: url("../images/banner.jpg");
 4 |   background-size: cover;
 5 | }
 6 | 
 7 | p {
 8 |   font-size: 18px;
 9 | }
10 | 
11 | .icono {
12 |   font-size: 48px;
13 | }
14 | 
15 | .icono:hover {
16 |   transform: scale(1.5) rotate(-10deg);
17 |   transition-duration: 400ms;
18 |   opacity: 0.9;
19 |   transition-timing-function: ease-in-out;
20 | }
21 | 
22 | .imagen {
23 |   width: 200px;
24 |   height: auto;
25 | }
26 | 
27 | .subrayar {
28 |   text-decoration: underline;
29 | }
30 | 
31 | .imagen:hover {
32 |   transform: scale(2);
33 |   transition-duration: 20s;
34 |   opacity: 0.5;
35 | }
36 | 
37 | .frase-texto {
38 |   color: #2f58a5;
39 |   font-size: 32px;
40 | }
41 | 
42 | .frase {
43 |   background: #e8ced4;
44 |   height: auto;
45 | }
46 | 
47 | nav {
48 |   position: fixed;
49 | }
50 | 
51 | .footer {
52 |   background: darkslategray;
53 |   color: ghostwhite;
54 | }
55 | textarea {
56 |   resize: none;
57 | }
58 | 
59 | .fondo-unicornio {
60 |   background-image: url("../images/unicuerno.jpg");
61 |   background-size: cover;
62 |   opacity: 0.95;
63 | }
64 | 
65 | .cajaLoca {
66 |   background: red;
67 | }
68 | 
69 | .cajaLoca:hover {
70 |   background: blue;
71 |   transition-duration: 2000ms;
72 |   transform: rotate(360deg);
73 | }
74 | 


--------------------------------------------------------------------------------
/PROYECTO/css/flexbox.css:
--------------------------------------------------------------------------------
 1 | /*
 2 |     FLEXBOX : Conjunto de propiedades css (posicionar elementos en la web)
 3 | */
 4 | 
 5 | /*
 6 |     display:flex;
 7 |     flex-wrap : nowrap | wrap
 8 |     justify-content (posicionamiento horizontal de bloques) : flex-start | flex-end | center | space-around | space-between
 9 | */
10 | 
11 | /*  */
12 | * {
13 |   margin: 0;
14 |   padding: 0;
15 |   background: gray;
16 | }
17 | 
18 | .row {
19 |   display: flex;
20 |   flex-wrap: wrap;
21 |   flex-direction: row;
22 |   justify-content: center;
23 |   align-items: center;
24 |   height: 300px;
25 | }
26 | 
27 | .padding-text {
28 |   padding-top: 30px;
29 |   padding-bottom: 30px;
30 | }
31 | .titulo {
32 |   height: 100px;
33 | }
34 | 
35 | .col {
36 |   width: 70%;
37 |   height: 100px;
38 |   background: violet;
39 |   border: 2px solid hotpink;
40 |   border-radius: 10px;
41 |   margin-right: 20px;
42 |   opacity: 0.7;
43 |   text-align: center;
44 | }
45 | 
46 | span {
47 |   font-size: 22px;
48 |   color: green;
49 |   font-weight: bold;
50 | }
51 | 
52 | /*
53 |     Propiedades resumidas : 
54 |     padding : top right bottom left   10 20 30 40
55 |     padding : top/bottom right/left   20 30
56 |     padding : 20px ->  20px de arriba abajo izquierda y derecha
57 | */
58 | 
59 | /*
60 | 
61 | margin : 0 auto;
62 | 
63 | */
64 | .padding {
65 |   padding: 30px 20px 10px 60px;
66 | }
67 | 


--------------------------------------------------------------------------------
/PORTFOLIO/propuestas.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>Propuestas de curso</title>
 7 |     <link
 8 |       rel="stylesheet"
 9 |       href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
10 |       integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
11 |       crossorigin="anonymous"
12 |     />
13 |     <link rel="stylesheet" href="css/styles.css" />
14 |   </head>
15 |   <body>
16 |     <section class="container-fluid fondo-unicornio">
17 |       <div class="row justify-content-center align-items-center vh-100">
18 |         <div class="col-4 bg-dark pt-5 pb-5">
19 |           <h1 class="text-center text-white">Contactame 🤓</h1>
20 |           <form action="" method="post" class="mt-4">
21 |             <div class="form-group">
22 |               <input type="text" placeholder="Nombre" class="form-control" />
23 |             </div>
24 |             <div class="form-group">
25 |               <input type="text" placeholder="Correo" class="form-control" />
26 |             </div>
27 |             <div class="form-group">
28 |               <select class="form-control">
29 |                 <option>Backend</option>
30 |                 <option>Frontend</option>
31 |                 <option>Fullstack</option>
32 |               </select>
33 |             </div>
34 |             <button class="btn btn-info btn-block">
35 |               Mandame un mensajito :D
36 |             </button>
37 |           </form>
38 |         </div>
39 |       </div>
40 |     </section>
41 | 
42 |     <div class="cajaLoca">
43 |       <h2>HOLA</h2>
44 |     </div>
45 |   </body>
46 | </html>
47 | 


--------------------------------------------------------------------------------
/PROYECTO/css/styles.css:
--------------------------------------------------------------------------------
  1 | /* Comentario */
  2 | 
  3 | h1,
  4 | h4 {
  5 |   color: white;
  6 |   font-size: 32px;
  7 |   text-align: center;
  8 |   font-family: Georgia, "Times New Roman", "Arial";
  9 |   font-style: italic;
 10 | }
 11 | h4 {
 12 |   font-size: 18px;
 13 | }
 14 | 
 15 | .padding-section {
 16 |   padding: 10px;
 17 | }
 18 | 
 19 | header {
 20 |   background: black;
 21 | }
 22 | 
 23 | main > p > span {
 24 |   color: darkcyan;
 25 | }
 26 | 
 27 | .destacar {
 28 |   background: black;
 29 |   font-family: Impact, "Arial Narrow Bold", sans-serif;
 30 |   text-align: center;
 31 |   /* estilos del borde */
 32 |   border: 3px solid tomato;
 33 |   border-radius: 3px;
 34 | }
 35 | .destacar-palabra {
 36 |   font-weight: 900;
 37 | }
 38 | 
 39 | h2:hover {
 40 |   background: olive;
 41 | }
 42 | 
 43 | /*
 44 |   padding-top
 45 |   padding-right 
 46 |   padding-bottom
 47 |   padding-left
 48 | 
 49 | */
 50 | .subrayar-arriba {
 51 |   text-decoration: overline;
 52 | }
 53 | 
 54 | .padding-titulo {
 55 |   padding-top: 20px;
 56 |   padding-bottom: 18px;
 57 | }
 58 | 
 59 | .margin-titulo {
 60 |   margin-top: 40px;
 61 |   margin-bottom: 40px;
 62 | }
 63 | 
 64 | .tachar {
 65 |   text-decoration: line-through;
 66 | }
 67 | .subrayar {
 68 |   text-decoration: underline;
 69 | }
 70 | 
 71 | .tomato {
 72 |   color: tomato;
 73 | }
 74 | 
 75 | .oliva {
 76 |   color: olive;
 77 | }
 78 | 
 79 | /* 
 80 | PSEUDOCLASES 
 81 | */
 82 | 
 83 | /*NO VISITADO*/
 84 | a:link {
 85 |   text-decoration: none;
 86 | }
 87 | /*VISITADO */
 88 | a:visited {
 89 |   text-decoration: none;
 90 | }
 91 | /*activo */
 92 | a:active {
 93 |   text-decoration: none;
 94 |   color: greenyellow;
 95 |   font-family: Verdana, Geneva, Tahoma, sans-serif;
 96 |   font-weight: bold;
 97 | }
 98 | /*Hover : posiciono el mouse sobre el link*/
 99 | a:hover {
100 |   text-decoration: none;
101 |   font-family: Georgia, "Times New Roman", Times, serif;
102 |   font-size: 89px;
103 |   background: goldenrod;
104 | }
105 | 


--------------------------------------------------------------------------------
/PORTFOLIO/carita.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
 8 |       rel="stylesheet"
 9 |       href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
10 |       integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
11 |       crossorigin="anonymous"
12 |     />
13 |     <link rel="stylesheet" href="css/styles.css" />
14 |     <script
15 |       src="https://kit.fontawesome.com/07397e1e91.js"
16 |       crossorigin="anonymous"
17 |     ></script>
18 | 
19 |     <style>
20 |       .ojo {
21 |         width: 150px;
22 |         height: 150px;
23 |         border-radius: 50%;
24 |         background: white;
25 |         margin-top: 100px;
26 |       }
27 | 
28 |       .pupila {
29 |         border-radius: 50%;
30 |         width: 50px;
31 |         height: 50px;
32 |       }
33 |       .boca {
34 |         background: black;
35 |         height: 80px;
36 |       }
37 |       .nariz {
38 |         background: orange;
39 |         width: 50px;
40 |         height: 30px;
41 |         border-radius: 30%;
42 |         margin-top: 20px;
43 |       }
44 | 
45 |       .container {
46 |         height: 500px;
47 |         width: 500px;
48 |         background: yellow;
49 |         border-radius: 50%;
50 |       }
51 |     </style>
52 |   </head>
53 |   <body>
54 |     <div class="container bg-warning mt-5">
55 |       <div class="row justify-content-center mt-5">
56 |         <div
57 |           class="col-3 ojo mr-1 justify-content-end d-flex align-items-center"
58 |         >
59 |           <div class="pupila bg-dark"></div>
60 |         </div>
61 |         <div
62 |           class="col-3 ojo mr-1 justify-content-end d-flex align-items-center"
63 |         >
64 |           <div class="pupila bg-dark"></div>
65 |         </div>
66 |       </div>
67 |       <div class="row justify-content-center mt-4">
68 |         <div class="col-3 nariz"></div>
69 |       </div>
70 |     </div>
71 |   </body>
72 | </html>
73 | 


--------------------------------------------------------------------------------
/PROYECTO/contacto.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link
 6 |       href="https://http2.mlstatic.com/frontend-assets/ui-navigation/5.9.0/mercadolibre/favicon.svg"
 7 |       rel="icon"
 8 |       data-head-react="true"
 9 |     />
10 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
11 |     <title>Contacto</title>
12 |     <script
13 |       src="https://kit.fontawesome.com/07397e1e91.js"
14 |       crossorigin="anonymous"
15 |     ></script>
16 |   </head>
17 |   <body>
18 |     <h1>Estemos en contacto 🤓</h1>
19 | 
20 |     <form method="post" action="#">
21 |       <label for="nombreCompleto">Nombre completo *</label>
22 |       <input
23 |         autofocus
24 |         type="text"
25 |         id="nombreCompleto"
26 |         required
27 |         placeholder="Nombre completo"
28 |       />
29 |       <br />
30 |       <label for="asunto">Asunto * </label>
31 |       <input type="text" id="asunto" required placeholder="asunto" />
32 |       <br />
33 |       <label for="correo">Correo *</label>
34 |       <input
35 |         type="email"
36 |         id="correo"
37 |         required
38 |         placeholder="correo@ejemplo.com"
39 |       />
40 |       <br />
41 |       <label for="texto">Dejá tu mensaje </label>
42 |       <br />
43 |       <textarea
44 |         required
45 |         maxlength="100"
46 |         rows="10"
47 |         id="texto"
48 |         cols="40"
49 |         placeholder="Dejá tu mensaje y te responderemos a la brevedad"
50 |       ></textarea>
51 |       <button type="submit">Enviar</button>
52 |     </form>
53 |     <br />
54 |     <br />
55 |     <br />
56 | 
57 |     <a href="https://facebook.com/fdileo/08j674109" target="_blank">
58 |       <i
59 |         class="fab fa-facebook-f fa-2x"
60 |         style="color: #1877f2; font-size: 42px;"
61 |       ></i>
62 |     </a>
63 |     <a href="https://instagram.com/francodileo">
64 |       <i class="fab fa-instagram fa-2x"></i>
65 |     </a>
66 |     <i class="fab fa-linkedin-in fa-2x"></i>
67 |     <!-- https://fontawesome.com/?from=io -->
68 |   </body>
69 | </html>
70 | 


--------------------------------------------------------------------------------
/PROYECTO/demo.html:
--------------------------------------------------------------------------------
 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 |     <title>Ejemplo de formulario 😇</title>
 7 |   </head>
 8 |   <body>
 9 |     <h1>Ejemplos de formularios</h1>
10 |     <h2>Ejemplo de Login</h2>
11 | 
12 |     <form method="GET" action="#">
13 |       <input
14 |         name="usuario"
15 |         type="text"
16 |         placeholder="ejemplo@correo.com"
17 |         required
18 |         maxlength="16"
19 |       />
20 |       <input
21 |         type="password"
22 |         name="password"
23 |         placeholder="Contraseña nueva"
24 |         required="true"
25 |       />
26 |       <!-- <input type="button" value="Ingresá 😄" /> -->
27 |       <button>Ingresá 😄</button>
28 |     </form>
29 | 
30 |     <h2>Registro :D</h2>
31 |     <form method="post" action="#">
32 |       <label for="nombre">Nombre *</label>
33 |       <br />
34 |       <input type="text" placeholder="Nombre" id="nombre" maxlength="20" />
35 |       <br />
36 |       <label for="apellido">Apellido</label>
37 |       <br />
38 |       <input type="text" placeholder="Apellido" id="apellido" maxlength="30" />
39 |       <br />
40 |       <label for="correo">Correo * </label>
41 |       <br />
42 |       <input type="email" placeholder="correo@ejemplo.com" required />
43 |       <br />
44 |       <label for="nacimiento">Fecha de nacimiento </label>
45 |       <br />
46 |       <input type="date" id="nacimiento" required />
47 |       <br />
48 |       <label for="telefono">Tel </label>
49 |       <br />
50 |       <input type="tel" id="telefono" placeholder="num. de telefono" />
51 |       <br />
52 |       <label for="color">Color favorito :O </label>
53 |       <br />
54 |       <input type="color" id="color" required />
55 |       <br />
56 |       <label for="nacionalidad">Nacionalidad</label>
57 |       <br />
58 |       <select id="nacionalidad">
59 |         <option>Argentina</option>
60 |         <option>Brasil</option>
61 |         <option>Uruguay</option>
62 |         <option>Paraguay</option>
63 |         <option>Chile</option>
64 |       </select>
65 |       <br />
66 |       <label for="mujer">Mujer</label>
67 |       <input type="radio" name="sexo" value="mujer" id="mujer" />
68 |       <label for="hombre">Hombre</label>
69 |       <input type="radio" name="sexo" value="hombre" id="hombre" />
70 |       <label for="personalizado">Personalizado</label>
71 |       <input
72 |         type="radio"
73 |         name="sexo"
74 |         value="personalizado"
75 |         id="personalizado"
76 |       />
77 |       <button>Registrate</button>
78 |     </form>
79 |     <hr />
80 |     <form method="post" action="">
81 |       <input type="text" disabled value="ejemplo" />
82 |       <input type="text" readonly value="ejemplo2" />
83 |     </form>
84 |   </body>
85 | </html>
86 | 


--------------------------------------------------------------------------------
/PROYECTO/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 |   <!-- Inicio de documento html-->
  4 |   <head>
  5 |     <!-- Windows + . -->
  6 |     <title>Portfolio 🤪</title>
  7 |     <meta charset="UTF-8" />
  8 |     <link href="css/styles.css" rel="stylesheet" />
  9 |     <!-- codigos hojas de estilos -->
 10 |   </head>
 11 | 
 12 |   <body>
 13 |     <!-- menú de navegación -->
 14 |     <header>
 15 |       <h1 style="">Franco Di Leo</h1>
 16 |       <h4>Web developer</h4>
 17 |     </header>
 18 | 
 19 |     <!-- <main> -->
 20 | 
 21 |     <!-- Seccion de navegación -->
 22 |     <nav>
 23 |       <a href="contacto.html">Contacto</a>
 24 |       <a href="videos.html">Videos</a>
 25 |     </nav>
 26 | 
 27 |     <a href="http://francodileo.com.ar" target="_blank">
 28 |       <img
 29 |         src="images/index.png"
 30 |         width="50px"
 31 |         height="50px"
 32 |         alt="foto del autor del sitio"
 33 |       />
 34 |     </a>
 35 | 
 36 |     <section class="margin-titulo">
 37 |       <h2 class="destacar tomato subrayar-arriba padding-titulo">About me</h2>
 38 |       <p style="padding-top: 20px; color: magenta;">
 39 |         Mi amor por la programación comenzó a los 16 cuando intenté hacer una
 40 |         red social yo solo
 41 |       </p>
 42 |       <img
 43 |         src="images/redsocial.jpeg"
 44 |         width="200px"
 45 |         height="200px"
 46 |         alt="Ejemplo frustrado de red social en PHP"
 47 |       />
 48 |       <p>Insertar imagen humillante aqui</p>
 49 |       <p>
 50 |         Tengo una perrita de 11 meses que se llama
 51 |         <span>Amazonas</span>
 52 |       </p>
 53 |     </section>
 54 | 
 55 |     <section class="margin-titulo">
 56 |       <h2 class="destacar oliva tachar padding-titulo">¿Dónde trabajo?</h2>
 57 |       <main>
 58 |         <p>
 59 |           Trabajo hace <span>3 años</span> dando cursos en
 60 |           <strong>UTN FRBA</strong> (Programador web inicial, programador web
 61 |           avanzado, desarrollo en react, IoT
 62 |         </p>
 63 |       </main>
 64 |       <!-- atributo = "valor"  -->
 65 |       <a href="https://sceu.frba.utn.edu.ar/" target="_blank">UTN BA</a>
 66 |       <p>
 67 |         Solwin : Es una empresa de desarrollo de software. Sistemas pequeños y
 68 |         grandes (Angular, React, NodeJS, PHP, Python , SQL, NO-SQL,
 69 |         Infraestructura
 70 |       </p>
 71 |       <p>
 72 |         Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis
 73 |         provident eius earum pariatur similique et perspiciatis, eaque iure nisi
 74 |         soluta minus? Necessitatibus doloremque quibusdam praesentium nobis
 75 |         consectetur unde nihil ipsa.
 76 |       </p>
 77 |       <a href="https://solwin.com.ar">Solwin</a>
 78 |       <hr />
 79 |       <h2>Proyectos en curso / Frustrados</h2>
 80 |       <ul>
 81 |         <li>Chaak</li>
 82 |         <li>JOM</li>
 83 |       </ul>
 84 |     </section>
 85 | 
 86 |     <section class="margin-titulo">
 87 |       <h2 class="destacar tomato subrayar padding-titulo">
 88 |         Hobbies / Interes 🥰
 89 |       </h2>
 90 |       <ol>
 91 |         <li>Física</li>
 92 |         <li>Crossfit</li>
 93 |       </ol>
 94 |     </section>
 95 | 
 96 |     <footer class="margin-titulo">
 97 |       <iframe
 98 |         src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3284.2201045099796!2d-58.42211038407982!3d-34.59859536473542!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x95bcca62d4cf1563%3A0x686de505d84c67e6!2sAv.%20Medrano%20951%2C%20C1179AAQ%20CABA!5e0!3m2!1ses-419!2sar!4v1597962037539!5m2!1ses-419!2sar"
 99 |         width="100%"
100 |         height="450"
101 |         frameborder="0"
102 |         style="border: 0;"
103 |         allowfullscreen=""
104 |         aria-hidden="false"
105 |         tabindex="0"
106 |       ></iframe>
107 | 
108 |       <br />
109 |       <adress>Medrano 951 PB 2</adress>
110 |       <p><b>Copyright © 1999-2020 Franco Di Leo S.</b></p>
111 |     </footer>
112 |   </body>
113 | </html>
114 | 


--------------------------------------------------------------------------------
/PORTFOLIO/index.html:
--------------------------------------------------------------------------------
  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 |     <title>Franco Di Leo</title>
  7 |     <link
  8 |       rel="stylesheet"
  9 |       href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
 10 |       integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
 11 |       crossorigin="anonymous"
 12 |     />
 13 |     <link rel="stylesheet" href="css/styles.css" />
 14 |     <script
 15 |       src="https://kit.fontawesome.com/07397e1e91.js"
 16 |       crossorigin="anonymous"
 17 |     ></script>
 18 |   </head>
 19 |   <body>
 20 |     <nav class="navbar navbar-expand-lg navbar-light bg-dark">
 21 | 
 22 |       <div class="collapse navbar-collapse" id="navbarNav">
 23 |         <ul class="navbar-nav">
 24 |           <li class="nav-item active">
 25 |             <a class="nav-link text-white" href="#">Home <span class="sr-only">(current)</span></a>
 26 |           </li>
 27 |           <li class="nav-item active">
 28 |             <a class="nav-link text-white" href="#about">About</a>
 29 |           </li>
 30 |           <li>
 31 |             <a class="nav-link text-white" href="#frase">Frase</a>
 32 | 
 33 |           </li>
 34 |         </ul>
 35 |         <a href="propuestas.html" class="btn btn-danger text-white badge-pill">Registrate</a>
 36 |      
 37 |       </div>
 38 |     </nav>
 39 |     <header class="container-fluid header">
 40 |       <div class="row">
 41 |         <div class="col">
 42 |           <h1 class="text-white p-5">Franco Di Leo</h1>
 43 |         </div>
 44 |       </div>
 45 |     </header>
 46 | 
 47 |     
 48 |     <!-- draw.io -->
 49 |     <div class="container mt-5" id="about">
 50 |       <h2 class="text-center mt-3">About me</h2>
 51 |       <div class="row mt-5">
 52 |         <div class="col-xl-4 col-lg-6 col-xs-12 p-5 tomato">
 53 |           <img src="images/index.png" class="imagen" />
 54 |         </div>
 55 |         <div class="col-xl-8 col-lg-6 col-xs-12 p-2 rebecca p-3">
 56 |           <h2 class="text-white">Acerca ...</h2>
 57 |           <p>
 58 |             Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis
 59 |             velit rem corporis quibusdam sunt quisquam nihil omnis quis neque,
 60 |             nemo aliquam, dolorem facilis error quas non unde. Molestias
 61 |             exercitationem, unde eligendi quia provident quod quam beatae sed.
 62 |           </p>
 63 |         </div>
 64 |       </div>
 65 | 
 66 |       <div class="row">
 67 |         <div class="col-xl-8 col-lg-6 col-xs-12 p-5">
 68 |           <p>
 69 |             Lorem ipsum dolor sit, amet consectetur adipisicing elit. A
 70 |             repellendus ducimus odio beatae corrupti praesentium at maxime
 71 |             consequatur explicabo sit!
 72 |           </p>
 73 |         </div>
 74 |         <div class="col-xl-4 col-lg-6 col-xs-12 p-5">
 75 |           <img src="images/redsocial.jpg" width="250px" height="auto" />
 76 |         </div>
 77 |       </div>
 78 | 
 79 |       <section id="skills" class="container">
 80 |         <h2 class="text-center">Skills</h2>
 81 |         <div class="row mt-5">
 82 |           <div class="col-lg-6 col-md-6 col-12">
 83 |             <div class="row align-items-center">
 84 |               <div class="col-6 d-flex justify-content-center">
 85 |                 <i
 86 |                   style="color: orange"
 87 |                   class="fab fa-html5 icono text-center"
 88 |                 ></i>
 89 |               </div>
 90 |               <div class="col-6">
 91 |                 <p>
 92 |                   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga
 93 |                   corporis quam cumque, aut molestiae amet nemo laboriosam
 94 |                   maxime et accusamus!
 95 |                 </p>
 96 |               </div>
 97 |             </div>
 98 |           </div>
 99 |           <div class="col-lg-6 col-md-6 col-12">
100 |             <div class="row align-items-center">
101 |               <div class="col-6 d-flex justify-content-center">
102 |                 <i
103 |                   style="color: orange"
104 |                   class="fab fa-html5 icono text-center"
105 |                 ></i>
106 |               </div>
107 |               <div class="col-6">
108 |                 <p>
109 |                   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga
110 |                   corporis quam cumque, aut molestiae amet nemo laboriosam
111 |                   maxime et accusamus!
112 |                 </p>
113 |               </div>
114 |             </div>
115 |           </div>
116 |         </div>
117 |       </section>
118 | 
119 |     </div>
120 |       <section id="frase" class="container-fluid frase mt-5 mb-5">
121 |         <div class="row justify-content-center">
122 |           <div class="col-6 pt-5 pb-5">
123 |             <h3 class="text-center frase-texto">"No a la violencia si a la birra" </h3>
124 |             <h3 class="text-center frase-texto">(amo programar)</h3>
125 |           </div>
126 |         </div>
127 |       </section>
128 |       <hr />
129 |       <section class="container-fluid">
130 |         <h2 class="text-center">Contacto</h2>
131 |         <div class="row mt-5 justify-content-center">
132 |           <div class="col-xl-6 col-lg-6 col-xs-12">
133 |             <form method="POST" action="#">
134 |               <div class="form-group">
135 |                 <label for="nc" >Nombre completo <span class="text-danger"> *</span></label>
136 |                 <input
137 |                   id="nc"
138 |                   type="text"
139 |                   class="form-control"
140 |                   required
141 |                   placeholder="Nombre completo"
142 |                 />
143 |               </div>
144 |               <div class="form-group">
145 |                 <label for="mail">Correo electronico <span class="text-danger">*</span></label>
146 |                 <input
147 |                 id="mail"
148 |                   type="email"
149 |                   class="form-control"
150 |                   placeholder="ejemplo@correo.com.ar"
151 |                 />
152 |               </div>
153 | 
154 |               <div class="form-group">
155 |                 <label for="comentario">Comentario <span class="text-danger">*</span></label>
156 |                 <textarea
157 |                 id="comentario"
158 |                   class="form-control"
159 |                   placeholder="Comentario"
160 |                 ></textarea>
161 |               </div>
162 | 
163 |               <button class="btn btn-outline-secondary btn-block">Enviar 📦</button>
164 |             </form>
165 |           </div>
166 |         </div>
167 |       </section>
168 |     </div>
169 | 
170 |     <footer class="container-fluid mt-5 footer">
171 |       <div class="row justify-content-center align-items-center">
172 |         <div class="col-lg-3 col-md-3 col-12">
173 |           <address>
174 |             <p>Medrano 951 PB 2</p>
175 |           </address>
176 |           <p>Tel. 114412312</p>
177 |           <i class="fab fa-instagram fa-3x text-danger icono"></i>
178 |           <i class="fab fa-linkedin-in fa-3x text-primary icono"></i>
179 |         </div>
180 |         <div class="col-lg-3 col-md-3 col-12 text-center">
181 |           <p>Copyright © 1994 Franco Di Leo</p>
182 |         </div>
183 |         <div class="col-lg-3 col-md-3 col-12">
184 |           <iframe
185 |             src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3284.2201045099796!2d-58.42211038407982!3d-34.59859536473542!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x95bcca62d4cf1563%3A0x686de505d84c67e6!2sAv.%20Medrano%20951%2C%20C1179AAQ%20CABA!5e0!3m2!1ses-419!2sar!4v1598398318272!5m2!1ses-419!2sar"
186 |             width="100%"
187 |             height="200px"
188 |             frameborder="0"
189 |             style="border: 0"
190 |             allowfullscreen=""
191 |             aria-hidden="false"
192 |             tabindex="0"
193 |           ></iframe>
194 |         </div>
195 |       </div>
196 |     </footer>
197 |   </body>
198 | </html>
199 | 


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