naguher/index.html

## index.html
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <title>HOJA DE ESTILO DISEÑO ECONOMIA</title>

        <meta name="description" content="Hoja de estilo para diseño del Master Economia">

        <!--<link rel="stylesheet" href="main.css">-->

        <link href='https://fonts.googleapis.com/css?family=Montserrat|Roboto+Condensed|Raleway|Open+Sans+Condensed:300|Open+Sans'>

        <style>

         /* primero colores */

      .color-background {
        background: white;
      }

      /* Tipografía */

            /* APARTADOS*/

      .fonts {
        font-family: raleway;
        text-align: center;
        line-height: 1.5;
        color: #031933;
        font-weight: bold;
      }

      .title {
        font-size: 36px;
      }

      .subtitule {
        font-family: Roboto condensed;
        font-weight: normal;
        font-size: 24px;
      }

      .menu {
        font-size: 20px;
        line-height: 3;
        color: #1f618d;
       }

      .menu hover {
        font-size: 20px;
        line-height: 3;
        color: #fff;
       }

      .parrafo {
        font-family: open sans;
        font-size: 16px;
        font-weight: normal;

       }

        .phone {
        font-size: 40px;
        color: #467da3;
        }

            /* FORMULARIO*/

      input {
        width:12%;
        padding: 5px 5px;
        margin: 5px 0;
        border: 1px solid #666666;
        border-radius: 2px;
        font-family: Roboto condensed;
        color: #467da3;
       }

      .form {
        color: #1f618d;
       }

      .text-1{
        font-size: 20px;
       }

       .text-2 {
        font-size: 18px;
        }

      .contact {
        font-size: 24px;
       }

      .accept {
        font-family: Roboto  condensed;
        font-weight: normal;
        font-size: 12px;
       }

      .button {
        background-color: #1f618d;
        border: none;
        border-radius: 4px;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 4px 10px 0 rgba(0,0,0,0.19);
        color: white;
        font-size: 18px;
        padding: 5px 15px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        }

      .button:hover {
        background-color: #467da3;
        color: white;
        }

            /* TEXTOS OPINIONES-PROFESORES-BLOG-EVENTOS */


        .student {
            font-family: open sans;
            font-size: 14px;
        }

        .position {
            font-family: open sans;
            font-size: 14px;
            font-weight: normal;
        }

        .opinion {
            font-family: open sans;
            font-size: 18px;
        }

        .teacher {
            font-family: open sans;
            font-size: 18px;
            color: #1f618d; /* va en color #fff pero para que se vea lo he puesto en otro color */
        }

        .blog {
            font-family: open sans;
            font-size: 16px;
        }


         /* IMÁGENES */

            /* OPINIONES */

       .boxshadow {
         box-shadow: 2px 4px 3px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }

       .borderimg {
         border: 2px solid #1f618d;
        }

        a :hover {
         opacity: 0.5;
        }

            /*APARTADOS PROFESORES*/

         .boximg {
            width:auto;
            height:auto;

         }
          .boximg:hover {
            width:auto;
            height:auto;
            background-color: #1f618d;
         }


          /* BOTONES */

            /* IMÁGENES PORTADA */

        .navlist li, .navlist a  {
        list-style: none;
        position: absolute;
        height: 44px;
        display: block;
        }

        .following {
            left: 63px;
            width: 43px;
            background: url("definitivo/iconos/A.png") -47px 0;
        }

        .slider {
            left: 129px;
            width: 43px;
            background: url("definitivo/iconos/slider_1.png") -91px 0;
        }

        .following:hover {
            background: url("definitivo/iconos/B.png") -47px -45px;
        }

        .slider:hover {
            background: url("definitivo/iconos/sliderhover_1.png") -91px -45px;
        }


          </style>

      </head>


    <!-- TÍTULOS -->


    <body class="color-background; fonts"  style="width: 80%;margin: 40px auto;" >

    <h1 style="color:red;"> TÍTULOS APARTADOS ---> </h1>

    <h1 class="title"> ¿QUIERES APRENDER ECONOMÍA? </h1>

    <h2 class="subtitle"> El único programa del mundo que combina el Value Investing con
 la Teoría del Ciclo de la Escuela Austriaca. </h2>

        <p class="parrafo"> En este Máster de Economía de la Universidad Francisco Marroquín (UFM) y del Centro de Estudios Superiores de Madrid Manuel Ayau (OMMA)... </p>

        <br>

    <h1 style="color:red;"> MENÚ ---> </h1>

    <h3 class="menu"> Información <br> Opinión <br> Pensum <br> Profesorado </h3>

    <br>

    <h4 class="phone"><img src="definitivo/iconos/smartphone.png" style="width: 80px;"> Tlfno: +34 91 172 23 94 </h4>

   <!-- FORMULARIOS -->


    <h1 style="color:red;"> FORMULARIO ---> </h1>

    <h2 class="text-1 form"> PÍDENOS INFORMACIÓN: </h2>

    <h3 class="text-2 form"> Contacta con nosotros </h3>

    <formulary>

      <input type="text" id="fname" name="fname" value="Nombre*">

    </formulary>

       <p class="accept"> Seleccionar esta opción significa que aceptas la política de privacidad y las condiciones de uso de Activolead.com</p>

    <br>

     <!-- OPINIONES -->

    <h1 style="color:red;"> OPINIONES ---> </h1>

    <h1 class="student"> JOSÉ LUIS </h1>

    <h2 class="position"> Alumno 1ª Edición del Máster en Value Investing y  Teoría del Ciclo.</h2>

    <p class="opinion"> "Pensaba que sería inédito por su contenido y resultó ser también por cómo se expone"</p>

    <br>

     <!-- PROFESORES -->

    <h1 style="color:red;"> PROFESORES ---> </h1>

    <h1 class="teacher"> Alejandro Muñoz </h1>

    <h2 class="position"> Prof. Fundamentos de la inversión en valor </h2> <!--style="color:#fff;"-->

     <br>

     <!-- VIDEOS-->

    <h1 style="color:red;"> VÍDEOS---> </h1>

    <h1 class="teacher"> Álvaro de Guzmán </h1>

        <p class="teacher" style="font-weight: normal;"> Vídeo presentación curso Máster Value Investing</p>

     <br>

     <!-- BLOG -->

     <h1 style="color:red;"> TEXTO BLOG ---> </h1>

     <h1 class="blog" style="color: #1f618d;"> Acto de Graduación 2016 </h1>

        <p class="blog" style="font-weight: normal;"> Discurso de graduación OMMA, de Álvaro Guzmán de Lázaro, director en inversiones de azValor, cerrando el acto el pasado viernes 8 de julio en Madrid </p>

    <br>

    <!-- EVENTOS-->

     <h1 style="color:red;"> TEXTO EVENTOS ---> </h1>


    <!-- BOTONES -->


    <h1 style="color:red;"> ENVIAR ---> </h1>

    <a href="#" class="button">Enviar</a>

    <br>

   <h1 style="color:red;"> SPRITES ---> </h1>

        <br>

        <div id="following"><a href="definitivo/iconos/A.png"></a></div>

        <ul id="navlist">
            <li id="slider"></li>
            <li id="slider"><a href="definitivo/iconos/slider_1.png"></a></li>
            <li id="slider"><a href="definitivo/iconos/slider_1.png"></a></li>
        </ul>

          <br>


    <!-- IMÁGENES -->


     <h1 style="color:red;"> IMÁGENES ---> </h1>

        <br>

        <h1> Imagen Blog </h1>

      <a target="BLOG" href="IMG.jpg">

        <img src= "css/IMG.jpeg" style="width:auto;height:auto;">

      </a>

        <br>

        <h1> Imagen Opinión alumnos </h1>

      <div class="borderimg boxshadow">

         <img src= "css/alumno_1.jpeg" style="width:auto;height:auto;">

      </div>

        <h1 style="font-weight:normal; font-size: 14px;"> Licencia de Creative Commons <br> © 2016 Online de Madrid Manuel Ayau </h1>

    <!-- Google Fonts embed code -->

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Montserrat::latin', 'Roboto+Condensed::latin', 'Raleway::latin', 'Open+Sans+Condensed:300:latin', 'Open+Sans::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

    </body>
</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<title>HOJA DE ESTILO DISEÑO ECONOMIA</title>

	<meta name="description" content="Hoja de estilo para diseño del Master Economia">

	<!--<link rel="stylesheet" href="main.css">-->

	<link href='https://fonts.googleapis.com/css?family=Montserrat\|Roboto+Condensed\|Raleway\|Open+Sans+Condensed:300\|Open+Sans'>

	<style>

	/* primero colores */

	.color-background {
	background: white;
	}

	/* Tipografía */

	/* APARTADOS*/

	.fonts {
	font-family: raleway;
	text-align: center;
	line-height: 1.5;
	color: #031933;
	font-weight: bold;
	}

	.title {
	font-size: 36px;
	}

	.subtitule {
	font-family: Roboto condensed;
	font-weight: normal;
	font-size: 24px;
	}

	.menu {
	font-size: 20px;
	line-height: 3;
	color: #1f618d;
	}

	.menu hover {
	font-size: 20px;
	line-height: 3;
	color: #fff;
	}

	.parrafo {
	font-family: open sans;
	font-size: 16px;
	font-weight: normal;

	}

	.phone {
	font-size: 40px;
	color: #467da3;
	}

	/* FORMULARIO*/

	input {
	width:12%;
	padding: 5px 5px;
	margin: 5px 0;
	border: 1px solid #666666;
	border-radius: 2px;
	font-family: Roboto condensed;
	color: #467da3;
	}

	.form {
	color: #1f618d;
	}

	.text-1{
	font-size: 20px;
	}

	.text-2 {
	font-size: 18px;
	}

	.contact {
	font-size: 24px;
	}

	.accept {
	font-family: Roboto condensed;
	font-weight: normal;
	font-size: 12px;
	}

	.button {
	background-color: #1f618d;
	border: none;
	border-radius: 4px;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 4px 10px 0 rgba(0,0,0,0.19);
	color: white;
	font-size: 18px;
	padding: 5px 15px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	}

	.button:hover {
	background-color: #467da3;
	color: white;
	}

	/* TEXTOS OPINIONES-PROFESORES-BLOG-EVENTOS */


	.student {
	font-family: open sans;
	font-size: 14px;
	}

	.position {
	font-family: open sans;
	font-size: 14px;
	font-weight: normal;
	}

	.opinion {
	font-family: open sans;
	font-size: 18px;
	}

	.teacher {
	font-family: open sans;
	font-size: 18px;
	color: #1f618d; /* va en color #fff pero para que se vea lo he puesto en otro color */
	}

	.blog {
	font-family: open sans;
	font-size: 16px;
	}


	/* IMÁGENES */

	/* OPINIONES */

	.boxshadow {
	box-shadow: 2px 4px 3px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}

	.borderimg {
	border: 2px solid #1f618d;
	}

	a :hover {
	opacity: 0.5;
	}

	/APARTADOS PROFESORES/

	.boximg {
	width:auto;
	height:auto;

	}
	.boximg:hover {
	width:auto;
	height:auto;
	background-color: #1f618d;
	}


	/* BOTONES */

	/* IMÁGENES PORTADA */

	.navlist li, .navlist a {
	list-style: none;
	position: absolute;
	height: 44px;
	display: block;
	}

	.following {
	left: 63px;
	width: 43px;
	background: url("definitivo/iconos/A.png") -47px 0;
	}

	.slider {
	left: 129px;
	width: 43px;
	background: url("definitivo/iconos/slider_1.png") -91px 0;
	}

	.following:hover {
	background: url("definitivo/iconos/B.png") -47px -45px;
	}

	.slider:hover {
	background: url("definitivo/iconos/sliderhover_1.png") -91px -45px;
	}




	</style>

	</head>



	<!-- TÍTULOS -->


	<body class="color-background; fonts" style="width: 80%;margin: 40px auto;" >

	<h1 style="color:red;"> TÍTULOS APARTADOS ---> </h1>

	<h1 class="title"> ¿QUIERES APRENDER ECONOMÍA? </h1>

	<h2 class="subtitle"> El único programa del mundo que combina el Value Investing con
	la Teoría del Ciclo de la Escuela Austriaca. </h2>

	<p class="parrafo"> En este Máster de Economía de la Universidad Francisco Marroquín (UFM) y del Centro de Estudios Superiores de Madrid Manuel Ayau (OMMA)... </p>

	<br>

	<h1 style="color:red;"> MENÚ ---> </h1>

	<h3 class="menu"> Información <br> Opinión <br> Pensum <br> Profesorado </h3>

	<br>

	<h4 class="phone"><img src="definitivo/iconos/smartphone.png" style="width: 80px;"> Tlfno: +34 91 172 23 94 </h4>

	<!-- FORMULARIOS -->


	<h1 style="color:red;"> FORMULARIO ---> </h1>

	<h2 class="text-1 form"> PÍDENOS INFORMACIÓN: </h2>

	<h3 class="text-2 form"> Contacta con nosotros </h3>

	<formulary>

	<input type="text" id="fname" name="fname" value="Nombre*">

	</formulary>

	<p class="accept"> Seleccionar esta opción significa que aceptas la política de privacidad y las condiciones de uso de Activolead.com</p>

	<br>

	<!-- OPINIONES -->

	<h1 style="color:red;"> OPINIONES ---> </h1>

	<h1 class="student"> JOSÉ LUIS </h1>

	<h2 class="position"> Alumno 1ª Edición del Máster en Value Investing y Teoría del Ciclo.</h2>

	<p class="opinion"> "Pensaba que sería inédito por su contenido y resultó ser también por cómo se expone"</p>

	<br>

	<!-- PROFESORES -->

	<h1 style="color:red;"> PROFESORES ---> </h1>

	<h1 class="teacher"> Alejandro Muñoz </h1>

	<h2 class="position"> Prof. Fundamentos de la inversión en valor </h2> <!--style="color:#fff;"-->

	<br>

	<!-- VIDEOS-->

	<h1 style="color:red;"> VÍDEOS---> </h1>

	<h1 class="teacher"> Álvaro de Guzmán </h1>

	<p class="teacher" style="font-weight: normal;"> Vídeo presentación curso Máster Value Investing</p>

	<br>

	<!-- BLOG -->

	<h1 style="color:red;"> TEXTO BLOG ---> </h1>

	<h1 class="blog" style="color: #1f618d;"> Acto de Graduación 2016 </h1>

	<p class="blog" style="font-weight: normal;"> Discurso de graduación OMMA, de Álvaro Guzmán de Lázaro, director en inversiones de azValor, cerrando el acto el pasado viernes 8 de julio en Madrid </p>

	<br>

	<!-- EVENTOS-->

	<h1 style="color:red;"> TEXTO EVENTOS ---> </h1>



	<!-- BOTONES -->


	<h1 style="color:red;"> ENVIAR ---> </h1>

	<a href="#" class="button">Enviar</a>

	<br>

	<h1 style="color:red;"> SPRITES ---> </h1>

	<br>

	<div id="following"><a href="definitivo/iconos/A.png"></a></div>

	<ul id="navlist">
	<li id="slider"></li>
	<li id="slider"><a href="definitivo/iconos/slider_1.png"></a></li>
	<li id="slider"><a href="definitivo/iconos/slider_1.png"></a></li>
	</ul>

	<br>


	<!-- IMÁGENES -->


	<h1 style="color:red;"> IMÁGENES ---> </h1>

	<br>

	<h1> Imagen Blog </h1>

	<a target="BLOG" href="IMG.jpg">

	<img src= "css/IMG.jpeg" style="width:auto;height:auto;">

	</a>

	<br>

	<h1> Imagen Opinión alumnos </h1>

	<div class="borderimg boxshadow">

	<img src= "css/alumno_1.jpeg" style="width:auto;height:auto;">

	</div>

	<h1 style="font-weight:normal; font-size: 14px;"> Licencia de Creative Commons <br> © 2016 Online de Madrid Manuel Ayau </h1>

	<!-- Google Fonts embed code -->

	<script type="text/javascript">
	WebFontConfig = {
	google: { families: [ 'Montserrat::latin', 'Roboto+Condensed::latin', 'Raleway::latin', 'Open+Sans+Condensed:300:latin', 'Open+Sans::latin' ] }
	};
	(function() {
	var wf = document.createElement('script');
	wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
	wf.type = 'text/javascript';
	wf.async = 'true';
	var s = document.getElementsByTagName('script')[0];
	s.parentNode.insertBefore(wf, s);
	})(); </script>

	</body>
	</html>