diff --git a/m1/style.css b/m1/css/style.css
similarity index 52%
rename from m1/style.css
rename to m1/css/style.css
index b3bc789..516426b 100644
--- a/m1/style.css
+++ b/m1/css/style.css
@@ -3,9 +3,6 @@
 . 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
@@ -14,17 +11,6 @@ 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.*/
@@ -40,4 +26,127 @@ Altura de línea: 35px*/
   - color de fondo: #233C9B 
   - altura del elemento 40px;
 */
+html{
+  scroll-behavior: smooth;
+}
+body.reset{
+  padding:0;
+  box-sizing: border-box;
+  margin:0;
+}
+body.general{
+  box-sizing:border-box;
+  padding:0;
+  margin:0;
+  font-family: Verdana, Geneva, Tahoma, sans-serif;
+  font-size:120%;
+  font-weight:160%;
+  background-color: #F2F5FE;
+  background-image: url('../img/fondo.gif');
+  background-repeat: repeat-x;
+  width:80%;
+  margin-right:10%;
+  margin-left:10%;
+  
+}
+
+h1{
+  text-align:center;
+  background-color: #233C9B;
+}
+h1 a{
+  color:white ;
+  text-align:center;
+  font-family:Georgia, 'Times New Roman', Times, serif;
+  font-size:260%;
+  font-weight: 700;
+}
+h1 a:hover{
+  
+color:#B5C4E3;
+cursor:auto;
+}
+/* El contenedor tendrá las siguientes características: 
+  ancho 80% color de fondo blanco */
+
+
+/* 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;*/
+
+ul.menu_nav{
+  list-style-type: none;
+  text-align: center;
+  border:0 0 1px 0;
+  border-color:black;
+  position:relative;
+
+}
+
+.menu_nav li{
+  display: inline;
+  text-align: center;
+  margin:0 10px 0 10px;
+  background:blue;
+ 
+}
+.menu_nav li:hover{
+  background-color: #31479B;
+}
+.menu_nav li a{
+  text-decoration: none;
+  color:#B5C4E3;
+  font-size:75%;
+  margin:0 15px 0 15px;
+
+}
+
+.menu_nav li a:hover{
+  cursor:pointer;
+  background-color: #31479B;
+}
+/*mitad de 80%*/
+figure{
+  margin-left:40%;
+}
+main{
+  background-color: white;
+}
+.grande{
+  float:left;
+  width:60%;
+  margin-left:10%;
+  background-color: white;
+}
+.lado{
+  float:right;
+  margin-top:0%;
+  margin-right:10%;
+  background-color: white;
+
+
+}
+.clear{
+  clear:both;
+}
+footer{
+  background-color: #233C9B ;
+  padding-top:20px;
+  padding-bottom:20px;
+}
+footer .container{
+  text-align:center;
+  color:white;
+}
+footer a{
+  text-align:center;
+  color:white;
+  text-decoration:none,
 
+}
diff --git a/m1/fondo.gif b/m1/img/fondo.gif
similarity index 100%
rename from m1/fondo.gif
rename to m1/img/fondo.gif
diff --git a/m1/koala.jpg b/m1/img/koala.jpg
similarity index 100%
rename from m1/koala.jpg
rename to m1/img/koala.jpg
diff --git a/m1/index.html b/m1/index.html
index 3e954d7..60e28a8 100644
--- a/m1/index.html
+++ b/m1/index.html
@@ -1,58 +1,277 @@
 <!DOCTYPE html>
-<html>
+<html lang="es">
+
 <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="css/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
-
-                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
-
-
-        3. Enlaces
-                Enlace 1
-                Enlace 2
-                ...
-                Enlace 5
-
-<!-- Pie de pagina -->
-            © 2019 Vuestro nombre y apellidos
+<body class="reset general">
+
+        <!-- Cabecera -->
+        <header>
+                <!-- Título con hipertexto al propio contenido del web-->
+
+                <h1><a href="/">Mi sitio Web</a></h1>
+
+        </header>
+
+        <!-- Menú de navegación -->
+
+
+       
+                <nav class="nav">
+
+                        <ul class="menu_nav">
+
+                                <li>
+                                        <a href="#inicio">Inicio</a>
+                                </li>
+
+                                <li>
+                                        <a href="#blog">Blog</a>
+                                </li>
+                                <li>
+                                        <a href="#sobre_mi">Sobre mi</a>
+                                </li>
+                                <li>
+                                        <a href="#fotos">Fotos</a>
+                                </li>
+                                <li>
+                                        <a href="#portfolio">Portfolio</a>
+                                </li>
+                                <li>
+                                        <a href="#contacto">Contacto</a>
+                                </li>
+                                <li>
+                                        <a href="#enlaces">Enlaces</a>
+                                </li>
+
+                        </ul>
+
+                </nav>
+                <!-- Contenido Principal -->
+                <!-- 1. ---fotografia koala.png con pie de foto:"descripción de la foto" de  200*200 px-->
+
+        <main>
+                <article class="grande">
+                        
+                                <figure class="koala">
+                                        <img src="img/koala.jpg" height="200px" alt="Koala" />
+                                        <figcaption>Al rico Koala</figcaption>
+                                </figure>
+                        
+
+                        <p id="inicio">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 id="blog">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>
+
+                        <p id="sobre_mi">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>
+
+                        <p id="fotos">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>
+
+                        <p id="portfolio">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>
+
+                        <p id="contacto">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>
+
+                        <p id="enlaces">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>
+                <!-- Contenido relacionado-->
+                <!-- Tres apartados con lista desordenada de enlaces:-->
+
+                <aside class="lado">
+
+                        <p class="side">
+
+                                <h3>Categorías</h3>
+                                <ol class="menu">
+
+                                        <li>
+                                                <a href="#">Categoria 1</a>
+                                        </li>
+
+                                        <li>
+                                                <a href="#">Categoria 2</a>
+                                        </li>
+
+                                        <li>
+                                                <a href="#">Categoria 3</a>
+                                        </li>
+
+                                        <li>
+                                                <a href="#">Categoria 4</a>
+                                        </li>
+
+                                        <li>
+                                                <a href="#">Categoria 5</a>
+                                        </li>
+
+
+
+                                </ol>
+
+                        </p>
+
+                        <p class="side">
+
+                                <h3>Archivos</h3>
+                                <ol class="menu">
+
+                                        <li>
+                                                <a href="#">Octubre</a>
+                                        </li>
+
+                                        <li>
+                                                <a href="#">Noviembre</a>
+                                        </li>
+
+                                        <li>
+                                                <a href="#">Diciembre</a>
+                                        </li>
+
+                                        <li>
+                                                <a href="#">Enero</a>
+                                        </li>
+
+                                        <li>
+                                                <a href="#">Febrero</a>
+                                        </li>
+
+
+
+                                </ol>
+
+                        </p>
+
+                        <p class="side">
+
+                                <h3>Enlaces</h3>
+                                <ol class="menu">
+
+                                        <li>
+                                                <a href="#">Enlace1</a>
+                                        </li>
+
+                                        <li>
+                                                <a href="#">Enlace2</a>
+                                        </li>
+
+                                        <li>
+                                                <a href="#">Enlace3</a>
+                                        </li>
+
+                                        <li>
+                                                <a href="#">Enlace4</a>
+                                        </li>
+
+                                        <li>
+                                                <a href="#">Enlace5</a>
+                                        </li>
+
+
+
+
+
+                                </ol>
+
+                        </p>
+                        
+                               <!-- ul.listaClase>li*5>a:link>{enlace$} importante, no ddebes parar,de lo contrario no lo hace-->
+                        
+
+
+                </aside>
+                <div class="clear"></div>
+
+        </main>
+
+        <!-- Footer -->
+
+
+
+        <footer>
+
+
+                <div class="container">
+
+                        <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank"><i
+                                        class="fab fa-creative-commons fa-1x"></i>
+                                Copyright</a> &copy;
+                        <script>document.write(new Date().getFullYear());</script>
+                        Designed with <b style="color:red">love</b> by <a href="https://theclick36.com">theclick36.</a>
+
+                </div>
+
+        </footer>
+
 </body>
-</html>
+
+</html>
\ No newline at end of file