Skip to content

Examen #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
igflub wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Examen #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3fe9f28
Hecho
test1test2testte Apr 29, 2019
4edc05a
Hecho
test1test2testte Apr 29, 2019
533cb0e
Modificado
test1test2testte Apr 29, 2019
231f71a
HOla
test1test2testte Apr 29, 2019
9af547c
Ignasi
test1test2testte Apr 29, 2019
a34b6a8
Ignasi Final
test1test2testte Apr 29, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
112 changes: 65 additions & 47 deletions m1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,58 +1,76 @@
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8"/>
<title>EXERCICI HTML-CSS</title>
<!-- <link rel="stylesheet" href="css/style.css"> -->


<meta charset="utf-8"/>
<title>EXERCICI HTML-CSS</title>
<link rel="stylesheet" href="style.css">
</head>


<body>

<!-- Cabecera -->
<!-- Título con hipertexto al propio contenido del web-->
Mi sitio web
<!-- Menú de navegación -->

Inicio
Blog
Sobre mi
Fotos
Portfolio
Contacto
Enlaces

<!-- Contenido Principal -->
<!-- 1. ---fotografia koala.png con pie de foto:"descripción de la foto" de 200*200 px-->
<!-- 2. Texto -->
<p>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.</p>
<p>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.</p>
<!-- Contenido relacionado-->
<!-- Tres apartados con lista desordenada de enlaces:
1. Categorías
<div class="cuerpo">
<header>
<div class="titulo">
<a href="../" class="misitio"><h1>Mi sitio web</h1></a>
</div>
<nav>
<ul>
<li><a href="#" title="Enlace genérico">Inicio</a></li>
<li><a href="#" title="Enlace genérico">Blog</a></li>
<li><a href="#" title="Enlace genérico">Sobre mi</a></li>
<li><a href="#" title="Enlace genérico">Fotos</a></li>
<li><a href="#" title="Enlace genérico">Portfolio</a></li>
<li><a href="#" title="Enlace genérico">Contacto</a></li>
<li><a href="#" title="Enlace genérico">Enlaces</a></li>
</ul>
</nav>
</header>
<br>

@rglepe rglepe May 1, 2019

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No son necesarios los saltos de línea. Estamos estructurando. Los espacios los daremos con CSS.

<main>
<article>
<figure>
<img src="koala.jpg" alt="Koala" >
<figcaption>Descripción de la foto</figcaption>
</figure>

Categoría 1
Categoría 2
Cateogría 3
Categoría 4
Categoría 5

2. Archivo
Marzo 2019
Febrero 2019
Enero 2019
Diciembre 2018
<p>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.</p>
<p>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.</p>
</article>

</main>
<aside>
<h2>Categorias</h2>
<br>
<ul>
<li><a href="#" title="Enlace genérico">Categoria 1</a></li>
<li><a href="#" title="Enlace genérico">Categoria 2</a></li>
<li><a href="#" title="Enlace genérico">Categoria 3</a></li>
<li><a href="#" title="Enlace genérico">Categoria 4</a></li>
<li><a href="#" title="Enlace genérico">Categoria 5</a></li>
</ul>
<br>
<h2>Archivo</h2>
<br>
<ul>
<li><a href="#" title="Enlace genérico">Marzo 2019</a></li>
<li><a href="#" title="Enlace genérico">Febrero 2019</a></li>
<li><a href="#" title="Enlace genérico">Diciembre 2019i</a></li>
<li><a href="#" title="Enlace genérico">Enero 2019</a></li>
</ul>
<br>
<h2>Enlaces</h2>
<br>
<ul>
<li><a href="#" title="Enlace genérico">Enlace 1</a></li>
<li><a href="#" title="Enlace genérico">Enlace 2</a></li>
<li><a href="#" title="Enlace genérico">Enlace 3</a></li>
<li><a href="#" title="Enlace genérico">Enlace 4</a></li>
<li><a href="#" title="Enlace genérico">Enlace 5</a></li>

3. Enlaces
Enlace 1
Enlace 2
...
Enlace 5
</ul>

<!-- Pie de pagina -->
© 2019 Vuestro nombre y apellidos
</aside>
<footer>
<p>© 2019 Ignasi Flaquer</p>
</footer>
</div>
</body>
</html>
84 changes: 79 additions & 5 deletions m1/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,44 @@
. 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 */
body {
margin: 0%;
padding: 0%;
font-family: Verdana, Tahoma, sans-serif;
font-size: 120%;
font-weight: 160%;
background-image: url(./fondo.gif);
background-repeat: repeat-x;


}

.cuerpo{
margin: 10%;
overflow: hidden;

}

/*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;
color de texto: #FFF, fuente georgia, serif y tamaño 260%. Al pasar el mouse por encima tomará el color: ;
Altura de línea: 35px*/

.titulo{
padding: 10px;
background: #233C9B;
color: #FFF;
font-weight: 35px;

}
.titulo:hover{
color:#B5C4E3;
}


/* 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
Expand All @@ -23,7 +50,55 @@ Altura de línea: 35px*/
- 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;*/
nav ul{
text-align: center;
}
nav ul li{
background-color: #253575;
margin-right: 5px;
display: inline-block;
padding: 5px 15px;
}
nav ul li a{
font-size: 95%;
text-decoration: none;
color: #b5c4e3;
}
nav ul li:hover{
background-color: #31479b;
}
img{
width:200px;
height:200px;
display: block;
margin: auto;
}
figcaption{
text-align: center;
}

article {
width: 79%;
float: left;
padding: 30px 10px 60px 10px;
background-color: #FFF;
}
aside {
width: 19%;
float: left;
font-size: 0.85rem;
padding: 30px 10px 60px 10px;
background-color: #FFF;
}
footer{
clear: both;
font-size: 90%;
padding: 5px 0;
color: #fff;
text-align: center;
background: #233C9B;
font-weight: 39px;
}

/* La sección principal tendrá las siguientes características:
- ancho: 79%
Expand All @@ -39,5 +114,4 @@ Altura de línea: 35px*/
- color de la fuente blanco
- color de fondo: #233C9B
- altura del elemento 40px;
*/

*/