From 03d330a26662d324fb375069e36eaf43f7bcb815 Mon Sep 17 00:00:00 2001 From: Alumne Date: Mon, 29 Apr 2019 13:52:25 +0200 Subject: [PATCH 1/6] Dani - test CSS --- m1/{ => css}/style.css | 29 +++++++- m1/index.html | 148 +++++++++++++++++++++++++++-------------- 2 files changed, 126 insertions(+), 51 deletions(-) rename m1/{ => css}/style.css (51%) diff --git a/m1/style.css b/m1/css/style.css similarity index 51% rename from m1/style.css rename to m1/css/style.css index b3bc789..a325b28 100644 --- a/m1/style.css +++ b/m1/css/style.css @@ -1,4 +1,31 @@ - +* { + margin: 0; + padding: 0; + border: 0; + vertical-align: baseline; +} +html{background-image: url("../fondo.gif");background-repeat: repeat-x;background-position: center;background-size: auto 100%;} +header{background-color: #233C9B;color: #f9f9fd;text-align: left;} +header>div{font-family: Georgia, 'Times New Roman', Times, serif !important;font-size: 260%;padding: 10px;line-height: 35px;text-decoration-color: #fbf9f9;} +header a{color: #FFF;} +header:hover{color: #B5C4E3;} +body{text-align: center;margin: 0 10%;position: relative;display: inline-block;font-family: Verdana, Geneva, Tahoma, sans-serif;} +body>div:first-of-type{background-color: white;position: relative;display: inline-block;} +p{text-align: justify;margin: 20px 0;} +body>div>ul:first-of-type{margin: 5px;font-size: 0.75em;color: #B5C4E3;font-weight: bold;/*! background-color: #253575; */} +ul:hover{cursor: pointer;} +body>div>ul:first-of-type>li{display: inline-block;margin: 5px;background-color: #253575;padding: 5px 15px;} +body>div>ul:first-of-type>li:hover{background-color: #fff;} +main{width: 79%;float: left;padding: 30px 10px 60px 10px;} +figure>img{height: 200px;width: 200px;} +aside{float: right;width: 19%;font-size: 0.75em;display: block;} +aside>ol{/*! text-align: left; */padding: 5px;} +aside ul{margin-left: 40px !important;} +ol>li{display: block;font-weight: bold;padding: 10px;text-align: left;} +li>ul{font-weight: normal;margin: 10px;margin: 10px 0;list-style-type: disc;} +li>ul>li{margin: 10px 0;} +footer{height: 100%;font-size: 0.75em;color: #fff;background-color: #233C9B;position: relative;} +footer>div{width: 100%;display: block;height: 40px;text-align: center;padding: 5px 0;line-height: 67px;} /* 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 */ diff --git a/m1/index.html b/m1/index.html index 3e954d7..09440b5 100644 --- a/m1/index.html +++ b/m1/index.html @@ -1,58 +1,106 @@ + - -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 +
+
+ + + + +
+ + +
+ +
+ +
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 From 27e48be94fb47dae5b76166c028cc2f98936c14d Mon Sep 17 00:00:00 2001 From: Alumne Date: Mon, 29 Apr 2019 14:03:34 +0200 Subject: [PATCH 2/6] 2nd commit --- m1/css/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/m1/css/style.css b/m1/css/style.css index a325b28..a19d910 100644 --- a/m1/css/style.css +++ b/m1/css/style.css @@ -9,7 +9,7 @@ header{background-color: #233C9B;color: #f9f9fd;text-align: left;} header>div{font-family: Georgia, 'Times New Roman', Times, serif !important;font-size: 260%;padding: 10px;line-height: 35px;text-decoration-color: #fbf9f9;} header a{color: #FFF;} header:hover{color: #B5C4E3;} -body{text-align: center;margin: 0 10%;position: relative;display: inline-block;font-family: Verdana, Geneva, Tahoma, sans-serif;} +body{text-align: center;margin: 0 10%;position: relative;display: inline-block;font-family: Verdana, Geneva, Tahoma, sans-serif;font-size: 120%;line-height: 160%;} body>div:first-of-type{background-color: white;position: relative;display: inline-block;} p{text-align: justify;margin: 20px 0;} body>div>ul:first-of-type{margin: 5px;font-size: 0.75em;color: #B5C4E3;font-weight: bold;/*! background-color: #253575; */} From d0efc80ab0530d8bad34244bbd56cc4cb2cfeca5 Mon Sep 17 00:00:00 2001 From: Dani Date: Mon, 29 Apr 2019 16:02:25 +0200 Subject: [PATCH 3/6] 1a revisio (fora de temps) --- m1/css/style.css | 50 ++++++++++++++++++++++++------------------------ m1/index.html | 27 +++++++------------------- 2 files changed, 32 insertions(+), 45 deletions(-) diff --git a/m1/css/style.css b/m1/css/style.css index a19d910..4f8678c 100644 --- a/m1/css/style.css +++ b/m1/css/style.css @@ -12,56 +12,56 @@ header:hover{color: #B5C4E3;} body{text-align: center;margin: 0 10%;position: relative;display: inline-block;font-family: Verdana, Geneva, Tahoma, sans-serif;font-size: 120%;line-height: 160%;} body>div:first-of-type{background-color: white;position: relative;display: inline-block;} p{text-align: justify;margin: 20px 0;} -body>div>ul:first-of-type{margin: 5px;font-size: 0.75em;color: #B5C4E3;font-weight: bold;/*! background-color: #253575; */} +body>div>ul:first-of-type{margin: 5px;font-size: 0.75em;color: #B5C4E3;font-weight: bold;} ul:hover{cursor: pointer;} body>div>ul:first-of-type>li{display: inline-block;margin: 5px;background-color: #253575;padding: 5px 15px;} body>div>ul:first-of-type>li:hover{background-color: #fff;} -main{width: 79%;float: left;padding: 30px 10px 60px 10px;} +main{width: 79%;display: inline-block;padding: 30px 10px 60px 10px;} figure>img{height: 200px;width: 200px;} -aside{float: right;width: 19%;font-size: 0.75em;display: block;} +aside{float: right;width: 19%;font-size: 0.75em;} aside>ol{/*! text-align: left; */padding: 5px;} aside ul{margin-left: 40px !important;} ol>li{display: block;font-weight: bold;padding: 10px;text-align: left;} li>ul{font-weight: normal;margin: 10px;margin: 10px 0;list-style-type: disc;} li>ul>li{margin: 10px 0;} -footer{height: 100%;font-size: 0.75em;color: #fff;background-color: #233C9B;position: relative;} -footer>div{width: 100%;display: block;height: 40px;text-align: center;padding: 5px 0;line-height: 67px;} -/* 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 +footer{font-size: 0.75em;color: #fff;background-color: #233C9B;position: relative;display: flex;align-items: end;height: 40px;} +footer>span{width: 100%;padding: 5px 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: +/* 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: +/*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*/ +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;*/ +/* 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: +/* 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: +/* El elemento lateral tendrá las siguientes características: - ancho 19% - - tamaño de fuente de 3/4 de la inicial + - 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 +/* 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 diff --git a/m1/index.html b/m1/index.html index 09440b5..68b802c 100644 --- a/m1/index.html +++ b/m1/index.html @@ -2,22 +2,17 @@ - + EXERCICI HTML-CSS - - - - + +
Mi sitio web
- - -
    @@ -34,7 +29,7 @@
    -
    Figura: descripción de la foto
    +
    Figura: Koala

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare sapien ac nibh @@ -57,6 +52,8 @@ ultricies, elit felis molestie sem, ac scelerisque turpis tortor non lacus.

    + +
- - - - - - -
-
-
© 2019 Dani Llobet
+ © 2019 Dani Llobet
- - \ No newline at end of file From d194761737f36fdb1e8f39741183c426654cb5cd Mon Sep 17 00:00:00 2001 From: Dani Date: Mon, 29 Apr 2019 21:13:52 +0200 Subject: [PATCH 4/6] 2a revisio (fora de temps) --- m1/css/style.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/m1/css/style.css b/m1/css/style.css index 4f8678c..f1dc6f1 100644 --- a/m1/css/style.css +++ b/m1/css/style.css @@ -15,17 +15,17 @@ p{text-align: justify;margin: 20px 0;} body>div>ul:first-of-type{margin: 5px;font-size: 0.75em;color: #B5C4E3;font-weight: bold;} ul:hover{cursor: pointer;} body>div>ul:first-of-type>li{display: inline-block;margin: 5px;background-color: #253575;padding: 5px 15px;} -body>div>ul:first-of-type>li:hover{background-color: #fff;} +body>div>ul:first-of-type>li:hover{background-color: #31479B;} main{width: 79%;display: inline-block;padding: 30px 10px 60px 10px;} figure>img{height: 200px;width: 200px;} aside{float: right;width: 19%;font-size: 0.75em;} aside>ol{/*! text-align: left; */padding: 5px;} aside ul{margin-left: 40px !important;} -ol>li{display: block;font-weight: bold;padding: 10px;text-align: left;} +ol>li{display: block;font-weight: bold;/*! padding: 10px; */text-align: left;} li>ul{font-weight: normal;margin: 10px;margin: 10px 0;list-style-type: disc;} li>ul>li{margin: 10px 0;} -footer{font-size: 0.75em;color: #fff;background-color: #233C9B;position: relative;display: flex;align-items: end;height: 40px;} -footer>span{width: 100%;padding: 5px 0;} +footer{font-size: 0.75em;color: #fff;background-color: #233C9B;position: relative;height: 40px;} +footer>span{width: 100%;padding: 5px 0;line-height: 3em;} /* 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 */ From 2ba2c20e7f307d2c704839a15f4d72372c4dd27d Mon Sep 17 00:00:00 2001 From: Dani Date: Thu, 2 May 2019 21:43:54 +0200 Subject: [PATCH 5/6] 3a revisio --- m1/css/style.css | 32 ++++++++++++++------------------ m1/index.html | 35 +++++++++++++++++++---------------- 2 files changed, 33 insertions(+), 34 deletions(-) diff --git a/m1/css/style.css b/m1/css/style.css index f1dc6f1..3ce4801 100644 --- a/m1/css/style.css +++ b/m1/css/style.css @@ -1,23 +1,19 @@ -* { - margin: 0; - padding: 0; - border: 0; - vertical-align: baseline; -} +* {margin: 0;padding: 0;border: 0;vertical-align: baseline;} html{background-image: url("../fondo.gif");background-repeat: repeat-x;background-position: center;background-size: auto 100%;} +body{text-align: center;margin: 0 10%;position: relative;display: inline-block;font: normal normal 120%/160% Verdana;} header{background-color: #233C9B;color: #f9f9fd;text-align: left;} -header>div{font-family: Georgia, 'Times New Roman', Times, serif !important;font-size: 260%;padding: 10px;line-height: 35px;text-decoration-color: #fbf9f9;} -header a{color: #FFF;} -header:hover{color: #B5C4E3;} -body{text-align: center;margin: 0 10%;position: relative;display: inline-block;font-family: Verdana, Geneva, Tahoma, sans-serif;font-size: 120%;line-height: 160%;} -body>div:first-of-type{background-color: white;position: relative;display: inline-block;} -p{text-align: justify;margin: 20px 0;} -body>div>ul:first-of-type{margin: 5px;font-size: 0.75em;color: #B5C4E3;font-weight: bold;} +header>h1{padding: 10px;text-decoration-color: #fbf9f9;font: bold normal 260%/35px Georgia;} +header a:hover{color: #B5C4E3;} +header a{color: #fff} +#mainPage{background-color: white;position: relative;display: inline-block;} +#mainMenu>ul{margin: 5px;font-size: 0.75em;color: #B5C4E3;font-weight: bold;} ul:hover{cursor: pointer;} -body>div>ul:first-of-type>li{display: inline-block;margin: 5px;background-color: #253575;padding: 5px 15px;} -body>div>ul:first-of-type>li:hover{background-color: #31479B;} -main{width: 79%;display: inline-block;padding: 30px 10px 60px 10px;} -figure>img{height: 200px;width: 200px;} +#mainMenu>ul>li{display: inline-block;margin: 5px;background-color: #253575;padding: 5px 15px;} +#mainMenu>ul>li:hover{background-color: #31479B;} +#mainMenu>ul>li>a{color: #B5C4E3;text-decoration: none;} +#mainContent{width: 79%;display: inline-block;padding: 30px 10px 60px 10px;} +#mainContent>figure>img{height: 200px;width: 200px;} +#mainContent>p{text-align: justify;margin: 20px 0;} aside{float: right;width: 19%;font-size: 0.75em;} aside>ol{/*! text-align: left; */padding: 5px;} aside ul{margin-left: 40px !important;} @@ -25,7 +21,7 @@ ol>li{display: block;font-weight: bold;/*! padding: 10px; */text-align: left;} li>ul{font-weight: normal;margin: 10px;margin: 10px 0;list-style-type: disc;} li>ul>li{margin: 10px 0;} footer{font-size: 0.75em;color: #fff;background-color: #233C9B;position: relative;height: 40px;} -footer>span{width: 100%;padding: 5px 0;line-height: 3em;} +footer>h5{width: 100%;padding: 5px 0;line-height: 2.5em;} /* 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 */ diff --git a/m1/index.html b/m1/index.html index 68b802c..eae6129 100644 --- a/m1/index.html +++ b/m1/index.html @@ -6,30 +6,32 @@ EXERCICI HTML-CSS +
- +

Mi sitio web

- -
-
    -
  • Inicio
    • -
  • Blog
    • -
  • Sobre mi
    • -
  • Fotos
    • -
  • Portfolio
    • -
  • Contacto
    • -
  • Enlaces
    • -
+
+ + -
+
-
Figura: Koala
+
Koala en plena producción

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare sapien ac nibh @@ -87,7 +89,8 @@

- © 2019 Dani Llobet +
© 2019 Dani Llobet
+ \ No newline at end of file From d11d61197151ffb727c30aaca46882f77a825a37 Mon Sep 17 00:00:00 2001 From: Dani Date: Sat, 4 May 2019 12:06:57 +0200 Subject: [PATCH 6/6] 4th review (main section semantics added) --- m1/css/style.css | 4 +-- m1/index.html | 63 +++++++++++++++++++++++++++++------------------- 2 files changed, 40 insertions(+), 27 deletions(-) diff --git a/m1/css/style.css b/m1/css/style.css index 3ce4801..b8b0f44 100644 --- a/m1/css/style.css +++ b/m1/css/style.css @@ -12,8 +12,8 @@ ul:hover{cursor: pointer;} #mainMenu>ul>li:hover{background-color: #31479B;} #mainMenu>ul>li>a{color: #B5C4E3;text-decoration: none;} #mainContent{width: 79%;display: inline-block;padding: 30px 10px 60px 10px;} -#mainContent>figure>img{height: 200px;width: 200px;} -#mainContent>p{text-align: justify;margin: 20px 0;} +#mainContent>section>figure>img{height: 200px;width: 200px;} +#mainContent>section>article>p{text-align: justify;margin: 20px 0;} aside{float: right;width: 19%;font-size: 0.75em;} aside>ol{/*! text-align: left; */padding: 5px;} aside ul{margin-left: 40px !important;} diff --git a/m1/index.html b/m1/index.html index eae6129..cef3978 100644 --- a/m1/index.html +++ b/m1/index.html @@ -28,31 +28,44 @@

Mi sitio web

- -
- -
Koala en plena producción
-
- -

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

+
+ +
+ +
Koala en plena producción
+
+ +
+

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. +

+
+