Skip to content

Carlos Jordán Test #8

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
JCJV2019 wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Carlos Jordán Test #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
98eea19
Carlos Jordan Test
JCJV2019 Apr 29, 2019
ea2a48e
Carlos Jordan Test II
JCJV2019 Apr 29, 2019
388a6e4
Carlos Jordan Test III
JCJV2019 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
96 changes: 96 additions & 0 deletions m1/style.css → m1/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,99 @@
body {
cursor: default;
margin: 0;
padding: 0;
border: 0;
font-family: Verdana, sans-serif;
font-size: 120%;
line-height: 160%;
background-color: #F2F5FE;
background-image: url("../images/fondo.gif");
background-repeat: repeat-x;


}

.Container {
width: 80%;
position: static;
background-color: white;
margin: auto;

}

.Header {
background-color:#233C9B;
Padding: 10px;
font-family: georgia, serif;
font-size: 260% ;
line-height: 35px;
}

.Header a {
color: #FFF;
}

.Header a:hover {
color: #B5C4E3;
}

.Menu {
text-align: center;
}

ul.Nav {
display: ruby;
}

li > a.Nav {
text-decoration: none;
margin: 5px;
padding: 5px 15px 5px 15px;
color: #B5C4E3;
font-size: 0.75em;
background-color: #253575;
cursor: pointer; ;
font-weight: bold;
}

a.Nav:hover {
background-color: #31479B;
}

.Imagen {
font-size: 0.75em;
display: grid;
margin: 0 auto;
text-align: center;
}

img[alt="Koala"] {
width: 200px; height: 200px;
margin: 0 auto;
}

.Main {
float:left;
width: 79%;
padding: 30px 10px 60px 10px;
}

.Aside {
float: right;
width: 19%;
font-size: 0.75em;

}

.Footer {
clear:both;
font-size: 0.75em;
padding: 5px 5px;
text-align: center;
height: 40px;
color: white;
background-color: #233C9B;
}

/* 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
Expand Down
0 m1/fondo.gif → m1/images/fondo.gif
View file
Open in desktop
File renamed without changes
0 m1/koala.jpg → m1/images/koala.jpg
View file
Open in desktop
File renamed without changes
95 changes: 84 additions & 11 deletions m1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,32 +3,106 @@
<head>
<meta charset=utf-8"/>
<title>EXERCICI HTML-CSS</title>
<!-- <link rel="stylesheet" href="css/style.css"> -->


<link rel="stylesheet" href="css/style.css">

</head>


<body>

<div class="Container">
<div class="Header">
<header>
<a href="./">Mi sitio web</a>
</header>
</div>

<div class="Menu">
<nav>
<ul class="Nav">
<li><a class="Nav" href="">Inicio</a></li>
<li><a class="Nav" href="">Blog</a></li>
<li><a class="Nav" href="">Sobre mi</a></li>
<li><a class="Nav" href="">Fotos</a></li>
<li><a class="Nav" href="">Portfolio</a></li>
<li><a class="Nav" href="">Contacto</a></li>
<li><a class="Nav" href="">Enlaces</a></li>
</ul>
</nav>
</div>

<div class="Main">
<main>
<figure class="Imagen">
<img src="images/koala.jpg"
alt="Koala">
<figcaption>Figura: Koala</figcaption>
</figure>

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

</main>
</div>

<div class="Aside">
<aside>
<dt>
<dl>Categorías</dl>
<ul>
<li><a href="">Categoría 1</a></li>
<li><a href="">Categoría 2</a></li>
<li><a href="">Categoría 3</a></li>
<li><a href="">Categoría 4</a></li>
<li><a href="">Categoría 5</a></li>
</ul>
<dl>Archivo</dl>
<ul>
<li><a href="">Marzo 2019</a></li>
<li><a href="">Febrero 2019</a></li>
<li><a href="">Enero 2019</a></li>
<li><a href="">Diciembre 2018</a></li>
</ul>
<dl>Enlaces</dl>
<ul>
<li><a href="">Enlace 1</a></li>
<li><a href="">Enlace 2</a></li>
<li><a href="">Enlace 3</a></li>
<li><a href="">Enlace 4</a></li>
<li><a href="">Enlace 5</a></li>
</ul>
</dt>
</aside>
</div>

<div class="Footer">
<footer>
© 2019 José carlos Jordán Vergara
</footer>
</div>
</div>
</body>
</html>

<!-- Cabecera -->
<!-- Título con hipertexto al propio contenido del web-->
Mi sitio 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>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
Expand All @@ -51,8 +125,7 @@
Enlace 2
...
Enlace 5

-->
<!-- Pie de pagina -->
© 2019 Vuestro nombre y apellidos
</body>
</html>
<!--© 2019 Vuestro nombre y apellidos-->