+
+ Un semidios con un poder portentoso gracias a su martillo, que le fue regalado por su padre, el gran OdÃn, padre de todos los Dioses de Asgard. Thor viaja por accidente a la tierra y desde ese momento pasa a ser su protector ante diversas fuerzas espaciales malignas.
+Conocido en español como "La Masa" (traducción literal del vocablo "Hulk"), se trata del alterego del cientÃfico Bruce Banner, quien se expone a un alto nivel de radiación Gamma y a partir de ese momento, cuando el humano es alterado, se transforma de inmediato en un ser con una fuerza que rivaliza con la del propio Supermán.
+Un multimillonario, empresario e ingeniero, Tony Stark sufre una lesión en el pecho durante un secuestro en el que sus captores tratan de obligarlo a construir un arma de destrucción masiva. Él crea en su lugar una poderosa armadura para salvar su vida y escapar de su cautiverio. Luego utiliza la armadura para proteger al mundo como Iron Man.
+ + diff --git a/Unidad_03_HTML/HTML/010-ejemplo-elemento-br.html b/Unidad_03_HTML/HTML/010-ejemplo-elemento-br.html new file mode 100644 index 0000000..906477e --- /dev/null +++ b/Unidad_03_HTML/HTML/010-ejemplo-elemento-br.html @@ -0,0 +1,37 @@ + + + +Un semidios con un poder portentoso gracias a su martillo, que le fue regalado por su padre, el gran OdÃn, padre de todos los Dioses de Asgard. Thor viaja por accidente a la tierra y desde ese momento pasa a ser su protector ante diversas fuerzas espaciales malignas.
+Conocido en español como "La Masa" (traducción literal del vocablo "Hulk"), se trata del alterego del cientÃfico Bruce Banner, quien se expone a un alto nivel de radiación Gamma y a partir de ese momento, cuando el humano es alterado, se transforma de inmediato en un ser con una fuerza que rivaliza con la del propio Supermán.
+Un multimillonario, empresario e ingeniero,
+ Tony Stark sufre una lesión en el pecho durante un secuestro
+ en el que sus captores tratan de obligarlo a construir un arma de destrucción masiva.
+ Él crea en su lugar una poderosa armadura para salvar su vida y escapar de su cautiverio.
Luego utiliza la armadura para proteger al mundo como Iron Man.
Un semidios con un poder portentoso gracias a su martillo, que le fue regalado por su padre, el gran OdÃn, padre de todos los Dioses de Asgard. Thor viaja por accidente a la tierra y desde ese momento pasa a ser su protector ante diversas fuerzas espaciales malignas.
+Conocido en español como "La Masa" (traducción literal del vocablo "Hulk"), se trata del alterego del cientÃfico Bruce Banner, quien se expone a un alto nivel de radiación Gamma y a partir de ese momento, cuando el humano es alterado, se transforma de inmediato en un ser con una fuerza que rivaliza con la del propio Supermán.
+Un multimillonario, empresario e ingeniero, Tony Stark sufre una lesión en el pecho durante un secuestro en el que sus captores tratan de obligarlo a construir un arma de destrucción masiva. Él crea en su lugar una poderosa armadura para salvar su vida y escapar de su cautiverio. Luego utiliza la armadura para proteger al mundo como Iron Man.
+ + diff --git a/Unidad_03_HTML/HTML/012-ejemplo-modificadores-formato.html b/Unidad_03_HTML/HTML/012-ejemplo-modificadores-formato.html new file mode 100644 index 0000000..6274dfb --- /dev/null +++ b/Unidad_03_HTML/HTML/012-ejemplo-modificadores-formato.html @@ -0,0 +1,34 @@ + + + +Un semidios con un poder portentoso gracias a su martillo, que le fue regalado por su padre, el gran OdÃn, padre de todos los Dioses de Asgard. Thor viaja por accidente a la tierra y desde ese momento pasa a ser su protector ante diversas fuerzas espaciales malignas.
+Conocido en español como "La Masa" (traducción literal del vocablo "Hulk"), se trata del alterego del cientÃfico Bruce Banner, quien se expone a un alto nivel de radiación Gamma y a partir de ese momento, cuando el humano es alterado, se transforma de inmediato en un ser con una fuerza que rivaliza con la del propio Supermán.
+Un multimillonario, empresario e ingeniero, Tony Stark sufre una lesión en el pecho durante un secuestro en el que sus captores tratan de obligarlo a construir un arma de destrucción masiva. Él crea en su lugar una poderosa armadura para salvar su vida y escapar de su cautiverio. Luego utiliza la armadura para proteger al mundo como Iron Man.
Un semidios con un poder + portentoso + gracias a su martillo, que le fue regalado por su padre, + el gran OdÃn, + padre de todos los Dioses de Asgard. Thor viaja por accidente a la tierra y desde ese momento pasa a ser su protector ante diversas fuerzas espaciales malignas.
+Conocido en español como "La Masa" (traducción literal del vocablo "Hulk"), se trata del alterego del cientÃfico Bruce Banner, quien se expone a un alto nivel de radiación Gamma y a partir de ese momento, cuando el humano es alterado, se transforma de inmediato en un ser con una fuerza que rivaliza con la del propio Supermán.
+Un multimillonario, empresario e ingeniero, Tony Stark sufre una lesión en el pecho durante un secuestro en el que sus captores tratan de obligarlo a construir un arma de destrucción masiva. Él crea en su lugar una poderosa armadura para salvar su vida y escapar de su cautiverio. Luego utiliza la armadura para proteger al mundo como Iron Man.
+ + diff --git a/Unidad_03_HTML/HTML/014-ejemplo-elemento-pre.html b/Unidad_03_HTML/HTML/014-ejemplo-elemento-pre.html new file mode 100644 index 0000000..0de8a88 --- /dev/null +++ b/Unidad_03_HTML/HTML/014-ejemplo-elemento-pre.html @@ -0,0 +1,41 @@ + + + ++
Un semidios < > " ? ! & con un poder portentoso gracias a su martillo, + que le fue regalado por su padre, el gran OdÃn, padre de todos los Dioses de Asgard. + + + Thor viaja por accidente a la tierra y desde ese momento pasa a ser su protector ante + diversas fuerzas espaciales malignas. ++
Conocido en español como "La Masa" (traducción literal del vocablo "Hulk"), se trata del alterego del cientÃfico Bruce Banner, quien se expone a un alto nivel de radiación Gamma y a partir de ese momento, cuando el humano es alterado, se transforma de inmediato en un ser con una fuerza que rivaliza con la del propio Supermán.
+Un multimillonario, empresario e ingeniero, Tony Stark sufre una lesión en el pecho durante un secuestro en el que sus captores tratan de obligarlo a construir un arma de destrucción masiva. Él crea en su lugar una poderosa armadura para salvar su vida y escapar de su cautiverio. Luego utiliza la armadura para proteger al mundo como Iron Man.
+ + diff --git a/Unidad_03_HTML/HTML/015-ejemplo-elemento-ol.html b/Unidad_03_HTML/HTML/015-ejemplo-elemento-ol.html new file mode 100644 index 0000000..b6e9abb --- /dev/null +++ b/Unidad_03_HTML/HTML/015-ejemplo-elemento-ol.html @@ -0,0 +1,25 @@ + + + +Un semidios con un poder portentoso gracias a su martillo, que le fue regalado por su padre, el gran OdÃn, padre de todos los Dioses de Asgard. Thor viaja por accidente a la tierra y desde ese momento pasa a ser su protector ante diversas fuerzas espaciales malignas.
+Conocido en español como "La Masa" (traducción literal del vocablo "Hulk"), se trata del alterego del cientÃfico Bruce Banner, quien se expone a un alto nivel de radiación Gamma y a partir de ese momento, cuando el humano es alterado, se transforma de inmediato en un ser con una fuerza que rivaliza con la del propio Supermán.
+Un multimillonario, empresario e ingeniero, Tony Stark sufre una lesión en el pecho durante un secuestro en el que sus captores tratan de obligarlo a construir un arma de destrucción masiva. Él crea en su lugar una poderosa armadura para salvar su vida y escapar de su cautiverio. Luego utiliza la armadura para proteger al mundo como Iron Man.
+ + diff --git a/Unidad_03_HTML/HTML/021-ejemplo-elemento-a-marcador.html b/Unidad_03_HTML/HTML/021-ejemplo-elemento-a-marcador.html new file mode 100644 index 0000000..e6a08ba --- /dev/null +++ b/Unidad_03_HTML/HTML/021-ejemplo-elemento-a-marcador.html @@ -0,0 +1,122 @@ + + + +Un semidios con un poder portentoso gracias a su martillo, que le fue regalado por su padre, el gran OdÃn, padre de todos los Dioses de Asgard. Thor viaja por accidente a la tierra y desde ese momento pasa a ser su protector ante diversas fuerzas espaciales malignas.
+Conocido en español como "La Masa" (traducción literal del vocablo "Hulk"), se trata del alterego del cientÃfico Bruce Banner, quien se expone a un alto nivel de radiación Gamma y a partir de ese momento, cuando el humano es alterado, se transforma de inmediato en un ser con una fuerza que rivaliza con la del propio Supermán.
+ +Ir al parrafo con id de Iron Man
+Un multimillonario, empresario e ingeniero, Tony Stark sufre una lesión en el pecho durante un secuestro en el que sus captores tratan de obligarlo a construir un arma de destrucción masiva. Él crea en su lugar una poderosa armadura para salvar su vida y escapar de su cautiverio. Luego utiliza la armadura para proteger al mundo como Iron Man.
+
+
+
+ + diff --git a/Unidad_03_HTML/HTML/022-ejemplo-elemento-img.html b/Unidad_03_HTML/HTML/022-ejemplo-elemento-img.html new file mode 100644 index 0000000..6ffb0e7 --- /dev/null +++ b/Unidad_03_HTML/HTML/022-ejemplo-elemento-img.html @@ -0,0 +1,48 @@ + + + +
+
+ Un semidios con un poder portentoso gracias a su martillo, que le fue regalado por su padre, el gran OdÃn, padre de todos los Dioses de Asgard. Thor viaja por accidente a la tierra y desde ese momento pasa a ser su protector ante diversas fuerzas espaciales malignas.
+
+ Conocido en español como "La Masa" (traducción literal del vocablo "Hulk"), se trata del alterego del cientÃfico Bruce Banner, quien se expone a un alto nivel de radiación Gamma y a partir de ese momento, cuando el humano es alterado, se transforma de inmediato en un ser con una fuerza que rivaliza con la del propio Supermán.
+
+ Un multimillonario, empresario e ingeniero, Tony Stark sufre una lesión en el pecho durante un secuestro en el que sus captores tratan de obligarlo a construir un arma de destrucción masiva. Él crea en su lugar una poderosa armadura para salvar su vida y escapar de su cautiverio. Luego utiliza la armadura para proteger al mundo como Iron Man.
+ + diff --git a/Unidad_03_HTML/HTML/023-ejemplo-elemento-map-area.html b/Unidad_03_HTML/HTML/023-ejemplo-elemento-map-area.html new file mode 100644 index 0000000..11eb02b --- /dev/null +++ b/Unidad_03_HTML/HTML/023-ejemplo-elemento-map-area.html @@ -0,0 +1,58 @@ + + + +
+
+ Un semidios con un poder portentoso gracias a su martillo, que le fue regalado por su padre, el gran OdÃn, padre de todos los Dioses de Asgard. Thor viaja por accidente a la tierra y desde ese momento pasa a ser su protector ante diversas fuerzas espaciales malignas.
+
+
+
+ +
Conocido en español como "La Masa" (traducción literal del vocablo "Hulk"), se trata del alterego del cientÃfico Bruce Banner, quien se expone a un alto nivel de radiación Gamma y a partir de ese momento, cuando el humano es alterado, se transforma de inmediato en un ser con una fuerza que rivaliza con la del propio Supermán.
+
+
+
+ +
Un multimillonario, empresario e ingeniero, Tony Stark sufre una lesión en el pecho durante un secuestro en el que sus captores tratan de obligarlo a construir un arma de destrucción masiva. Él crea en su lugar una poderosa armadura para salvar su vida y escapar de su cautiverio. Luego utiliza la armadura para proteger al mundo como Iron Man.
+
+
+
+ + diff --git a/Unidad_03_HTML/HTML/024-ejemplo-elemento-table.html b/Unidad_03_HTML/HTML/024-ejemplo-elemento-table.html new file mode 100644 index 0000000..54a75bb --- /dev/null +++ b/Unidad_03_HTML/HTML/024-ejemplo-elemento-table.html @@ -0,0 +1,52 @@ + + + +
| Thor | +Un semidios con un poder portentoso gracias a su martillo, que le fue regalado por su padre, el gran Odín, padre de todos los Dioses de Asgard. Thor viaja por accidente a la tierra y desde ese momento pasa a ser su protector ante diversas fuerzas espaciales malignas. | +
| Hulk | +Conocido en español como "La Masa" (traducción literal del vocablo "Hulk"), se trata del alterego del científico Bruce Banner, quien se expone a un alto nivel de radiación Gamma y a partir de ese momento, cuando el humano es alterado, se transforma de inmediato en un ser con una fuerza que rivaliza con la del propio Supermán. | +
| Iron Man | +Un multimillonario, empresario e ingeniero, Tony Stark sufre una lesión en el pecho durante un secuestro en el que sus captores tratan de obligarlo a construir un arma de destrucción masiva. Él crea en su lugar una poderosa armadura para salvar su vida y escapar de su cautiverio. Luego utiliza la armadura para proteger al mundo como Iron Man. | +
| Thor | + |
+
| + | Un semidios con un poder portentoso gracias a su martillo, que le fue regalado por su padre, el gran Odín, padre de todos los Dioses de Asgard. Thor viaja por accidente a la tierra y desde ese momento pasa a ser su protector ante diversas fuerzas espaciales malignas. | +
| Hulk | + |
+
| + | Conocido en español como "La Masa" (traducción literal del vocablo "Hulk"), se trata del alterego del científico Bruce Banner, quien se expone a un alto nivel de radiación Gamma y a partir de ese momento, cuando el humano es alterado, se transforma de inmediato en un ser con una fuerza que rivaliza con la del propio Supermán. | +
| Iron Man | + |
+
| + | Un multimillonario, empresario e ingeniero, Tony Stark sufre una lesión en el pecho durante un secuestro en el que sus captores tratan de obligarlo a construir un arma de destrucción masiva. Él crea en su lugar una poderosa armadura para salvar su vida y escapar de su cautiverio. Luego utiliza la armadura para proteger al mundo como Iron Man. | +
| Thor | + |
+
| Un semidios con un poder portentoso gracias a su martillo, que le fue regalado por su padre, el gran Odín, padre de todos los Dioses de Asgard. Thor viaja por accidente a la tierra y desde ese momento pasa a ser su protector ante diversas fuerzas espaciales malignas. | +|
| Hulk | + |
+
+
| + | Conocido en español como "La Masa" (traducción literal del vocablo "Hulk"), se trata del alterego del científico Bruce Banner, quien se expone a un alto nivel de radiación Gamma y a partir de ese momento, cuando el humano es alterado, se transforma de inmediato en un ser con una fuerza que rivaliza con la del propio Supermán. | +
| Iron Man | + |
+
| + | Un multimillonario, empresario e ingeniero, Tony Stark sufre una lesión en el pecho durante un secuestro en el que sus captores tratan de obligarlo a construir un arma de destrucción masiva. Él crea en su lugar una poderosa armadura para salvar su vida y escapar de su cautiverio. Luego utiliza la armadura para proteger al mundo como Iron Man. | +
| Thor | + |
+
| Un semidios con un poder portentoso gracias a su martillo, que le fue regalado por su padre, el gran Odín, padre de todos los Dioses de Asgard. Thor viaja por accidente a la tierra y desde ese momento pasa a ser su protector ante diversas fuerzas espaciales malignas. | +|
| Hulk | + |
+
| Conocido en español como "La Masa" (traducción literal del vocablo "Hulk"), se trata del alterego del científico Bruce Banner, quien se expone a un alto nivel de radiación Gamma y a partir de ese momento, cuando el humano es alterado, se transforma de inmediato en un ser con una fuerza que rivaliza con la del propio Supermán. | +|
| Iron Man | + |
+
| + | Un multimillonario, empresario e ingeniero, Tony Stark sufre una lesión en el pecho durante un secuestro en el que sus captores tratan de obligarlo a construir un arma de destrucción masiva. Él crea en su lugar una poderosa armadura para salvar su vida y escapar de su cautiverio. Luego utiliza la armadura para proteger al mundo como Iron Man. | +
|
+ ||||
|
+ ||||
|
+ ||||
+ + diff --git a/Unidad_03_HTML/HTML/029-ejemplo-elemento-tabla-anidada-con-css.html b/Unidad_03_HTML/HTML/029-ejemplo-elemento-tabla-anidada-con-css.html new file mode 100644 index 0000000..d453d87 --- /dev/null +++ b/Unidad_03_HTML/HTML/029-ejemplo-elemento-tabla-anidada-con-css.html @@ -0,0 +1,91 @@ + + + +
|
+ ||||
|
+ ||||
|
+ ||||
+ + diff --git a/Unidad_03_HTML/HTML/030-marcos/der.html b/Unidad_03_HTML/HTML/030-marcos/der.html new file mode 100644 index 0000000..c40db62 --- /dev/null +++ b/Unidad_03_HTML/HTML/030-marcos/der.html @@ -0,0 +1,92 @@ + + + +
|
+ ||||
|
+ ||||
|
+ ||||
+ + + diff --git a/Unidad_03_HTML/HTML/030-marcos/izq.html b/Unidad_03_HTML/HTML/030-marcos/izq.html new file mode 100644 index 0000000..50b4565 --- /dev/null +++ b/Unidad_03_HTML/HTML/030-marcos/izq.html @@ -0,0 +1,56 @@ + + + +
| Thor | +|
|---|---|
|
+ Un semidios con un poder portentoso gracias a su martillo, que le fue regalado por su padre, el gran Odín, padre de todos los Dioses de Asgard. Thor viaja por accidente a la tierra y desde ese momento pasa a ser su protector ante diversas fuerzas espaciales malignas. | +
| Hulk | +|
|---|---|
|
+ Conocido en español como "La Masa" (traducción literal del vocablo "Hulk"), se trata del alterego del científico Bruce Banner, quien se expone a un alto nivel de radiación Gamma y a partir de ese momento, cuando el humano es alterado, se transforma de inmediato en un ser con una fuerza que rivaliza con la del propio Supermán. | +
| Iron Man | +|
|---|---|
|
+ Un multimillonario, empresario e ingeniero, Tony Stark sufre una lesión en el pecho durante un secuestro en el que sus captores tratan de obligarlo a construir un arma de destrucción masiva. Él crea en su lugar una poderosa armadura para salvar su vida y escapar de su cautiverio. Luego utiliza la armadura para proteger al mundo como Iron Man. | +
| Thor | +|
|---|---|
|
+ Un semidios con un poder portentoso gracias a su martillo, que le fue regalado por su padre, el gran Odín, padre de todos los Dioses de Asgard. Thor viaja por accidente a la tierra y desde ese momento pasa a ser su protector ante diversas fuerzas espaciales malignas. | +
| Hulk | +|
|---|---|
|
+ Conocido en español como "La Masa" (traducción literal del vocablo "Hulk"), se trata del alterego del científico Bruce Banner, quien se expone a un alto nivel de radiación Gamma y a partir de ese momento, cuando el humano es alterado, se transforma de inmediato en un ser con una fuerza que rivaliza con la del propio Supermán. | +
| Iron Man | +|
|---|---|
|
+ Un multimillonario, empresario e ingeniero, Tony Stark sufre una lesión en el pecho durante un secuestro en el que sus captores tratan de obligarlo a construir un arma de destrucción masiva. Él crea en su lugar una poderosa armadura para salvar su vida y escapar de su cautiverio. Luego utiliza la armadura para proteger al mundo como Iron Man. | +
| Thor | +|
|---|---|
|
+ Un semidios con un poder portentoso gracias a su martillo, que le fue regalado por su padre, el gran Odín, padre de todos los Dioses de Asgard. Thor viaja por accidente a la tierra y desde ese momento pasa a ser su protector ante diversas fuerzas espaciales malignas. | +
+ + + \ No newline at end of file diff --git a/Unidad_03_HTML/HTML/036-spotless/default.css b/Unidad_03_HTML/HTML/036-spotless/default.css new file mode 100644 index 0000000..9bd4aa8 --- /dev/null +++ b/Unidad_03_HTML/HTML/036-spotless/default.css @@ -0,0 +1,525 @@ + html, body + { + height: 100%; + } + + body + { + margin: 0px; + padding: 0px; + background: #FFF; + font-family: 'Source Sans Pro', sans-serif; + font-size: 12pt; + font-weight: 300; + color: #000000; + } + + + h1, h2, h3 + { + margin: 0; + padding: 0; + } + + p, ol, ul + { + margin-top: 0; + } + + ol, ul + { + padding: 0; + list-style: none; + } + + p + { + line-height: 180%; + } + + strong + { + } + + a + { + color: #d31e0b; + } + + a:hover + { + text-decoration: none; + } + + .container + { + overflow: hidden; + margin: 0em auto; + width: 1200px; + } + + .header + { + margin-bottom: 4em; + padding-left: 2em; + border-left: 6px solid #d31e0b; + } + + .header h2 + { + text-transform: uppercase; + font-size: 2.5em; + font-weight: 300; + } + + .header span + { + display: block; + padding-top: 0.50em; + letter-spacing: 0.10em; + text-transform: uppercase; + font-size: 1em; + font-weight: 300; + } + +/*********************************************************************************/ +/* Image Style */ +/*********************************************************************************/ + + .image + { + display: inline-block; + } + + .image img + { + display: block; + width: 100%; + } + + .image-full + { + display: block; + width: 100%; + margin: 0 0 2em 0; + } + + .image-left + { + float: left; + margin: 0 2em 2em 0; + } + + .image-centered + { + display: block; + margin: 0 0 2em 0; + } + + .image-centered img + { + margin: 0 auto; + width: auto; + } + +/*********************************************************************************/ +/* List Styles */ +/*********************************************************************************/ + + + ul.style2 + { + margin: 0; + padding-top: 1em; + list-style: none; + } + + ul.style2 li + { + border-top: 1px solid rgba(0,0,0,0.08); + padding: 0.80em 0 0.80em 0; + font-family: 0.80em; + } + + ul.style2 li:before + { + display: inline-block; + padding: 4px; + background: #DB3256; + } + + ul.style2 a + { + display: inline-block; + color: #35514f; + } + + ul.style2 li:first-child + { + border-top: 0; + padding-top: 0; + } + +/*********************************************************************************/ +/* Social Icon Styles */ +/*********************************************************************************/ + + ul.contact + { + margin: 0; + padding: 2em 0em 0em 0em; + list-style: none; + } + + ul.contact li + { + display: inline-block; + padding: 0em 0.30em; + font-size: 1em; + } + + ul.contact li span + { + display: none; + margin: 0; + padding: 0; + } + + ul.contact li a + { + color: #FFF; + } + + ul.contact li a:before + { + display: inline-block; + background: #3f3f3f; + width: 40px; + height: 40px; + line-height: 40px; + border-radius: 20px; + text-align: center; + color: #FFFFFF; + } + + ul.contact li a.icon-twitter:before { background: #2DAAE4; } + ul.contact li a.icon-facebook:before { background: #39599F; } + ul.contact li a.icon-dribbble:before { background: #C4376B; } + ul.contact li a.icon-tumblr:before { background: #31516A; } + ul.contact li a.icon-rss:before { background: #F2600B; } + +/*********************************************************************************/ +/* Button Style */ +/*********************************************************************************/ + + .button + { + display: inline-block; + margin-top: 2em; + padding: 1em 2em 1em 2em; + background: #d31e0b; + border-bottom: 4px solid #9e1506; + letter-spacing: 0.20em; + text-decoration: none; + text-transform: uppercase; + font-weight: 400; + font-size: 0.90em; + color: #FFF; + } + + .button:before + { + display: inline-block; + background: #FFC31F; + margin-right: 1em; + width: 40px; + height: 40px; + line-height: 40px; + border-radius: 20px; + text-align: center; + color: #272925; + } + +/*********************************************************************************/ +/* 4-column */ +/*********************************************************************************/ + + .box1, + .box2, + .box3, + .box4 + { + width: 282px; + } + + .box1, + .box2, + .box3 + { + float: left; + margin-right: 24px; + } + + .box4 + { + float: right; + } + +/*********************************************************************************/ +/* 3-column */ +/*********************************************************************************/ + + .boxA, + .boxB, + .boxC + { + width: 384px; + } + + .boxA, + .boxB + { + float: left; + margin-right: 24px; + } + + .boxC + { + float: right; + } + +/*********************************************************************************/ +/* 2-column */ +/*********************************************************************************/ + + .tbox1, + .tbox2 + { + width: 588px; + } + + .tbox1 + { + float: left; + } + + .tbox2 + { + float: right; + } + +/*********************************************************************************/ +/* Header */ +/*********************************************************************************/ + + #header + { + position: relative; + padding: 3em 0em; + } + +/*********************************************************************************/ +/* Logo */ +/*********************************************************************************/ + + #logo + { + } + + #logo h1 + { + } + + #logo h1 a + { + color: #d31e0b; + } + + #logo span + { + letter-spacing: 0.10em; + text-transform: uppercase; + font-size: 0.90em; + color: #000; + } + + #logo a + { + text-decoration: none; + color: #000; + } + +/*********************************************************************************/ +/* Menu */ +/*********************************************************************************/ + + #menu-wrapper + { + overflow: hidden; + height: 60px; + background: #d31e0b; + border-bottom: 4px solid #9e1506; + } + + #menu + { + } + + #menu ul + { + display: inline-block; + } + + #menu li + { + display: block; + float: left; + text-align: center; + } + + #menu li a, #menu li span + { + overflow: hidden; + padding: 1em 3em 1em 0em; + line-height: 60px; + letter-spacing: 0.10em; + text-decoration: none; + text-transform: uppercase; + font-size: 0.90em; + font-weight: 300; + color: #FFF; + } + + #menu li:hover a, #menu li.active a, #menu li.active span + { + } + + #menu .current_page_item a + { + } + + #menu .icon + { + } + +/*********************************************************************************/ +/* Banner */ +/*********************************************************************************/ + + #banner + { + overflow: hidden; + padding: 5em 0em 0em 0em; + } + +/*********************************************************************************/ +/* Page */ +/*********************************************************************************/ + + #page + { + overflow: hidden; + padding: 5em 0em; + } + + #page h3 + { + padding-bottom: 1em; + text-transform: uppercase; + font-size: 2em; + font-weight: 300; + } + +/*********************************************************************************/ +/* Content */ +/*********************************************************************************/ + + #content + { + } + +/*********************************************************************************/ +/* Sidebar */ +/*********************************************************************************/ + + #sidebar + { + } + +/*********************************************************************************/ +/* Portfolio */ +/*********************************************************************************/ + + #portfolio + { + overflow: hidden; + padding: 5em 0em; + } + + #portfolio h3 + { + padding-bottom: 1em; + text-transform: uppercase; + font-size: 1.8em; + font-weight: 300; + } + + #portfolio .icon + { + display: inline-block; + width: 80px; + height: 80px; + background: #6648B0; + margin: 0px auto 20px auto; + line-height: 80px; + font-size: 2em; + text-align: center; + color: #FFF; + } + +/*********************************************************************************/ +/* Footer */ +/*********************************************************************************/ + + #footer + { + overflow: hidden; + padding: 5em 0em; + border-top: 1px solid rgba(0,0,0,0.08); + } + + #footer h3 + { + padding-bottom: 1em; + text-transform: uppercase; + font-size: 1.8em; + font-weight: 300; + } + +/*********************************************************************************/ +/* Copyright */ +/*********************************************************************************/ + + #copyright + { + overflow: hidden; + padding: 5em 0em; + border-top: 1px solid rgba(0,0,0,0.08); + } + + #copyright p + { + letter-spacing: 0.20em; + text-align: center; + text-transform: uppercase; + font-size: 0.80em; + color: rgba(0,0,0,0.6); + } + + #copyright a + { + text-decoration: none; + color: rgba(0,0,0,0.9); + } + + diff --git a/Unidad_03_HTML/HTML/036-spotless/fonts.css b/Unidad_03_HTML/HTML/036-spotless/fonts.css new file mode 100644 index 0000000..c6cba16 --- /dev/null +++ b/Unidad_03_HTML/HTML/036-spotless/fonts.css @@ -0,0 +1,378 @@ +@charset 'UTF-8'; + +@font-face +{ + font-family: 'FontAwesome'; + src: url('fonts/fontawesome-webfont.eot?v=3.0.1'); + src: url('fonts/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'), + url('fonts/fontawesome-webfont.woff?v=3.0.1') format('woff'), + url('fonts/fontawesome-webfont.ttf?v=3.0.1') format('truetype'), + url('fonts/fontawesome-webfont.svg#FontAwesome') format('svg'); + font-weight: normal; + font-style: normal; +} + +@font-face +{ + font-family: 'Font-Awesome-Social'; + src: url('fonts/fontawesome-social-webfont.eot'); + src: url('fonts/fontawesome-social-webfont.eot?#iefix') format('embedded-opentype'), + url('fonts/fontawesome-social-webfont.woff') format('woff'), + url('fonts/fontawesome-social-webfont.ttf') format('truetype'), + url('fonts/fontawesome-social-webfont.svg#Font-Awesome-More') format('svg'); + font-weight: normal; + font-style: normal; +} + +/*********************************************************************************/ +/* Icons */ +/*********************************************************************************/ + + /* + Powered by: + + Font Awesome (http://fortawesome.github.com/Font-Awesome/) + Font Awesome More (http://gregoryloucas.github.com/Font-Awesome-More/) + */ + + .icon + { + text-decoration: none; + } + + .icon:before + { + font-size: 1.25em; + text-decoration: none; + font-family: FontAwesome; + font-weight: normal; + font-style: normal; + -webkit-text-rendering: optimizeLegibility; + -moz-text-rendering: optimizeLegibility; + -ms-text-rendering: optimizeLegibility; + -o-text-rendering: optimizeLegibility; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-font-smoothing: antialiased; + -ms-font-smoothing: antialiased; + -o-font-smoothing: antialiased; + font-smoothing: antialiased; + -webkit-font-feature-settings: "liga" 1, "dlig" 1; + -moz-font-feature-settings: "liga=1, dlig=1"; + -ms-font-feature-settings: "liga" 1, "dlig" 1; + -o-font-feature-settings: "liga" 1, "dlig" 1; + font-feature-settings: "liga" 1, "dlig" 1; + } + + .icon-glass:before { content: "\f000"; } + .icon-music:before { content: "\f001"; } + .icon-search:before { content: "\f002"; } + .icon-envelope:before { content: "\f003"; } + .icon-heart:before { content: "\f004"; } + .icon-star:before { content: "\f005"; } + .icon-star-empty:before { content: "\f006"; } + .icon-user:before { content: "\f007"; } + .icon-film:before { content: "\f008"; } + .icon-th-large:before { content: "\f009"; } + .icon-th:before { content: "\f00a"; } + .icon-th-list:before { content: "\f00b"; } + .icon-ok:before { content: "\f00c"; } + .icon-remove:before { content: "\f00d"; } + .icon-zoom-in:before { content: "\f00e"; } + + .icon-zoom-out:before { content: "\f010"; } + .icon-off:before { content: "\f011"; } + .icon-signal:before { content: "\f012"; } + .icon-cog:before { content: "\f013"; } + .icon-trash:before { content: "\f014"; } + .icon-home:before { content: "\f015"; } + .icon-file:before { content: "\f016"; } + .icon-time:before { content: "\f017"; } + .icon-road:before { content: "\f018"; } + .icon-download-alt:before { content: "\f019"; } + .icon-download:before { content: "\f01a"; } + .icon-upload:before { content: "\f01b"; } + .icon-inbox:before { content: "\f01c"; } + .icon-play-circle:before { content: "\f01d"; } + .icon-repeat:before { content: "\f01e"; } + + /* \f020 doesn't work in Safari. all shifted one down */ + .icon-refresh:before { content: "\f021"; } + .icon-list-alt:before { content: "\f022"; } + .icon-lock:before { content: "\f023"; } + .icon-flag:before { content: "\f024"; } + .icon-headphones:before { content: "\f025"; } + .icon-volume-off:before { content: "\f026"; } + .icon-volume-down:before { content: "\f027"; } + .icon-volume-up:before { content: "\f028"; } + .icon-qrcode:before { content: "\f029"; } + .icon-barcode:before { content: "\f02a"; } + .icon-tag:before { content: "\f02b"; } + .icon-tags:before { content: "\f02c"; } + .icon-book:before { content: "\f02d"; } + .icon-bookmark:before { content: "\f02e"; } + .icon-print:before { content: "\f02f"; } + + .icon-camera:before { content: "\f030"; } + .icon-font:before { content: "\f031"; } + .icon-bold:before { content: "\f032"; } + .icon-italic:before { content: "\f033"; } + .icon-text-height:before { content: "\f034"; } + .icon-text-width:before { content: "\f035"; } + .icon-align-left:before { content: "\f036"; } + .icon-align-center:before { content: "\f037"; } + .icon-align-right:before { content: "\f038"; } + .icon-align-justify:before { content: "\f039"; } + .icon-list:before { content: "\f03a"; } + .icon-indent-left:before { content: "\f03b"; } + .icon-indent-right:before { content: "\f03c"; } + .icon-facetime-video:before { content: "\f03d"; } + .icon-picture:before { content: "\f03e"; } + + .icon-pencil:before { content: "\f040"; } + .icon-map-marker:before { content: "\f041"; } + .icon-adjust:before { content: "\f042"; } + .icon-tint:before { content: "\f043"; } + .icon-edit:before { content: "\f044"; } + .icon-share:before { content: "\f045"; } + .icon-check:before { content: "\f046"; } + .icon-move:before { content: "\f047"; } + .icon-step-backward:before { content: "\f048"; } + .icon-fast-backward:before { content: "\f049"; } + .icon-backward:before { content: "\f04a"; } + .icon-play:before { content: "\f04b"; } + .icon-pause:before { content: "\f04c"; } + .icon-stop:before { content: "\f04d"; } + .icon-forward:before { content: "\f04e"; } + + .icon-fast-forward:before { content: "\f050"; } + .icon-step-forward:before { content: "\f051"; } + .icon-eject:before { content: "\f052"; } + .icon-chevron-left:before { content: "\f053"; } + .icon-chevron-right:before { content: "\f054"; } + .icon-plus-sign:before { content: "\f055"; } + .icon-minus-sign:before { content: "\f056"; } + .icon-remove-sign:before { content: "\f057"; } + .icon-ok-sign:before { content: "\f058"; } + .icon-question-sign:before { content: "\f059"; } + .icon-info-sign:before { content: "\f05a"; } + .icon-screenshot:before { content: "\f05b"; } + .icon-remove-circle:before { content: "\f05c"; } + .icon-ok-circle:before { content: "\f05d"; } + .icon-ban-circle:before { content: "\f05e"; } + + .icon-arrow-left:before { content: "\f060"; } + .icon-arrow-right:before { content: "\f061"; } + .icon-arrow-up:before { content: "\f062"; } + .icon-arrow-down:before { content: "\f063"; } + .icon-share-alt:before { content: "\f064"; } + .icon-resize-full:before { content: "\f065"; } + .icon-resize-small:before { content: "\f066"; } + .icon-plus:before { content: "\f067"; } + .icon-minus:before { content: "\f068"; } + .icon-asterisk:before { content: "\f069"; } + .icon-exclamation-sign:before { content: "\f06a"; } + .icon-gift:before { content: "\f06b"; } + .icon-leaf:before { content: "\f06c"; } + .icon-fire:before { content: "\f06d"; } + .icon-eye-open:before { content: "\f06e"; } + + .icon-eye-close:before { content: "\f070"; } + .icon-warning-sign:before { content: "\f071"; } + .icon-plane:before { content: "\f072"; } + .icon-calendar:before { content: "\f073"; } + .icon-random:before { content: "\f074"; } + .icon-comment:before { content: "\f075"; } + .icon-magnet:before { content: "\f076"; } + .icon-chevron-up:before { content: "\f077"; } + .icon-chevron-down:before { content: "\f078"; } + .icon-retweet:before { content: "\f079"; } + .icon-shopping-cart:before { content: "\f07a"; } + .icon-folder-close:before { content: "\f07b"; } + .icon-folder-open:before { content: "\f07c"; } + .icon-resize-vertical:before { content: "\f07d"; } + .icon-resize-horizontal:before { content: "\f07e"; } + + .icon-bar-chart:before { content: "\f080"; } + .icon-twitter-sign:before { content: "\f081"; } + .icon-facebook-sign:before { content: "\f082"; } + .icon-camera-retro:before { content: "\f083"; } + .icon-key:before { content: "\f084"; } + .icon-cogs:before { content: "\f085"; } + .icon-comments:before { content: "\f086"; } + .icon-thumbs-up:before { content: "\f087"; } + .icon-thumbs-down:before { content: "\f088"; } + .icon-star-half:before { content: "\f089"; } + .icon-heart-empty:before { content: "\f08a"; } + .icon-signout:before { content: "\f08b"; } + .icon-linkedin-sign:before { content: "\f08c"; } + .icon-pushpin:before { content: "\f08d"; } + .icon-external-link:before { content: "\f08e"; } + + .icon-signin:before { content: "\f090"; } + .icon-trophy:before { content: "\f091"; } + .icon-github-sign:before { content: "\f092"; } + .icon-upload-alt:before { content: "\f093"; } + .icon-lemon:before { content: "\f094"; } + .icon-phone:before { content: "\f095"; } + .icon-check-empty:before { content: "\f096"; } + .icon-bookmark-empty:before { content: "\f097"; } + .icon-phone-sign:before { content: "\f098"; } + .icon-twitter:before { content: "\f099"; } + .icon-facebook:before { content: "\f09a"; } + .icon-github:before { content: "\f09b"; } + .icon-unlock:before { content: "\f09c"; } + .icon-credit-card:before { content: "\f09d"; } + .icon-rss:before { content: "\f09e"; } + + .icon-hdd:before { content: "\f0a0"; } + .icon-bullhorn:before { content: "\f0a1"; } + .icon-bell:before { content: "\f0a2"; } + .icon-certificate:before { content: "\f0a3"; } + .icon-hand-right:before { content: "\f0a4"; } + .icon-hand-left:before { content: "\f0a5"; } + .icon-hand-up:before { content: "\f0a6"; } + .icon-hand-down:before { content: "\f0a7"; } + .icon-circle-arrow-left:before { content: "\f0a8"; } + .icon-circle-arrow-right:before { content: "\f0a9"; } + .icon-circle-arrow-up:before { content: "\f0aa"; } + .icon-circle-arrow-down:before { content: "\f0ab"; } + .icon-globe:before { content: "\f0ac"; } + .icon-wrench:before { content: "\f0ad"; } + .icon-tasks:before { content: "\f0ae"; } + + .icon-filter:before { content: "\f0b0"; } + .icon-briefcase:before { content: "\f0b1"; } + .icon-fullscreen:before { content: "\f0b2"; } + + .icon-group:before { content: "\f0c0"; } + .icon-link:before { content: "\f0c1"; } + .icon-cloud:before { content: "\f0c2"; } + .icon-beaker:before { content: "\f0c3"; } + .icon-cut:before { content: "\f0c4"; } + .icon-copy:before { content: "\f0c5"; } + .icon-paper-clip:before { content: "\f0c6"; } + .icon-save:before { content: "\f0c7"; } + .icon-sign-blank:before { content: "\f0c8"; } + .icon-reorder:before { content: "\f0c9"; } + .icon-list-ul:before { content: "\f0ca"; } + .icon-list-ol:before { content: "\f0cb"; } + .icon-strikethrough:before { content: "\f0cc"; } + .icon-underline:before { content: "\f0cd"; } + .icon-table:before { content: "\f0ce"; } + + .icon-magic:before { content: "\f0d0"; } + .icon-truck:before { content: "\f0d1"; } + .icon-pinterest:before { content: "\f0d2"; } + .icon-pinterest-sign:before { content: "\f0d3"; } + .icon-google-plus-sign:before { content: "\f0d4"; } + .icon-google-plus:before { content: "\f0d5"; } + .icon-money:before { content: "\f0d6"; } + .icon-caret-down:before { content: "\f0d7"; } + .icon-caret-up:before { content: "\f0d8"; } + .icon-caret-left:before { content: "\f0d9"; } + .icon-caret-right:before { content: "\f0da"; } + .icon-columns:before { content: "\f0db"; } + .icon-sort:before { content: "\f0dc"; } + .icon-sort-down:before { content: "\f0dd"; } + .icon-sort-up:before { content: "\f0de"; } + + .icon-envelope-alt:before { content: "\f0e0"; } + .icon-linkedin:before { content: "\f0e1"; } + .icon-undo:before { content: "\f0e2"; } + .icon-legal:before { content: "\f0e3"; } + .icon-dashboard:before { content: "\f0e4"; } + .icon-comment-alt:before { content: "\f0e5"; } + .icon-comments-alt:before { content: "\f0e6"; } + .icon-bolt:before { content: "\f0e7"; } + .icon-sitemap:before { content: "\f0e8"; } + .icon-umbrella:before { content: "\f0e9"; } + .icon-paste:before { content: "\f0ea"; } + .icon-lightbulb:before { content: "\f0eb"; } + .icon-exchange:before { content: "\f0ec"; } + .icon-cloud-download:before { content: "\f0ed"; } + .icon-cloud-upload:before { content: "\f0ee"; } + + .icon-user-md:before { content: "\f0f0"; } + .icon-stethoscope:before { content: "\f0f1"; } + .icon-suitcase:before { content: "\f0f2"; } + .icon-bell-alt:before { content: "\f0f3"; } + .icon-coffee:before { content: "\f0f4"; } + .icon-food:before { content: "\f0f5"; } + .icon-file-alt:before { content: "\f0f6"; } + .icon-building:before { content: "\f0f7"; } + .icon-hospital:before { content: "\f0f8"; } + .icon-ambulance:before { content: "\f0f9"; } + .icon-medkit:before { content: "\f0fa"; } + .icon-fighter-jet:before { content: "\f0fb"; } + .icon-beer:before { content: "\f0fc"; } + .icon-h-sign:before { content: "\f0fd"; } + .icon-plus-sign-alt:before { content: "\f0fe"; } + + .icon-double-angle-left:before { content: "\f100"; } + .icon-double-angle-right:before { content: "\f101"; } + .icon-double-angle-up:before { content: "\f102"; } + .icon-double-angle-down:before { content: "\f103"; } + .icon-angle-left:before { content: "\f104"; } + .icon-angle-right:before { content: "\f105"; } + .icon-angle-up:before { content: "\f106"; } + .icon-angle-down:before { content: "\f107"; } + .icon-desktop:before { content: "\f108"; } + .icon-laptop:before { content: "\f109"; } + .icon-tablet:before { content: "\f10a"; } + .icon-mobile-phone:before { content: "\f10b"; } + .icon-circle-blank:before { content: "\f10c"; } + .icon-quote-left:before { content: "\f10d"; } + .icon-quote-right:before { content: "\f10e"; } + + .icon-spinner:before { content: "\f110"; } + .icon-circle:before { content: "\f111"; } + .icon-reply:before { content: "\f112"; } + .icon-github-alt:before { content: "\f113"; } + .icon-folder-close-alt:before { content: "\f114"; } + .icon-folder-open-alt:before { content: "\f115"; } + + .icon-blogger-sign:before,.icon-blogger:before,.icon-delicious:before,.icon-dribbble-sign:before,.icon-dribbble:before,.icon-dropbox:before,.icon-drupal:before,.icon-evernote-sign:before,.icon-evernote:before,.icon-flickr-sign:before,.icon-flickr:before,.icon-forrst-sign:before,.icon-forrst:before,.icon-foursquare-sign:before,.icon-foursquare:before,.icon-git-fork:before,.icon-hacker-news:before,.icon-instagram:before,.icon-lastfm-sign:before,.icon-lastfm:before,.icon-paypal:before,.icon-picasa-sign:before,.icon-picasa:before,.icon-reddit:before,.icon-share-this-sign:before,.icon-share-this:before,.icon-skype:before,.icon-soundcloud:before,.icon-spotify:before,.icon-stack-overflow:before,.icon-tumblr-sign:before,.icon-tumblr:before,.icon-vimeo-sign:before,.icon-vimeo:before,.icon-wordpress-sign:before,.icon-wordpress:before,.icon-yelp-sign:before,.icon-yelp:before,.icon-youtube-sign:before,.icon-youtube:before {font-family:'Font-Awesome-Social'; } + + .icon-dropbox:before { content: "\f300"; } + .icon-drupal:before { content: "\f301"; } + .icon-git-fork:before { content: "\f302"; } + .icon-instagram:before { content: "\f303"; } + .icon-share-this-sign:before { content: "\f304"; } + .icon-share-this:before { content: "\f305"; } + .icon-foursquare-sign:before { content: "\f306"; } + .icon-foursquare:before { content: "\f307"; } + .icon-hacker-news:before { content: "\f308"; } + .icon-skype:before { content: "\f309"; } + .icon-spotify:before { content: "\f30a"; } + .icon-soundcloud:before { content: "\f30b"; } + .icon-paypal:before { content: "\f30c"; } + .icon-youtube-sign:before { content: "\f30d"; } + .icon-youtube:before { content: "\f30e"; } + .icon-reddit:before { content: "\f30f"; } + .icon-blogger-sign:before { content: "\f310"; } + .icon-blogger:before { content: "\f311"; } + .icon-dribbble-sign:before { content: "\f312"; } + .icon-dribbble:before { content: "\f313"; } + .icon-evernote-sign:before { content: "\f314"; } + .icon-evernote:before { content: "\f315"; } + .icon-flickr-sign:before { content: "\f316"; } + .icon-flickr:before { content: "\f317"; } + .icon-forrst-sign:before { content: "\f318"; } + .icon-forrst:before { content: "\f319"; } + .icon-delicious:before { content: "\f31a"; } + .icon-lastfm-sign:before { content: "\f31b"; } + .icon-lastfm:before { content: "\f31c"; } + .icon-picasa-sign:before { content: "\f31d"; } + .icon-picasa:before { content: "\f31e"; } + .icon-stack-overflow:before { content: "\f320"; } + .icon-tumblr-sign:before { content: "\f321"; } + .icon-tumblr:before { content: "\f322"; } + .icon-vimeo-sign:before { content: "\f323"; } + .icon-vimeo:before { content: "\f324"; } + .icon-wordpress-sign:before { content: "\f325"; } + .icon-wordpress:before { content: "\f326"; } + .icon-yelp-sign:before { content: "\f327"; } + .icon-yelp:before { content: "\f328"; } + .icon-cloud-upload:before { content: "\f0ee"; } + .icon-cloud-download:before { content: "\f0ed"; } diff --git a/Unidad_03_HTML/HTML/036-spotless/fonts/FontAwesome.otf b/Unidad_03_HTML/HTML/036-spotless/fonts/FontAwesome.otf new file mode 100644 index 0000000..64049bf Binary files /dev/null and b/Unidad_03_HTML/HTML/036-spotless/fonts/FontAwesome.otf differ diff --git a/Unidad_03_HTML/HTML/036-spotless/fonts/fontawesome-social-webfont.eot b/Unidad_03_HTML/HTML/036-spotless/fonts/fontawesome-social-webfont.eot new file mode 100644 index 0000000..747d210 Binary files /dev/null and b/Unidad_03_HTML/HTML/036-spotless/fonts/fontawesome-social-webfont.eot differ diff --git a/Unidad_03_HTML/HTML/036-spotless/fonts/fontawesome-social-webfont.svg b/Unidad_03_HTML/HTML/036-spotless/fonts/fontawesome-social-webfont.svg new file mode 100644 index 0000000..3e6943c --- /dev/null +++ b/Unidad_03_HTML/HTML/036-spotless/fonts/fontawesome-social-webfont.svg @@ -0,0 +1,371 @@ + + + \ No newline at end of file diff --git a/Unidad_03_HTML/HTML/036-spotless/fonts/fontawesome-social-webfont.ttf b/Unidad_03_HTML/HTML/036-spotless/fonts/fontawesome-social-webfont.ttf new file mode 100644 index 0000000..4c3b623 Binary files /dev/null and b/Unidad_03_HTML/HTML/036-spotless/fonts/fontawesome-social-webfont.ttf differ diff --git a/Unidad_03_HTML/HTML/036-spotless/fonts/fontawesome-social-webfont.woff b/Unidad_03_HTML/HTML/036-spotless/fonts/fontawesome-social-webfont.woff new file mode 100644 index 0000000..99afeb6 Binary files /dev/null and b/Unidad_03_HTML/HTML/036-spotless/fonts/fontawesome-social-webfont.woff differ diff --git a/Unidad_03_HTML/HTML/036-spotless/fonts/fontawesome-webfont.eot b/Unidad_03_HTML/HTML/036-spotless/fonts/fontawesome-webfont.eot new file mode 100644 index 0000000..7d81019 Binary files /dev/null and b/Unidad_03_HTML/HTML/036-spotless/fonts/fontawesome-webfont.eot differ diff --git a/Unidad_03_HTML/HTML/036-spotless/fonts/fontawesome-webfont.svg b/Unidad_03_HTML/HTML/036-spotless/fonts/fontawesome-webfont.svg new file mode 100644 index 0000000..ba0afe5 --- /dev/null +++ b/Unidad_03_HTML/HTML/036-spotless/fonts/fontawesome-webfont.svg @@ -0,0 +1,284 @@ + + + \ No newline at end of file diff --git a/Unidad_03_HTML/HTML/036-spotless/fonts/fontawesome-webfont.ttf b/Unidad_03_HTML/HTML/036-spotless/fonts/fontawesome-webfont.ttf new file mode 100644 index 0000000..d461724 Binary files /dev/null and b/Unidad_03_HTML/HTML/036-spotless/fonts/fontawesome-webfont.ttf differ diff --git a/Unidad_03_HTML/HTML/036-spotless/fonts/fontawesome-webfont.woff b/Unidad_03_HTML/HTML/036-spotless/fonts/fontawesome-webfont.woff new file mode 100644 index 0000000..3c89ae0 Binary files /dev/null and b/Unidad_03_HTML/HTML/036-spotless/fonts/fontawesome-webfont.woff differ diff --git a/Unidad_03_HTML/HTML/036-spotless/images/banner.jpg b/Unidad_03_HTML/HTML/036-spotless/images/banner.jpg new file mode 100644 index 0000000..60c8f4f Binary files /dev/null and b/Unidad_03_HTML/HTML/036-spotless/images/banner.jpg differ diff --git a/Unidad_03_HTML/HTML/036-spotless/images/pic01.jpg b/Unidad_03_HTML/HTML/036-spotless/images/pic01.jpg new file mode 100644 index 0000000..ff11013 Binary files /dev/null and b/Unidad_03_HTML/HTML/036-spotless/images/pic01.jpg differ diff --git a/Unidad_03_HTML/HTML/036-spotless/images/pic02.jpg b/Unidad_03_HTML/HTML/036-spotless/images/pic02.jpg new file mode 100644 index 0000000..6bffd06 Binary files /dev/null and b/Unidad_03_HTML/HTML/036-spotless/images/pic02.jpg differ diff --git a/Unidad_03_HTML/HTML/036-spotless/images/pic03.jpg b/Unidad_03_HTML/HTML/036-spotless/images/pic03.jpg new file mode 100644 index 0000000..23a6192 Binary files /dev/null and b/Unidad_03_HTML/HTML/036-spotless/images/pic03.jpg differ diff --git a/Unidad_03_HTML/HTML/036-spotless/index.html b/Unidad_03_HTML/HTML/036-spotless/index.html new file mode 100644 index 0000000..cbd016c --- /dev/null +++ b/Unidad_03_HTML/HTML/036-spotless/index.html @@ -0,0 +1,118 @@ + + + + + +
+This is Spotless, a free, fully standards-compliant CSS template designed by FreeCSSTemplates.org. The photos in this template are from Fotogrph. This free template is released under a Creative Commons Attributions 3.0 license, so you are pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :)
+ Etiam posuere +
+ Posuere eleifend odio quisque semper augue mattis wisi maecenas ligula.
+ Etiam posuere +Posuere eleifend odio quisque semper augue mattis wisi maecenas ligula
+ Etiam posuere +Posuere eleifend odio quisque semper augue mattis wisi maecenas ligula
+ Etiam posuere +
+ Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum.
+ Read More +
+ Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum.
+ Read More +
+ Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum.
+ Read More +Copyright (c) 2013 Sitename.com. All rights reserved. | Photos by Fotogrph | Design by FreeCSSTemplates.org.
++ diff --git a/Unidad_03_HTML/HTML/038-ejemplo-css-pseudo-elementos.html b/Unidad_03_HTML/HTML/038-ejemplo-css-pseudo-elementos.html new file mode 100644 index 0000000..81b4a66 --- /dev/null +++ b/Unidad_03_HTML/HTML/038-ejemplo-css-pseudo-elementos.html @@ -0,0 +1,36 @@ + + + +
Un semidios con un poder portentoso gracias a su martillo, que le fue regalado por su padre, el gran OdÃn, padre de todos los Dioses de Asgard. Thor viaja por accidente a la tierra y desde ese momento pasa a ser su protector ante diversas fuerzas espaciales malignas.
+Conocido en español como "La Masa" (traducción literal del vocablo "Hulk"), se trata del alterego del cientÃfico Bruce Banner, quien se expone a un alto nivel de radiación Gamma y a partir de ese momento, cuando el humano es alterado, se transforma de inmediato en un ser con una fuerza que rivaliza con la del propio Supermán.
+Un multimillonario, empresario e ingeniero, Tony Stark sufre una lesión en el pecho durante un secuestro en el que sus captores tratan de obligarlo a construir un arma de destrucción masiva. Él crea en su lugar una poderosa armadura para salvar su vida y escapar de su cautiverio. Luego utiliza la armadura para proteger al mundo como Iron Man.
+ + diff --git a/Unidad_03_HTML/HTML/039-ejemplo-elemento-form-css-eventos.html b/Unidad_03_HTML/HTML/039-ejemplo-elemento-form-css-eventos.html new file mode 100644 index 0000000..c6f312e --- /dev/null +++ b/Unidad_03_HTML/HTML/039-ejemplo-elemento-form-css-eventos.html @@ -0,0 +1,183 @@ + + + +
+ 
+ Hermione es la que más sabe
+ 
+ 
+ Malfoy
+
+ 
+
+
+
+
+
+
+
+
+
+ 
