├── capitulo1
    ├── emmet.html
    └── fuentes.html
├── capitulo2
    ├── batman.jpg
    ├── flex.html
    ├── flotando.html
    ├── grid.html
    ├── pin01.jpg
    ├── pin01.png
    ├── pin02.jpg
    ├── pin02.png
    ├── pin03.png
    ├── pin04.png
    ├── pin05.png
    ├── pin06.png
    ├── pin07.png
    ├── posiciones.html
    ├── spiderman.jpg
    └── superman.jpg
├── portfolio
    ├── css
    │   └── estilos.css
    ├── imagenes
    │   ├── about-img.png
    │   ├── about-img_250.png
    │   ├── cascos.png
    │   ├── fondo_contactar.png
    │   ├── imagen_portfolio.png
    │   ├── inicio.png
    │   ├── sergey-zigle-rQ4_6TSliRg-unsplash.jpg
    │   ├── tecno_au.png
    │   ├── tecno_cu.png
    │   └── tecno_html.png
    ├── index.html
    ├── media
    │   ├── intro_mastermind.mp4
    │   ├── intro_mastermindv2.mp4
    │   └── intro_mastermindv2.webm
    └── mockup
    │   └── mockup.png
└── soluciones
    ├── experiencia_01.html
    ├── experiencia_02.html
    ├── experiencia_03.html
    ├── experiencia_04.html
    ├── experiencia_05.html
    ├── experiencia_06.html
    ├── experiencia_07.html
    ├── experiencia_08
        ├── css
        │   └── estilos.css
        └── experiencia_08.html
    ├── experiencia_09
        ├── css
        │   └── estilos.css
        └── experiencia_09.html
    ├── experiencia_10
        ├── css
        │   └── estilos.css
        └── experiencia_10.html
    ├── experiencia_11
        ├── css
        │   └── estilos.css
        └── experiencia_11.html
    ├── experiencia_12
        ├── css
        │   └── estilos.css
        └── experiencia_12.html
    ├── experiencia_13
        ├── css
        │   └── estilos.css
        └── experiencia_13.html
    ├── experiencia_14
        ├── css
        │   └── estilos.css
        └── experiencia_14.html
    ├── experiencia_15
        ├── css
        │   └── estilos.css
        └── experiencia_15.html
    ├── experiencia_16
        ├── css
        │   ├── estilos.css
        │   └── estilos_portfolio.css
        ├── extendido.html
        ├── imagenes
        │   ├── about-img.png
        │   ├── about-img_250.png
        │   ├── cascos.png
        │   ├── fondo_contactar.png
        │   ├── imagen_portfolio.png
        │   ├── inicio.png
        │   ├── sergey-zigle-rQ4_6TSliRg-unsplash.jpg
        │   ├── tecno_au.png
        │   ├── tecno_cu.png
        │   └── tecno_html.png
        └── index.html
    ├── experiencia_17
        ├── css
        │   ├── estilos.css
        │   └── estilos_portfolio.css
        ├── extendido.html
        ├── imagenes
        │   ├── about-img.png
        │   ├── about-img_250.png
        │   ├── cascos.png
        │   ├── fondo_contactar.png
        │   ├── imagen_portfolio.png
        │   ├── inicio.png
        │   ├── sergey-zigle-rQ4_6TSliRg-unsplash.jpg
        │   ├── tecno_au.png
        │   ├── tecno_cu.png
        │   └── tecno_html.png
        └── index.html
    ├── experiencia_18
        ├── css
        │   ├── estilos.css
        │   └── estilos_portfolio.css
        ├── extendido.html
        ├── imagenes
        │   ├── about-img.png
        │   ├── about-img_250.png
        │   ├── cascos.png
        │   ├── fondo_contactar.png
        │   ├── imagen_portfolio.png
        │   ├── inicio.png
        │   ├── sergey-zigle-rQ4_6TSliRg-unsplash.jpg
        │   ├── tecno_au.png
        │   ├── tecno_cu.png
        │   ├── tecno_html.png
        │   └── university.jpg
        └── index.html
    ├── experiencia_19
        ├── css
        │   ├── estilos.css
        │   └── estilos_portfolio.css
        ├── extendido.html
        ├── imagenes
        │   ├── about-img.png
        │   ├── about-img_250.png
        │   ├── cascos.png
        │   ├── fondo_contactar.png
        │   ├── imagen_portfolio.png
        │   ├── inicio.png
        │   ├── sergey-zigle-rQ4_6TSliRg-unsplash.jpg
        │   ├── tecno_au.png
        │   ├── tecno_cu.png
        │   ├── tecno_html.png
        │   └── university.jpg
        └── index.html
    ├── experiencia_20
        ├── css
        │   ├── estilos.css
        │   └── estilos_portfolio.css
        ├── extendido.html
        ├── imagenes
        │   ├── about-img.png
        │   ├── about-img_250.png
        │   ├── cascos.png
        │   ├── fondo_contactar.png
        │   ├── imagen_portfolio.png
        │   ├── inicio.png
        │   ├── sergey-zigle-rQ4_6TSliRg-unsplash.jpg
        │   ├── tecno_au.png
        │   ├── tecno_cu.png
        │   ├── tecno_html.png
        │   └── university.jpg
        └── index.html
    └── imagenes
        └── about-img.png


/capitulo1/emmet.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Ejemplo de emmet</title>
 6 | </head>
 7 | <body>
 8 |     <!-- div>p>span -->
 9 |     <div>
10 |         <p><span></span></p>
11 |     </div>
12 | 
13 |     <!-- div+div+p -->
14 |     <div></div>
15 |     <div></div>
16 |     <p></p>
17 | 
18 |     <!-- table>tr>td*4 -->
19 |     <table>
20 |         <tr>
21 |             <td></td>
22 |             <td></td>
23 |             <td></td>
24 |             <td></td>
25 |         </tr>
26 |     </table>
27 | 
28 |     <!-- div>(h2+h3+p) -->
29 |     <div>
30 |         <h2></h2>
31 |         <h3></h3>
32 |         <p></p>
33 |     </div>
34 | 
35 |     <!-- (div>(h2+h3+(p>span)))*3 -->
36 |     <div>
37 |         <h2></h2>
38 |         <h3></h3>
39 |         <p><span></span></p>
40 |     </div>
41 |     <div>
42 |         <h2></h2>
43 |         <h3></h3>
44 |         <p><span></span></p>
45 |     </div>
46 |     <div>
47 |         <h2></h2>
48 |         <h3></h3>
49 |         <p><span></span></p>
50 |     </div>
51 |     
52 | </body>
53 | </html>


--------------------------------------------------------------------------------
/capitulo1/fuentes.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 |     <head>
 4 |           <meta charset="UTF-8">
 5 |         <title>Ejemplo sobre fuentes</title>
 6 |         <style>
 7 |             body{
 8 |                 font-family:Verdana, Geneva, Tahoma, sans-serif;
 9 |                 font: 400 18px Arial, Geneva, Tahoma, sans-serif;
10 |             }
11 |             div{
12 |                 font-size: 12px;
13 |             }
14 |             h1{
15 |                 font-size: 36px;
16 |             }
17 |             h2{
18 |                 font-weight: 200;
19 |             }
20 |             p{
21 |                 text-align: center;
22 |             }
23 |         </style>
24 |     </head>
25 |     <body>
26 |         <div>
27 |             <h1>Título grande</h1>
28 |             <h2>Subtítulo</h2>
29 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem quaerat repudiandae aliquid quidem quia, fugiat animi error esse, a delectus repellat sunt quo. Voluptate vel nostrum illum esse, veritatis repudiandae.</p>
30 |         </div>
31 |     </body>
32 | </html>


--------------------------------------------------------------------------------
/capitulo2/batman.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/capitulo2/batman.jpg


--------------------------------------------------------------------------------
/capitulo2/flex.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Flex example</title>
 6 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 7 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 8 |     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300&display=swap" rel="stylesheet">    
 9 |     <style>
10 |         body{
11 |             font-family: 'Roboto', 'sans';
12 |         }
13 |         section{
14 |             background-color: #F2AA52;
15 |             padding: 15px;
16 |             width: 200px;
17 |             text-align: center;
18 |         }
19 |         .container{
20 |             display: flex;
21 |             flex-direction: row;
22 |             flex-wrap: wrap;
23 |             align-items: center;
24 |             justify-content: center;
25 |             gap: 5px;
26 |         }
27 |     </style>
28 | </head>
29 | <body>
30 |     <div class="container">
31 |         <section>
32 |             <div><img src="superman.jpg" width="100" alt=""></div>
33 |             <h2>superman</h2>
34 |             <p>Superman (en español: Superhombre) es un superhéroe ficticio que apareció por primera vez en los cómics estadounidenses publicados por DC Comics.</p>
35 |         </section>
36 |         <section>
37 |             <div><img src="spiderman.jpg" width="100" alt=""></div>
38 |             <h2>spiderman</h2>
39 |             <p>Spider-Man, traducido en ocasiones como El Hombre Araña, es un personaje creado por los estadounidenses Stan Lee y Steve Ditko</p>
40 |         </section>
41 |         <section>
42 |             <div><img src="batman.jpg" width="100" alt=""></div>
43 |             <h2>batman</h2>
44 |             <p>Batman (conocido inicialmente como Bat-Man y en español como el Hombre Murciélago) es un personaje de cómic creado por los estadounidenses Bob Kane y Bill Finger,</p>
45 |         </section>
46 |         <section>
47 |             <div><img src="superman.jpg" width="100" alt=""></div>
48 |             <h2>superman</h2>
49 |             <p>Superman (en español: Superhombre) es un superhéroe ficticio que apareció por primera vez en los cómics estadounidenses publicados por DC Comics.</p>
50 |         </section>
51 |         <section>
52 |             <div><img src="spiderman.jpg" width="100" alt=""></div>
53 |             <h2>spiderman</h2>
54 |             <p>Spider-Man, traducido en ocasiones como El Hombre Araña, es un personaje creado por los estadounidenses Stan Lee y Steve Ditko</p>
55 |         </section>
56 |     </div>
57 | </body>
58 | </html>


--------------------------------------------------------------------------------
/capitulo2/flotando.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="escenarios">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Flotando elementos</title>
 6 |     <style>
 7 |         body{
 8 |             font: 18px Arial, sans-serif;
 9 |         }
10 |         #caja1{
11 |             width: 150px;
12 |             background-color: #B2BEBF;
13 |             float:left;
14 |         }
15 |         #caja2{
16 |             min-height: 100px;
17 |             background-color:#889C9B;
18 |             float:right;
19 |         }
20 |     </style>
21 | </head>
22 | <body>
23 |     <div id="caja1">elemento 1</div>
24 |     <div id="caja2">elemento 2</div>
25 |     <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum, numquam dicta. Eius similique recusandae obcaecati illum ex quam laudantium maxime sunt dolores laborum eaque laboriosam, nobis expedita ut at cum?</p>
26 | </body>
27 | </html>


--------------------------------------------------------------------------------
/capitulo2/grid.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Grid Layout</title>
 6 |     <style>
 7 |         .contenedor{
 8 |             display:grid;
 9 |             grid-template-columns: 140px 140px 140px 140px;
10 |             grid-gap:10px;
11 |             align-items:center;
12 |             justify-items: center;
13 |         }
14 |         .elem{
15 |             background-color: #F2AA52;
16 |         }
17 |         #pin04{
18 |             grid-column:4/5;
19 |             grid-row:1/3;
20 |         }
21 |         #pin06{
22 |             grid-column:2/4;
23 |             grid-row:2/3;
24 |         }
25 |     </style>
26 | </head>
27 | <body>
28 |     <div class="contenedor">
29 |         <div id="pin01" class="elem"><img src="pin01.png" width="140" alt=""></div>
30 |         <div id="pin02" class="elem"><img src="pin02.png" width="140" alt=""></div>
31 |         <div id="pin03" class="elem"><img src="pin03.png" width="140" alt=""></div>
32 |         <div id="pin04" class="elem"><img src="pin04.png" width="140" alt=""></div>
33 |         <div id="pin05" class="elem"><img src="pin05.png" width="140" alt=""></div>
34 |         <div id="pin06" class="elem"><img src="pin06.png" width="140" alt=""></div>
35 |     </div>
36 | </body>
37 | </html>


--------------------------------------------------------------------------------
/capitulo2/pin01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/capitulo2/pin01.jpg


--------------------------------------------------------------------------------
/capitulo2/pin01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/capitulo2/pin01.png


--------------------------------------------------------------------------------
/capitulo2/pin02.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/capitulo2/pin02.jpg


--------------------------------------------------------------------------------
/capitulo2/pin02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/capitulo2/pin02.png


--------------------------------------------------------------------------------
/capitulo2/pin03.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/capitulo2/pin03.png


--------------------------------------------------------------------------------
/capitulo2/pin04.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/capitulo2/pin04.png


--------------------------------------------------------------------------------
/capitulo2/pin05.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/capitulo2/pin05.png


--------------------------------------------------------------------------------
/capitulo2/pin06.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/capitulo2/pin06.png


--------------------------------------------------------------------------------
/capitulo2/pin07.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/capitulo2/pin07.png


--------------------------------------------------------------------------------
/capitulo2/posiciones.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Posiciones relativas</title>
 6 |     <style>
 7 |         body {
 8 |             background: #D9C6B0;
 9 |         }
10 |         /*EJEMPLO 1 BLOQUE
11 |         section {
12 |         display: block;
13 |         width: 400px;
14 |         height: 160px;
15 |         background:#733E20;
16 |         }
17 |         p {
18 |         width: 50%;   
19 |         height: 25%;  
20 |         margin: 5%;   
21 |         padding: 5%;  
22 |         background: #BF895A;
23 |         }
24 |         */
25 |         /*EJEMPLO 2 INLINE
26 |         section {
27 |             display: inline;
28 |             background: #733E20;
29 |         }
30 |         p {
31 |             width: 50%;     
32 |             height: 200px;
33 |             background: #BF895A;
34 |         }
35 |         */
36 |         /*EJEMPLO 3 ABSOLUTE
37 |         section {
38 |             position: absolute;
39 |             left: 30px;
40 |             top: 30px;
41 |             width: 400px;
42 |             height: 160px;
43 |             padding: 30px 20px;
44 |             background: #733E20;
45 |         }
46 | 
47 |         p {
48 |             position: absolute;
49 |             width: 50%;
50 |             height: 25%;
51 |             margin: 5%; 
52 |             padding: 5%;
53 |             background: #BF895A;
54 |         }*/
55 |         
56 |         /*EJEMPLO 4 FIXED*/
57 |         section {
58 |             width: 400px;
59 |             height: 480px;
60 |             background: #733E20;
61 |         }
62 |         p {
63 |             position: fixed;
64 |             width: 50%; 
65 |             height: 50%;
66 |             margin: 5%;
67 |             padding: 5%;
68 |             background: #BF895A;
69 |         }
70 |     </style>
71 | </head>
72 |     <body>
73 |         <section>
74 |             <p>Aquí hay un párrafo</p>
75 |         </section>   
76 |     </body>
77 | </html>


--------------------------------------------------------------------------------
/capitulo2/spiderman.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/capitulo2/spiderman.jpg


--------------------------------------------------------------------------------
/capitulo2/superman.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/capitulo2/superman.jpg


--------------------------------------------------------------------------------
/portfolio/css/estilos.css:
--------------------------------------------------------------------------------
  1 | /*CSS general de elementos*/
  2 | *{
  3 |     margin:0px;
  4 |     padding:0px;
  5 | }
  6 | body{
  7 |     background-color: #222;
  8 |     color: white;
  9 |     font: 200 14px 'Poppins', sans-serif;
 10 | }
 11 | h2{
 12 |     font-size: 36px;
 13 |     line-height: 36px;
 14 | }
 15 | h3{
 16 |     color: #999;
 17 |     font-size: 18px;
 18 |     font-weight: 300;
 19 | }
 20 | nav{
 21 |     position:fixed;
 22 |     width: 100%;
 23 |     height: 55px;
 24 |     background-color: #222;
 25 |     border-bottom: 1px solid white;
 26 |     padding-top: 10px;
 27 |     text-align: center;
 28 | }
 29 | nav ul{
 30 |     display: inline-block;
 31 | }
 32 | nav ul li{
 33 |     padding-top: 12px;
 34 |     text-transform: uppercase;
 35 | }
 36 | section{
 37 |     padding: 30px 100px 30px 100px;
 38 | }
 39 | p{
 40 |     text-align: justify;
 41 | }
 42 | cite{
 43 |     font-weight: 300;
 44 | }
 45 | i{
 46 |     font-size: 24px;
 47 | }
 48 | i:hover{
 49 |     color: #ffc900;
 50 | }
 51 | a{
 52 |     text-decoration: none;
 53 | }
 54 | a:any-link{
 55 |     color:white;
 56 | }
 57 | a:-webkit-any-link {
 58 |     color:white;
 59 | }
 60 | a:-moz-any-link {
 61 |     color:
 62 |     white;
 63 | }
 64 | a:hover{
 65 |     color: #ffc900;
 66 | }
 67 | ul{
 68 |     list-style: none;  
 69 | }
 70 | li{
 71 |     float: left;
 72 |     /*width: 30px;*/
 73 |     margin-right: 5px;
 74 | }
 75 | button{
 76 |     border-radius: 10px;
 77 | }
 78 | footer{
 79 |     height: 55px;
 80 |     padding-top: 10px;
 81 |     text-align: center;
 82 | }
 83 | footer ul{
 84 |     display: inline-block;
 85 | }
 86 | footer ul li{
 87 |     float:left;
 88 | }
 89 | /*CSS IDs y Clase*/
 90 | .hastag{
 91 |     color: #ffc900;
 92 | }
 93 | .seccion{
 94 |     padding: 10px 100px 10px 100px;
 95 | }
 96 | .logo{
 97 |     padding-top: 0px;
 98 | }
 99 | #redessociales{
100 |     margin-top: 20px;
101 | }
102 | #inicio{
103 |     background-image: url("../imagenes/inicio.png");
104 |     background-repeat: no-repeat;
105 |     background-size: cover;
106 |     min-height: 280px;
107 |     padding-top: 95px;
108 | }
109 | #experiencia{
110 |     background-color: white;
111 |     color: #222;
112 | }
113 | #experiencia h2,#portfolio h2{
114 |     text-align: center;
115 | }
116 | #experiencia h3,#portfolio h3{
117 |     text-align: center;
118 |     margin-bottom: 30px;
119 | }
120 | #portfolio{
121 |     border-top: 1px solid #ffc900;
122 | }
123 | .masinfo button{
124 |     background-color: #ffc900;
125 |     font-weight: 600;
126 |     padding-left: 15px;
127 |     padding-right: 15px;
128 |     margin-top: 5px;
129 |     padding: 5px;
130 | }
131 | #contactar{
132 |     background-image: url("../imagenes/fondo_contactar.png");
133 |     background-repeat: no-repeat;
134 |     background-position: right;
135 | }
136 | /*Grid sobremi*/
137 | #sobremi{
138 |     display: grid;
139 |     grid-template-columns: 250px 1fr;
140 | }
141 | #sobremi h2{
142 |     margin-bottom: 15px;
143 | }
144 | #sobremi .masinfo{
145 |     margin-top: 15px
146 | }
147 | #sobremi .masinfo button
148 | {
149 |     padding-top: 5px;
150 |     padding-bottom: 5px;
151 |     padding-left: 30px;
152 |     padding-right: 30px;
153 | }
154 | #contactar{
155 |     background-color: #ffc900;
156 |     color: #222;
157 | }
158 | /*Card portfolio*/
159 | .filaportfolio{
160 |     display: flex;
161 |     flex-direction: row;
162 |     flex-wrap: wrap;
163 |     justify-content: space-between;
164 |     gap: 30px 30px;
165 |     margin-bottom: 15px;
166 |     margin-top: 15px;
167 | }
168 | .card{
169 |     width: 250px;
170 |     background-color: #191919;
171 |     border-radius: 15px;
172 | }
173 | .card img,.card video,.card iframe{
174 |     border-radius: 15px 15px 0 0;
175 | }
176 | .card h3{
177 |     color: #ffc900;
178 | }
179 | .card h4{
180 |     margin:0 5px 5px 0;
181 | }
182 | .card h3,.card h4,.card p,.card .masinfo{
183 |     padding: 0 15px;
184 | }
185 | .card .masinfo {
186 |     margin: 15px 0px 15px 0 px;
187 |     height: 26px;
188 | }
189 | 
190 | .card .sep{
191 |     margin: 0 5px 5px 0;
192 |     border: 1px solid #ffc900;
193 | }
194 | .card .masinfo button{
195 |     float: right;
196 | }
197 | /*Card experiencia*/
198 | .gridexp{
199 |     display: grid;
200 |     grid-template-columns: repeat(4,350px);
201 |     grid-gap:10px;
202 |     justify-content: space-between;
203 |     align-content: space-around;
204 | }
205 | @media (min-width: 400px){
206 |     .gridexp{
207 |         display: flex;
208 |         flex-direction: row;
209 |         flex-wrap: wrap;
210 |         justify-content: space-between;
211 |         gap: 30px 30px;
212 |         margin-bottom: 15px;
213 |         margin-top: 15px;
214 |     }
215 | }
216 | 
217 | .cardexp{
218 |     background-color: #222;
219 |     border-radius: 15px;
220 |     color: white;
221 |     padding: 10px 15px;
222 | }
223 | .cardexp h2{
224 |     margin-bottom: 5px;
225 | }
226 | .cardexp h3{
227 |     margin-bottom: 20px;
228 | }
229 | .cardexp p{
230 |     margin-bottom: 20px;
231 | }
232 | .cardexp ul{
233 |     display: flex;
234 |     justify-content: flex-end;
235 | }
236 | .cardexp li{
237 |     height: 30px;
238 | }
239 | /*Formulario*/
240 | .itemform{
241 |     display: grid;
242 |     grid-template-columns: 150px 350px;
243 |     justify-content: center;
244 |     margin-bottom: 10px;
245 | }
246 | .itemform label{
247 |     font-weight: 700;
248 | }
249 | .itemform input,.itemform textarea{
250 |     border-radius: 5px;
251 |     border: 1px solid white;
252 | }
253 | input[type="submit"]{
254 |     background-color: #222;
255 |     border: 1px solid #222;
256 |     color: white;
257 |     padding: 10px;
258 |     grid-column: 2/3;
259 |     justify-self: end;
260 | }
261 | 
262 | 


--------------------------------------------------------------------------------
/portfolio/imagenes/about-img.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/portfolio/imagenes/about-img.png


--------------------------------------------------------------------------------
/portfolio/imagenes/about-img_250.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/portfolio/imagenes/about-img_250.png


--------------------------------------------------------------------------------
/portfolio/imagenes/cascos.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/portfolio/imagenes/cascos.png


--------------------------------------------------------------------------------
/portfolio/imagenes/fondo_contactar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/portfolio/imagenes/fondo_contactar.png


--------------------------------------------------------------------------------
/portfolio/imagenes/imagen_portfolio.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/portfolio/imagenes/imagen_portfolio.png


--------------------------------------------------------------------------------
/portfolio/imagenes/inicio.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/portfolio/imagenes/inicio.png


--------------------------------------------------------------------------------
/portfolio/imagenes/sergey-zigle-rQ4_6TSliRg-unsplash.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/portfolio/imagenes/sergey-zigle-rQ4_6TSliRg-unsplash.jpg


--------------------------------------------------------------------------------
/portfolio/imagenes/tecno_au.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/portfolio/imagenes/tecno_au.png


--------------------------------------------------------------------------------
/portfolio/imagenes/tecno_cu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/portfolio/imagenes/tecno_cu.png


--------------------------------------------------------------------------------
/portfolio/imagenes/tecno_html.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/portfolio/imagenes/tecno_html.png


--------------------------------------------------------------------------------
/portfolio/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 |     <head>
  4 |         <meta charset="utf-8">
  5 |         <title>Portfolio de Luís Martínez</title>
  6 |         <link rel="preconnect" href="https://fonts.googleapis.com">
  7 |         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  8 |         <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300&display=swap" rel="stylesheet">
  9 |         <script src="https://kit.fontawesome.com/f56f6708a5.js" crossorigin="anonymous"></script>
 10 |         <link rel="stylesheet" href="./css/estilos.css">
 11 |     </head>
 12 |     <body>
 13 |         <!--Menu navegacion-->
 14 |         <nav>
 15 |             <ul>
 16 |                 <li><a href="#sobremi">sobre mi</a></li>
 17 |                 <li><a href="#portfolio">portfolio</a></li>
 18 |                 <li class="logo"><img src="./imagenes/cascos.png" alt="logo de Luis"></li>
 19 |                 <li><a href="#experiencia">skills</a></li>
 20 |                 <li><a href="#contactar">contactar</a></li>
 21 |             </ul>
 22 |         </nav>
 23 |         <article>
 24 |             <!--Bloque de inicio-->
 25 |             <section id="inicio">
 26 |                 <h2>Luís Martínez</h2>
 27 |                 <h3 class="hastag">#programador</h3>
 28 |                 <h3 class="hastag">#músico</h3>
 29 |                 <ul id="redessociales">
 30 |                     <li><a href="https://open.spotify.com/" target="_blank"><i class="fa-brands fa-spotify"></i></a></li>
 31 |                     <li><a href="https://twitter.com/" target="_blank"><i class="fa-brands fa-twitter"></i></a></li>
 32 |                     <li><a href="https://www.linkedin.com/" target="_blank"><i class="fa-brands fa-linkedin"></i></a></li>
 33 |                     <li><a href="https://www.instagram.com/" target="_blank"><i class="fa-brands fa-square-instagram"></i></a></li>
 34 |                 </ul>
 35 |             </section>
 36 |             <!--FIN Bloque de inicio-->
 37 |             <!--Bloque de sobre mi-->
 38 |             <section id="sobremi">
 39 |                 <div id="imgsobremi"><img src="./imagenes/about-img_250.png" alt="Foto Luís Martínez" height="250px"></div>
 40 |                 <div id="bodysobremi">
 41 |                     <h2>Sobre mí</h2>
 42 |                     <p>Soy <strong>Luís Martinez</strong> músico de carrera y apasionado de <span>tecnología y la programación</span>. Música y emprendimiento forman parte de la cotidianidad del músico freelance, es un mundo en el que me ha llevado a lo largo de mi carrera a conocer muchos grandes profesionales y maravillosos escenarios. Durante ese periplo se cruzó en mi vida el diseño y desarrollo web, donde se abren nuevas oportunidades de crecimiento combinadas al sector de la prodcución audiovisual.</p>
 43 |                     <p>Me defino como una persona creativa y enamorado de lo que hago, donde mi máxima es <cite>"el mundo es un aula maravillosa de aprendizaje continuo"</cite>.</p>
 44 |                     <div class="masinfo"><button type="button">MAS INFO</button></div>
 45 |                 </div>
 46 |             </section>
 47 |             <!--FIN Bloque de sobre mi-->
 48 |             <!--Bloque Portfolio-->
 49 |             <section id="portfolio">
 50 |                 <h2>Portfolio</h2>
 51 |                 <h3>Una mirada mas allá del texto</h3>
 52 |                 <div class="filaportfolio">
 53 |                     <div class="card">
 54 |                         <video controls width="250">
 55 |                             <source src="./media/intro_mastermindv2.webm" type="video/webm">
 56 |                             <source src="./media/intro_mastermindv2.mp4" type="video/mp4">
 57 |                         </video>
 58 |                         <h3>musica</h3>
 59 |                         <h4>concierto benicassim</h4>
 60 |                         <div class="sep"></div>
 61 |                         <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
 62 |                         <div class="masinfo"><button type="button">MAS INFO</button></div>
 63 |                     </div>
 64 |                     <div class="card">
 65 |                         <iframe width="250" src="https://www.youtube.com/embed/cGvXAAw3Ikk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 66 |                         <h3>musica</h3>
 67 |                         <h4>concierto benicassim</h4>
 68 |                         <div class="sep"></div>
 69 |                         <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
 70 |                         <div class="masinfo"><button type="button">MAS INFO</button></div>
 71 |                     </div>
 72 |                     <div class="card">
 73 |                         <img src="./imagenes/imagen_portfolio.png" alt="Portfolio 3">
 74 |                         <h3>musica</h3>
 75 |                         <h4>concierto benicassim</h4>
 76 |                         <div class="sep"></div>
 77 |                         <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
 78 |                         <div class="masinfo"><button type="button">MAS INFO</button></div>
 79 |                     </div>
 80 |                     <div class="card">
 81 |                         <img src="./imagenes/imagen_portfolio.png" alt="Portfolio 4">
 82 |                         <h3>musica</h3>
 83 |                         <h4>concierto benicassim</h4>
 84 |                         <div class="sep"></div>
 85 |                         <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
 86 |                         <div class="masinfo"><button type="button">MAS INFO</button></div>
 87 |                     </div>
 88 |                 </div>
 89 |             </section>
 90 |             <!--FIN Bloque Portfolio-->
 91 |             <!--Bloque Experiencia-->
 92 |             <section id="experiencia">
 93 |                 <h2>Experiencia & Skills</h2>
 94 |                 <h3>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
 95 |                 <div class="gridexp">
 96 |                     <div class="cardexp">
 97 |                         <h2>Diseño web</h2>
 98 |                         <h3 class="textoizquierda">2018-2020</h3>
 99 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
100 |                         <ul>
101 |                             <li><img src="./imagenes/tecno_au.png" alt="" height="30px"></li>
102 |                             <li><img src="./imagenes/tecno_cu.png" alt="" height="30px"></li>
103 |                             <li><img src="./imagenes/tecno_html.png" alt="" height="30px"></li>
104 |                         </ul>
105 |                     </div>
106 |                     <div class="cardexp">
107 |                         <h2>Diseño web</h2>
108 |                         <h3 class="textoizquierda">2018-2020</h3>
109 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
110 |                         <ul>
111 |                             <li><img src="./imagenes/tecno_au.png" alt="" height="30px"></li>
112 |                             <li><img src="./imagenes/tecno_cu.png" alt="" height="30px"></li>
113 |                             <li><img src="./imagenes/tecno_html.png" alt="" height="30px"></li>
114 |                         </ul>
115 |                     </div>
116 |                     <div class="cardexp">
117 |                         <h2>Diseño web</h2>
118 |                         <h3 class="textoizquierda">2018-2020</h3>
119 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
120 |                         <ul>
121 |                             <li><img src="./imagenes/tecno_au.png" alt="" height="30px"></li>
122 |                             <li><img src="./imagenes/tecno_cu.png" alt="" height="30px"></li>
123 |                             <li><img src="./imagenes/tecno_html.png" alt="" height="30px"></li>
124 |                         </ul>
125 |                     </div>
126 |                     <div class="cardexp">
127 |                         <h2>Diseño web</h2>
128 |                         <h3 class="textoizquierda">2018-2020</h3>
129 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
130 |                         <ul>
131 |                             <li><img src="./imagenes/tecno_au.png" alt="" height="30px"></li>
132 |                             <li><img src="./imagenes/tecno_cu.png" alt="" height="30px"></li>
133 |                             <li><img src="./imagenes/tecno_html.png" alt="" height="30px"></li>
134 |                         </ul>
135 |                     </div>
136 |                     <div class="cardexp">
137 |                         <h2>Diseño web</h2>
138 |                         <h3 class="textoizquierda">2018-2020</h3>
139 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
140 |                         <ul>
141 |                             <li><img src="./imagenes/tecno_au.png" alt="" height="30px"></li>
142 |                             <li><img src="./imagenes/tecno_cu.png" alt="" height="30px"></li>
143 |                             <li><img src="./imagenes/tecno_html.png" alt="" height="30px"></li>
144 |                         </ul>
145 |                     </div>
146 |                     <div class="cardexp">
147 |                         <h2>Diseño web</h2>
148 |                         <h3 class="textoizquierda">2018-2020</h3>
149 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
150 |                         <ul>
151 |                             <li><img src="./imagenes/tecno_au.png" alt="" height="30px"></li>
152 |                             <li><img src="./imagenes/tecno_cu.png" alt="" height="30px"></li>
153 |                             <li><img src="./imagenes/tecno_html.png" alt="" height="30px"></li>
154 |                         </ul>
155 |                     </div>
156 |                 </div>
157 |             </section>
158 |             <!--FIN Bloque Experiencia-->
159 |             <!--Bloque Contactar-->
160 |             <section id="contactar">
161 |                 <h2>Contacto</h2>
162 |                 <h3>Envíame tus dudas</h3>
163 |                 <form action="#">
164 |                     <div class="itemform">
165 |                         <label for="nombre">Nombre</label>
166 |                         <input type="text" id="nombre" name="nombre" minlength="2" maxlength="64" size="32" required>
167 |                     </div>
168 |                     <div class="itemform">
169 |                         <label for="empresa">Empresa</label>
170 |                         <input type="text" id="empresa" name="empresa" minlength="2" maxlength="128" size="32">
171 |                     </div>
172 |                     <div class="itemform">
173 |                         <label for="email">Email</label>
174 |                         <input type="email" id="email" name="email" minlength="10" maxlength="128" size="32" required>
175 |                     </div>
176 |                     <div class="itemform">
177 |                         <label for="mensaje">Mensaje</label>
178 |                         <textarea name="mensaje" id="mensaje" cols="33" rows="5"></textarea>
179 |                     </div>
180 |                     <div class="itemform">
181 |                         <input type="submit" name="boton" value="CONTACTAR">
182 |                     </div>
183 |                 </form>
184 |             </section>
185 |             <!--FIN Bloque Contactar-->
186 |         </article>
187 |         <!-- Footer -->
188 |         <footer>
189 |             <ul>
190 |                 <li class="logo"><a href="#inicio"><img src="./imagenes/cascos.png" alt=""></a></li>
191 |                 <li>Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
192 |             </ul>
193 |         </footer>
194 |     </body>
195 | </html>


--------------------------------------------------------------------------------
/portfolio/media/intro_mastermind.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/portfolio/media/intro_mastermind.mp4


--------------------------------------------------------------------------------
/portfolio/media/intro_mastermindv2.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/portfolio/media/intro_mastermindv2.mp4


--------------------------------------------------------------------------------
/portfolio/media/intro_mastermindv2.webm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/portfolio/media/intro_mastermindv2.webm


--------------------------------------------------------------------------------
/portfolio/mockup/mockup.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/portfolio/mockup/mockup.png


--------------------------------------------------------------------------------
/soluciones/experiencia_01.html:
--------------------------------------------------------------------------------
1 | <html>
2 |     <head>
3 | 
4 |     </head>
5 |     <body>
6 |         CV extendido
7 |     </body>
8 | </html>


--------------------------------------------------------------------------------
/soluciones/experiencia_02.html:
--------------------------------------------------------------------------------
1 | <html>
2 |     <head>
3 |         <meta charset="utf-8">
4 |         <title>CV Extendido de Luís Martínez</title>
5 |     </head>
6 |     <body>
7 |         CV extendido
8 |     </body>
9 | </html>


--------------------------------------------------------------------------------
/soluciones/experiencia_03.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |     <head>
 3 |         <meta charset="utf-8">
 4 |         <title>CV Extendido de Luís Martínez</title>
 5 |     </head>
 6 |     <body>
 7 |         <h2>Datos personales</h2>
 8 |         <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas praesentium ipsum, quasi aut, cupiditate officiis sit recusandae voluptas eius asperiores earum! Vitae tempora quibusdam quo. Minus et officiis eaque dicta.</p>
 9 |     </body>
10 | </html>


--------------------------------------------------------------------------------
/soluciones/experiencia_04.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |     <head>
 3 |         <meta charset="utf-8">
 4 |         <title>CV Extendido de Luís Martínez</title>
 5 |     </head>
 6 |     <body>
 7 |         <!--Bloque Datos personales-->
 8 |         <div>
 9 |             <h1>CV Extendido</h1>
10 |             <h2>Datos personales</h2>
11 |             <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas praesentium ipsum, quasi aut, cupiditate officiis sit recusandae voluptas eius asperiores earum! Vitae tempora quibusdam quo. Minus et officiis eaque dicta.</p>
12 |         </div>
13 |         <!--FIN Bloque Datos personales-->
14 |         <!--Bloque Educación-->
15 |         <div>
16 |             <h2>Educacion</h2>
17 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam delectus ex nesciunt illum excepturi quasi incidunt magnam, reiciendis repudiandae maxime esse vero laboriosam ducimus! Fugiat, tempora inventore. Non, mollitia dolor.</p>
18 |         </div>
19 |         <!--FIN Bloque Educación-->
20 |  </body>
21 | </html>


--------------------------------------------------------------------------------
/soluciones/experiencia_05.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |     <head>
 3 |         <meta charset="utf-8">
 4 |         <title>CV Extendido de Luís Martínez</title>
 5 |     </head>
 6 |     <body>
 7 |         <!--Bloque Datos personales-->
 8 |         <div>
 9 |             <h1>CV Extendido</h1>
10 |             <h2>Datos personales</h2>
11 |             <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas praesentium ipsum, quasi aut, cupiditate officiis sit recusandae voluptas eius asperiores earum! Vitae tempora quibusdam quo. Minus et officiis eaque dicta.</p>
12 |         </div>
13 |         <!--FIN Bloque Datos personales-->
14 |         <!--Bloque Educación-->
15 |         <div>
16 |             <h2>Educacion</h2>
17 |             <p><cite>Cualquier experiencia es un aprendizaje</cite> y bajo ese prisma soy el profesional y la persona que soy por mis trabajo, mi educación y por las personas con las que colaboré. La educación es una parte muy importante en ese crecimiento personal y profesional ya que mis dos grandes amores son la <span>tecnología y la música.</span></p>
18 |         </div>
19 |         <!--FIN Bloque Educación-->
20 |  </body>
21 | </html>


--------------------------------------------------------------------------------
/soluciones/experiencia_06.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |     <head>
 3 |         <meta charset="utf-8">
 4 |         <title>CV Extendido de Luís Martínez</title>
 5 |     </head>
 6 |     <body>
 7 |         <!--Bloque Datos personales-->
 8 |         <div>
 9 |             <h1>CV Extendido</h1>
10 |             <h2>Datos personales</h2>
11 |             <table>
12 |                 <thead>
13 |                     <th colspan="4">Paco Gómez</th>
14 |                 </thead>
15 |                 <tbody>
16 |                     <tr>
17 |                         <td><strong>Edad</strong></td>
18 |                         <td>47</td>
19 |                         <td><strong>Ciudad residencia</strong></td>
20 |                         <td>Valencia</td>
21 |                     </tr>
22 |                     <tr>
23 |                         <td><strong>Estudios</strong></td>
24 |                         <td>Superiores</td>
25 |                         <td><strong>Especialidad</strong></td>
26 |                         <td>Telecomunicaciones</td>
27 |                     </tr>
28 |                     <tr>
29 |                         <td><strong>Aficion</strong></td>
30 |                         <td>Cocina</td>
31 |                         <td><strong>Desporte</strong></td>
32 |                         <td>Baloncesto</td>
33 |                     </tr>
34 |                 </tbody>
35 |             </table>
36 |         </div>
37 |         <!--FIN Bloque Datos personales-->
38 |         <!--Bloque Educación-->
39 |         <div>
40 |             <h2>Educacion</h2>
41 |             <p><cite>Cualquier experiencia es un aprendizaje</cite> y bajo ese prisma soy el profesional y la persona que soy por mis trabajo, mi educación y por las personas con las que colaboré. La educación es una parte muy importante en ese crecimiento personal y profesional ya que mis dos grandes amores son la <span>tecnología y la música.</span></p>
42 |         </div>
43 |         <!--FIN Bloque Educación-->
44 |  </body>
45 | </html>


--------------------------------------------------------------------------------
/soluciones/experiencia_07.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |     <head>
 3 |         <meta charset="utf-8">
 4 |         <title>CV Extendido de Luís Martínez</title>
 5 |     </head>
 6 |     <body>
 7 |         <!--Bloque Datos personales-->
 8 |         <div>
 9 |             <h1>CV Extendido</h1>
10 |             <h2>Datos personales</h2>
11 |             <img src="./imagenes/about-img.png" alt="Foto Luís Martínez" height="250px">
12 |             <table>
13 |                 <thead>
14 |                     <th colspan="4">Paco Gómez</th>
15 |                 </thead>
16 |                 <tbody>
17 |                     <tr>
18 |                         <td><strong>Edad</strong></td>
19 |                         <td>47</td>
20 |                         <td><strong>Ciudad residencia</strong></td>
21 |                         <td>Valencia</td>
22 |                     </tr>
23 |                     <tr>
24 |                         <td><strong>Estudios</strong></td>
25 |                         <td>Superiores</td>
26 |                         <td><strong>Especialidad</strong></td>
27 |                         <td>Telecomunicaciones</td>
28 |                     </tr>
29 |                     <tr>
30 |                         <td><strong>Aficion</strong></td>
31 |                         <td>Cocina</td>
32 |                         <td><strong>Desporte</strong></td>
33 |                         <td>Baloncesto</td>
34 |                     </tr>
35 |                 </tbody>
36 |             </table>
37 |         </div>
38 |         <!--FIN Bloque Datos personales-->
39 |         <!--Bloque Educación-->
40 |         <div>
41 |             <h2>Educacion</h2>
42 |             <p><cite>Cualquier experiencia es un aprendizaje</cite> y bajo ese prisma soy el profesional y la persona que soy por mis trabajo, mi educación y por las personas con las que colaboré. La educación es una parte muy importante en ese crecimiento personal y profesional ya que mis dos grandes amores son la <span>tecnología y la música.</span></p>
43 |         </div>
44 |         <!--FIN Bloque Educación-->
45 |  </body>
46 | </html>


--------------------------------------------------------------------------------
/soluciones/experiencia_08/css/estilos.css:
--------------------------------------------------------------------------------
1 | body{
2 |     background-color: white;
3 |     color: #222;
4 | }


--------------------------------------------------------------------------------
/soluciones/experiencia_08/experiencia_08.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |     <head>
 3 |         <meta charset="utf-8">
 4 |         <title>CV Extendido de Luís Martínez</title>
 5 |         <link rel="stylesheet" href="./css/estilos.css">
 6 |     </head>
 7 |     <body>
 8 |         <!--Bloque Datos personales-->
 9 |         <div>
10 |             <h1>CV Extendido</h1>
11 |             <h2>Datos personales</h2>
12 |             <img src="../imagenes/about-img.png" alt="Foto Luís Martínez" height="250px">
13 |             <table>
14 |                 <thead>
15 |                     <th colspan="4">Paco Gómez</th>
16 |                 </thead>
17 |                 <tbody>
18 |                     <tr>
19 |                         <td><strong>Edad</strong></td>
20 |                         <td>47</td>
21 |                         <td><strong>Ciudad residencia</strong></td>
22 |                         <td>Valencia</td>
23 |                     </tr>
24 |                     <tr>
25 |                         <td><strong>Estudios</strong></td>
26 |                         <td>Superiores</td>
27 |                         <td><strong>Especialidad</strong></td>
28 |                         <td>Telecomunicaciones</td>
29 |                     </tr>
30 |                     <tr>
31 |                         <td><strong>Aficion</strong></td>
32 |                         <td>Cocina</td>
33 |                         <td><strong>Desporte</strong></td>
34 |                         <td>Baloncesto</td>
35 |                     </tr>
36 |                 </tbody>
37 |             </table>
38 |         </div>
39 |         <!--FIN Bloque Datos personales-->
40 |         <!--Bloque Educación-->
41 |         <div>
42 |             <h2>Educacion</h2>
43 |             <p><cite>Cualquier experiencia es un aprendizaje</cite> y bajo ese prisma soy el profesional y la persona que soy por mis trabajo, mi educación y por las personas con las que colaboré. La educación es una parte muy importante en ese crecimiento personal y profesional ya que mis dos grandes amores son la <span>tecnología y la música.</span></p>
44 |         </div>
45 |         <!--FIN Bloque Educación-->
46 |  </body>
47 | </html>


--------------------------------------------------------------------------------
/soluciones/experiencia_09/css/estilos.css:
--------------------------------------------------------------------------------
 1 | /*Definiciones de selectores*/
 2 | body{
 3 |     background-color: white;
 4 |     color: #222;
 5 | }
 6 | /*Definiciones de clases y ids*/
 7 | #educacion{
 8 |     background-color: #222;
 9 |     color: white;
10 | }
11 | #experiencia{
12 |     background-color: #222;
13 |     color: white;
14 | }


--------------------------------------------------------------------------------
/soluciones/experiencia_09/experiencia_09.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |     <head>
 3 |         <meta charset="utf-8">
 4 |         <title>CV Extendido de Luís Martínez</title>
 5 |         <link rel="stylesheet" href="./css/estilos.css">
 6 |     </head>
 7 |     <body>
 8 |         <!--Bloque Datos personales-->
 9 |         <div id="datos">
10 |             <h1>CV Extendido</h1>
11 |             <h2>Datos personales</h2>
12 |             <img src="../imagenes/about-img.png" alt="Foto Luís Martínez" height="250px">
13 |             <table>
14 |                 <thead>
15 |                     <th colspan="4">Paco Gómez</th>
16 |                 </thead>
17 |                 <tbody>
18 |                     <tr>
19 |                         <td><strong>Edad</strong></td>
20 |                         <td>47</td>
21 |                         <td><strong>Ciudad residencia</strong></td>
22 |                         <td>Valencia</td>
23 |                     </tr>
24 |                     <tr>
25 |                         <td><strong>Estudios</strong></td>
26 |                         <td>Superiores</td>
27 |                         <td><strong>Especialidad</strong></td>
28 |                         <td>Telecomunicaciones</td>
29 |                     </tr>
30 |                     <tr>
31 |                         <td><strong>Aficion</strong></td>
32 |                         <td>Cocina</td>
33 |                         <td><strong>Desporte</strong></td>
34 |                         <td>Baloncesto</td>
35 |                     </tr>
36 |                 </tbody>
37 |             </table>
38 |         </div>
39 |         <!--FIN Bloque Datos personales-->
40 |         <!--Bloque Educación-->
41 |         <div id="educacion">
42 |             <h2>Educacion</h2>
43 |             <p><cite>Cualquier experiencia es un aprendizaje</cite> y bajo ese prisma soy el profesional y la persona que soy por mis trabajo, mi educación y por las personas con las que colaboré. La educación es una parte muy importante en ese crecimiento personal y profesional ya que mis dos grandes amores son la <span>tecnología y la música.</span></p>
44 |         </div>
45 |         <!--FIN Bloque Educación-->
46 |         <!--Bloque Experiencia-->
47 |         <div id="experiencia">
48 |             <h2>Experiencia</h2>
49 |             <p><cite>Cualquier experiencia es un aprendizaje</cite> y bajo ese prisma soy el profesional y la persona que soy por mis trabajo, mi educación y por las personas con las que colaboré. La educación es una parte muy importante en ese crecimiento personal y profesional ya que mis dos grandes amores son la <span>tecnología y la música.</span></p>
50 |         </div>
51 |         <!--FIN Bloque Experiencia-->
52 |  </body>
53 | </html>


--------------------------------------------------------------------------------
/soluciones/experiencia_10/css/estilos.css:
--------------------------------------------------------------------------------
 1 | /*Definiciones de selectores*/
 2 | body{
 3 |     background-color: white;
 4 |     color: #222;
 5 |     font: 200 14px 'Poppins', sans-serif
 6 | }
 7 | h1{
 8 |     font-size: 42px;
 9 |     font-weight: 400;
10 | }
11 | h2{
12 |     font-size: 36px;
13 |     font-weight: 300;
14 | }
15 | p{
16 |     text-align: justify;
17 | }
18 | /*Definiciones de clases y ids*/
19 | #educacion{
20 |     background-color: #222;
21 |     color: white;
22 | }
23 | #experiencia{
24 |     background-color: #222;
25 |     color: white;
26 | }


--------------------------------------------------------------------------------
/soluciones/experiencia_10/experiencia_10.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |     <head>
 3 |         <meta charset="utf-8">
 4 |         <title>CV Extendido de Luís Martínez</title>
 5 |         <link rel="preconnect" href="https://fonts.googleapis.com">
 6 |         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 7 |         <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400&display=swap" rel="stylesheet">
 8 |         <link rel="stylesheet" href="./css/estilos.css">
 9 |         <link rel="stylesheet" href="./css/estilos.css">
10 |     </head>
11 |     <body>
12 |         <!--Bloque Datos personales-->
13 |         <div id="datos">
14 |             <h1>CV Extendido</h1>
15 |             <h2>Datos personales</h2>
16 |             <img src="../imagenes/about-img.png" alt="Foto Luís Martínez" height="250px">
17 |             <table>
18 |                 <thead>
19 |                     <th colspan="4">Paco Gómez</th>
20 |                 </thead>
21 |                 <tbody>
22 |                     <tr>
23 |                         <td><strong>Edad</strong></td>
24 |                         <td>47</td>
25 |                         <td><strong>Ciudad residencia</strong></td>
26 |                         <td>Valencia</td>
27 |                     </tr>
28 |                     <tr>
29 |                         <td><strong>Estudios</strong></td>
30 |                         <td>Superiores</td>
31 |                         <td><strong>Especialidad</strong></td>
32 |                         <td>Telecomunicaciones</td>
33 |                     </tr>
34 |                     <tr>
35 |                         <td><strong>Aficion</strong></td>
36 |                         <td>Cocina</td>
37 |                         <td><strong>Desporte</strong></td>
38 |                         <td>Baloncesto</td>
39 |                     </tr>
40 |                 </tbody>
41 |             </table>
42 |         </div>
43 |         <!--FIN Bloque Datos personales-->
44 |         <!--Bloque Educación-->
45 |         <div id="educacion">
46 |             <h2>Educacion</h2>
47 |             <p><cite>Cualquier experiencia es un aprendizaje</cite> y bajo ese prisma soy el profesional y la persona que soy por mis trabajo, mi educación y por las personas con las que colaboré. La educación es una parte muy importante en ese crecimiento personal y profesional ya que mis dos grandes amores son la <span>tecnología y la música.</span></p>
48 |         </div>
49 |         <!--FIN Bloque Educación-->
50 |         <!--Bloque Experiencia-->
51 |         <div id="experiencia">
52 |             <h2>Experiencia</h2>
53 |             <p><cite>Cualquier experiencia es un aprendizaje</cite> y bajo ese prisma soy el profesional y la persona que soy por mis trabajo, mi educación y por las personas con las que colaboré. La educación es una parte muy importante en ese crecimiento personal y profesional ya que mis dos grandes amores son la <span>tecnología y la música.</span></p>
54 |         </div>
55 |         <!--FIN Bloque Experiencia-->
56 |  </body>
57 | </html>


--------------------------------------------------------------------------------
/soluciones/experiencia_11/css/estilos.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     margin:0px;
 3 |     padding: 0px;
 4 | }
 5 | /*Definiciones de selectores*/
 6 | body{
 7 |     background-color: white;
 8 |     color: #222;
 9 |     font: 200 14px 'Poppins', sans-serif
10 | }
11 | h1{
12 |     font-size: 42px;
13 |     font-weight: 400;
14 | }
15 | h2{
16 |     font-size: 36px;
17 |     font-weight: 300;
18 | }
19 | p{
20 |     text-align: justify;
21 | }
22 | /*Definiciones de clases y ids*/
23 | #educacion{
24 |     background-color: #222;
25 |     color: white;
26 | }
27 | #experiencia{
28 |     border-top: 1px solid #ffc900;
29 |     background-color: #222;
30 |     color:
31 |      white;
32 | }
33 | .seccion{
34 |     padding: 10px 100px 10px 100px;
35 | }


--------------------------------------------------------------------------------
/soluciones/experiencia_11/experiencia_11.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |     <head>
 3 |         <meta charset="utf-8">
 4 |         <title>CV Extendido de Luís Martínez</title>
 5 |         <link rel="preconnect" href="https://fonts.googleapis.com">
 6 |         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 7 |         <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400&display=swap" rel="stylesheet">
 8 |         <link rel="stylesheet" href="./css/estilos.css">
 9 |         <link rel="stylesheet" href="./css/estilos.css">
10 |     </head>
11 |     <body>
12 |         <!--Bloque Datos personales-->
13 |         <div id="datos" class="seccion">
14 |             <h1>CV Extendido</h1>
15 |             <h2>Datos personales</h2>
16 |             <img src="../imagenes/about-img.png" alt="Foto Luís Martínez" height="250px">
17 |             <table>
18 |                 <thead>
19 |                     <th colspan="4">Paco Gómez</th>
20 |                 </thead>
21 |                 <tbody>
22 |                     <tr>
23 |                         <td><strong>Edad</strong></td>
24 |                         <td>47</td>
25 |                         <td><strong>Ciudad residencia</strong></td>
26 |                         <td>Valencia</td>
27 |                     </tr>
28 |                     <tr>
29 |                         <td><strong>Estudios</strong></td>
30 |                         <td>Superiores</td>
31 |                         <td><strong>Especialidad</strong></td>
32 |                         <td>Telecomunicaciones</td>
33 |                     </tr>
34 |                     <tr>
35 |                         <td><strong>Aficion</strong></td>
36 |                         <td>Cocina</td>
37 |                         <td><strong>Desporte</strong></td>
38 |                         <td>Baloncesto</td>
39 |                     </tr>
40 |                 </tbody>
41 |             </table>
42 |         </div>
43 |         <!--FIN Bloque Datos personales-->
44 |         <!--Bloque Educación-->
45 |         <div id="educacion" class="seccion">
46 |             <h2>Educacion</h2>
47 |             <p><cite>Cualquier experiencia es un aprendizaje</cite> y bajo ese prisma soy el profesional y la persona que soy por mis trabajo, mi educación y por las personas con las que colaboré. La educación es una parte muy importante en ese crecimiento personal y profesional ya que mis dos grandes amores son la <span>tecnología y la música.</span></p>
48 |         </div>
49 |         <!--FIN Bloque Educación-->
50 |         <!--Bloque Experiencia-->
51 |         <div id="experiencia" class="seccion">
52 |             <h2>Experiencia</h2>
53 |             <p><cite>Cualquier experiencia es un aprendizaje</cite> y bajo ese prisma soy el profesional y la persona que soy por mis trabajo, mi educación y por las personas con las que colaboré. La educación es una parte muy importante en ese crecimiento personal y profesional ya que mis dos grandes amores son la <span>tecnología y la música.</span></p>
54 |         </div>
55 |         <!--FIN Bloque Experiencia-->
56 |  </body>
57 | </html>


--------------------------------------------------------------------------------
/soluciones/experiencia_12/css/estilos.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     margin:0px;
 3 |     padding: 0px;
 4 | }
 5 | /*Definiciones de selectores*/
 6 | body{
 7 |     background-color: white;
 8 |     color: #222;
 9 |     font: 200 14px 'Poppins', sans-serif
10 | }
11 | h1{
12 |     font-size: 42px;
13 |     font-weight: 400;
14 | }
15 | h2{
16 |     font-size: 36px;
17 |     font-weight: 300;
18 | }
19 | p{
20 |     text-align: justify;
21 | }
22 | thead{
23 |     background-color: #222;
24 |     color: white;
25 | }
26 | td{
27 |     min-width: 150px;
28 | }
29 | i{
30 |     margin-right: 5px;
31 | }
32 | /*Definiciones de clases y ids*/
33 | #educacion{
34 |     background-color: #222;
35 |     color: white;
36 | }
37 | #experiencia{
38 |     border-top: 1px solid #ffc900;
39 |     background-color: #222;
40 |     color:
41 |      white;
42 | }
43 | .seccion{
44 |     padding: 10px 100px 10px 100px;
45 | }


--------------------------------------------------------------------------------
/soluciones/experiencia_12/experiencia_12.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |     <head>
 3 |         <meta charset="utf-8">
 4 |         <title>CV Extendido de Luís Martínez</title>
 5 |         <link rel="preconnect" href="https://fonts.googleapis.com">
 6 |         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 7 |         <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400&display=swap" rel="stylesheet">
 8 |         <script src="https://kit.fontawesome.com/f56f6708a5.js" crossorigin="anonymous"></script>
 9 |         <link rel="stylesheet" href="./css/estilos.css">
10 |     </head>
11 |     <body>
12 |         <!--Bloque Datos personales-->
13 |         <div id="datos" class="seccion">
14 |             <h1>CV Extendido</h1>
15 |             <h2>Datos personales</h2>
16 |             <img src="../imagenes/about-img.png" alt="Foto Luís Martínez" height="250px">
17 |             <table>
18 |                 <thead>
19 |                     <th colspan="4">Paco Gómez</th>
20 |                 </thead>
21 |                 <tbody>
22 |                     <tr>
23 |                         <td><i class="fa-solid fa-user"></i><strong>Edad</strong></td>
24 |                         <td>47</td>
25 |                         <td><i class="fa-solid fa-city"></i><strong>Ciudad residencia</strong></td>
26 |                         <td>Valencia</td>
27 |                     </tr>
28 |                     <tr>
29 |                         <td><i class="fa-solid fa-graduation-cap"></i><strong>Estudios</strong></td>
30 |                         <td>Superiores</td>
31 |                         <td><i class="fa-solid fa-building-columns"></i><strong>Especialidad</strong></td>
32 |                         <td>Telecomunicaciones</td>
33 |                     </tr>
34 |                     <tr>
35 |                         <td><i class="fa-solid fa-hat-chef"></i><strong>Aficion</strong></td>
36 |                         <td>Cocina</td>
37 |                         <td><i class="fa-solid fa-baseball"></i><strong>Desporte</strong></td>
38 |                         <td>Baloncesto</td>
39 |                     </tr>
40 |                 </tbody>
41 |             </table>
42 |         </div>
43 |         <!--FIN Bloque Datos personales-->
44 |         <!--Bloque Educación-->
45 |         <div id="educacion" class="seccion">
46 |             <h2>Educacion</h2>
47 |             <p><cite>Cualquier experiencia es un aprendizaje</cite> y bajo ese prisma soy el profesional y la persona que soy por mis trabajo, mi educación y por las personas con las que colaboré. La educación es una parte muy importante en ese crecimiento personal y profesional ya que mis dos grandes amores son la <span>tecnología y la música.</span></p>
48 |         </div>
49 |         <!--FIN Bloque Educación-->
50 |         <!--Bloque Experiencia-->
51 |         <div id="experiencia" class="seccion">
52 |             <h2>Experiencia</h2>
53 |             <p><cite>Cualquier experiencia es un aprendizaje</cite> y bajo ese prisma soy el profesional y la persona que soy por mis trabajo, mi educación y por las personas con las que colaboré. La educación es una parte muy importante en ese crecimiento personal y profesional ya que mis dos grandes amores son la <span>tecnología y la música.</span></p>
54 |         </div>
55 |         <!--FIN Bloque Experiencia-->
56 |  </body>
57 | </html>


--------------------------------------------------------------------------------
/soluciones/experiencia_13/css/estilos.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     margin:0px;
 3 |     padding: 0px;
 4 | }
 5 | /*Definiciones de selectores*/
 6 | body{
 7 |     background-color: white;
 8 |     color: #222;
 9 |     font: 200 14px 'Poppins', sans-serif
10 | }
11 | h1{
12 |     font-size: 42px;
13 |     font-weight: 400;
14 | }
15 | h2{
16 |     font-size: 36px;
17 |     font-weight: 300;
18 | }
19 | h3 {
20 |     color:#ffc900;
21 |     font-weight: 200;
22 | }
23 | p{
24 |     text-align: justify;
25 | }
26 | thead{
27 |     background-color: #222;
28 |     color: white;
29 | }
30 | td{
31 |     min-width: 150px;
32 | }
33 | li{
34 |     list-style: none;
35 |     float:left;
36 | }
37 | i{
38 |     margin-right: 5px;
39 | }
40 | /*Definiciones de clases y ids*/
41 | #educacion{
42 |     background-color: #222;
43 |     color: white;
44 | }
45 | #experiencia{
46 |     border-top: 1px solid #ffc900;
47 |     background-color: #222;
48 |     color:
49 |      white;
50 | }
51 | .seccion{
52 |     padding: 10px 100px 10px 100px;
53 | }


--------------------------------------------------------------------------------
/soluciones/experiencia_13/experiencia_13.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |     <head>
 3 |         <meta charset="utf-8">
 4 |         <title>CV Extendido de Luís Martínez</title>
 5 |         <link rel="preconnect" href="https://fonts.googleapis.com">
 6 |         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 7 |         <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400&display=swap" rel="stylesheet">
 8 |         <script src="https://kit.fontawesome.com/f56f6708a5.js" crossorigin="anonymous"></script>
 9 |         <link rel="stylesheet" href="./css/estilos.css">
10 |     </head>
11 |     <body>
12 |         <!--Bloque Datos personales-->
13 |         <div id="datos" class="seccion">
14 |             <h1>CV Extendido</h1>
15 |             <h2>Datos personales</h2>
16 |             <img src="../imagenes/about-img.png" alt="Foto Luís Martínez" height="250px">
17 |             <table>
18 |                 <thead>
19 |                     <th colspan="4">Paco Gómez</th>
20 |                 </thead>
21 |                 <tbody>
22 |                     <tr>
23 |                         <td><i class="fa-solid fa-user"></i><strong>Edad</strong></td>
24 |                         <td>47</td>
25 |                         <td><i class="fa-solid fa-city"></i><strong>Ciudad residencia</strong></td>
26 |                         <td>Valencia</td>
27 |                     </tr>
28 |                     <tr>
29 |                         <td><i class="fa-solid fa-graduation-cap"></i><strong>Estudios</strong></td>
30 |                         <td>Superiores</td>
31 |                         <td><i class="fa-solid fa-building-columns"></i><strong>Especialidad</strong></td>
32 |                         <td>Telecomunicaciones</td>
33 |                     </tr>
34 |                     <tr>
35 |                         <td><i class="fa-solid fa-hat-chef"></i><strong>Aficion</strong></td>
36 |                         <td>Cocina</td>
37 |                         <td><i class="fa-solid fa-baseball"></i><strong>Desporte</strong></td>
38 |                         <td>Baloncesto</td>
39 |                     </tr>
40 |                 </tbody>
41 |             </table>
42 |         </div>
43 |         <!--FIN Bloque Datos personales-->
44 |         <!--Bloque Educación-->
45 |         <div id="educacion" class="seccion">
46 |             <h2>Educacion</h2>
47 |             <p><cite>Cualquier experiencia es un aprendizaje</cite> y bajo ese prisma soy el profesional y la persona que soy por mis trabajo, mi educación y por las personas con las que colaboré. La educación es una parte muy importante en ese crecimiento personal y profesional ya que mis dos grandes amores son la <span>tecnología y la música.</span></p>
48 |         </div>
49 |         <!--FIN Bloque Educación-->
50 |         <!--Bloque Experiencia-->
51 |         <div id="experiencia" class="seccion">
52 |             <h2>Experiencia</h2>
53 |             <div>
54 |                 <h3>Producción BSO corto animación</h3>
55 |                 <ul>
56 |                     <li><i class="fa-brands fa-soundcloud"></i></li>
57 |                     <li><i class="fa-solid fa-microphone"></i></li>
58 |                     <li><i class="fa-solid fa-podcast"></i></li>
59 |                 </ul>
60 |                 <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum tempora omnis voluptatem nemo fugiat quibusdam provident unde a ut, facere necessitatibus praesentium vel perspiciatis eum dicta dolorum voluptas tempore atque.</p>
61 |             </div>
62 |         </div>
63 |         <!--FIN Bloque Experiencia-->
64 |  </body>
65 | </html>


--------------------------------------------------------------------------------
/soluciones/experiencia_14/css/estilos.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     margin:0px;
 3 |     padding: 0px;
 4 | }
 5 | /*Definiciones de selectores*/
 6 | body{
 7 |     background-color: white;
 8 |     color: #222;
 9 |     font: 200 14px 'Poppins', sans-serif
10 | }
11 | h1{
12 |     font-size: 42px;
13 |     font-weight: 400;
14 | }
15 | h2{
16 |     font-size: 36px;
17 |     font-weight: 300;
18 | }
19 | h3 {
20 |     color:#ffc900;
21 |     font-weight: 200;
22 | }
23 | p{
24 |     text-align: justify;
25 | }
26 | thead{
27 |     background-color: #222;
28 |     color: white;
29 | }
30 | td{
31 |     min-width: 150px;
32 | }
33 | li{
34 |     list-style: none;
35 |     float:left;
36 | }
37 | i{
38 |     margin-right: 5px;
39 | }
40 | a:any-link{
41 |     color:white;
42 | }
43 | a:-webkit-any-link {
44 |     color:white;
45 | }
46 | a:-moz-any-link {
47 |     color:white;
48 | }
49 | /*Definiciones de clases y ids*/
50 | #educacion{
51 |     background-color: #222;
52 |     color: white;
53 | }
54 | #experiencia{
55 |     border-top: 1px solid #ffc900;
56 |     background-color: #222;
57 |     color:
58 |      white;
59 | }
60 | .seccion{
61 |     padding: 10px 100px 10px 100px;
62 | }
63 | .enlace:hover{
64 |     color: #ffc900;
65 | }


--------------------------------------------------------------------------------
/soluciones/experiencia_14/experiencia_14.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |     <head>
 3 |         <meta charset="utf-8">
 4 |         <title>CV Extendido de Luís Martínez</title>
 5 |         <link rel="preconnect" href="https://fonts.googleapis.com">
 6 |         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 7 |         <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400&display=swap" rel="stylesheet">
 8 |         <script src="https://kit.fontawesome.com/f56f6708a5.js" crossorigin="anonymous"></script>
 9 |         <link rel="stylesheet" href="./css/estilos.css">
10 |     </head>
11 |     <body>
12 |         <!--Bloque Datos personales-->
13 |         <div id="datos" class="seccion">
14 |             <h1>CV Extendido</h1>
15 |             <h2>Datos personales</h2>
16 |             <img src="../imagenes/about-img.png" alt="Foto Luís Martínez" height="250px">
17 |             <table>
18 |                 <thead>
19 |                     <th colspan="4">Paco Gómez</th>
20 |                 </thead>
21 |                 <tbody>
22 |                     <tr>
23 |                         <td><i class="fa-solid fa-user"></i><strong>Edad</strong></td>
24 |                         <td>47</td>
25 |                         <td><i class="fa-solid fa-city"></i><strong>Ciudad residencia</strong></td>
26 |                         <td>Valencia</td>
27 |                     </tr>
28 |                     <tr>
29 |                         <td><i class="fa-solid fa-graduation-cap"></i><strong>Estudios</strong></td>
30 |                         <td>Superiores</td>
31 |                         <td><i class="fa-solid fa-building-columns"></i><strong>Especialidad</strong></td>
32 |                         <td>Telecomunicaciones</td>
33 |                     </tr>
34 |                     <tr>
35 |                         <td><i class="fa-solid fa-hat-chef"></i><strong>Aficion</strong></td>
36 |                         <td>Cocina</td>
37 |                         <td><i class="fa-solid fa-baseball"></i><strong>Desporte</strong></td>
38 |                         <td>Baloncesto</td>
39 |                     </tr>
40 |                 </tbody>
41 |             </table>
42 |         </div>
43 |         <!--FIN Bloque Datos personales-->
44 |         <!--Bloque Experiencia-->
45 |         <div id="experiencia" class="seccion">
46 |             <h2>Experiencia</h2>
47 |             <div>
48 |                 <h3>Producción BSO corto animación</h3>
49 |                 <ul>
50 |                     <li><i class="fa-brands fa-soundcloud"></i></li>
51 |                     <li><i class="fa-solid fa-microphone"></i></li>
52 |                     <li><i class="fa-solid fa-podcast"></i></li>
53 |                 </ul>
54 |                 <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum tempora omnis voluptatem nemo fugiat quibusdam provident unde a ut, facere necessitatibus praesentium vel perspiciatis eum dicta dolorum voluptas tempore atque.</p>
55 |             </div>
56 |         </div>
57 |         <!--FIN Bloque Experiencia-->
58 |         <!--Bloque Educación-->
59 |         <div id="educacion" class="seccion">
60 |             <h2>Educacion</h2>
61 |                 <div>
62 |                     <h3>2002 - Ingeniero de sonido por la <a href="http://www.upv.es/"><span class="enlace">UPV</span></a></h3>
63 |                     <p>La carrera explica el funcionamiento de los sistemas empleados para codificar, transmitir, recibir y procesar información en cualquier formato, ya sea audio, vídeo o datos, a través de diferentes medios. Además, incluye el estudio de sistemas y equipos de audio y vídeo, así como el diseño de locales para producción y grabación de material audiovisual.
64 |         
65 |                             El plan de estudios tiene un enfoque práctico que emula situaciones del ámbito profesional, completando la formación con idiomas, economía, organización de empresas y programación. Este grado habilita para ejercer la profesión de Ingeniería Técnica de Telecomunicación en las especialidades de Sonido e Imagen o de Sistemas de Telecomunicación.</p>
66 |                 </div>
67 |         </div>
68 |         <!--FIN Bloque Educación-->
69 |  </body>
70 | </html>


--------------------------------------------------------------------------------
/soluciones/experiencia_15/css/estilos.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     margin:0px;
 3 |     padding: 0px;
 4 | }
 5 | /*Definiciones de selectores*/
 6 | body{
 7 |     background-color: white;
 8 |     color: #222;
 9 |     font: 200 14px 'Poppins', sans-serif
10 | }
11 | h1{
12 |     font-size: 42px;
13 |     font-weight: 400;
14 | }
15 | h2{
16 |     font-size: 36px;
17 |     font-weight: 300;
18 | }
19 | h3 {
20 |     color:#ffc900;
21 |     font-weight: 200;
22 | }
23 | p{
24 |     text-align: justify;
25 | }
26 | thead{
27 |     background-color: #222;
28 |     color: white;
29 | }
30 | td{
31 |     min-width: 150px;
32 | }
33 | li{
34 |     list-style: none;
35 |     float:left;
36 | }
37 | i{
38 |     margin-right: 5px;
39 | }
40 | a:any-link{
41 |     color:white;
42 | }
43 | a:-webkit-any-link {
44 |     color:white;
45 | }
46 | a:-moz-any-link {
47 |     color:white;
48 | }
49 | section{
50 |     padding: 10px 100px 10px 100px;
51 | }
52 | /*Definiciones de clases y ids*/
53 | #educacion{
54 |     background-color: #222;
55 |     color: white;
56 | }
57 | #experiencia{
58 |     border-top: 1px solid #ffc900;
59 |     background-color: #222;
60 |     color:
61 |      white;
62 | }
63 | .enlace:hover{
64 |     color: #ffc900;
65 | }


--------------------------------------------------------------------------------
/soluciones/experiencia_15/experiencia_15.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |     <head>
 3 |         <meta charset="utf-8">
 4 |         <title>CV Extendido de Luís Martínez</title>
 5 |         <link rel="preconnect" href="https://fonts.googleapis.com">
 6 |         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 7 |         <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400&display=swap" rel="stylesheet">
 8 |         <script src="https://kit.fontawesome.com/f56f6708a5.js" crossorigin="anonymous"></script>
 9 |         <link rel="stylesheet" href="./css/estilos.css">
10 |     </head>
11 |     <body>
12 |         <header>
13 |             <nav></nav>
14 |         </header>
15 |         <article>
16 |             <!--Bloque Datos personales-->
17 |             <section id="datos">
18 |                 <h1>CV Extendido</h1>
19 |                 <h2>Datos personales</h2>
20 |                 <img src="../imagenes/about-img.png" alt="Foto Luís Martínez" height="250px">
21 |                 <table>
22 |                     <thead>
23 |                         <th colspan="4">Paco Gómez</th>
24 |                     </thead>
25 |                     <tbody>
26 |                         <tr>
27 |                             <td><i class="fa-solid fa-user"></i><strong>Edad</strong></td>
28 |                             <td>47</td>
29 |                             <td><i class="fa-solid fa-city"></i><strong>Ciudad residencia</strong></td>
30 |                             <td>Valencia</td>
31 |                         </tr>
32 |                         <tr>
33 |                             <td><i class="fa-solid fa-graduation-cap"></i><strong>Estudios</strong></td>
34 |                             <td>Superiores</td>
35 |                             <td><i class="fa-solid fa-building-columns"></i><strong>Especialidad</strong></td>
36 |                             <td>Telecomunicaciones</td>
37 |                         </tr>
38 |                         <tr>
39 |                             <td><i class="fa-solid fa-hat-chef"></i><strong>Aficion</strong></td>
40 |                             <td>Cocina</td>
41 |                             <td><i class="fa-solid fa-baseball"></i><strong>Desporte</strong></td>
42 |                             <td>Baloncesto</td>
43 |                         </tr>
44 |                     </tbody>
45 |                 </table>
46 |             </section>
47 |             <!--FIN Bloque Datos personales-->
48 |             <!--Bloque Experiencia-->
49 |             <section id="experiencia">
50 |                 <h2>Experiencia</h2>
51 |                 <div>
52 |                     <h3>Producción BSO corto animación</h3>
53 |                     <ul>
54 |                         <li><i class="fa-brands fa-soundcloud"></i></li>
55 |                         <li><i class="fa-solid fa-microphone"></i></li>
56 |                         <li><i class="fa-solid fa-podcast"></i></li>
57 |                     </ul>
58 |                     <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum tempora omnis voluptatem nemo fugiat quibusdam provident unde a ut, facere necessitatibus praesentium vel perspiciatis eum dicta dolorum voluptas tempore atque.</p>
59 |                 </div>
60 |             </section>
61 |             <!--FIN Bloque Experiencia-->
62 |             <!--Bloque Educación-->
63 |             <section id="educacion">
64 |                 <h2>Educacion</h2>
65 |                     <div>
66 |                         <h3>2002 - Ingeniero de sonido por la <a href="http://www.upv.es/"><span class="enlace">UPV</span></a></h3>
67 |                         <p>La carrera explica el funcionamiento de los sistemas empleados para codificar, transmitir, recibir y procesar información en cualquier formato, ya sea audio, vídeo o datos, a través de diferentes medios. Además, incluye el estudio de sistemas y equipos de audio y vídeo, así como el diseño de locales para producción y grabación de material audiovisual.
68 |             
69 |                                 El plan de estudios tiene un enfoque práctico que emula situaciones del ámbito profesional, completando la formación con idiomas, economía, organización de empresas y programación. Este grado habilita para ejercer la profesión de Ingeniería Técnica de Telecomunicación en las especialidades de Sonido e Imagen o de Sistemas de Telecomunicación.</p>
70 |                     </div>
71 |             </section>
72 |             <!--FIN Bloque Educación-->
73 |         </article>
74 |         <footer>
75 | 
76 |         </footer>
77 |     </body>
78 | </html>


--------------------------------------------------------------------------------
/soluciones/experiencia_16/css/estilos.css:
--------------------------------------------------------------------------------
  1 | *{
  2 |     margin:0px;
  3 |     padding: 0px;
  4 | }
  5 | /*Definiciones de selectores*/
  6 | body{
  7 |     background-color: white;
  8 |     color: #222;
  9 |     font: 200 14px 'Poppins', sans-serif
 10 | }
 11 | h1{
 12 |     font-size: 42px;
 13 |     font-weight: 400;
 14 | }
 15 | h2{
 16 |     font-size: 36px;
 17 |     font-weight: 300;
 18 | }
 19 | h3 {
 20 |     color:#ffc900;
 21 |     font-weight: 200;
 22 | }
 23 | p{
 24 |     text-align: justify;
 25 | }
 26 | thead{
 27 |     background-color: #222;
 28 |     color: white;
 29 | }
 30 | td{
 31 |     min-width: 150px;
 32 | }
 33 | li{
 34 |     list-style: none;
 35 |     float:left;
 36 | }
 37 | i{
 38 |     margin-right: 5px;
 39 | }
 40 | a{
 41 |     text-decoration: none;
 42 | }
 43 | nav{
 44 |     position:fixed;
 45 |     width: 100%;
 46 |     height: 55px;
 47 |     background-color: #222;
 48 |     border-bottom: 1px solid white;
 49 |     padding-top: 10px;
 50 |     text-align: center;
 51 | }
 52 | nav ul{
 53 |     display: inline-block;
 54 | }
 55 | nav ul li{
 56 |     padding-top: 12px;
 57 |     text-transform: uppercase;
 58 | }
 59 | 
 60 | a:any-link{
 61 |     color:white;
 62 | }
 63 | a:-webkit-any-link {
 64 |     color:white;
 65 | }
 66 | a:-moz-any-link {
 67 |     color:white;
 68 | }
 69 | a:hover{
 70 |     color: #ffc900;
 71 | }
 72 | section{
 73 |     padding: 10px 100px 10px 100px;
 74 | }
 75 | ul{
 76 |     list-style: none;  
 77 | }
 78 | li{
 79 |     float: left;
 80 |     /*width: 30px;*/
 81 |     margin-right: 5px;
 82 | }
 83 | /*Definiciones de clases y ids*/
 84 | #datos{
 85 |     padding-top: 65px;
 86 | }
 87 | #educacion{
 88 |     background-color: #222;
 89 |     color: white;
 90 | }
 91 | #experiencia{
 92 |     border-top: 1px solid #ffc900;
 93 |     background-color: #222;
 94 |     color:
 95 |      white;
 96 | }
 97 | .enlace:hover{
 98 |     color: #ffc900;
 99 | }
100 | .logo{
101 |     padding-top: 0px;
102 | }


--------------------------------------------------------------------------------
/soluciones/experiencia_16/css/estilos_portfolio.css:
--------------------------------------------------------------------------------
  1 | /*CSS general de elementos*/
  2 | *{
  3 |     margin:0px;
  4 |     padding:0px;
  5 | }
  6 | body{
  7 |     background-color: #222;
  8 |     color: white;
  9 |     font: 200 14px 'Poppins', sans-serif;
 10 | }
 11 | h2{
 12 |     font-size: 36px;
 13 |     line-height: 36px;
 14 | }
 15 | h3{
 16 |     color: #999;
 17 |     font-size: 18px;
 18 |     font-weight: 300;
 19 | }
 20 | nav{
 21 |     position:fixed;
 22 |     width: 100%;
 23 |     height: 55px;
 24 |     background-color: #222;
 25 |     border-bottom: 1px solid white;
 26 |     padding-top: 10px;
 27 |     text-align: center;
 28 | }
 29 | nav ul{
 30 |     display: inline-block;
 31 | }
 32 | nav ul li{
 33 |     padding-top: 12px;
 34 |     text-transform: uppercase;
 35 | }
 36 | section{
 37 |     padding: 30px 100px 30px 100px;
 38 | }
 39 | p{
 40 |     text-align: justify;
 41 | }
 42 | cite{
 43 |     font-weight: 300;
 44 | }
 45 | i{
 46 |     font-size: 24px;
 47 | }
 48 | i:hover{
 49 |     color: #ffc900;
 50 | }
 51 | a{
 52 |     text-decoration: none;
 53 | }
 54 | a:any-link{
 55 |     color:white;
 56 | }
 57 | a:-webkit-any-link {
 58 |     color:white;
 59 | }
 60 | a:-moz-any-link {
 61 |     color:
 62 |     white;
 63 | }
 64 | a:hover{
 65 |     color: #ffc900;
 66 | }
 67 | ul{
 68 |     list-style: none;  
 69 | }
 70 | li{
 71 |     float: left;
 72 |     /*width: 30px;*/
 73 |     margin-right: 5px;
 74 | }
 75 | button{
 76 |     border-radius: 10px;
 77 | }
 78 | footer{
 79 |     height: 55px;
 80 |     padding-top: 10px;
 81 |     text-align: center;
 82 | }
 83 | footer ul{
 84 |     display: inline-block;
 85 | }
 86 | footer ul li{
 87 |     float:left;
 88 | }
 89 | /*CSS IDs y Clase*/
 90 | .hastag{
 91 |     color: #ffc900;
 92 | }
 93 | .seccion{
 94 |     padding: 10px 100px 10px 100px;
 95 | }
 96 | .logo{
 97 |     padding-top: 0px;
 98 | }
 99 | #redessociales{
100 |     margin-top: 20px;
101 | }
102 | #inicio{
103 |     background-image: url("../imagenes/inicio.png");
104 |     background-repeat: no-repeat;
105 |     background-size: cover;
106 |     min-height: 280px;
107 |     padding-top: 95px;
108 | }
109 | #experiencia{
110 |     background-color: white;
111 |     color: #222;
112 | }
113 | #experiencia h2,#portfolio h2{
114 |     text-align: center;
115 | }
116 | #experiencia h3,#portfolio h3{
117 |     text-align: center;
118 |     margin-bottom: 30px;
119 | }
120 | #portfolio{
121 |     border-top: 1px solid #ffc900;
122 | }
123 | .masinfo button{
124 |     background-color: #ffc900;
125 |     font-weight: 600;
126 |     padding-left: 15px;
127 |     padding-right: 15px;
128 |     margin-top: 5px;
129 |     padding: 5px;
130 | }
131 | #contactar{
132 |     background-image: url("../imagenes/fondo_contactar.png");
133 |     background-repeat: no-repeat;
134 |     background-position: right;
135 | }
136 | /*Grid sobremi*/
137 | #sobremi{
138 |     display: grid;
139 |     grid-template-columns: 250px 1fr;
140 | }
141 | #sobremi h2{
142 |     margin-bottom: 15px;
143 | }
144 | #sobremi .masinfo{
145 |     margin-top: 15px
146 | }
147 | #sobremi .masinfo button
148 | {
149 |     padding-top: 5px;
150 |     padding-bottom: 5px;
151 |     padding-left: 30px;
152 |     padding-right: 30px;
153 | }
154 | #contactar{
155 |     background-color: #ffc900;
156 |     color: #222;
157 | }
158 | /*Card portfolio*/
159 | .filaportfolio{
160 |     display: flex;
161 |     flex-direction: row;
162 |     flex-wrap: wrap;
163 |     justify-content: space-between;
164 |     gap: 30px 30px;
165 |     margin-bottom: 15px;
166 |     margin-top: 15px;
167 | }
168 | .card{
169 |     width: 250px;
170 |     background-color: #191919;
171 |     border-radius: 15px;
172 | }
173 | .card img,.card video,.card iframe{
174 |     border-radius: 15px 15px 0 0;
175 | }
176 | .card h3{
177 |     color: #ffc900;
178 | }
179 | .card h4{
180 |     margin:0 5px 5px 0;
181 | }
182 | .card h3,.card h4,.card p,.card .masinfo{
183 |     padding: 0 15px;
184 | }
185 | .card .masinfo {
186 |     margin: 15px 0px 15px 0 px;
187 |     height: 26px;
188 | }
189 | 
190 | .card .sep{
191 |     margin: 0 5px 5px 0;
192 |     border: 1px solid #ffc900;
193 | }
194 | .card .masinfo button{
195 |     float: right;
196 | }
197 | /*Card experiencia*/
198 | .gridexp{
199 |     display: grid;
200 |     grid-template-columns: repeat(4,350px);
201 |     grid-gap:10px;
202 |     justify-content: space-between;
203 |     align-content: space-around;
204 | }
205 | @media (min-width: 400px){
206 |     .gridexp{
207 |         display: flex;
208 |         flex-direction: row;
209 |         flex-wrap: wrap;
210 |         justify-content: space-between;
211 |         gap: 30px 30px;
212 |         margin-bottom: 15px;
213 |         margin-top: 15px;
214 |     }
215 | }
216 | 
217 | .cardexp{
218 |     background-color: #222;
219 |     border-radius: 15px;
220 |     color: white;
221 |     padding: 10px 15px;
222 | }
223 | .cardexp h2{
224 |     margin-bottom: 5px;
225 | }
226 | .cardexp h3{
227 |     margin-bottom: 20px;
228 | }
229 | .cardexp p{
230 |     margin-bottom: 20px;
231 | }
232 | .cardexp ul{
233 |     display: flex;
234 |     justify-content: flex-end;
235 | }
236 | .cardexp li{
237 |     height: 30px;
238 | }
239 | /*Formulario*/
240 | .itemform{
241 |     display: grid;
242 |     grid-template-columns: 150px 350px;
243 |     justify-content: center;
244 |     margin-bottom: 10px;
245 | }
246 | .itemform label{
247 |     font-weight: 700;
248 | }
249 | .itemform input,.itemform textarea{
250 |     border-radius: 5px;
251 |     border: 1px solid white;
252 | }
253 | input[type="submit"]{
254 |     background-color: #222;
255 |     border: 1px solid #222;
256 |     color: white;
257 |     padding: 10px;
258 |     grid-column: 2/3;
259 |     justify-self: end;
260 | }
261 | 
262 | 


--------------------------------------------------------------------------------
/soluciones/experiencia_16/extendido.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |     <head>
 3 |         <meta charset="utf-8">
 4 |         <title>CV Extendido de Luís Martínez</title>
 5 |         <link rel="preconnect" href="https://fonts.googleapis.com">
 6 |         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 7 |         <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400&display=swap" rel="stylesheet">
 8 |         <script src="https://kit.fontawesome.com/f56f6708a5.js" crossorigin="anonymous"></script>
 9 |         <link rel="stylesheet" href="./css/estilos.css">
10 |     </head>
11 |     <body>
12 |         <header>
13 |         <!--Menu navegacion-->
14 |             <nav>
15 |                 <ul>
16 |                     <li><a href="index.html">inicio</a></li>
17 |                     <li class="logo"><img src="./imagenes/cascos.png" alt="logo de Luis"></li>
18 |                     <li><a href="extendido.html">extendido</a></li>
19 |                 </ul>
20 |             </nav>
21 |         </header>
22 |         <article>
23 |             <!--Bloque Datos personales-->
24 |             <section id="datos">
25 |                 <h1>CV Extendido</h1>
26 |                 <h2>Datos personales</h2>
27 |                 <img src="../imagenes/about-img.png" alt="Foto Luís Martínez" height="250px">
28 |                 <table>
29 |                     <thead>
30 |                         <th colspan="4">Paco Gómez</th>
31 |                     </thead>
32 |                     <tbody>
33 |                         <tr>
34 |                             <td><i class="fa-solid fa-user"></i><strong>Edad</strong></td>
35 |                             <td>47</td>
36 |                             <td><i class="fa-solid fa-city"></i><strong>Ciudad residencia</strong></td>
37 |                             <td>Valencia</td>
38 |                         </tr>
39 |                         <tr>
40 |                             <td><i class="fa-solid fa-graduation-cap"></i><strong>Estudios</strong></td>
41 |                             <td>Superiores</td>
42 |                             <td><i class="fa-solid fa-building-columns"></i><strong>Especialidad</strong></td>
43 |                             <td>Telecomunicaciones</td>
44 |                         </tr>
45 |                         <tr>
46 |                             <td><i class="fa-solid fa-hat-chef"></i><strong>Aficion</strong></td>
47 |                             <td>Cocina</td>
48 |                             <td><i class="fa-solid fa-baseball"></i><strong>Desporte</strong></td>
49 |                             <td>Baloncesto</td>
50 |                         </tr>
51 |                     </tbody>
52 |                 </table>
53 |             </section>
54 |             <!--FIN Bloque Datos personales-->
55 |             <!--Bloque Experiencia-->
56 |             <section id="experiencia">
57 |                 <h2>Experiencia</h2>
58 |                 <div>
59 |                     <h3>Producción BSO corto animación</h3>
60 |                     <ul>
61 |                         <li><i class="fa-brands fa-soundcloud"></i></li>
62 |                         <li><i class="fa-solid fa-microphone"></i></li>
63 |                         <li><i class="fa-solid fa-podcast"></i></li>
64 |                     </ul>
65 |                     <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum tempora omnis voluptatem nemo fugiat quibusdam provident unde a ut, facere necessitatibus praesentium vel perspiciatis eum dicta dolorum voluptas tempore atque.</p>
66 |                 </div>
67 |             </section>
68 |             <!--FIN Bloque Experiencia-->
69 |             <!--Bloque Educación-->
70 |             <section id="educacion">
71 |                 <h2>Educacion</h2>
72 |                     <div>
73 |                         <h3>2002 - Ingeniero de sonido por la <a href="http://www.upv.es/"><span class="enlace">UPV</span></a></h3>
74 |                         <p>La carrera explica el funcionamiento de los sistemas empleados para codificar, transmitir, recibir y procesar información en cualquier formato, ya sea audio, vídeo o datos, a través de diferentes medios. Además, incluye el estudio de sistemas y equipos de audio y vídeo, así como el diseño de locales para producción y grabación de material audiovisual.
75 |             
76 |                                 El plan de estudios tiene un enfoque práctico que emula situaciones del ámbito profesional, completando la formación con idiomas, economía, organización de empresas y programación. Este grado habilita para ejercer la profesión de Ingeniería Técnica de Telecomunicación en las especialidades de Sonido e Imagen o de Sistemas de Telecomunicación.</p>
77 |                     </div>
78 |             </section>
79 |             <!--FIN Bloque Educación-->
80 |         </article>
81 |         <footer>
82 | 
83 |         </footer>
84 |     </body>
85 | </html>


--------------------------------------------------------------------------------
/soluciones/experiencia_16/imagenes/about-img.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_16/imagenes/about-img.png


--------------------------------------------------------------------------------
/soluciones/experiencia_16/imagenes/about-img_250.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_16/imagenes/about-img_250.png


--------------------------------------------------------------------------------
/soluciones/experiencia_16/imagenes/cascos.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_16/imagenes/cascos.png


--------------------------------------------------------------------------------
/soluciones/experiencia_16/imagenes/fondo_contactar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_16/imagenes/fondo_contactar.png


--------------------------------------------------------------------------------
/soluciones/experiencia_16/imagenes/imagen_portfolio.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_16/imagenes/imagen_portfolio.png


--------------------------------------------------------------------------------
/soluciones/experiencia_16/imagenes/inicio.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_16/imagenes/inicio.png


--------------------------------------------------------------------------------
/soluciones/experiencia_16/imagenes/sergey-zigle-rQ4_6TSliRg-unsplash.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_16/imagenes/sergey-zigle-rQ4_6TSliRg-unsplash.jpg


--------------------------------------------------------------------------------
/soluciones/experiencia_16/imagenes/tecno_au.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_16/imagenes/tecno_au.png


--------------------------------------------------------------------------------
/soluciones/experiencia_16/imagenes/tecno_cu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_16/imagenes/tecno_cu.png


--------------------------------------------------------------------------------
/soluciones/experiencia_16/imagenes/tecno_html.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_16/imagenes/tecno_html.png


--------------------------------------------------------------------------------
/soluciones/experiencia_16/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 |     <head>
  4 |         <meta charset="utf-8">
  5 |         <title>Portfolio de Luís Martínez</title>
  6 |         <link rel="preconnect" href="https://fonts.googleapis.com">
  7 |         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  8 |         <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300&display=swap" rel="stylesheet">
  9 |         <script src="https://kit.fontawesome.com/f56f6708a5.js" crossorigin="anonymous"></script>
 10 |         <link rel="stylesheet" href="./css/estilos_portfolio.css">
 11 |     </head>
 12 |     <body>
 13 |         <!--Menu navegacion-->
 14 |         <nav>
 15 |             <ul>
 16 |                 <li><a href="#sobremi">sobre mi</a></li>
 17 |                 <li><a href="#portfolio">portfolio</a></li>
 18 |                 <li class="logo"><img src="./imagenes/cascos.png" alt="logo de Luis"></li>
 19 |                 <li><a href="#experiencia">skills</a></li>
 20 |                 <li><a href="#contactar">contactar</a></li>
 21 |             </ul>
 22 |         </nav>
 23 |         <article>
 24 |             <!--Bloque de inicio-->
 25 |             <section id="inicio">
 26 |                 <h2>Luís Martínez</h2>
 27 |                 <h3 class="hastag">#programador</h3>
 28 |                 <h3 class="hastag">#músico</h3>
 29 |                 <ul id="redessociales">
 30 |                     <li><a href="https://open.spotify.com/" target="_blank"><i class="fa-brands fa-spotify"></i></a></li>
 31 |                     <li><a href="https://twitter.com/" target="_blank"><i class="fa-brands fa-twitter"></i></a></li>
 32 |                     <li><a href="https://www.linkedin.com/" target="_blank"><i class="fa-brands fa-linkedin"></i></a></li>
 33 |                     <li><a href="https://www.instagram.com/" target="_blank"><i class="fa-brands fa-square-instagram"></i></a></li>
 34 |                 </ul>
 35 |             </section>
 36 |             <!--FIN Bloque de inicio-->
 37 |             <!--Bloque de sobre mi-->
 38 |             <section id="sobremi">
 39 |                 <div id="imgsobremi"><img src="./imagenes/about-img_250.png" alt="Foto Luís Martínez" height="250px"></div>
 40 |                 <div id="bodysobremi">
 41 |                     <h2>Sobre mí</h2>
 42 |                     <p>Soy <strong>Luís Martinez</strong> músico de carrera y apasionado de <span>tecnología y la programación</span>. Música y emprendimiento forman parte de la cotidianidad del músico freelance, es un mundo en el que me ha llevado a lo largo de mi carrera a conocer muchos grandes profesionales y maravillosos escenarios. Durante ese periplo se cruzó en mi vida el diseño y desarrollo web, donde se abren nuevas oportunidades de crecimiento combinadas al sector de la prodcución audiovisual.</p>
 43 |                     <p>Me defino como una persona creativa y enamorado de lo que hago, donde mi máxima es <cite>"el mundo es un aula maravillosa de aprendizaje continuo"</cite>.</p>
 44 |                     <div class="masinfo"><button type="button">MAS INFO</button></div>
 45 |                 </div>
 46 |             </section>
 47 |             <!--FIN Bloque de sobre mi-->
 48 |             <!--Bloque Portfolio-->
 49 |             <section id="portfolio">
 50 |                 <h2>Portfolio</h2>
 51 |                 <h3>Una mirada mas allá del texto</h3>
 52 |                 <div class="filaportfolio">
 53 |                     <div class="card">
 54 |                         <video controls width="250">
 55 |                             <source src="./media/intro_mastermindv2.webm" type="video/webm">
 56 |                             <source src="./media/intro_mastermindv2.mp4" type="video/mp4">
 57 |                         </video>
 58 |                         <h3>musica</h3>
 59 |                         <h4>concierto benicassim</h4>
 60 |                         <div class="sep"></div>
 61 |                         <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
 62 |                         <div class="masinfo"><button type="button">MAS INFO</button></div>
 63 |                     </div>
 64 |                     <div class="card">
 65 |                         <iframe width="250" src="https://www.youtube.com/embed/cGvXAAw3Ikk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 66 |                         <h3>musica</h3>
 67 |                         <h4>concierto benicassim</h4>
 68 |                         <div class="sep"></div>
 69 |                         <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
 70 |                         <div class="masinfo"><button type="button">MAS INFO</button></div>
 71 |                     </div>
 72 |                     <div class="card">
 73 |                         <img src="./imagenes/imagen_portfolio.png" alt="Portfolio 3">
 74 |                         <h3>musica</h3>
 75 |                         <h4>concierto benicassim</h4>
 76 |                         <div class="sep"></div>
 77 |                         <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
 78 |                         <div class="masinfo"><button type="button">MAS INFO</button></div>
 79 |                     </div>
 80 |                     <div class="card">
 81 |                         <img src="./imagenes/imagen_portfolio.png" alt="Portfolio 4">
 82 |                         <h3>musica</h3>
 83 |                         <h4>concierto benicassim</h4>
 84 |                         <div class="sep"></div>
 85 |                         <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
 86 |                         <div class="masinfo"><button type="button">MAS INFO</button></div>
 87 |                     </div>
 88 |                 </div>
 89 |             </section>
 90 |             <!--FIN Bloque Portfolio-->
 91 |             <!--Bloque Experiencia-->
 92 |             <section id="experiencia">
 93 |                 <h2>Experiencia & Skills</h2>
 94 |                 <h3>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
 95 |                 <div class="gridexp">
 96 |                     <div class="cardexp">
 97 |                         <h2>Diseño web</h2>
 98 |                         <h3 class="textoizquierda">2018-2020</h3>
 99 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
100 |                         <ul>
101 |                             <li><img src="./imagenes/tecno_au.png" alt="" height="30px"></li>
102 |                             <li><img src="./imagenes/tecno_cu.png" alt="" height="30px"></li>
103 |                             <li><img src="./imagenes/tecno_html.png" alt="" height="30px"></li>
104 |                         </ul>
105 |                     </div>
106 |                     <div class="cardexp">
107 |                         <h2>Diseño web</h2>
108 |                         <h3 class="textoizquierda">2018-2020</h3>
109 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
110 |                         <ul>
111 |                             <li><img src="./imagenes/tecno_au.png" alt="" height="30px"></li>
112 |                             <li><img src="./imagenes/tecno_cu.png" alt="" height="30px"></li>
113 |                             <li><img src="./imagenes/tecno_html.png" alt="" height="30px"></li>
114 |                         </ul>
115 |                     </div>
116 |                     <div class="cardexp">
117 |                         <h2>Diseño web</h2>
118 |                         <h3 class="textoizquierda">2018-2020</h3>
119 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
120 |                         <ul>
121 |                             <li><img src="./imagenes/tecno_au.png" alt="" height="30px"></li>
122 |                             <li><img src="./imagenes/tecno_cu.png" alt="" height="30px"></li>
123 |                             <li><img src="./imagenes/tecno_html.png" alt="" height="30px"></li>
124 |                         </ul>
125 |                     </div>
126 |                     <div class="cardexp">
127 |                         <h2>Diseño web</h2>
128 |                         <h3 class="textoizquierda">2018-2020</h3>
129 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
130 |                         <ul>
131 |                             <li><img src="./imagenes/tecno_au.png" alt="" height="30px"></li>
132 |                             <li><img src="./imagenes/tecno_cu.png" alt="" height="30px"></li>
133 |                             <li><img src="./imagenes/tecno_html.png" alt="" height="30px"></li>
134 |                         </ul>
135 |                     </div>
136 |                     <div class="cardexp">
137 |                         <h2>Diseño web</h2>
138 |                         <h3 class="textoizquierda">2018-2020</h3>
139 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
140 |                         <ul>
141 |                             <li><img src="./imagenes/tecno_au.png" alt="" height="30px"></li>
142 |                             <li><img src="./imagenes/tecno_cu.png" alt="" height="30px"></li>
143 |                             <li><img src="./imagenes/tecno_html.png" alt="" height="30px"></li>
144 |                         </ul>
145 |                     </div>
146 |                     <div class="cardexp">
147 |                         <h2>Diseño web</h2>
148 |                         <h3 class="textoizquierda">2018-2020</h3>
149 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
150 |                         <ul>
151 |                             <li><img src="./imagenes/tecno_au.png" alt="" height="30px"></li>
152 |                             <li><img src="./imagenes/tecno_cu.png" alt="" height="30px"></li>
153 |                             <li><img src="./imagenes/tecno_html.png" alt="" height="30px"></li>
154 |                         </ul>
155 |                     </div>
156 |                 </div>
157 |             </section>
158 |             <!--FIN Bloque Experiencia-->
159 |             <!--Bloque Contactar-->
160 |             <section id="contactar">
161 |                 <h2>Contacto</h2>
162 |                 <h3>Envíame tus dudas</h3>
163 |                 <form action="#">
164 |                     <div class="itemform">
165 |                         <label for="nombre">Nombre</label>
166 |                         <input type="text" id="nombre" name="nombre" minlength="2" maxlength="64" size="32" required>
167 |                     </div>
168 |                     <div class="itemform">
169 |                         <label for="empresa">Empresa</label>
170 |                         <input type="text" id="empresa" name="empresa" minlength="2" maxlength="128" size="32">
171 |                     </div>
172 |                     <div class="itemform">
173 |                         <label for="email">Email</label>
174 |                         <input type="email" id="email" name="email" minlength="10" maxlength="128" size="32" required>
175 |                     </div>
176 |                     <div class="itemform">
177 |                         <label for="mensaje">Mensaje</label>
178 |                         <textarea name="mensaje" id="mensaje" cols="33" rows="5"></textarea>
179 |                     </div>
180 |                     <div class="itemform">
181 |                         <input type="submit" name="boton" value="CONTACTAR">
182 |                     </div>
183 |                 </form>
184 |             </section>
185 |             <!--FIN Bloque Contactar-->
186 |         </article>
187 |         <!-- Footer -->
188 |         <footer>
189 |             <ul>
190 |                 <li class="logo"><a href="#inicio"><img src="./imagenes/cascos.png" alt=""></a></li>
191 |                 <li>Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
192 |             </ul>
193 |         </footer>
194 |     </body>
195 | </html>


--------------------------------------------------------------------------------
/soluciones/experiencia_17/css/estilos.css:
--------------------------------------------------------------------------------
  1 | *{
  2 |     margin:0px;
  3 |     padding: 0px;
  4 | }
  5 | /*Definiciones de selectores*/
  6 | body{
  7 |     background-color: white;
  8 |     color: #222;
  9 |     font: 200 14px 'Poppins', sans-serif
 10 | }
 11 | h1{
 12 |     font-size: 42px;
 13 |     font-weight: 400;
 14 | }
 15 | h2{
 16 |     font-size: 36px;
 17 |     font-weight: 300;
 18 | }
 19 | h3 {
 20 |     color:#ffc900;
 21 |     font-weight: 200;
 22 | }
 23 | p{
 24 |     text-align: justify;
 25 | }
 26 | thead{
 27 |     background-color: #222;
 28 |     color: white;
 29 | }
 30 | td{
 31 |     min-width: 150px;
 32 | }
 33 | li{
 34 |     list-style: none;
 35 |     float:left;
 36 | }
 37 | i{
 38 |     margin-right: 5px;
 39 | }
 40 | a{
 41 |     text-decoration: none;
 42 | }
 43 | nav{
 44 |     position:fixed;
 45 |     width: 100%;
 46 |     height: 55px;
 47 |     background-color: #222;
 48 |     border-bottom: 1px solid white;
 49 |     padding-top: 10px;
 50 |     text-align: center;
 51 | }
 52 | nav ul{
 53 |     display: inline-block;
 54 | }
 55 | nav ul li{
 56 |     padding-top: 12px;
 57 |     text-transform: uppercase;
 58 | }
 59 | 
 60 | a:any-link{
 61 |     color:white;
 62 | }
 63 | a:-webkit-any-link {
 64 |     color:white;
 65 | }
 66 | a:-moz-any-link {
 67 |     color:white;
 68 | }
 69 | a:hover{
 70 |     color: #ffc900;
 71 | }
 72 | section{
 73 |     padding: 10px 100px 10px 100px;
 74 | }
 75 | ul{
 76 |     list-style: none;  
 77 | }
 78 | li{
 79 |     float: left;
 80 |     /*width: 30px;*/
 81 |     margin-right: 5px;
 82 | }
 83 | /*Definiciones de clases y ids*/
 84 | #datos{
 85 |     padding-top: 65px;
 86 | }
 87 | #datoscontenedor{
 88 |     display: flex;
 89 |     column-gap: 10px;
 90 | }
 91 | #educacion{
 92 |     background-color: #222;
 93 |     color: white;
 94 | }
 95 | #experiencia{
 96 |     border-top: 1px solid #ffc900;
 97 |     background-color: #222;
 98 |     color:
 99 |      white;
100 | }
101 | .enlace:hover{
102 |     color: #ffc900;
103 | }
104 | .logo{
105 |     padding-top: 0px;
106 | }


--------------------------------------------------------------------------------
/soluciones/experiencia_17/css/estilos_portfolio.css:
--------------------------------------------------------------------------------
  1 | /*CSS general de elementos*/
  2 | *{
  3 |     margin:0px;
  4 |     padding:0px;
  5 | }
  6 | body{
  7 |     background-color: #222;
  8 |     color: white;
  9 |     font: 200 14px 'Poppins', sans-serif;
 10 | }
 11 | h2{
 12 |     font-size: 36px;
 13 |     line-height: 36px;
 14 | }
 15 | h3{
 16 |     color: #999;
 17 |     font-size: 18px;
 18 |     font-weight: 300;
 19 | }
 20 | nav{
 21 |     position:fixed;
 22 |     width: 100%;
 23 |     height: 55px;
 24 |     background-color: #222;
 25 |     border-bottom: 1px solid white;
 26 |     padding-top: 10px;
 27 |     text-align: center;
 28 | }
 29 | nav ul{
 30 |     display: inline-block;
 31 | }
 32 | nav ul li{
 33 |     padding-top: 12px;
 34 |     text-transform: uppercase;
 35 | }
 36 | section{
 37 |     padding: 30px 100px 30px 100px;
 38 | }
 39 | p{
 40 |     text-align: justify;
 41 | }
 42 | cite{
 43 |     font-weight: 300;
 44 | }
 45 | i{
 46 |     font-size: 24px;
 47 | }
 48 | i:hover{
 49 |     color: #ffc900;
 50 | }
 51 | a{
 52 |     text-decoration: none;
 53 | }
 54 | a:any-link{
 55 |     color:white;
 56 | }
 57 | a:-webkit-any-link {
 58 |     color:white;
 59 | }
 60 | a:-moz-any-link {
 61 |     color:
 62 |     white;
 63 | }
 64 | a:hover{
 65 |     color: #ffc900;
 66 | }
 67 | ul{
 68 |     list-style: none;  
 69 | }
 70 | li{
 71 |     float: left;
 72 |     /*width: 30px;*/
 73 |     margin-right: 5px;
 74 | }
 75 | button{
 76 |     border-radius: 10px;
 77 | }
 78 | footer{
 79 |     height: 55px;
 80 |     padding-top: 10px;
 81 |     text-align: center;
 82 | }
 83 | footer ul{
 84 |     display: inline-block;
 85 | }
 86 | footer ul li{
 87 |     float:left;
 88 | }
 89 | /*CSS IDs y Clase*/
 90 | .hastag{
 91 |     color: #ffc900;
 92 | }
 93 | .seccion{
 94 |     padding: 10px 100px 10px 100px;
 95 | }
 96 | .logo{
 97 |     padding-top: 0px;
 98 | }
 99 | #redessociales{
100 |     margin-top: 20px;
101 | }
102 | #inicio{
103 |     background-image: url("../imagenes/inicio.png");
104 |     background-repeat: no-repeat;
105 |     background-size: cover;
106 |     min-height: 280px;
107 |     padding-top: 95px;
108 | }
109 | #experiencia{
110 |     background-color: white;
111 |     color: #222;
112 | }
113 | #experiencia h2,#portfolio h2{
114 |     text-align: center;
115 | }
116 | #experiencia h3,#portfolio h3{
117 |     text-align: center;
118 |     margin-bottom: 30px;
119 | }
120 | #portfolio{
121 |     border-top: 1px solid #ffc900;
122 | }
123 | .masinfo button{
124 |     background-color: #ffc900;
125 |     font-weight: 600;
126 |     padding-left: 15px;
127 |     padding-right: 15px;
128 |     margin-top: 5px;
129 |     padding: 5px;
130 | }
131 | #contactar{
132 |     background-image: url("../imagenes/fondo_contactar.png");
133 |     background-repeat: no-repeat;
134 |     background-position: right;
135 | }
136 | /*Grid sobremi*/
137 | #sobremi{
138 |     display: grid;
139 |     grid-template-columns: 250px 1fr;
140 | }
141 | #sobremi h2{
142 |     margin-bottom: 15px;
143 | }
144 | #sobremi .masinfo{
145 |     margin-top: 15px
146 | }
147 | #sobremi .masinfo button
148 | {
149 |     padding-top: 5px;
150 |     padding-bottom: 5px;
151 |     padding-left: 30px;
152 |     padding-right: 30px;
153 | }
154 | #contactar{
155 |     background-color: #ffc900;
156 |     color: #222;
157 | }
158 | /*Card portfolio*/
159 | .filaportfolio{
160 |     display: flex;
161 |     flex-direction: row;
162 |     flex-wrap: wrap;
163 |     justify-content: space-between;
164 |     gap: 30px 30px;
165 |     margin-bottom: 15px;
166 |     margin-top: 15px;
167 | }
168 | .card{
169 |     width: 250px;
170 |     background-color: #191919;
171 |     border-radius: 15px;
172 | }
173 | .card img,.card video,.card iframe{
174 |     border-radius: 15px 15px 0 0;
175 | }
176 | .card h3{
177 |     color: #ffc900;
178 | }
179 | .card h4{
180 |     margin:0 5px 5px 0;
181 | }
182 | .card h3,.card h4,.card p,.card .masinfo{
183 |     padding: 0 15px;
184 | }
185 | .card .masinfo {
186 |     margin: 15px 0px 15px 0 px;
187 |     height: 26px;
188 | }
189 | 
190 | .card .sep{
191 |     margin: 0 5px 5px 0;
192 |     border: 1px solid #ffc900;
193 | }
194 | .card .masinfo button{
195 |     float: right;
196 | }
197 | /*Card experiencia*/
198 | .gridexp{
199 |     display: grid;
200 |     grid-template-columns: repeat(4,350px);
201 |     grid-gap:10px;
202 |     justify-content: space-between;
203 |     align-content: space-around;
204 | }
205 | @media (min-width: 400px){
206 |     .gridexp{
207 |         display: flex;
208 |         flex-direction: row;
209 |         flex-wrap: wrap;
210 |         justify-content: space-between;
211 |         gap: 30px 30px;
212 |         margin-bottom: 15px;
213 |         margin-top: 15px;
214 |     }
215 | }
216 | 
217 | .cardexp{
218 |     background-color: #222;
219 |     border-radius: 15px;
220 |     color: white;
221 |     padding: 10px 15px;
222 | }
223 | .cardexp h2{
224 |     margin-bottom: 5px;
225 | }
226 | .cardexp h3{
227 |     margin-bottom: 20px;
228 | }
229 | .cardexp p{
230 |     margin-bottom: 20px;
231 | }
232 | .cardexp ul{
233 |     display: flex;
234 |     justify-content: flex-end;
235 | }
236 | .cardexp li{
237 |     height: 30px;
238 | }
239 | /*Formulario*/
240 | .itemform{
241 |     display: grid;
242 |     grid-template-columns: 150px 350px;
243 |     justify-content: center;
244 |     margin-bottom: 10px;
245 | }
246 | .itemform label{
247 |     font-weight: 700;
248 | }
249 | .itemform input,.itemform textarea{
250 |     border-radius: 5px;
251 |     border: 1px solid white;
252 | }
253 | input[type="submit"]{
254 |     background-color: #222;
255 |     border: 1px solid #222;
256 |     color: white;
257 |     padding: 10px;
258 |     grid-column: 2/3;
259 |     justify-self: end;
260 | }
261 | 
262 | 


--------------------------------------------------------------------------------
/soluciones/experiencia_17/extendido.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |     <head>
 3 |         <meta charset="utf-8">
 4 |         <title>CV Extendido de Luís Martínez</title>
 5 |         <link rel="preconnect" href="https://fonts.googleapis.com">
 6 |         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 7 |         <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400&display=swap" rel="stylesheet">
 8 |         <script src="https://kit.fontawesome.com/f56f6708a5.js" crossorigin="anonymous"></script>
 9 |         <link rel="stylesheet" href="./css/estilos.css">
10 |     </head>
11 |     <body>
12 |         <header>
13 |         <!--Menu navegacion-->
14 |             <nav>
15 |                 <ul>
16 |                     <li><a href="index.html">inicio</a></li>
17 |                     <li class="logo"><img src="./imagenes/cascos.png" alt="logo de Luis"></li>
18 |                     <li><a href="extendido.html">extendido</a></li>
19 |                 </ul>
20 |             </nav>
21 |         </header>
22 |         <article>
23 |             <!--Bloque Datos personales-->
24 |             <section id="datos">
25 |                 <h1>CV Extendido</h1>
26 |                 <h2>Datos personales</h2>
27 |                 <div id="datoscontenedor">
28 |                     <div class="datositem"><img src="../imagenes/about-img.png" alt="Foto Luís Martínez" height="250px"></div>
29 |                     <div class="datositem">
30 |                         <table>
31 |                             <tbody>
32 |                                 <tr>
33 |                                     <td><i class="fa-solid fa-user"></i><strong>Edad</strong></td>
34 |                                     <td>47</td>
35 |                                     <td><i class="fa-solid fa-city"></i><strong>Ciudad residencia</strong></td>
36 |                                     <td>Valencia</td>
37 |                                 </tr>
38 |                                 <tr>
39 |                                     <td><i class="fa-solid fa-graduation-cap"></i><strong>Estudios</strong></td>
40 |                                     <td>Superiores</td>
41 |                                     <td><i class="fa-solid fa-building-columns"></i><strong>Especialidad</strong></td>
42 |                                     <td>Telecomunicaciones</td>
43 |                                 </tr>
44 |                                 <tr>
45 |                                     <td><i class="fa-solid fa-hat-chef"></i><strong>Aficion</strong></td>
46 |                                     <td>Cocina</td>
47 |                                     <td><i class="fa-solid fa-baseball"></i><strong>Desporte</strong></td>
48 |                                     <td>Baloncesto</td>
49 |                                 </tr>
50 |                             </tbody>
51 |                         </table>
52 |                     </div>
53 |                 </div>
54 |             </section>
55 |             <!--FIN Bloque Datos personales-->
56 |             <!--Bloque Experiencia-->
57 |             <section id="experiencia">
58 |                 <h2>Experiencia</h2>
59 |                 <div>
60 |                     <h3>Producción BSO corto animación</h3>
61 |                     <ul>
62 |                         <li><i class="fa-brands fa-soundcloud"></i></li>
63 |                         <li><i class="fa-solid fa-microphone"></i></li>
64 |                         <li><i class="fa-solid fa-podcast"></i></li>
65 |                     </ul>
66 |                     <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum tempora omnis voluptatem nemo fugiat quibusdam provident unde a ut, facere necessitatibus praesentium vel perspiciatis eum dicta dolorum voluptas tempore atque.</p>
67 |                 </div>
68 |             </section>
69 |             <!--FIN Bloque Experiencia-->
70 |             <!--Bloque Educación-->
71 |             <section id="educacion">
72 |                 <h2>Educacion</h2>
73 |                     <div>
74 |                         <h3>2002 - Ingeniero de sonido por la <a href="http://www.upv.es/"><span class="enlace">UPV</span></a></h3>
75 |                         <p>La carrera explica el funcionamiento de los sistemas empleados para codificar, transmitir, recibir y procesar información en cualquier formato, ya sea audio, vídeo o datos, a través de diferentes medios. Además, incluye el estudio de sistemas y equipos de audio y vídeo, así como el diseño de locales para producción y grabación de material audiovisual.
76 |             
77 |                                 El plan de estudios tiene un enfoque práctico que emula situaciones del ámbito profesional, completando la formación con idiomas, economía, organización de empresas y programación. Este grado habilita para ejercer la profesión de Ingeniería Técnica de Telecomunicación en las especialidades de Sonido e Imagen o de Sistemas de Telecomunicación.</p>
78 |                     </div>
79 |             </section>
80 |             <!--FIN Bloque Educación-->
81 |         </article>
82 |         <footer>
83 | 
84 |         </footer>
85 |     </body>
86 | </html>


--------------------------------------------------------------------------------
/soluciones/experiencia_17/imagenes/about-img.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_17/imagenes/about-img.png


--------------------------------------------------------------------------------
/soluciones/experiencia_17/imagenes/about-img_250.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_17/imagenes/about-img_250.png


--------------------------------------------------------------------------------
/soluciones/experiencia_17/imagenes/cascos.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_17/imagenes/cascos.png


--------------------------------------------------------------------------------
/soluciones/experiencia_17/imagenes/fondo_contactar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_17/imagenes/fondo_contactar.png


--------------------------------------------------------------------------------
/soluciones/experiencia_17/imagenes/imagen_portfolio.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_17/imagenes/imagen_portfolio.png


--------------------------------------------------------------------------------
/soluciones/experiencia_17/imagenes/inicio.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_17/imagenes/inicio.png


--------------------------------------------------------------------------------
/soluciones/experiencia_17/imagenes/sergey-zigle-rQ4_6TSliRg-unsplash.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_17/imagenes/sergey-zigle-rQ4_6TSliRg-unsplash.jpg


--------------------------------------------------------------------------------
/soluciones/experiencia_17/imagenes/tecno_au.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_17/imagenes/tecno_au.png


--------------------------------------------------------------------------------
/soluciones/experiencia_17/imagenes/tecno_cu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_17/imagenes/tecno_cu.png


--------------------------------------------------------------------------------
/soluciones/experiencia_17/imagenes/tecno_html.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_17/imagenes/tecno_html.png


--------------------------------------------------------------------------------
/soluciones/experiencia_17/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 |     <head>
  4 |         <meta charset="utf-8">
  5 |         <title>Portfolio de Luís Martínez</title>
  6 |         <link rel="preconnect" href="https://fonts.googleapis.com">
  7 |         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  8 |         <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300&display=swap" rel="stylesheet">
  9 |         <script src="https://kit.fontawesome.com/f56f6708a5.js" crossorigin="anonymous"></script>
 10 |         <link rel="stylesheet" href="./css/estilos_portfolio.css">
 11 |     </head>
 12 |     <body>
 13 |         <!--Menu navegacion-->
 14 |         <nav>
 15 |             <ul>
 16 |                 <li><a href="#sobremi">sobre mi</a></li>
 17 |                 <li><a href="#portfolio">portfolio</a></li>
 18 |                 <li class="logo"><img src="./imagenes/cascos.png" alt="logo de Luis"></li>
 19 |                 <li><a href="#experiencia">skills</a></li>
 20 |                 <li><a href="#contactar">contactar</a></li>
 21 |             </ul>
 22 |         </nav>
 23 |         <article>
 24 |             <!--Bloque de inicio-->
 25 |             <section id="inicio">
 26 |                 <h2>Luís Martínez</h2>
 27 |                 <h3 class="hastag">#programador</h3>
 28 |                 <h3 class="hastag">#músico</h3>
 29 |                 <ul id="redessociales">
 30 |                     <li><a href="https://open.spotify.com/" target="_blank"><i class="fa-brands fa-spotify"></i></a></li>
 31 |                     <li><a href="https://twitter.com/" target="_blank"><i class="fa-brands fa-twitter"></i></a></li>
 32 |                     <li><a href="https://www.linkedin.com/" target="_blank"><i class="fa-brands fa-linkedin"></i></a></li>
 33 |                     <li><a href="https://www.instagram.com/" target="_blank"><i class="fa-brands fa-square-instagram"></i></a></li>
 34 |                 </ul>
 35 |             </section>
 36 |             <!--FIN Bloque de inicio-->
 37 |             <!--Bloque de sobre mi-->
 38 |             <section id="sobremi">
 39 |                 <div id="imgsobremi"><img src="./imagenes/about-img_250.png" alt="Foto Luís Martínez" height="250px"></div>
 40 |                 <div id="bodysobremi">
 41 |                     <h2>Sobre mí</h2>
 42 |                     <p>Soy <strong>Luís Martinez</strong> músico de carrera y apasionado de <span>tecnología y la programación</span>. Música y emprendimiento forman parte de la cotidianidad del músico freelance, es un mundo en el que me ha llevado a lo largo de mi carrera a conocer muchos grandes profesionales y maravillosos escenarios. Durante ese periplo se cruzó en mi vida el diseño y desarrollo web, donde se abren nuevas oportunidades de crecimiento combinadas al sector de la prodcución audiovisual.</p>
 43 |                     <p>Me defino como una persona creativa y enamorado de lo que hago, donde mi máxima es <cite>"el mundo es un aula maravillosa de aprendizaje continuo"</cite>.</p>
 44 |                     <div class="masinfo"><button type="button">MAS INFO</button></div>
 45 |                 </div>
 46 |             </section>
 47 |             <!--FIN Bloque de sobre mi-->
 48 |             <!--Bloque Portfolio-->
 49 |             <section id="portfolio">
 50 |                 <h2>Portfolio</h2>
 51 |                 <h3>Una mirada mas allá del texto</h3>
 52 |                 <div class="filaportfolio">
 53 |                     <div class="card">
 54 |                         <video controls width="250">
 55 |                             <source src="./media/intro_mastermindv2.webm" type="video/webm">
 56 |                             <source src="./media/intro_mastermindv2.mp4" type="video/mp4">
 57 |                         </video>
 58 |                         <h3>musica</h3>
 59 |                         <h4>concierto benicassim</h4>
 60 |                         <div class="sep"></div>
 61 |                         <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
 62 |                         <div class="masinfo"><button type="button">MAS INFO</button></div>
 63 |                     </div>
 64 |                     <div class="card">
 65 |                         <iframe width="250" src="https://www.youtube.com/embed/cGvXAAw3Ikk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 66 |                         <h3>musica</h3>
 67 |                         <h4>concierto benicassim</h4>
 68 |                         <div class="sep"></div>
 69 |                         <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
 70 |                         <div class="masinfo"><button type="button">MAS INFO</button></div>
 71 |                     </div>
 72 |                     <div class="card">
 73 |                         <img src="./imagenes/imagen_portfolio.png" alt="Portfolio 3">
 74 |                         <h3>musica</h3>
 75 |                         <h4>concierto benicassim</h4>
 76 |                         <div class="sep"></div>
 77 |                         <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
 78 |                         <div class="masinfo"><button type="button">MAS INFO</button></div>
 79 |                     </div>
 80 |                     <div class="card">
 81 |                         <img src="./imagenes/imagen_portfolio.png" alt="Portfolio 4">
 82 |                         <h3>musica</h3>
 83 |                         <h4>concierto benicassim</h4>
 84 |                         <div class="sep"></div>
 85 |                         <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
 86 |                         <div class="masinfo"><button type="button">MAS INFO</button></div>
 87 |                     </div>
 88 |                 </div>
 89 |             </section>
 90 |             <!--FIN Bloque Portfolio-->
 91 |             <!--Bloque Experiencia-->
 92 |             <section id="experiencia">
 93 |                 <h2>Experiencia & Skills</h2>
 94 |                 <h3>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
 95 |                 <div class="gridexp">
 96 |                     <div class="cardexp">
 97 |                         <h2>Diseño web</h2>
 98 |                         <h3 class="textoizquierda">2018-2020</h3>
 99 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
100 |                         <ul>
101 |                             <li><img src="./imagenes/tecno_au.png" alt="" height="30px"></li>
102 |                             <li><img src="./imagenes/tecno_cu.png" alt="" height="30px"></li>
103 |                             <li><img src="./imagenes/tecno_html.png" alt="" height="30px"></li>
104 |                         </ul>
105 |                     </div>
106 |                     <div class="cardexp">
107 |                         <h2>Diseño web</h2>
108 |                         <h3 class="textoizquierda">2018-2020</h3>
109 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
110 |                         <ul>
111 |                             <li><img src="./imagenes/tecno_au.png" alt="" height="30px"></li>
112 |                             <li><img src="./imagenes/tecno_cu.png" alt="" height="30px"></li>
113 |                             <li><img src="./imagenes/tecno_html.png" alt="" height="30px"></li>
114 |                         </ul>
115 |                     </div>
116 |                     <div class="cardexp">
117 |                         <h2>Diseño web</h2>
118 |                         <h3 class="textoizquierda">2018-2020</h3>
119 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
120 |                         <ul>
121 |                             <li><img src="./imagenes/tecno_au.png" alt="" height="30px"></li>
122 |                             <li><img src="./imagenes/tecno_cu.png" alt="" height="30px"></li>
123 |                             <li><img src="./imagenes/tecno_html.png" alt="" height="30px"></li>
124 |                         </ul>
125 |                     </div>
126 |                     <div class="cardexp">
127 |                         <h2>Diseño web</h2>
128 |                         <h3 class="textoizquierda">2018-2020</h3>
129 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
130 |                         <ul>
131 |                             <li><img src="./imagenes/tecno_au.png" alt="" height="30px"></li>
132 |                             <li><img src="./imagenes/tecno_cu.png" alt="" height="30px"></li>
133 |                             <li><img src="./imagenes/tecno_html.png" alt="" height="30px"></li>
134 |                         </ul>
135 |                     </div>
136 |                     <div class="cardexp">
137 |                         <h2>Diseño web</h2>
138 |                         <h3 class="textoizquierda">2018-2020</h3>
139 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
140 |                         <ul>
141 |                             <li><img src="./imagenes/tecno_au.png" alt="" height="30px"></li>
142 |                             <li><img src="./imagenes/tecno_cu.png" alt="" height="30px"></li>
143 |                             <li><img src="./imagenes/tecno_html.png" alt="" height="30px"></li>
144 |                         </ul>
145 |                     </div>
146 |                     <div class="cardexp">
147 |                         <h2>Diseño web</h2>
148 |                         <h3 class="textoizquierda">2018-2020</h3>
149 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
150 |                         <ul>
151 |                             <li><img src="./imagenes/tecno_au.png" alt="" height="30px"></li>
152 |                             <li><img src="./imagenes/tecno_cu.png" alt="" height="30px"></li>
153 |                             <li><img src="./imagenes/tecno_html.png" alt="" height="30px"></li>
154 |                         </ul>
155 |                     </div>
156 |                 </div>
157 |             </section>
158 |             <!--FIN Bloque Experiencia-->
159 |             <!--Bloque Contactar-->
160 |             <section id="contactar">
161 |                 <h2>Contacto</h2>
162 |                 <h3>Envíame tus dudas</h3>
163 |                 <form action="#">
164 |                     <div class="itemform">
165 |                         <label for="nombre">Nombre</label>
166 |                         <input type="text" id="nombre" name="nombre" minlength="2" maxlength="64" size="32" required>
167 |                     </div>
168 |                     <div class="itemform">
169 |                         <label for="empresa">Empresa</label>
170 |                         <input type="text" id="empresa" name="empresa" minlength="2" maxlength="128" size="32">
171 |                     </div>
172 |                     <div class="itemform">
173 |                         <label for="email">Email</label>
174 |                         <input type="email" id="email" name="email" minlength="10" maxlength="128" size="32" required>
175 |                     </div>
176 |                     <div class="itemform">
177 |                         <label for="mensaje">Mensaje</label>
178 |                         <textarea name="mensaje" id="mensaje" cols="33" rows="5"></textarea>
179 |                     </div>
180 |                     <div class="itemform">
181 |                         <input type="submit" name="boton" value="CONTACTAR">
182 |                     </div>
183 |                 </form>
184 |             </section>
185 |             <!--FIN Bloque Contactar-->
186 |         </article>
187 |         <!-- Footer -->
188 |         <footer>
189 |             <ul>
190 |                 <li class="logo"><a href="#inicio"><img src="./imagenes/cascos.png" alt=""></a></li>
191 |                 <li>Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
192 |             </ul>
193 |         </footer>
194 |     </body>
195 | </html>


--------------------------------------------------------------------------------
/soluciones/experiencia_18/css/estilos.css:
--------------------------------------------------------------------------------
  1 | *{
  2 |     margin:0px;
  3 |     padding: 0px;
  4 | }
  5 | /*Definiciones de selectores*/
  6 | body{
  7 |     background-color: white;
  8 |     color: #222;
  9 |     font: 200 14px 'Poppins', sans-serif
 10 | }
 11 | h1{
 12 |     font-size: 42px;
 13 |     font-weight: 400;
 14 | }
 15 | h2{
 16 |     font-size: 36px;
 17 |     font-weight: 300;
 18 | }
 19 | h3 {
 20 |     color:#ffc900;
 21 |     font-weight: 200;
 22 | }
 23 | p{
 24 |     text-align: justify;
 25 | }
 26 | thead{
 27 |     background-color: #222;
 28 |     color: white;
 29 | }
 30 | td{
 31 |     min-width: 150px;
 32 | }
 33 | li{
 34 |     list-style: none;
 35 |     float:left;
 36 | }
 37 | i{
 38 |     margin-right: 5px;
 39 | }
 40 | a{
 41 |     text-decoration: none;
 42 | }
 43 | nav{
 44 |     position:fixed;
 45 |     width: 100%;
 46 |     height: 55px;
 47 |     background-color: #222;
 48 |     border-bottom: 1px solid white;
 49 |     padding-top: 10px;
 50 |     text-align: center;
 51 | }
 52 | nav ul{
 53 |     display: inline-block;
 54 | }
 55 | nav ul li{
 56 |     padding-top: 12px;
 57 |     text-transform: uppercase;
 58 | }
 59 | 
 60 | a:any-link{
 61 |     color:white;
 62 | }
 63 | a:-webkit-any-link {
 64 |     color:white;
 65 | }
 66 | a:-moz-any-link {
 67 |     color:white;
 68 | }
 69 | a:hover{
 70 |     color: #ffc900;
 71 | }
 72 | section{
 73 |     padding: 10px 100px 10px 100px;
 74 | }
 75 | ul{
 76 |     list-style: none;  
 77 | }
 78 | li{
 79 |     float: left;
 80 |     /*width: 30px;*/
 81 |     margin-right: 5px;
 82 | }
 83 | /*Definiciones de clases y ids*/
 84 | #datos{
 85 |     padding-top: 65px;
 86 | }
 87 | #datoscontenedor{
 88 |     display: flex;
 89 |     column-gap: 10px;
 90 | }
 91 | #educacion{
 92 |     background-color: #222;
 93 |     color: white;
 94 | }
 95 | #experiencia{
 96 |     border-top: 1px solid #ffc900;
 97 |     background-color: #222;
 98 |     color:
 99 |      white;
100 | }
101 | .enlace:hover{
102 |     color: #ffc900;
103 | }
104 | .logo{
105 |     padding-top: 0px;
106 | }
107 | /*Card experiencia*/
108 | .gridedu{
109 |     display: grid;
110 |     grid-template-columns: repeat(4,350px);
111 |     grid-gap:10px;
112 |     justify-content: space-between;
113 |     align-content: space-around;
114 | }
115 | .cardedu img{
116 |     border-radius: 15px 15px 0 0;
117 |     margin-bottom: 15px;
118 | }
119 | .cardedu{
120 |     background-color: #333;
121 |     border-radius: 15px;
122 |     color: white;
123 |     padding: 10px 15px;
124 | }
125 | .cardedu h3{
126 |     margin-bottom: 20px;
127 |     border-top: 1px solid #ffc900;
128 | }
129 | .cardedu p{
130 |     margin-bottom: 20px;
131 | }


--------------------------------------------------------------------------------
/soluciones/experiencia_18/css/estilos_portfolio.css:
--------------------------------------------------------------------------------
  1 | /*CSS general de elementos*/
  2 | *{
  3 |     margin:0px;
  4 |     padding:0px;
  5 | }
  6 | body{
  7 |     background-color: #222;
  8 |     color: white;
  9 |     font: 200 14px 'Poppins', sans-serif;
 10 | }
 11 | h2{
 12 |     font-size: 36px;
 13 |     line-height: 36px;
 14 | }
 15 | h3{
 16 |     color: #999;
 17 |     font-size: 18px;
 18 |     font-weight: 300;
 19 | }
 20 | nav{
 21 |     position:fixed;
 22 |     width: 100%;
 23 |     height: 55px;
 24 |     background-color: #222;
 25 |     border-bottom: 1px solid white;
 26 |     padding-top: 10px;
 27 |     text-align: center;
 28 | }
 29 | nav ul{
 30 |     display: inline-block;
 31 | }
 32 | nav ul li{
 33 |     padding-top: 12px;
 34 |     text-transform: uppercase;
 35 | }
 36 | section{
 37 |     padding: 30px 100px 30px 100px;
 38 | }
 39 | p{
 40 |     text-align: justify;
 41 | }
 42 | cite{
 43 |     font-weight: 300;
 44 | }
 45 | i{
 46 |     font-size: 24px;
 47 | }
 48 | i:hover{
 49 |     color: #ffc900;
 50 | }
 51 | a{
 52 |     text-decoration: none;
 53 | }
 54 | a:any-link{
 55 |     color:white;
 56 | }
 57 | a:-webkit-any-link {
 58 |     color:white;
 59 | }
 60 | a:-moz-any-link {
 61 |     color:
 62 |     white;
 63 | }
 64 | a:hover{
 65 |     color: #ffc900;
 66 | }
 67 | ul{
 68 |     list-style: none;  
 69 | }
 70 | li{
 71 |     float: left;
 72 |     /*width: 30px;*/
 73 |     margin-right: 5px;
 74 | }
 75 | button{
 76 |     border-radius: 10px;
 77 | }
 78 | footer{
 79 |     height: 55px;
 80 |     padding-top: 10px;
 81 |     text-align: center;
 82 | }
 83 | footer ul{
 84 |     display: inline-block;
 85 | }
 86 | footer ul li{
 87 |     float:left;
 88 | }
 89 | /*CSS IDs y Clase*/
 90 | .hastag{
 91 |     color: #ffc900;
 92 | }
 93 | .seccion{
 94 |     padding: 10px 100px 10px 100px;
 95 | }
 96 | .logo{
 97 |     padding-top: 0px;
 98 | }
 99 | #redessociales{
100 |     margin-top: 20px;
101 | }
102 | #inicio{
103 |     background-image: url("../imagenes/inicio.png");
104 |     background-repeat: no-repeat;
105 |     background-size: cover;
106 |     min-height: 280px;
107 |     padding-top: 95px;
108 | }
109 | #experiencia{
110 |     background-color: white;
111 |     color: #222;
112 | }
113 | #experiencia h2,#portfolio h2{
114 |     text-align: center;
115 | }
116 | #experiencia h3,#portfolio h3{
117 |     text-align: center;
118 |     margin-bottom: 30px;
119 | }
120 | #portfolio{
121 |     border-top: 1px solid #ffc900;
122 | }
123 | .masinfo button{
124 |     background-color: #ffc900;
125 |     font-weight: 600;
126 |     padding-left: 15px;
127 |     padding-right: 15px;
128 |     margin-top: 5px;
129 |     padding: 5px;
130 | }
131 | #contactar{
132 |     background-image: url("../imagenes/fondo_contactar.png");
133 |     background-repeat: no-repeat;
134 |     background-position: right;
135 | }
136 | /*Grid sobremi*/
137 | #sobremi{
138 |     display: grid;
139 |     grid-template-columns: 250px 1fr;
140 | }
141 | #sobremi h2{
142 |     margin-bottom: 15px;
143 | }
144 | #sobremi .masinfo{
145 |     margin-top: 15px
146 | }
147 | #sobremi .masinfo button
148 | {
149 |     padding-top: 5px;
150 |     padding-bottom: 5px;
151 |     padding-left: 30px;
152 |     padding-right: 30px;
153 | }
154 | #contactar{
155 |     background-color: #ffc900;
156 |     color: #222;
157 | }
158 | /*Card portfolio*/
159 | .filaportfolio{
160 |     display: flex;
161 |     flex-direction: row;
162 |     flex-wrap: wrap;
163 |     justify-content: space-between;
164 |     gap: 30px 30px;
165 |     margin-bottom: 15px;
166 |     margin-top: 15px;
167 | }
168 | .card{
169 |     width: 250px;
170 |     background-color: #191919;
171 |     border-radius: 15px;
172 | }
173 | .card img,.card video,.card iframe{
174 |     border-radius: 15px 15px 0 0;
175 | }
176 | .card h3{
177 |     color: #ffc900;
178 | }
179 | .card h4{
180 |     margin:0 5px 5px 0;
181 | }
182 | .card h3,.card h4,.card p,.card .masinfo{
183 |     padding: 0 15px;
184 | }
185 | .card .masinfo {
186 |     margin: 15px 0px 15px 0 px;
187 |     height: 26px;
188 | }
189 | 
190 | .card .sep{
191 |     margin: 0 5px 5px 0;
192 |     border: 1px solid #ffc900;
193 | }
194 | .card .masinfo button{
195 |     float: right;
196 | }
197 | /*Card experiencia*/
198 | .gridexp{
199 |     display: grid;
200 |     grid-template-columns: repeat(4,350px);
201 |     grid-gap:10px;
202 |     justify-content: space-between;
203 |     align-content: space-around;
204 | }
205 | @media (min-width: 400px){
206 |     .gridexp{
207 |         display: flex;
208 |         flex-direction: row;
209 |         flex-wrap: wrap;
210 |         justify-content: space-between;
211 |         gap: 30px 30px;
212 |         margin-bottom: 15px;
213 |         margin-top: 15px;
214 |     }
215 | }
216 | 
217 | .cardexp{
218 |     background-color: #222;
219 |     border-radius: 15px;
220 |     color: white;
221 |     padding: 10px 15px;
222 | }
223 | .cardexp h2{
224 |     margin-bottom: 5px;
225 | }
226 | .cardexp h3{
227 |     margin-bottom: 20px;
228 | }
229 | .cardexp p{
230 |     margin-bottom: 20px;
231 | }
232 | .cardexp ul{
233 |     display: flex;
234 |     justify-content: flex-end;
235 | }
236 | .cardexp li{
237 |     height: 30px;
238 | }
239 | /*Formulario*/
240 | .itemform{
241 |     display: grid;
242 |     grid-template-columns: 150px 350px;
243 |     justify-content: center;
244 |     margin-bottom: 10px;
245 | }
246 | .itemform label{
247 |     font-weight: 700;
248 | }
249 | .itemform input,.itemform textarea{
250 |     border-radius: 5px;
251 |     border: 1px solid white;
252 | }
253 | input[type="submit"]{
254 |     background-color: #222;
255 |     border: 1px solid #222;
256 |     color: white;
257 |     padding: 10px;
258 |     grid-column: 2/3;
259 |     justify-self: end;
260 | }
261 | 
262 | 


--------------------------------------------------------------------------------
/soluciones/experiencia_18/extendido.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 |     <head>
  3 |         <meta charset="utf-8">
  4 |         <title>CV Extendido de Luís Martínez</title>
  5 |         <link rel="preconnect" href="https://fonts.googleapis.com">
  6 |         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  7 |         <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400&display=swap" rel="stylesheet">
  8 |         <script src="https://kit.fontawesome.com/f56f6708a5.js" crossorigin="anonymous"></script>
  9 |         <link rel="stylesheet" href="./css/estilos.css">
 10 |     </head>
 11 |     <body>
 12 |         <header>
 13 |         <!--Menu navegacion-->
 14 |             <nav>
 15 |                 <ul>
 16 |                     <li><a href="index.html">inicio</a></li>
 17 |                     <li class="logo"><img src="./imagenes/cascos.png" alt="logo de Luis"></li>
 18 |                     <li><a href="extendido.html">extendido</a></li>
 19 |                 </ul>
 20 |             </nav>
 21 |         </header>
 22 |         <article>
 23 |             <!--Bloque Datos personales-->
 24 |             <section id="datos">
 25 |                 <h1>CV Extendido</h1>
 26 |                 <h2>Datos personales</h2>
 27 |                 <div id="datoscontenedor">
 28 |                     <div class="datositem"><img src="../imagenes/about-img.png" alt="Foto Luís Martínez" height="250px"></div>
 29 |                     <div class="datositem">
 30 |                         <table>
 31 |                             <tbody>
 32 |                                 <tr>
 33 |                                     <td><i class="fa-solid fa-user"></i><strong>Edad</strong></td>
 34 |                                     <td>47</td>
 35 |                                     <td><i class="fa-solid fa-city"></i><strong>Ciudad residencia</strong></td>
 36 |                                     <td>Valencia</td>
 37 |                                 </tr>
 38 |                                 <tr>
 39 |                                     <td><i class="fa-solid fa-graduation-cap"></i><strong>Estudios</strong></td>
 40 |                                     <td>Superiores</td>
 41 |                                     <td><i class="fa-solid fa-building-columns"></i><strong>Especialidad</strong></td>
 42 |                                     <td>Telecomunicaciones</td>
 43 |                                 </tr>
 44 |                                 <tr>
 45 |                                     <td><i class="fa-solid fa-hat-chef"></i><strong>Aficion</strong></td>
 46 |                                     <td>Cocina</td>
 47 |                                     <td><i class="fa-solid fa-baseball"></i><strong>Desporte</strong></td>
 48 |                                     <td>Baloncesto</td>
 49 |                                 </tr>
 50 |                             </tbody>
 51 |                         </table>
 52 |                     </div>
 53 |                 </div>
 54 |             </section>
 55 |             <!--FIN Bloque Datos personales-->
 56 |             <!--Bloque Experiencia-->
 57 |             <section id="experiencia">
 58 |                 <h2>Experiencia</h2>
 59 |                 <div>
 60 |                     <h3>Producción BSO corto animación</h3>
 61 |                     <ul>
 62 |                         <li><i class="fa-brands fa-soundcloud"></i></li>
 63 |                         <li><i class="fa-solid fa-microphone"></i></li>
 64 |                         <li><i class="fa-solid fa-podcast"></i></li>
 65 |                     </ul>
 66 |                     <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum tempora omnis voluptatem nemo fugiat quibusdam provident unde a ut, facere necessitatibus praesentium vel perspiciatis eum dicta dolorum voluptas tempore atque.</p>
 67 |                 </div>
 68 |             </section>
 69 |             <!--FIN Bloque Experiencia-->
 70 |             <!--Bloque Educación-->
 71 |             <section id="educacion">
 72 |                 <h2>Educacion</h2>
 73 |                 <div class="gridedu">
 74 |                     <div class="cardedu">
 75 |                         <img src="./imagenes/university.jpg" alt="Universidad">
 76 |                         <h3>2002 - Ingeniero de sonido por la <a href="http://www.upv.es/"><span class="enlace">UPV</span></a></h3>
 77 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 78 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 79 |                     </div>
 80 |                     <div class="cardedu">
 81 |                         <img src="./imagenes/university.jpg" alt="Universidad">
 82 |                         <h3>2002 - Ingeniero de sonido por la <a href="http://www.upv.es/"><span class="enlace">UPV</span></a></h3>
 83 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 84 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 85 |                     </div>
 86 |                     <div class="cardedu">
 87 |                         <img src="./imagenes/university.jpg" alt="Universidad">
 88 |                         <h3>2002 - Ingeniero de sonido por la <a href="http://www.upv.es/"><span class="enlace">UPV</span></a></h3>
 89 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 90 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 91 |                     </div>
 92 |                     <div class="cardedu">
 93 |                         <img src="./imagenes/university.jpg" alt="Universidad">
 94 |                         <h3>2002 - Ingeniero de sonido por la <a href="http://www.upv.es/"><span class="enlace">UPV</span></a></h3>
 95 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 96 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 97 |                     </div>
 98 |                     <div class="cardedu">
 99 |                         <img src="./imagenes/university.jpg" alt="Universidad">
100 |                         <h3>2002 - Ingeniero de sonido por la <a href="http://www.upv.es/"><span class="enlace">UPV</span></a></h3>
101 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
102 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
103 |                     </div>
104 |                     <div class="cardedu">
105 |                         <img src="./imagenes/university.jpg" alt="Universidad">
106 |                         <h3>2002 - Ingeniero de sonido por la <a href="http://www.upv.es/"><span class="enlace">UPV</span></a></h3>
107 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
108 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
109 |                     </div>
110 |                 </div>
111 |             </section>
112 |             <!--FIN Bloque Educación-->
113 |         </article>
114 |         <footer>
115 | 
116 |         </footer>
117 |     </body>
118 | </html>


--------------------------------------------------------------------------------
/soluciones/experiencia_18/imagenes/about-img.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_18/imagenes/about-img.png


--------------------------------------------------------------------------------
/soluciones/experiencia_18/imagenes/about-img_250.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_18/imagenes/about-img_250.png


--------------------------------------------------------------------------------
/soluciones/experiencia_18/imagenes/cascos.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_18/imagenes/cascos.png


--------------------------------------------------------------------------------
/soluciones/experiencia_18/imagenes/fondo_contactar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_18/imagenes/fondo_contactar.png


--------------------------------------------------------------------------------
/soluciones/experiencia_18/imagenes/imagen_portfolio.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_18/imagenes/imagen_portfolio.png


--------------------------------------------------------------------------------
/soluciones/experiencia_18/imagenes/inicio.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_18/imagenes/inicio.png


--------------------------------------------------------------------------------
/soluciones/experiencia_18/imagenes/sergey-zigle-rQ4_6TSliRg-unsplash.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_18/imagenes/sergey-zigle-rQ4_6TSliRg-unsplash.jpg


--------------------------------------------------------------------------------
/soluciones/experiencia_18/imagenes/tecno_au.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_18/imagenes/tecno_au.png


--------------------------------------------------------------------------------
/soluciones/experiencia_18/imagenes/tecno_cu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_18/imagenes/tecno_cu.png


--------------------------------------------------------------------------------
/soluciones/experiencia_18/imagenes/tecno_html.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_18/imagenes/tecno_html.png


--------------------------------------------------------------------------------
/soluciones/experiencia_18/imagenes/university.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_18/imagenes/university.jpg


--------------------------------------------------------------------------------
/soluciones/experiencia_18/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 |     <head>
  4 |         <meta charset="utf-8">
  5 |         <title>Portfolio de Luís Martínez</title>
  6 |         <link rel="preconnect" href="https://fonts.googleapis.com">
  7 |         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  8 |         <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300&display=swap" rel="stylesheet">
  9 |         <script src="https://kit.fontawesome.com/f56f6708a5.js" crossorigin="anonymous"></script>
 10 |         <link rel="stylesheet" href="./css/estilos_portfolio.css">
 11 |     </head>
 12 |     <body>
 13 |         <!--Menu navegacion-->
 14 |         <nav>
 15 |             <ul>
 16 |                 <li><a href="#sobremi">sobre mi</a></li>
 17 |                 <li><a href="#portfolio">portfolio</a></li>
 18 |                 <li class="logo"><img src="./imagenes/cascos.png" alt="logo de Luis"></li>
 19 |                 <li><a href="#experiencia">skills</a></li>
 20 |                 <li><a href="#contactar">contactar</a></li>
 21 |             </ul>
 22 |         </nav>
 23 |         <article>
 24 |             <!--Bloque de inicio-->
 25 |             <section id="inicio">
 26 |                 <h2>Luís Martínez</h2>
 27 |                 <h3 class="hastag">#programador</h3>
 28 |                 <h3 class="hastag">#músico</h3>
 29 |                 <ul id="redessociales">
 30 |                     <li><a href="https://open.spotify.com/" target="_blank"><i class="fa-brands fa-spotify"></i></a></li>
 31 |                     <li><a href="https://twitter.com/" target="_blank"><i class="fa-brands fa-twitter"></i></a></li>
 32 |                     <li><a href="https://www.linkedin.com/" target="_blank"><i class="fa-brands fa-linkedin"></i></a></li>
 33 |                     <li><a href="https://www.instagram.com/" target="_blank"><i class="fa-brands fa-square-instagram"></i></a></li>
 34 |                 </ul>
 35 |             </section>
 36 |             <!--FIN Bloque de inicio-->
 37 |             <!--Bloque de sobre mi-->
 38 |             <section id="sobremi">
 39 |                 <div id="imgsobremi"><img src="./imagenes/about-img_250.png" alt="Foto Luís Martínez" height="250px"></div>
 40 |                 <div id="bodysobremi">
 41 |                     <h2>Sobre mí</h2>
 42 |                     <p>Soy <strong>Luís Martinez</strong> músico de carrera y apasionado de <span>tecnología y la programación</span>. Música y emprendimiento forman parte de la cotidianidad del músico freelance, es un mundo en el que me ha llevado a lo largo de mi carrera a conocer muchos grandes profesionales y maravillosos escenarios. Durante ese periplo se cruzó en mi vida el diseño y desarrollo web, donde se abren nuevas oportunidades de crecimiento combinadas al sector de la prodcución audiovisual.</p>
 43 |                     <p>Me defino como una persona creativa y enamorado de lo que hago, donde mi máxima es <cite>"el mundo es un aula maravillosa de aprendizaje continuo"</cite>.</p>
 44 |                     <div class="masinfo"><button type="button">MAS INFO</button></div>
 45 |                 </div>
 46 |             </section>
 47 |             <!--FIN Bloque de sobre mi-->
 48 |             <!--Bloque Portfolio-->
 49 |             <section id="portfolio">
 50 |                 <h2>Portfolio</h2>
 51 |                 <h3>Una mirada mas allá del texto</h3>
 52 |                 <div class="filaportfolio">
 53 |                     <div class="card">
 54 |                         <video controls width="250">
 55 |                             <source src="./media/intro_mastermindv2.webm" type="video/webm">
 56 |                             <source src="./media/intro_mastermindv2.mp4" type="video/mp4">
 57 |                         </video>
 58 |                         <h3>musica</h3>
 59 |                         <h4>concierto benicassim</h4>
 60 |                         <div class="sep"></div>
 61 |                         <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
 62 |                         <div class="masinfo"><button type="button">MAS INFO</button></div>
 63 |                     </div>
 64 |                     <div class="card">
 65 |                         <iframe width="250" src="https://www.youtube.com/embed/cGvXAAw3Ikk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 66 |                         <h3>musica</h3>
 67 |                         <h4>concierto benicassim</h4>
 68 |                         <div class="sep"></div>
 69 |                         <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
 70 |                         <div class="masinfo"><button type="button">MAS INFO</button></div>
 71 |                     </div>
 72 |                     <div class="card">
 73 |                         <img src="./imagenes/imagen_portfolio.png" alt="Portfolio 3">
 74 |                         <h3>musica</h3>
 75 |                         <h4>concierto benicassim</h4>
 76 |                         <div class="sep"></div>
 77 |                         <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
 78 |                         <div class="masinfo"><button type="button">MAS INFO</button></div>
 79 |                     </div>
 80 |                     <div class="card">
 81 |                         <img src="./imagenes/imagen_portfolio.png" alt="Portfolio 4">
 82 |                         <h3>musica</h3>
 83 |                         <h4>concierto benicassim</h4>
 84 |                         <div class="sep"></div>
 85 |                         <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
 86 |                         <div class="masinfo"><button type="button">MAS INFO</button></div>
 87 |                     </div>
 88 |                 </div>
 89 |             </section>
 90 |             <!--FIN Bloque Portfolio-->
 91 |             <!--Bloque Experiencia-->
 92 |             <section id="experiencia">
 93 |                 <h2>Experiencia & Skills</h2>
 94 |                 <h3>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
 95 |                 <div class="gridexp">
 96 |                     <div class="cardexp">
 97 |                         <h2>Diseño web</h2>
 98 |                         <h3 class="textoizquierda">2018-2020</h3>
 99 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
100 |                         <ul>
101 |                             <li><img src="./imagenes/tecno_au.png" alt="" height="30px"></li>
102 |                             <li><img src="./imagenes/tecno_cu.png" alt="" height="30px"></li>
103 |                             <li><img src="./imagenes/tecno_html.png" alt="" height="30px"></li>
104 |                         </ul>
105 |                     </div>
106 |                     <div class="cardexp">
107 |                         <h2>Diseño web</h2>
108 |                         <h3 class="textoizquierda">2018-2020</h3>
109 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
110 |                         <ul>
111 |                             <li><img src="./imagenes/tecno_au.png" alt="" height="30px"></li>
112 |                             <li><img src="./imagenes/tecno_cu.png" alt="" height="30px"></li>
113 |                             <li><img src="./imagenes/tecno_html.png" alt="" height="30px"></li>
114 |                         </ul>
115 |                     </div>
116 |                     <div class="cardexp">
117 |                         <h2>Diseño web</h2>
118 |                         <h3 class="textoizquierda">2018-2020</h3>
119 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
120 |                         <ul>
121 |                             <li><img src="./imagenes/tecno_au.png" alt="" height="30px"></li>
122 |                             <li><img src="./imagenes/tecno_cu.png" alt="" height="30px"></li>
123 |                             <li><img src="./imagenes/tecno_html.png" alt="" height="30px"></li>
124 |                         </ul>
125 |                     </div>
126 |                     <div class="cardexp">
127 |                         <h2>Diseño web</h2>
128 |                         <h3 class="textoizquierda">2018-2020</h3>
129 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
130 |                         <ul>
131 |                             <li><img src="./imagenes/tecno_au.png" alt="" height="30px"></li>
132 |                             <li><img src="./imagenes/tecno_cu.png" alt="" height="30px"></li>
133 |                             <li><img src="./imagenes/tecno_html.png" alt="" height="30px"></li>
134 |                         </ul>
135 |                     </div>
136 |                     <div class="cardexp">
137 |                         <h2>Diseño web</h2>
138 |                         <h3 class="textoizquierda">2018-2020</h3>
139 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
140 |                         <ul>
141 |                             <li><img src="./imagenes/tecno_au.png" alt="" height="30px"></li>
142 |                             <li><img src="./imagenes/tecno_cu.png" alt="" height="30px"></li>
143 |                             <li><img src="./imagenes/tecno_html.png" alt="" height="30px"></li>
144 |                         </ul>
145 |                     </div>
146 |                     <div class="cardexp">
147 |                         <h2>Diseño web</h2>
148 |                         <h3 class="textoizquierda">2018-2020</h3>
149 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
150 |                         <ul>
151 |                             <li><img src="./imagenes/tecno_au.png" alt="" height="30px"></li>
152 |                             <li><img src="./imagenes/tecno_cu.png" alt="" height="30px"></li>
153 |                             <li><img src="./imagenes/tecno_html.png" alt="" height="30px"></li>
154 |                         </ul>
155 |                     </div>
156 |                 </div>
157 |             </section>
158 |             <!--FIN Bloque Experiencia-->
159 |             <!--Bloque Contactar-->
160 |             <section id="contactar">
161 |                 <h2>Contacto</h2>
162 |                 <h3>Envíame tus dudas</h3>
163 |                 <form action="#">
164 |                     <div class="itemform">
165 |                         <label for="nombre">Nombre</label>
166 |                         <input type="text" id="nombre" name="nombre" minlength="2" maxlength="64" size="32" required>
167 |                     </div>
168 |                     <div class="itemform">
169 |                         <label for="empresa">Empresa</label>
170 |                         <input type="text" id="empresa" name="empresa" minlength="2" maxlength="128" size="32">
171 |                     </div>
172 |                     <div class="itemform">
173 |                         <label for="email">Email</label>
174 |                         <input type="email" id="email" name="email" minlength="10" maxlength="128" size="32" required>
175 |                     </div>
176 |                     <div class="itemform">
177 |                         <label for="mensaje">Mensaje</label>
178 |                         <textarea name="mensaje" id="mensaje" cols="33" rows="5"></textarea>
179 |                     </div>
180 |                     <div class="itemform">
181 |                         <input type="submit" name="boton" value="CONTACTAR">
182 |                     </div>
183 |                 </form>
184 |             </section>
185 |             <!--FIN Bloque Contactar-->
186 |         </article>
187 |         <!-- Footer -->
188 |         <footer>
189 |             <ul>
190 |                 <li class="logo"><a href="#inicio"><img src="./imagenes/cascos.png" alt=""></a></li>
191 |                 <li>Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
192 |             </ul>
193 |         </footer>
194 |     </body>
195 | </html>


--------------------------------------------------------------------------------
/soluciones/experiencia_19/css/estilos.css:
--------------------------------------------------------------------------------
  1 | *{
  2 |     margin:0px;
  3 |     padding: 0px;
  4 | }
  5 | /*Definiciones de selectores*/
  6 | body{
  7 |     background-color: white;
  8 |     color: #222;
  9 |     font: 200 14px 'Poppins', sans-serif
 10 | }
 11 | h1{
 12 |     font-size: 42px;
 13 |     font-weight: 400;
 14 | }
 15 | h2{
 16 |     font-size: 36px;
 17 |     font-weight: 300;
 18 | }
 19 | h3 {
 20 |     color:#ffc900;
 21 |     font-weight: 200;
 22 | }
 23 | p{
 24 |     text-align: justify;
 25 | }
 26 | thead{
 27 |     background-color: #222;
 28 |     color: white;
 29 | }
 30 | td{
 31 |     min-width: 150px;
 32 | }
 33 | li{
 34 |     list-style: none;
 35 |     float:left;
 36 | }
 37 | i{
 38 |     margin-right: 5px;
 39 | }
 40 | a{
 41 |     text-decoration: none;
 42 | }
 43 | nav{
 44 |     position:fixed;
 45 |     width: 100%;
 46 |     height: 55px;
 47 |     background-color: #222;
 48 |     border-bottom: 1px solid white;
 49 |     padding-top: 10px;
 50 |     text-align: center;
 51 | }
 52 | nav ul{
 53 |     display: inline-block;
 54 | }
 55 | nav ul li{
 56 |     padding-top: 12px;
 57 |     text-transform: uppercase;
 58 | }
 59 | 
 60 | a:any-link{
 61 |     color:white;
 62 | }
 63 | a:-webkit-any-link {
 64 |     color:white;
 65 | }
 66 | a:-moz-any-link {
 67 |     color:white;
 68 | }
 69 | a:hover{
 70 |     color: #ffc900;
 71 | }
 72 | section{
 73 |     padding: 10px 100px 10px 100px;
 74 | }
 75 | ul{
 76 |     list-style: none;  
 77 | }
 78 | li{
 79 |     float: left;
 80 |     /*width: 30px;*/
 81 |     margin-right: 5px;
 82 | }
 83 | /*Definiciones de clases y ids*/
 84 | #datos{
 85 |     padding-top: 65px;
 86 | }
 87 | #datoscontenedor{
 88 |     display: flex;
 89 |     column-gap: 10px;
 90 | }
 91 | #educacion{
 92 |     background-color: #222;
 93 |     color: white;
 94 | }
 95 | #experiencia{
 96 |     border-top: 1px solid #ffc900;
 97 |     background-color: #222;
 98 |     color:
 99 |      white;
100 | }
101 | #comentario{
102 |     background-color: #ffc900;
103 |     color: #222;
104 | }
105 | .enlace:hover{
106 |     color: #ffc900;
107 | }
108 | .logo{
109 |     padding-top: 0px;
110 | }
111 | /*Card experiencia*/
112 | .gridedu{
113 |     display: grid;
114 |     grid-template-columns: repeat(4,350px);
115 |     grid-gap:10px;
116 |     justify-content: space-between;
117 |     align-content: space-around;
118 | }
119 | .cardedu img{
120 |     border-radius: 15px 15px 0 0;
121 |     margin-bottom: 15px;
122 | }
123 | .cardedu{
124 |     background-color: #333;
125 |     border-radius: 15px;
126 |     color: white;
127 |     padding: 10px 15px;
128 | }
129 | .cardedu h3{
130 |     margin-bottom: 20px;
131 |     border-top: 1px solid #ffc900;
132 | }
133 | .cardedu p{
134 |     margin-bottom: 20px;
135 | }
136 | /*Formulario*/
137 | .itemform{
138 |     display: grid;
139 |     grid-template-columns: 150px 350px;
140 |     justify-content: center;
141 |     margin-bottom: 10px;
142 | }
143 | .itemform label{
144 |     font-weight: 700;
145 | }
146 | .itemform input,.itemform textarea,.itemform select{
147 |     border-radius: 5px;
148 |     border: 1px solid white;
149 | }
150 | input[type="submit"]{
151 |     background-color: #222;
152 |     border: 1px solid #222;
153 |     color: white;
154 |     padding: 10px;
155 |     grid-column: 2/3;
156 |     justify-self: end;
157 | }


--------------------------------------------------------------------------------
/soluciones/experiencia_19/css/estilos_portfolio.css:
--------------------------------------------------------------------------------
  1 | /*CSS general de elementos*/
  2 | *{
  3 |     margin:0px;
  4 |     padding:0px;
  5 | }
  6 | body{
  7 |     background-color: #222;
  8 |     color: white;
  9 |     font: 200 14px 'Poppins', sans-serif;
 10 | }
 11 | h2{
 12 |     font-size: 36px;
 13 |     line-height: 36px;
 14 | }
 15 | h3{
 16 |     color: #999;
 17 |     font-size: 18px;
 18 |     font-weight: 300;
 19 | }
 20 | nav{
 21 |     position:fixed;
 22 |     width: 100%;
 23 |     height: 55px;
 24 |     background-color: #222;
 25 |     border-bottom: 1px solid white;
 26 |     padding-top: 10px;
 27 |     text-align: center;
 28 | }
 29 | nav ul{
 30 |     display: inline-block;
 31 | }
 32 | nav ul li{
 33 |     padding-top: 12px;
 34 |     text-transform: uppercase;
 35 | }
 36 | section{
 37 |     padding: 30px 100px 30px 100px;
 38 | }
 39 | p{
 40 |     text-align: justify;
 41 | }
 42 | cite{
 43 |     font-weight: 300;
 44 | }
 45 | i{
 46 |     font-size: 24px;
 47 | }
 48 | i:hover{
 49 |     color: #ffc900;
 50 | }
 51 | a{
 52 |     text-decoration: none;
 53 | }
 54 | a:any-link{
 55 |     color:white;
 56 | }
 57 | a:-webkit-any-link {
 58 |     color:white;
 59 | }
 60 | a:-moz-any-link {
 61 |     color:
 62 |     white;
 63 | }
 64 | a:hover{
 65 |     color: #ffc900;
 66 | }
 67 | ul{
 68 |     list-style: none;  
 69 | }
 70 | li{
 71 |     float: left;
 72 |     /*width: 30px;*/
 73 |     margin-right: 5px;
 74 | }
 75 | button{
 76 |     border-radius: 10px;
 77 | }
 78 | footer{
 79 |     height: 55px;
 80 |     padding-top: 10px;
 81 |     text-align: center;
 82 | }
 83 | footer ul{
 84 |     display: inline-block;
 85 | }
 86 | footer ul li{
 87 |     float:left;
 88 | }
 89 | /*CSS IDs y Clase*/
 90 | .hastag{
 91 |     color: #ffc900;
 92 | }
 93 | .seccion{
 94 |     padding: 10px 100px 10px 100px;
 95 | }
 96 | .logo{
 97 |     padding-top: 0px;
 98 | }
 99 | #redessociales{
100 |     margin-top: 20px;
101 | }
102 | #inicio{
103 |     background-image: url("../imagenes/inicio.png");
104 |     background-repeat: no-repeat;
105 |     background-size: cover;
106 |     min-height: 280px;
107 |     padding-top: 95px;
108 | }
109 | #experiencia{
110 |     background-color: white;
111 |     color: #222;
112 | }
113 | #experiencia h2,#portfolio h2{
114 |     text-align: center;
115 | }
116 | #experiencia h3,#portfolio h3{
117 |     text-align: center;
118 |     margin-bottom: 30px;
119 | }
120 | #portfolio{
121 |     border-top: 1px solid #ffc900;
122 | }
123 | .masinfo button{
124 |     background-color: #ffc900;
125 |     font-weight: 600;
126 |     padding-left: 15px;
127 |     padding-right: 15px;
128 |     margin-top: 5px;
129 |     padding: 5px;
130 | }
131 | #contactar{
132 |     background-image: url("../imagenes/fondo_contactar.png");
133 |     background-repeat: no-repeat;
134 |     background-position: right;
135 | }
136 | /*Grid sobremi*/
137 | #sobremi{
138 |     display: grid;
139 |     grid-template-columns: 250px 1fr;
140 | }
141 | #sobremi h2{
142 |     margin-bottom: 15px;
143 | }
144 | #sobremi .masinfo{
145 |     margin-top: 15px
146 | }
147 | #sobremi .masinfo button
148 | {
149 |     padding-top: 5px;
150 |     padding-bottom: 5px;
151 |     padding-left: 30px;
152 |     padding-right: 30px;
153 | }
154 | #contactar{
155 |     background-color: #ffc900;
156 |     color: #222;
157 | }
158 | /*Card portfolio*/
159 | .filaportfolio{
160 |     display: flex;
161 |     flex-direction: row;
162 |     flex-wrap: wrap;
163 |     justify-content: space-between;
164 |     gap: 30px 30px;
165 |     margin-bottom: 15px;
166 |     margin-top: 15px;
167 | }
168 | .card{
169 |     width: 250px;
170 |     background-color: #191919;
171 |     border-radius: 15px;
172 | }
173 | .card img,.card video,.card iframe{
174 |     border-radius: 15px 15px 0 0;
175 | }
176 | .card h3{
177 |     color: #ffc900;
178 | }
179 | .card h4{
180 |     margin:0 5px 5px 0;
181 | }
182 | .card h3,.card h4,.card p,.card .masinfo{
183 |     padding: 0 15px;
184 | }
185 | .card .masinfo {
186 |     margin: 15px 0px 15px 0 px;
187 |     height: 26px;
188 | }
189 | 
190 | .card .sep{
191 |     margin: 0 5px 5px 0;
192 |     border: 1px solid #ffc900;
193 | }
194 | .card .masinfo button{
195 |     float: right;
196 | }
197 | /*Card experiencia*/
198 | .gridexp{
199 |     display: grid;
200 |     grid-template-columns: repeat(4,350px);
201 |     grid-gap:10px;
202 |     justify-content: space-between;
203 |     align-content: space-around;
204 | }
205 | @media (min-width: 400px){
206 |     .gridexp{
207 |         display: flex;
208 |         flex-direction: row;
209 |         flex-wrap: wrap;
210 |         justify-content: space-between;
211 |         gap: 30px 30px;
212 |         margin-bottom: 15px;
213 |         margin-top: 15px;
214 |     }
215 | }
216 | 
217 | .cardexp{
218 |     background-color: #222;
219 |     border-radius: 15px;
220 |     color: white;
221 |     padding: 10px 15px;
222 | }
223 | .cardexp h2{
224 |     margin-bottom: 5px;
225 | }
226 | .cardexp h3{
227 |     margin-bottom: 20px;
228 | }
229 | .cardexp p{
230 |     margin-bottom: 20px;
231 | }
232 | .cardexp ul{
233 |     display: flex;
234 |     justify-content: flex-end;
235 | }
236 | .cardexp li{
237 |     height: 30px;
238 | }
239 | /*Formulario*/
240 | .itemform{
241 |     display: grid;
242 |     grid-template-columns: 150px 350px;
243 |     justify-content: center;
244 |     margin-bottom: 10px;
245 | }
246 | .itemform label{
247 |     font-weight: 700;
248 | }
249 | .itemform input,.itemform textarea{
250 |     border-radius: 5px;
251 |     border: 1px solid white;
252 | }
253 | input[type="submit"]{
254 |     background-color: #222;
255 |     border: 1px solid #222;
256 |     color: white;
257 |     padding: 10px;
258 |     grid-column: 2/3;
259 |     justify-self: end;
260 | }
261 | 
262 | 


--------------------------------------------------------------------------------
/soluciones/experiencia_19/extendido.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 |     <head>
  3 |         <meta charset="utf-8">
  4 |         <title>CV Extendido de Luís Martínez</title>
  5 |         <link rel="preconnect" href="https://fonts.googleapis.com">
  6 |         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  7 |         <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400&display=swap" rel="stylesheet">
  8 |         <script src="https://kit.fontawesome.com/f56f6708a5.js" crossorigin="anonymous"></script>
  9 |         <link rel="stylesheet" href="./css/estilos.css">
 10 |     </head>
 11 |     <body>
 12 |         <header>
 13 |         <!--Menu navegacion-->
 14 |             <nav>
 15 |                 <ul>
 16 |                     <li><a href="index.html">inicio</a></li>
 17 |                     <li class="logo"><img src="./imagenes/cascos.png" alt="logo de Luis"></li>
 18 |                     <li><a href="extendido.html">extendido</a></li>
 19 |                 </ul>
 20 |             </nav>
 21 |         </header>
 22 |         <article>
 23 |             <!--Bloque Datos personales-->
 24 |             <section id="datos">
 25 |                 <h1>CV Extendido</h1>
 26 |                 <h2>Datos personales</h2>
 27 |                 <div id="datoscontenedor">
 28 |                     <div class="datositem"><img src="../imagenes/about-img.png" alt="Foto Luís Martínez" height="250px"></div>
 29 |                     <div class="datositem">
 30 |                         <table>
 31 |                             <tbody>
 32 |                                 <tr>
 33 |                                     <td><i class="fa-solid fa-user"></i><strong>Edad</strong></td>
 34 |                                     <td>47</td>
 35 |                                     <td><i class="fa-solid fa-city"></i><strong>Ciudad residencia</strong></td>
 36 |                                     <td>Valencia</td>
 37 |                                 </tr>
 38 |                                 <tr>
 39 |                                     <td><i class="fa-solid fa-graduation-cap"></i><strong>Estudios</strong></td>
 40 |                                     <td>Superiores</td>
 41 |                                     <td><i class="fa-solid fa-building-columns"></i><strong>Especialidad</strong></td>
 42 |                                     <td>Telecomunicaciones</td>
 43 |                                 </tr>
 44 |                                 <tr>
 45 |                                     <td><i class="fa-solid fa-hat-chef"></i><strong>Aficion</strong></td>
 46 |                                     <td>Cocina</td>
 47 |                                     <td><i class="fa-solid fa-baseball"></i><strong>Desporte</strong></td>
 48 |                                     <td>Baloncesto</td>
 49 |                                 </tr>
 50 |                             </tbody>
 51 |                         </table>
 52 |                     </div>
 53 |                 </div>
 54 |             </section>
 55 |             <!--FIN Bloque Datos personales-->
 56 |             <!--Bloque Experiencia-->
 57 |             <section id="experiencia">
 58 |                 <h2>Experiencia</h2>
 59 |                 <div>
 60 |                     <h3>Producción BSO corto animación</h3>
 61 |                     <ul>
 62 |                         <li><i class="fa-brands fa-soundcloud"></i></li>
 63 |                         <li><i class="fa-solid fa-microphone"></i></li>
 64 |                         <li><i class="fa-solid fa-podcast"></i></li>
 65 |                     </ul>
 66 |                     <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum tempora omnis voluptatem nemo fugiat quibusdam provident unde a ut, facere necessitatibus praesentium vel perspiciatis eum dicta dolorum voluptas tempore atque.</p>
 67 |                 </div>
 68 |             </section>
 69 |             <!--FIN Bloque Experiencia-->
 70 |             <!--Bloque Educación-->
 71 |             <section id="educacion">
 72 |                 <h2>Educacion</h2>
 73 |                 <div class="gridedu">
 74 |                     <div class="cardedu">
 75 |                         <img src="./imagenes/university.jpg" alt="Universidad">
 76 |                         <h3>2002 - Ingeniero de sonido por la <a href="http://www.upv.es/"><span class="enlace">UPV</span></a></h3>
 77 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 78 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 79 |                     </div>
 80 |                     <div class="cardedu">
 81 |                         <img src="./imagenes/university.jpg" alt="Universidad">
 82 |                         <h3>2002 - Ingeniero de sonido por la <a href="http://www.upv.es/"><span class="enlace">UPV</span></a></h3>
 83 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 84 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 85 |                     </div>
 86 |                     <div class="cardedu">
 87 |                         <img src="./imagenes/university.jpg" alt="Universidad">
 88 |                         <h3>2002 - Ingeniero de sonido por la <a href="http://www.upv.es/"><span class="enlace">UPV</span></a></h3>
 89 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 90 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 91 |                     </div>
 92 |                     <div class="cardedu">
 93 |                         <img src="./imagenes/university.jpg" alt="Universidad">
 94 |                         <h3>2002 - Ingeniero de sonido por la <a href="http://www.upv.es/"><span class="enlace">UPV</span></a></h3>
 95 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 96 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 97 |                     </div>
 98 |                     <div class="cardedu">
 99 |                         <img src="./imagenes/university.jpg" alt="Universidad">
100 |                         <h3>2002 - Ingeniero de sonido por la <a href="http://www.upv.es/"><span class="enlace">UPV</span></a></h3>
101 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
102 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
103 |                     </div>
104 |                     <div class="cardedu">
105 |                         <img src="./imagenes/university.jpg" alt="Universidad">
106 |                         <h3>2002 - Ingeniero de sonido por la <a href="http://www.upv.es/"><span class="enlace">UPV</span></a></h3>
107 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
108 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
109 |                     </div>
110 |                 </div>
111 |             </section>
112 |             <!--Bloque Experiencia-->
113 |             <section id="comentario">
114 |                 <h2>Enviar comentario</h2>
115 |                 <form action="#">
116 |                     <div class="itemform">
117 |                         <label for="nombre">Nombre</label>
118 |                         <input type="text" id="nombre" name="nombre" minlength="2" maxlength="64" size="32" required>
119 |                     </div>
120 |                     <div class="itemform">
121 |                         <label for="prioridad">Prioridad</label>
122 |                         <select name="prioridades" id="prioridades">
123 |                             <option value="alta">Alta</option>
124 |                             <option value="media">Media</option>
125 |                             <option value="baja">Baja</option>
126 |                           </select>
127 |                     </div>
128 |                     <div class="itemform">
129 |                         <label for="mensaje">Mensaje</label>
130 |                         <textarea name="mensaje" id="mensaje" cols="33" rows="5"></textarea>
131 |                     </div>
132 |                     <div class="itemform">
133 |                         <input type="submit" name="boton" value="ENVIAR">
134 |                     </div>
135 |                 </form>
136 |             </section>
137 |             <!--FIN Bloque Educación-->
138 |         </article>
139 |         <footer>
140 | 
141 |         </footer>
142 |     </body>
143 | </html>


--------------------------------------------------------------------------------
/soluciones/experiencia_19/imagenes/about-img.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_19/imagenes/about-img.png


--------------------------------------------------------------------------------
/soluciones/experiencia_19/imagenes/about-img_250.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_19/imagenes/about-img_250.png


--------------------------------------------------------------------------------
/soluciones/experiencia_19/imagenes/cascos.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_19/imagenes/cascos.png


--------------------------------------------------------------------------------
/soluciones/experiencia_19/imagenes/fondo_contactar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_19/imagenes/fondo_contactar.png


--------------------------------------------------------------------------------
/soluciones/experiencia_19/imagenes/imagen_portfolio.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_19/imagenes/imagen_portfolio.png


--------------------------------------------------------------------------------
/soluciones/experiencia_19/imagenes/inicio.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_19/imagenes/inicio.png


--------------------------------------------------------------------------------
/soluciones/experiencia_19/imagenes/sergey-zigle-rQ4_6TSliRg-unsplash.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_19/imagenes/sergey-zigle-rQ4_6TSliRg-unsplash.jpg


--------------------------------------------------------------------------------
/soluciones/experiencia_19/imagenes/tecno_au.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_19/imagenes/tecno_au.png


--------------------------------------------------------------------------------
/soluciones/experiencia_19/imagenes/tecno_cu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_19/imagenes/tecno_cu.png


--------------------------------------------------------------------------------
/soluciones/experiencia_19/imagenes/tecno_html.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_19/imagenes/tecno_html.png


--------------------------------------------------------------------------------
/soluciones/experiencia_19/imagenes/university.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_19/imagenes/university.jpg


--------------------------------------------------------------------------------
/soluciones/experiencia_19/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 |     <head>
  4 |         <meta charset="utf-8">
  5 |         <title>Portfolio de Luís Martínez</title>
  6 |         <link rel="preconnect" href="https://fonts.googleapis.com">
  7 |         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  8 |         <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300&display=swap" rel="stylesheet">
  9 |         <script src="https://kit.fontawesome.com/f56f6708a5.js" crossorigin="anonymous"></script>
 10 |         <link rel="stylesheet" href="./css/estilos_portfolio.css">
 11 |     </head>
 12 |     <body>
 13 |         <!--Menu navegacion-->
 14 |         <nav>
 15 |             <ul>
 16 |                 <li><a href="#sobremi">sobre mi</a></li>
 17 |                 <li><a href="#portfolio">portfolio</a></li>
 18 |                 <li class="logo"><img src="./imagenes/cascos.png" alt="logo de Luis"></li>
 19 |                 <li><a href="#experiencia">skills</a></li>
 20 |                 <li><a href="#contactar">contactar</a></li>
 21 |             </ul>
 22 |         </nav>
 23 |         <article>
 24 |             <!--Bloque de inicio-->
 25 |             <section id="inicio">
 26 |                 <h2>Luís Martínez</h2>
 27 |                 <h3 class="hastag">#programador</h3>
 28 |                 <h3 class="hastag">#músico</h3>
 29 |                 <ul id="redessociales">
 30 |                     <li><a href="https://open.spotify.com/" target="_blank"><i class="fa-brands fa-spotify"></i></a></li>
 31 |                     <li><a href="https://twitter.com/" target="_blank"><i class="fa-brands fa-twitter"></i></a></li>
 32 |                     <li><a href="https://www.linkedin.com/" target="_blank"><i class="fa-brands fa-linkedin"></i></a></li>
 33 |                     <li><a href="https://www.instagram.com/" target="_blank"><i class="fa-brands fa-square-instagram"></i></a></li>
 34 |                 </ul>
 35 |             </section>
 36 |             <!--FIN Bloque de inicio-->
 37 |             <!--Bloque de sobre mi-->
 38 |             <section id="sobremi">
 39 |                 <div id="imgsobremi"><img src="./imagenes/about-img_250.png" alt="Foto Luís Martínez" height="250px"></div>
 40 |                 <div id="bodysobremi">
 41 |                     <h2>Sobre mí</h2>
 42 |                     <p>Soy <strong>Luís Martinez</strong> músico de carrera y apasionado de <span>tecnología y la programación</span>. Música y emprendimiento forman parte de la cotidianidad del músico freelance, es un mundo en el que me ha llevado a lo largo de mi carrera a conocer muchos grandes profesionales y maravillosos escenarios. Durante ese periplo se cruzó en mi vida el diseño y desarrollo web, donde se abren nuevas oportunidades de crecimiento combinadas al sector de la prodcución audiovisual.</p>
 43 |                     <p>Me defino como una persona creativa y enamorado de lo que hago, donde mi máxima es <cite>"el mundo es un aula maravillosa de aprendizaje continuo"</cite>.</p>
 44 |                     <div class="masinfo"><button type="button">MAS INFO</button></div>
 45 |                 </div>
 46 |             </section>
 47 |             <!--FIN Bloque de sobre mi-->
 48 |             <!--Bloque Portfolio-->
 49 |             <section id="portfolio">
 50 |                 <h2>Portfolio</h2>
 51 |                 <h3>Una mirada mas allá del texto</h3>
 52 |                 <div class="filaportfolio">
 53 |                     <div class="card">
 54 |                         <video controls width="250">
 55 |                             <source src="./media/intro_mastermindv2.webm" type="video/webm">
 56 |                             <source src="./media/intro_mastermindv2.mp4" type="video/mp4">
 57 |                         </video>
 58 |                         <h3>musica</h3>
 59 |                         <h4>concierto benicassim</h4>
 60 |                         <div class="sep"></div>
 61 |                         <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
 62 |                         <div class="masinfo"><button type="button">MAS INFO</button></div>
 63 |                     </div>
 64 |                     <div class="card">
 65 |                         <iframe width="250" src="https://www.youtube.com/embed/cGvXAAw3Ikk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 66 |                         <h3>musica</h3>
 67 |                         <h4>concierto benicassim</h4>
 68 |                         <div class="sep"></div>
 69 |                         <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
 70 |                         <div class="masinfo"><button type="button">MAS INFO</button></div>
 71 |                     </div>
 72 |                     <div class="card">
 73 |                         <img src="./imagenes/imagen_portfolio.png" alt="Portfolio 3">
 74 |                         <h3>musica</h3>
 75 |                         <h4>concierto benicassim</h4>
 76 |                         <div class="sep"></div>
 77 |                         <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
 78 |                         <div class="masinfo"><button type="button">MAS INFO</button></div>
 79 |                     </div>
 80 |                     <div class="card">
 81 |                         <img src="./imagenes/imagen_portfolio.png" alt="Portfolio 4">
 82 |                         <h3>musica</h3>
 83 |                         <h4>concierto benicassim</h4>
 84 |                         <div class="sep"></div>
 85 |                         <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
 86 |                         <div class="masinfo"><button type="button">MAS INFO</button></div>
 87 |                     </div>
 88 |                 </div>
 89 |             </section>
 90 |             <!--FIN Bloque Portfolio-->
 91 |             <!--Bloque Experiencia-->
 92 |             <section id="experiencia">
 93 |                 <h2>Experiencia & Skills</h2>
 94 |                 <h3>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
 95 |                 <div class="gridexp">
 96 |                     <div class="cardexp">
 97 |                         <h2>Diseño web</h2>
 98 |                         <h3 class="textoizquierda">2018-2020</h3>
 99 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
100 |                         <ul>
101 |                             <li><img src="./imagenes/tecno_au.png" alt="" height="30px"></li>
102 |                             <li><img src="./imagenes/tecno_cu.png" alt="" height="30px"></li>
103 |                             <li><img src="./imagenes/tecno_html.png" alt="" height="30px"></li>
104 |                         </ul>
105 |                     </div>
106 |                     <div class="cardexp">
107 |                         <h2>Diseño web</h2>
108 |                         <h3 class="textoizquierda">2018-2020</h3>
109 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
110 |                         <ul>
111 |                             <li><img src="./imagenes/tecno_au.png" alt="" height="30px"></li>
112 |                             <li><img src="./imagenes/tecno_cu.png" alt="" height="30px"></li>
113 |                             <li><img src="./imagenes/tecno_html.png" alt="" height="30px"></li>
114 |                         </ul>
115 |                     </div>
116 |                     <div class="cardexp">
117 |                         <h2>Diseño web</h2>
118 |                         <h3 class="textoizquierda">2018-2020</h3>
119 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
120 |                         <ul>
121 |                             <li><img src="./imagenes/tecno_au.png" alt="" height="30px"></li>
122 |                             <li><img src="./imagenes/tecno_cu.png" alt="" height="30px"></li>
123 |                             <li><img src="./imagenes/tecno_html.png" alt="" height="30px"></li>
124 |                         </ul>
125 |                     </div>
126 |                     <div class="cardexp">
127 |                         <h2>Diseño web</h2>
128 |                         <h3 class="textoizquierda">2018-2020</h3>
129 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
130 |                         <ul>
131 |                             <li><img src="./imagenes/tecno_au.png" alt="" height="30px"></li>
132 |                             <li><img src="./imagenes/tecno_cu.png" alt="" height="30px"></li>
133 |                             <li><img src="./imagenes/tecno_html.png" alt="" height="30px"></li>
134 |                         </ul>
135 |                     </div>
136 |                     <div class="cardexp">
137 |                         <h2>Diseño web</h2>
138 |                         <h3 class="textoizquierda">2018-2020</h3>
139 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
140 |                         <ul>
141 |                             <li><img src="./imagenes/tecno_au.png" alt="" height="30px"></li>
142 |                             <li><img src="./imagenes/tecno_cu.png" alt="" height="30px"></li>
143 |                             <li><img src="./imagenes/tecno_html.png" alt="" height="30px"></li>
144 |                         </ul>
145 |                     </div>
146 |                     <div class="cardexp">
147 |                         <h2>Diseño web</h2>
148 |                         <h3 class="textoizquierda">2018-2020</h3>
149 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
150 |                         <ul>
151 |                             <li><img src="./imagenes/tecno_au.png" alt="" height="30px"></li>
152 |                             <li><img src="./imagenes/tecno_cu.png" alt="" height="30px"></li>
153 |                             <li><img src="./imagenes/tecno_html.png" alt="" height="30px"></li>
154 |                         </ul>
155 |                     </div>
156 |                 </div>
157 |             </section>
158 |             <!--FIN Bloque Experiencia-->
159 |             <!--Bloque Contactar-->
160 |             <section id="contactar">
161 |                 <h2>Contacto</h2>
162 |                 <h3>Envíame tus dudas</h3>
163 |                 <form action="#">
164 |                     <div class="itemform">
165 |                         <label for="nombre">Nombre</label>
166 |                         <input type="text" id="nombre" name="nombre" minlength="2" maxlength="64" size="32" required>
167 |                     </div>
168 |                     <div class="itemform">
169 |                         <label for="empresa">Empresa</label>
170 |                         <input type="text" id="empresa" name="empresa" minlength="2" maxlength="128" size="32">
171 |                     </div>
172 |                     <div class="itemform">
173 |                         <label for="email">Email</label>
174 |                         <input type="email" id="email" name="email" minlength="10" maxlength="128" size="32" required>
175 |                     </div>
176 |                     <div class="itemform">
177 |                         <label for="mensaje">Mensaje</label>
178 |                         <textarea name="mensaje" id="mensaje" cols="33" rows="5"></textarea>
179 |                     </div>
180 |                     <div class="itemform">
181 |                         <input type="submit" name="boton" value="CONTACTAR">
182 |                     </div>
183 |                 </form>
184 |             </section>
185 |             <!--FIN Bloque Contactar-->
186 |         </article>
187 |         <!-- Footer -->
188 |         <footer>
189 |             <ul>
190 |                 <li class="logo"><a href="#inicio"><img src="./imagenes/cascos.png" alt=""></a></li>
191 |                 <li>Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
192 |             </ul>
193 |         </footer>
194 |     </body>
195 | </html>


--------------------------------------------------------------------------------
/soluciones/experiencia_20/css/estilos.css:
--------------------------------------------------------------------------------
  1 | *{
  2 |     margin:0px;
  3 |     padding: 0px;
  4 | }
  5 | /*Definiciones de selectores*/
  6 | body{
  7 |     background-color: white;
  8 |     color: #222;
  9 |     font: 200 14px 'Poppins', sans-serif
 10 | }
 11 | h1{
 12 |     font-size: 42px;
 13 |     font-weight: 400;
 14 | }
 15 | h2{
 16 |     font-size: 36px;
 17 |     font-weight: 300;
 18 | }
 19 | h3 {
 20 |     color:#ffc900;
 21 |     font-weight: 200;
 22 | }
 23 | p{
 24 |     text-align: justify;
 25 | }
 26 | thead{
 27 |     background-color: #222;
 28 |     color: white;
 29 | }
 30 | td{
 31 |     min-width: 150px;
 32 | }
 33 | li{
 34 |     list-style: none;
 35 |     float:left;
 36 | }
 37 | i{
 38 |     margin-right: 5px;
 39 | }
 40 | a{
 41 |     text-decoration: none;
 42 | }
 43 | nav{
 44 |     position:fixed;
 45 |     width: 100%;
 46 |     height: 55px;
 47 |     background-color: #222;
 48 |     border-bottom: 1px solid white;
 49 |     padding-top: 10px;
 50 |     text-align: center;
 51 | }
 52 | nav ul{
 53 |     display: inline-block;
 54 | }
 55 | nav ul li{
 56 |     padding-top: 12px;
 57 |     text-transform: uppercase;
 58 | }
 59 | 
 60 | a:any-link{
 61 |     color:white;
 62 | }
 63 | a:-webkit-any-link {
 64 |     color:white;
 65 | }
 66 | a:-moz-any-link {
 67 |     color:white;
 68 | }
 69 | a:hover{
 70 |     color: #ffc900;
 71 | }
 72 | section{
 73 |     padding: 10px 100px 10px 100px;
 74 | }
 75 | ul{
 76 |     list-style: none;  
 77 | }
 78 | li{
 79 |     float: left;
 80 |     /*width: 30px;*/
 81 |     margin-right: 5px;
 82 | }
 83 | /*Definiciones de clases y ids*/
 84 | #datos{
 85 |     padding-top: 65px;
 86 | }
 87 | #datoscontenedor{
 88 |     display: flex;
 89 |     column-gap: 10px;
 90 | }
 91 | #educacion{
 92 |     background-color: #222;
 93 |     color: white;
 94 | }
 95 | #experiencia{
 96 |     border-top: 1px solid #ffc900;
 97 |     background-color: #222;
 98 |     color:
 99 |      white;
100 | }
101 | #comentario{
102 |     background-color: #ffc900;
103 |     color: #222;
104 | }
105 | .enlace:hover{
106 |     color: #ffc900;
107 | }
108 | .logo{
109 |     padding-top: 0px;
110 | }
111 | /*Card experiencia*/
112 | .gridedu{
113 |     display: grid;
114 |     grid-template-columns: repeat(4,350px);
115 |     grid-gap:10px;
116 |     justify-content: space-between;
117 |     align-content: space-around;
118 | }
119 | .cardedu img{
120 |     border-radius: 15px 15px 0 0;
121 |     margin-bottom: 15px;
122 | }
123 | .cardedu{
124 |     background-color: #333;
125 |     border-radius: 15px;
126 |     color: white;
127 |     padding: 10px 15px;
128 | }
129 | .cardedu h3{
130 |     margin-bottom: 20px;
131 |     border-top: 1px solid #ffc900;
132 | }
133 | .cardedu p{
134 |     margin-bottom: 20px;
135 | }
136 | /*Formulario*/
137 | .itemform{
138 |     display: grid;
139 |     grid-template-columns: 150px 350px;
140 |     justify-content: center;
141 |     margin-bottom: 10px;
142 | }
143 | .itemform label{
144 |     font-weight: 700;
145 | }
146 | .itemform input,.itemform textarea,.itemform select{
147 |     border-radius: 5px;
148 |     border: 1px solid white;
149 | }
150 | input[type="submit"]{
151 |     background-color: #222;
152 |     border: 1px solid #222;
153 |     color: white;
154 |     padding: 10px;
155 |     grid-column: 2/3;
156 |     justify-self: end;
157 | }


--------------------------------------------------------------------------------
/soluciones/experiencia_20/css/estilos_portfolio.css:
--------------------------------------------------------------------------------
  1 | /*CSS general de elementos*/
  2 | *{
  3 |     margin:0px;
  4 |     padding:0px;
  5 | }
  6 | body{
  7 |     background-color: #222;
  8 |     color: white;
  9 |     font: 200 14px 'Poppins', sans-serif;
 10 | }
 11 | h2{
 12 |     font-size: 36px;
 13 |     line-height: 36px;
 14 | }
 15 | h3{
 16 |     color: #999;
 17 |     font-size: 18px;
 18 |     font-weight: 300;
 19 | }
 20 | nav{
 21 |     position:fixed;
 22 |     width: 100%;
 23 |     height: 55px;
 24 |     background-color: #222;
 25 |     border-bottom: 1px solid white;
 26 |     padding-top: 10px;
 27 |     text-align: center;
 28 | }
 29 | nav ul{
 30 |     display: inline-block;
 31 | }
 32 | nav ul li{
 33 |     padding-top: 12px;
 34 |     text-transform: uppercase;
 35 | }
 36 | section{
 37 |     padding: 30px 100px 30px 100px;
 38 | }
 39 | p{
 40 |     text-align: justify;
 41 | }
 42 | cite{
 43 |     font-weight: 300;
 44 | }
 45 | i{
 46 |     font-size: 24px;
 47 | }
 48 | i:hover{
 49 |     color: #ffc900;
 50 | }
 51 | a{
 52 |     text-decoration: none;
 53 | }
 54 | a:any-link{
 55 |     color:white;
 56 | }
 57 | a:-webkit-any-link {
 58 |     color:white;
 59 | }
 60 | a:-moz-any-link {
 61 |     color:
 62 |     white;
 63 | }
 64 | a:hover{
 65 |     color: #ffc900;
 66 | }
 67 | ul{
 68 |     list-style: none;  
 69 | }
 70 | li{
 71 |     float: left;
 72 |     /*width: 30px;*/
 73 |     margin-right: 5px;
 74 | }
 75 | button{
 76 |     border-radius: 10px;
 77 | }
 78 | footer{
 79 |     height: 55px;
 80 |     padding-top: 10px;
 81 |     text-align: center;
 82 | }
 83 | footer ul{
 84 |     display: inline-block;
 85 | }
 86 | footer ul li{
 87 |     float:left;
 88 | }
 89 | /*CSS IDs y Clase*/
 90 | .hastag{
 91 |     color: #ffc900;
 92 | }
 93 | .seccion{
 94 |     padding: 10px 100px 10px 100px;
 95 | }
 96 | .logo{
 97 |     padding-top: 0px;
 98 | }
 99 | #redessociales{
100 |     margin-top: 20px;
101 | }
102 | #inicio{
103 |     background-image: url("../imagenes/inicio.png");
104 |     background-repeat: no-repeat;
105 |     background-size: cover;
106 |     min-height: 280px;
107 |     padding-top: 95px;
108 | }
109 | #experiencia{
110 |     background-color: white;
111 |     color: #222;
112 | }
113 | #experiencia h2,#portfolio h2{
114 |     text-align: center;
115 | }
116 | #experiencia h3,#portfolio h3{
117 |     text-align: center;
118 |     margin-bottom: 30px;
119 | }
120 | #portfolio{
121 |     border-top: 1px solid #ffc900;
122 | }
123 | .masinfo button{
124 |     background-color: #ffc900;
125 |     font-weight: 600;
126 |     padding-left: 15px;
127 |     padding-right: 15px;
128 |     margin-top: 5px;
129 |     padding: 5px;
130 | }
131 | #contactar{
132 |     background-image: url("../imagenes/fondo_contactar.png");
133 |     background-repeat: no-repeat;
134 |     background-position: right;
135 | }
136 | /*Grid sobremi*/
137 | #sobremi{
138 |     display: grid;
139 |     grid-template-columns: 250px 1fr;
140 | }
141 | #sobremi h2{
142 |     margin-bottom: 15px;
143 | }
144 | #sobremi .masinfo{
145 |     margin-top: 15px
146 | }
147 | #sobremi .masinfo button
148 | {
149 |     padding-top: 5px;
150 |     padding-bottom: 5px;
151 |     padding-left: 30px;
152 |     padding-right: 30px;
153 | }
154 | #contactar{
155 |     background-color: #ffc900;
156 |     color: #222;
157 | }
158 | /*Card portfolio*/
159 | .filaportfolio{
160 |     display: flex;
161 |     flex-direction: row;
162 |     flex-wrap: wrap;
163 |     justify-content: space-between;
164 |     gap: 30px 30px;
165 |     margin-bottom: 15px;
166 |     margin-top: 15px;
167 | }
168 | .card{
169 |     width: 250px;
170 |     background-color: #191919;
171 |     border-radius: 15px;
172 | }
173 | .card img,.card video,.card iframe{
174 |     border-radius: 15px 15px 0 0;
175 | }
176 | .card h3{
177 |     color: #ffc900;
178 | }
179 | .card h4{
180 |     margin:0 5px 5px 0;
181 | }
182 | .card h3,.card h4,.card p,.card .masinfo{
183 |     padding: 0 15px;
184 | }
185 | .card .masinfo {
186 |     margin: 15px 0px 15px 0 px;
187 |     height: 26px;
188 | }
189 | 
190 | .card .sep{
191 |     margin: 0 5px 5px 0;
192 |     border: 1px solid #ffc900;
193 | }
194 | .card .masinfo button{
195 |     float: right;
196 | }
197 | /*Card experiencia*/
198 | .gridexp{
199 |     display: grid;
200 |     grid-template-columns: repeat(4,350px);
201 |     grid-gap:10px;
202 |     justify-content: space-between;
203 |     align-content: space-around;
204 | }
205 | @media (min-width: 400px){
206 |     .gridexp{
207 |         display: flex;
208 |         flex-direction: row;
209 |         flex-wrap: wrap;
210 |         justify-content: space-between;
211 |         gap: 30px 30px;
212 |         margin-bottom: 15px;
213 |         margin-top: 15px;
214 |     }
215 | }
216 | 
217 | .cardexp{
218 |     background-color: #222;
219 |     border-radius: 15px;
220 |     color: white;
221 |     padding: 10px 15px;
222 | }
223 | .cardexp h2{
224 |     margin-bottom: 5px;
225 | }
226 | .cardexp h3{
227 |     margin-bottom: 20px;
228 | }
229 | .cardexp p{
230 |     margin-bottom: 20px;
231 | }
232 | .cardexp ul{
233 |     display: flex;
234 |     justify-content: flex-end;
235 | }
236 | .cardexp li{
237 |     height: 30px;
238 | }
239 | /*Formulario*/
240 | .itemform{
241 |     display: grid;
242 |     grid-template-columns: 150px 350px;
243 |     justify-content: center;
244 |     margin-bottom: 10px;
245 | }
246 | .itemform label{
247 |     font-weight: 700;
248 | }
249 | .itemform input,.itemform textarea{
250 |     border-radius: 5px;
251 |     border: 1px solid white;
252 | }
253 | input[type="submit"]{
254 |     background-color: #222;
255 |     border: 1px solid #222;
256 |     color: white;
257 |     padding: 10px;
258 |     grid-column: 2/3;
259 |     justify-self: end;
260 | }
261 | 
262 | 


--------------------------------------------------------------------------------
/soluciones/experiencia_20/extendido.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 |     <head>
  3 |         <meta charset="utf-8">
  4 |         <title>CV Extendido de Luís Martínez</title>
  5 |         <link rel="preconnect" href="https://fonts.googleapis.com">
  6 |         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  7 |         <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400&display=swap" rel="stylesheet">
  8 |         <script src="https://kit.fontawesome.com/f56f6708a5.js" crossorigin="anonymous"></script>
  9 |         <link rel="stylesheet" href="./css/estilos.css">
 10 |     </head>
 11 |     <body>
 12 |         <header>
 13 |         <!--Menu navegacion-->
 14 |             <nav>
 15 |                 <ul>
 16 |                     <li><a href="index.html">inicio</a></li>
 17 |                     <li class="logo"><img src="./imagenes/cascos.png" alt="logo de Luis"></li>
 18 |                     <li><a href="extendido.html">extendido</a></li>
 19 |                 </ul>
 20 |             </nav>
 21 |         </header>
 22 |         <article>
 23 |             <!--Bloque Datos personales-->
 24 |             <section id="datos">
 25 |                 <h1>CV Extendido</h1>
 26 |                 <h2>Datos personales</h2>
 27 |                 <div id="datoscontenedor">
 28 |                     <div class="datositem">
 29 |                         <iframe width="560" height="315" src="https://www.youtube.com/embed/cGvXAAw3Ikk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 30 |                     </div> 
 31 |                     <div class="datositem">
 32 |                         <table>
 33 |                             <tbody>
 34 |                                 <tr>
 35 |                                     <td><i class="fa-solid fa-user"></i><strong>Edad</strong></td>
 36 |                                     <td>47</td>
 37 |                                     <td><i class="fa-solid fa-city"></i><strong>Ciudad residencia</strong></td>
 38 |                                     <td>Valencia</td>
 39 |                                 </tr>
 40 |                                 <tr>
 41 |                                     <td><i class="fa-solid fa-graduation-cap"></i><strong>Estudios</strong></td>
 42 |                                     <td>Superiores</td>
 43 |                                     <td><i class="fa-solid fa-building-columns"></i><strong>Especialidad</strong></td>
 44 |                                     <td>Telecomunicaciones</td>
 45 |                                 </tr>
 46 |                                 <tr>
 47 |                                     <td><i class="fa-solid fa-hat-chef"></i><strong>Aficion</strong></td>
 48 |                                     <td>Cocina</td>
 49 |                                     <td><i class="fa-solid fa-baseball"></i><strong>Desporte</strong></td>
 50 |                                     <td>Baloncesto</td>
 51 |                                 </tr>
 52 |                             </tbody>
 53 |                         </table>
 54 |                     </div>
 55 | 
 56 |                 </div>
 57 |             </section>
 58 |             <!--FIN Bloque Datos personales-->
 59 |             <!--Bloque Experiencia-->
 60 |             <section id="experiencia">
 61 |                 <h2>Experiencia</h2>
 62 |                 <div>
 63 |                     <h3>Producción BSO corto animación</h3>
 64 |                     <ul>
 65 |                         <li><i class="fa-brands fa-soundcloud"></i></li>
 66 |                         <li><i class="fa-solid fa-microphone"></i></li>
 67 |                         <li><i class="fa-solid fa-podcast"></i></li>
 68 |                     </ul>
 69 |                     <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum tempora omnis voluptatem nemo fugiat quibusdam provident unde a ut, facere necessitatibus praesentium vel perspiciatis eum dicta dolorum voluptas tempore atque.</p>
 70 |                 </div>
 71 |             </section>
 72 |             <!--FIN Bloque Experiencia-->
 73 |             <!--Bloque Educación-->
 74 |             <section id="educacion">
 75 |                 <h2>Educacion</h2>
 76 |                 <div class="gridedu">
 77 |                     <div class="cardedu">
 78 |                         <img src="./imagenes/university.jpg" alt="Universidad">
 79 |                         <h3>2002 - Ingeniero de sonido por la <a href="http://www.upv.es/"><span class="enlace">UPV</span></a></h3>
 80 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 81 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 82 |                     </div>
 83 |                     <div class="cardedu">
 84 |                         <img src="./imagenes/university.jpg" alt="Universidad">
 85 |                         <h3>2002 - Ingeniero de sonido por la <a href="http://www.upv.es/"><span class="enlace">UPV</span></a></h3>
 86 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 87 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 88 |                     </div>
 89 |                     <div class="cardedu">
 90 |                         <img src="./imagenes/university.jpg" alt="Universidad">
 91 |                         <h3>2002 - Ingeniero de sonido por la <a href="http://www.upv.es/"><span class="enlace">UPV</span></a></h3>
 92 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 93 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 94 |                     </div>
 95 |                     <div class="cardedu">
 96 |                         <img src="./imagenes/university.jpg" alt="Universidad">
 97 |                         <h3>2002 - Ingeniero de sonido por la <a href="http://www.upv.es/"><span class="enlace">UPV</span></a></h3>
 98 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 99 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
100 |                     </div>
101 |                     <div class="cardedu">
102 |                         <img src="./imagenes/university.jpg" alt="Universidad">
103 |                         <h3>2002 - Ingeniero de sonido por la <a href="http://www.upv.es/"><span class="enlace">UPV</span></a></h3>
104 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
105 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
106 |                     </div>
107 |                     <div class="cardedu">
108 |                         <img src="./imagenes/university.jpg" alt="Universidad">
109 |                         <h3>2002 - Ingeniero de sonido por la <a href="http://www.upv.es/"><span class="enlace">UPV</span></a></h3>
110 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
111 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
112 |                     </div>
113 |                 </div>
114 |             </section>
115 |             <!--Bloque Experiencia-->
116 |             <section id="comentario">
117 |                 <h2>Enviar comentario</h2>
118 |                 <form action="#">
119 |                     <div class="itemform">
120 |                         <label for="nombre">Nombre</label>
121 |                         <input type="text" id="nombre" name="nombre" minlength="2" maxlength="64" size="32" required>
122 |                     </div>
123 |                     <div class="itemform">
124 |                         <label for="prioridad">Prioridad</label>
125 |                         <select name="prioridades" id="prioridades">
126 |                             <option value="alta">Alta</option>
127 |                             <option value="media">Media</option>
128 |                             <option value="baja">Baja</option>
129 |                           </select>
130 |                     </div>
131 |                     <div class="itemform">
132 |                         <label for="mensaje">Mensaje</label>
133 |                         <textarea name="mensaje" id="mensaje" cols="33" rows="5"></textarea>
134 |                     </div>
135 |                     <div class="itemform">
136 |                         <input type="submit" name="boton" value="ENVIAR">
137 |                     </div>
138 |                 </form>
139 |             </section>
140 |             <!--FIN Bloque Educación-->
141 |         </article>
142 |         <footer>
143 | 
144 |         </footer>
145 |     </body>
146 | </html>


--------------------------------------------------------------------------------
/soluciones/experiencia_20/imagenes/about-img.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_20/imagenes/about-img.png


--------------------------------------------------------------------------------
/soluciones/experiencia_20/imagenes/about-img_250.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_20/imagenes/about-img_250.png


--------------------------------------------------------------------------------
/soluciones/experiencia_20/imagenes/cascos.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_20/imagenes/cascos.png


--------------------------------------------------------------------------------
/soluciones/experiencia_20/imagenes/fondo_contactar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_20/imagenes/fondo_contactar.png


--------------------------------------------------------------------------------
/soluciones/experiencia_20/imagenes/imagen_portfolio.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_20/imagenes/imagen_portfolio.png


--------------------------------------------------------------------------------
/soluciones/experiencia_20/imagenes/inicio.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_20/imagenes/inicio.png


--------------------------------------------------------------------------------
/soluciones/experiencia_20/imagenes/sergey-zigle-rQ4_6TSliRg-unsplash.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_20/imagenes/sergey-zigle-rQ4_6TSliRg-unsplash.jpg


--------------------------------------------------------------------------------
/soluciones/experiencia_20/imagenes/tecno_au.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_20/imagenes/tecno_au.png


--------------------------------------------------------------------------------
/soluciones/experiencia_20/imagenes/tecno_cu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_20/imagenes/tecno_cu.png


--------------------------------------------------------------------------------
/soluciones/experiencia_20/imagenes/tecno_html.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_20/imagenes/tecno_html.png


--------------------------------------------------------------------------------
/soluciones/experiencia_20/imagenes/university.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/experiencia_20/imagenes/university.jpg


--------------------------------------------------------------------------------
/soluciones/experiencia_20/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 |     <head>
  4 |         <meta charset="utf-8">
  5 |         <title>Portfolio de Luís Martínez</title>
  6 |         <link rel="preconnect" href="https://fonts.googleapis.com">
  7 |         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  8 |         <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300&display=swap" rel="stylesheet">
  9 |         <script src="https://kit.fontawesome.com/f56f6708a5.js" crossorigin="anonymous"></script>
 10 |         <link rel="stylesheet" href="./css/estilos_portfolio.css">
 11 |     </head>
 12 |     <body>
 13 |         <!--Menu navegacion-->
 14 |         <nav>
 15 |             <ul>
 16 |                 <li><a href="#sobremi">sobre mi</a></li>
 17 |                 <li><a href="#portfolio">portfolio</a></li>
 18 |                 <li class="logo"><img src="./imagenes/cascos.png" alt="logo de Luis"></li>
 19 |                 <li><a href="#experiencia">skills</a></li>
 20 |                 <li><a href="#contactar">contactar</a></li>
 21 |             </ul>
 22 |         </nav>
 23 |         <article>
 24 |             <!--Bloque de inicio-->
 25 |             <section id="inicio">
 26 |                 <h2>Luís Martínez</h2>
 27 |                 <h3 class="hastag">#programador</h3>
 28 |                 <h3 class="hastag">#músico</h3>
 29 |                 <ul id="redessociales">
 30 |                     <li><a href="https://open.spotify.com/" target="_blank"><i class="fa-brands fa-spotify"></i></a></li>
 31 |                     <li><a href="https://twitter.com/" target="_blank"><i class="fa-brands fa-twitter"></i></a></li>
 32 |                     <li><a href="https://www.linkedin.com/" target="_blank"><i class="fa-brands fa-linkedin"></i></a></li>
 33 |                     <li><a href="https://www.instagram.com/" target="_blank"><i class="fa-brands fa-square-instagram"></i></a></li>
 34 |                 </ul>
 35 |             </section>
 36 |             <!--FIN Bloque de inicio-->
 37 |             <!--Bloque de sobre mi-->
 38 |             <section id="sobremi">
 39 |                 <div id="imgsobremi"><img src="./imagenes/about-img_250.png" alt="Foto Luís Martínez" height="250px"></div>
 40 |                 <div id="bodysobremi">
 41 |                     <h2>Sobre mí</h2>
 42 |                     <p>Soy <strong>Luís Martinez</strong> músico de carrera y apasionado de <span>tecnología y la programación</span>. Música y emprendimiento forman parte de la cotidianidad del músico freelance, es un mundo en el que me ha llevado a lo largo de mi carrera a conocer muchos grandes profesionales y maravillosos escenarios. Durante ese periplo se cruzó en mi vida el diseño y desarrollo web, donde se abren nuevas oportunidades de crecimiento combinadas al sector de la prodcución audiovisual.</p>
 43 |                     <p>Me defino como una persona creativa y enamorado de lo que hago, donde mi máxima es <cite>"el mundo es un aula maravillosa de aprendizaje continuo"</cite>.</p>
 44 |                     <div class="masinfo"><button type="button">MAS INFO</button></div>
 45 |                 </div>
 46 |             </section>
 47 |             <!--FIN Bloque de sobre mi-->
 48 |             <!--Bloque Portfolio-->
 49 |             <section id="portfolio">
 50 |                 <h2>Portfolio</h2>
 51 |                 <h3>Una mirada mas allá del texto</h3>
 52 |                 <div class="filaportfolio">
 53 |                     <div class="card">
 54 |                         <video controls width="250">
 55 |                             <source src="./media/intro_mastermindv2.webm" type="video/webm">
 56 |                             <source src="./media/intro_mastermindv2.mp4" type="video/mp4">
 57 |                         </video>
 58 |                         <h3>musica</h3>
 59 |                         <h4>concierto benicassim</h4>
 60 |                         <div class="sep"></div>
 61 |                         <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
 62 |                         <div class="masinfo"><button type="button">MAS INFO</button></div>
 63 |                     </div>
 64 |                     <div class="card">
 65 |                         <iframe width="250" src="https://www.youtube.com/embed/cGvXAAw3Ikk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 66 |                         <h3>musica</h3>
 67 |                         <h4>concierto benicassim</h4>
 68 |                         <div class="sep"></div>
 69 |                         <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
 70 |                         <div class="masinfo"><button type="button">MAS INFO</button></div>
 71 |                     </div>
 72 |                     <div class="card">
 73 |                         <img src="./imagenes/imagen_portfolio.png" alt="Portfolio 3">
 74 |                         <h3>musica</h3>
 75 |                         <h4>concierto benicassim</h4>
 76 |                         <div class="sep"></div>
 77 |                         <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
 78 |                         <div class="masinfo"><button type="button">MAS INFO</button></div>
 79 |                     </div>
 80 |                     <div class="card">
 81 |                         <img src="./imagenes/imagen_portfolio.png" alt="Portfolio 4">
 82 |                         <h3>musica</h3>
 83 |                         <h4>concierto benicassim</h4>
 84 |                         <div class="sep"></div>
 85 |                         <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
 86 |                         <div class="masinfo"><button type="button">MAS INFO</button></div>
 87 |                     </div>
 88 |                 </div>
 89 |             </section>
 90 |             <!--FIN Bloque Portfolio-->
 91 |             <!--Bloque Experiencia-->
 92 |             <section id="experiencia">
 93 |                 <h2>Experiencia & Skills</h2>
 94 |                 <h3>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
 95 |                 <div class="gridexp">
 96 |                     <div class="cardexp">
 97 |                         <h2>Diseño web</h2>
 98 |                         <h3 class="textoizquierda">2018-2020</h3>
 99 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
100 |                         <ul>
101 |                             <li><img src="./imagenes/tecno_au.png" alt="" height="30px"></li>
102 |                             <li><img src="./imagenes/tecno_cu.png" alt="" height="30px"></li>
103 |                             <li><img src="./imagenes/tecno_html.png" alt="" height="30px"></li>
104 |                         </ul>
105 |                     </div>
106 |                     <div class="cardexp">
107 |                         <h2>Diseño web</h2>
108 |                         <h3 class="textoizquierda">2018-2020</h3>
109 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
110 |                         <ul>
111 |                             <li><img src="./imagenes/tecno_au.png" alt="" height="30px"></li>
112 |                             <li><img src="./imagenes/tecno_cu.png" alt="" height="30px"></li>
113 |                             <li><img src="./imagenes/tecno_html.png" alt="" height="30px"></li>
114 |                         </ul>
115 |                     </div>
116 |                     <div class="cardexp">
117 |                         <h2>Diseño web</h2>
118 |                         <h3 class="textoizquierda">2018-2020</h3>
119 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
120 |                         <ul>
121 |                             <li><img src="./imagenes/tecno_au.png" alt="" height="30px"></li>
122 |                             <li><img src="./imagenes/tecno_cu.png" alt="" height="30px"></li>
123 |                             <li><img src="./imagenes/tecno_html.png" alt="" height="30px"></li>
124 |                         </ul>
125 |                     </div>
126 |                     <div class="cardexp">
127 |                         <h2>Diseño web</h2>
128 |                         <h3 class="textoizquierda">2018-2020</h3>
129 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
130 |                         <ul>
131 |                             <li><img src="./imagenes/tecno_au.png" alt="" height="30px"></li>
132 |                             <li><img src="./imagenes/tecno_cu.png" alt="" height="30px"></li>
133 |                             <li><img src="./imagenes/tecno_html.png" alt="" height="30px"></li>
134 |                         </ul>
135 |                     </div>
136 |                     <div class="cardexp">
137 |                         <h2>Diseño web</h2>
138 |                         <h3 class="textoizquierda">2018-2020</h3>
139 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
140 |                         <ul>
141 |                             <li><img src="./imagenes/tecno_au.png" alt="" height="30px"></li>
142 |                             <li><img src="./imagenes/tecno_cu.png" alt="" height="30px"></li>
143 |                             <li><img src="./imagenes/tecno_html.png" alt="" height="30px"></li>
144 |                         </ul>
145 |                     </div>
146 |                     <div class="cardexp">
147 |                         <h2>Diseño web</h2>
148 |                         <h3 class="textoizquierda">2018-2020</h3>
149 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
150 |                         <ul>
151 |                             <li><img src="./imagenes/tecno_au.png" alt="" height="30px"></li>
152 |                             <li><img src="./imagenes/tecno_cu.png" alt="" height="30px"></li>
153 |                             <li><img src="./imagenes/tecno_html.png" alt="" height="30px"></li>
154 |                         </ul>
155 |                     </div>
156 |                 </div>
157 |             </section>
158 |             <!--FIN Bloque Experiencia-->
159 |             <!--Bloque Contactar-->
160 |             <section id="contactar">
161 |                 <h2>Contacto</h2>
162 |                 <h3>Envíame tus dudas</h3>
163 |                 <form action="#">
164 |                     <div class="itemform">
165 |                         <label for="nombre">Nombre</label>
166 |                         <input type="text" id="nombre" name="nombre" minlength="2" maxlength="64" size="32" required>
167 |                     </div>
168 |                     <div class="itemform">
169 |                         <label for="empresa">Empresa</label>
170 |                         <input type="text" id="empresa" name="empresa" minlength="2" maxlength="128" size="32">
171 |                     </div>
172 |                     <div class="itemform">
173 |                         <label for="email">Email</label>
174 |                         <input type="email" id="email" name="email" minlength="10" maxlength="128" size="32" required>
175 |                     </div>
176 |                     <div class="itemform">
177 |                         <label for="mensaje">Mensaje</label>
178 |                         <textarea name="mensaje" id="mensaje" cols="33" rows="5"></textarea>
179 |                     </div>
180 |                     <div class="itemform">
181 |                         <input type="submit" name="boton" value="CONTACTAR">
182 |                     </div>
183 |                 </form>
184 |             </section>
185 |             <!--FIN Bloque Contactar-->
186 |         </article>
187 |         <!-- Footer -->
188 |         <footer>
189 |             <ul>
190 |                 <li class="logo"><a href="#inicio"><img src="./imagenes/cascos.png" alt=""></a></li>
191 |                 <li>Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
192 |             </ul>
193 |         </footer>
194 |     </body>
195 | </html>


--------------------------------------------------------------------------------
/soluciones/imagenes/about-img.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mastermindac/curso-html-css-basico/30d8f7cd7e0c013f9702812b9e1a6111c04de573/soluciones/imagenes/about-img.png


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