From aa7d670fae8dfe8ea6ca79f6270b148881d7de67 Mon Sep 17 00:00:00 2001 From: admin Date: Mon, 29 Apr 2019 13:43:23 +0200 Subject: [PATCH] version --- m1/{ => assets}/fondo.gif | Bin m1/{ => assets}/koala.jpg | Bin m1/html-css.md | 15 ---- m1/index.html | 154 +++++++++++++++++++++++++------------- m1/style.css | 43 ----------- m1/styles/style.css | 142 +++++++++++++++++++++++++++++++++++ 6 files changed, 244 insertions(+), 110 deletions(-) rename m1/{ => assets}/fondo.gif (100%) rename m1/{ => assets}/koala.jpg (100%) delete mode 100644 m1/html-css.md delete mode 100644 m1/style.css create mode 100644 m1/styles/style.css diff --git a/m1/fondo.gif b/m1/assets/fondo.gif similarity index 100% rename from m1/fondo.gif rename to m1/assets/fondo.gif diff --git a/m1/koala.jpg b/m1/assets/koala.jpg similarity index 100% rename from m1/koala.jpg rename to m1/assets/koala.jpg diff --git a/m1/html-css.md b/m1/html-css.md deleted file mode 100644 index fc822b8..0000000 --- a/m1/html-css.md +++ /dev/null @@ -1,15 +0,0 @@ -# test html-css - -El ejercicio consiste en crear la estructura de una página web tal y como se indica en las instrucciones de index.html y aplicar el formato con CSS siguiendo las instrucciones contenidas en el fichero style.css. - -El resultado final debe ser igual al siguiente: - -![test](https://imgur.com/WsXymn9.png) - -El proceso a seguir será el expuesto a continuación: - - 1. hacer `fork` del repositorio a vuestro repositorio - 2. clonar vuestro repositorio al git local - 3. modificar los ficheros index.html y style.css - 4. subirlos a vuestro repositorio - 5. hacer pull-request con el nombre incluido en el mensaje diff --git a/m1/index.html b/m1/index.html index 3e954d7..413cc3a 100644 --- a/m1/index.html +++ b/m1/index.html @@ -1,58 +1,108 @@ - + + - -EXERCICI HTML-CSS - - - + + + + + Mi sitio Web - - - - - Mi sitio web - - - Inicio - Blog - Sobre mi - Fotos - Portfolio - Contacto - Enlaces - - - - -

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare sapien ac nibh vulputate feugiat. Morbi euismod velit sit amet libero volutpat ultrices in quis sem. Sed sit amet placerat sem. Curabitur vitae lectus nec purus accumsan faucibus. Donec vitae volutpat tortor. Suspendisse tempor rutrum urna, in consequat est tincidunt vitae. Cras et ligula at felis placerat tempor. Fusce elementum metus non justo luctus iaculis.

-

Donec ligula arcu, sagittis lacinia nibh et, consequat gravida turpis. Aenean nec scelerisque felis. Integer nec odio sed lorem mattis rhoncus quis quis nibh. Praesent non fringilla nisi. Duis porta placerat mattis. Aenean in mollis odio, at egestas massa. Quisque in lectus magna. Vestibulum vel faucibus massa, vel varius tortor. Maecenas et laoreet neque, ut semper neque. Suspendisse aliquet, nisl vel pharetra ultricies, elit felis molestie sem, ac scelerisque turpis tortor non lacus.

- - - © 2019 Vuestro nombre y apellidos +
+ +
+

Mi sitio Web

+ +
+ +
+ + + +
+
+
+ fotografía de un koala +
"descripción de la foto"
+
+
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare sapien ac nibh vulputate feugiat. Morbi euismod velit sit amet libero volutpat ultrices in quis sem. Sed sit amet placerat sem. Curabitur vitae lectus nec purus accumsan + faucibus. Donec vitae volutpat tortor. Suspendisse tempor rutrum urna, in consequat est tincidunt vitae. Cras et ligula at felis placerat tempor. Fusce elementum metus non justo luctus iaculis.

+

Donec ligula arcu, sagittis lacinia nibh et, consequat gravida turpis. Aenean nec scelerisque felis. Integer nec odio sed lorem mattis rhoncus quis quis nibh. Praesent non fringilla nisi. Duis porta placerat mattis. Aenean in mollis odio, + at egestas massa. Quisque in lectus magna. Vestibulum vel faucibus massa, vel varius tortor. Maecenas et laoreet neque, ut semper neque. Suspendisse aliquet, nisl vel pharetra ultricies, elit felis molestie sem, ac scelerisque turpis + tortor non lacus.

+ +
+ +
+

©Raphael Boury

+ +
+ +
+ + + + + +
+ + - + + \ No newline at end of file diff --git a/m1/style.css b/m1/style.css deleted file mode 100644 index b3bc789..0000000 --- a/m1/style.css +++ /dev/null @@ -1,43 +0,0 @@ - -/* El bloque de reset tendrá las siguientes características: -. márgenes, padding, fuente (verdana, sans-serif con tamaño 120% y altura 160%) y fondo con color (#F2F5FE) e imagen (fondo.gif) repetida -en el eje horizontal */ - -/* El contenedor tendrá las siguientes características: - ancho 80% color de fondo blanco */ - -/*La cabecera de la página contendrá el título con enlace al directorio del contenido de la página. Las características serán: -Fondo: -Color:#233C9B -Padding: 10px; -Texto: -color de texto: #FFF, fuente georgia, serif y tamaño 260%. Al pasar el mouse por encima tomará el color: #B5C4E3; -Altura de línea: 35px*/ - -/* Al menú de navegación se le aplicará el siguiente formato: - - Estará centrado con respecto a la cabecera - - los elementos estarán separados por un espacio de 5px - - la fuente será 3/4 de la inicial, en negrita y de color #B5C4E3 - - los enlaces no estarán subrayados - - el cursor tomará la forma de puntero al pasar por encima - - los elementos tendrán un espacio de relleno de 5px por arriba y abajo y 15px izqda-dcha. - - El fondo del elemento será #253575 - - Al pasar el mouse por encima adquirirá el color de fondo #31479B;*/ - - -/* La sección principal tendrá las siguientes características: - - ancho: 79% - - relleno de texto superior, derecha, inferior, izquierda de 30px, 10px, 60px y 10px, respectivamente.*/ - -/* El elemento lateral tendrá las siguientes características: - - ancho 19% - - tamaño de fuente de 3/4 de la inicial - -/* El pie del documento tendrá las siguientes características: - - tamaño de fuente de 3/4 de la inicial - - relleno del texto 5px por arriba y abajo - - color de la fuente blanco - - color de fondo: #233C9B - - altura del elemento 40px; -*/ - diff --git a/m1/styles/style.css b/m1/styles/style.css new file mode 100644 index 0000000..35d8d15 --- /dev/null +++ b/m1/styles/style.css @@ -0,0 +1,142 @@ +/* El bloque de reset tendrá las siguientes características: +. márgenes, padding, fuente (verdana, sans-serif con tamaño 120% y altura 160%) y fondo con color (#F2F5FE) e imagen (fondo.gif) repetida +en el eje horizontal */ + +html { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: Verdana, sans-serif; + font-size: 120%; + line-height: 160%; + background-color: #F2F5FE; + background-image: url("fondo.gif"); + background-repeat: repeat-x; +} + + +/* El contenedor tendrá las siguientes características: + ancho 80% color de fondo blanco */ + +.container { + width: 80%; + background-color: white; + margin: auto; +} + + +/*La cabecera de la página contendrá el título con enlace al directorio del contenido de la página. Las características serán: +Fondo: +Color:#233C9B +Padding: 10px; +Texto: +color de texto: #FFF, fuente georgia, serif y tamaño 260%. Al pasar el mouse por encima tomará el color: #B5C4E3; +Altura de línea: 35px*/ + +h1 { + font-size: inherit; +} + +#img-koala { + width: 200px; + height: 200px; +} + +header { + background-color: #233C9B; + padding: 10px; + color: #FFF; + font-family: georgia, serif; + font-size: 2.6rem; + line-height: 35px; +} + +#header-title a:hover { + color: #B5C4E3; +} + +#header-title a:visited { + color: #FFF; +} + + +/* Al menú de navegación se le aplicará el siguiente formato: + - Estará centrado con respecto a la cabecera + - los elementos estarán separados por un espacio de 5px + - la fuente será 3/4 de la inicial, en negrita y de color #B5C4E3 + - los enlaces no estarán subrayados + - el cursor tomará la forma de puntero al pasar por encima + - los elementos tendrán un espacio de relleno de 5px por arriba y abajo y 15px izqda-dcha. + - El fondo del elemento será #253575 + - Al pasar el mouse por encima adquirirá el color de fondo #31479B;*/ + +.center { + text-align: center; +} + +.top-nav li { + display: inline-block; + padding: 5px; + font-weight: 700; + font-size: 0.9rem; + color: #B5C4E3; +} + +.top-nav li>a { + background-color: #253575; + text-decoration: none; + padding: 5px 15px; + cursor: pointer; +} + +.top-nav li>a:visited { + color: inherit; +} + + +/* La sección principal tendrá las siguientes características: + - ancho: 79% + - relleno de texto superior, derecha, inferior, izquierda de 30px, 10px, 60px y 10px, respectivamente.*/ + +main { + width: 79%; + padding: 30px 10px 60px 10px; + background-color: white; + float: left; +} + + +/* El elemento lateral tendrá las siguientes características: + - ancho 19% + - tamaño de fuente de 3/4 de la inicial*/ + +aside { + width: 19%; + font-size: 0.9rem; + background-color: white; + float: right; + position: relative; + right: 1.75em; +} + +aside>h2 { + color: #253575; +} + + +/* El pie del documento tendrá las siguientes características: + - tamaño de fuente de 3/4 de la inicial + - relleno del texto 5px por arriba y abajo + - color de la fuente blanco + - color de fondo: #233C9B + - altura del elemento 40px; +*/ + +footer { + text-align: center; + font-size: 0.9rem; + padding: 5px; + color: white; + background-color: #233C9B; + line-height: 40px; +} \ No newline at end of file