From 6c0eff284ac0f3ecfbfe49ee795cce728ddc44a5 Mon Sep 17 00:00:00 2001 From: Alumne Date: Mon, 29 Apr 2019 14:24:20 +0200 Subject: [PATCH] Final --- m1/index.html | 138 +++++++++++++++++++++++++++++++------------------- m1/style.css | 124 +++++++++++++++++++++++++++++++++------------ 2 files changed, 178 insertions(+), 84 deletions(-) diff --git a/m1/index.html b/m1/index.html index 3e954d7..db301db 100644 --- a/m1/index.html +++ b/m1/index.html @@ -1,58 +1,94 @@ + - -EXERCICI HTML-CSS - - - + + EXERCICI HTML-CSS + - - - - - 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

+
+
+
+ +
+ koala +
+

Figura: 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.

+ +
+
+
+ +
- + + \ No newline at end of file diff --git a/m1/style.css b/m1/style.css index b3bc789..d4376ee 100644 --- a/m1/style.css +++ b/m1/style.css @@ -1,43 +1,101 @@ +body { + /* Reset */ + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: verdana, sans-serif; + font-size: 120%; + font-weight: 160%; + background-image: "fondo.gif"; + background-repeat: repeat; + background-color: #f2f5fe; +} +#container { + width: 80%; + margin-right: 10%; + margin-left: 10%; + background-color: white; + overflow: auto; +} -/* 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 */ +#cabecera { + background-color: #233C9B; + Padding: 10px; +} -/* El contenedor tendrá las siguientes características: - ancho 80% color de fondo blanco */ +#cabecera a:hover { + color: #b5c4e3; +} +#texth1{ + color: #FFF; + font-family: georgia, serif; + font-size: 260%; + height: 35px; -/*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;*/ +#fotoKoala { + display: block; + margin-left: auto; + margin-right: auto; + height: 200px; + width: 200px; +} +#menuNavegacion li { + display: inline-block; + padding-top: 5px; + padding-right: 15px; + padding-bottom: 5px; + padding-left: 15px; + font-size: 75%; + font-style: bold; + background-color: #253575; +} -/* 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.*/ +#menuNavegacion li a { + color: #b5c4e3; + text-decoration-line: none; +} +#menuNavegacion a:hover { + background-color: #31479B; + cursor: pointer; +} + +ul#menuNavegacion{ + text-align: center; + +} +#primera p { + align-content: center; + float: left; + width: 79%; + top: 30px; + right: 10px; + bottom: 60px; + left: 10px; +} /* 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; -*/ + - tamaño de fuente de 3/4 de la inicial */ +#lateral { + float: right; + width: 19%; + font-size: 75%; +} +#clear{ + clear: both; +} +#peu { + display: inline-block; + text-align: center; + font-size: 75%; + width: 100%; + top: 5px; + bottom: 5px; + color: white; + background-color: #233C9B; + height: 40px; +} \ No newline at end of file