javisantana/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*/

      .text {
        color: #031933
        line-height: 1.5;
        font-family: raleway;
      }

      .title {
        font-weight: bold;
        font-size: 36px;
      }
      .subtitule {
        font-weight: regular;
        font-size: 24px;
      }

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

            /* FORMULARIO*/

      .form{
        color: #1f618d;
      }

      .title form {
        font-weight: bold;
        font-size: 20px;
       }

     .subtitle form {
        font-weight: bold;
        font-size: 18px;
      }

      .contact form{
        font-weight: bold;
        font-size: 20px;
       }

      .text form{
        font-weight: regular;
        font-size: 12px;
        color: #467da3;
       }

      .accept{
        font: Roboto Condensed;
        font-weight: regular;
        font-size: 12px;
       }

            /* APARTADO OPINIONES*/

            /*APARTADOS PROFRSORES*/

      </style>

      </head>


    <!-- aquí ejemplos de títulos-->

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

    <h1> TÍTULOS APARTADOS ---> </h1>

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

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

        <p class="text"> 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> MENÚ ---> </h1>

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

    <br>

   <!-- aquí formularios -->

    <h1> FORMULARIO ---> </h1>

    <h4 class="text title form"> PÍDENOS INFORMACIÓN: </h4>

    <h5 class="text subtitle form"> Contacta con nosotros </h5>

    <h6 class="text form"> Comentarios <br> Nombre <br> Teléfono </h6>

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


    <!-- aquí botones -->

    <!-- 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*/

	.text {
	color: #031933
	line-height: 1.5;
	font-family: raleway;
	}

	.title {
	font-weight: bold;
	font-size: 36px;
	}
	.subtitule {
	font-weight: regular;
	font-size: 24px;
	}

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

	/* FORMULARIO*/

	.form{
	color: #1f618d;
	}

	.title form {
	font-weight: bold;
	font-size: 20px;
	}

	.subtitle form {
	font-weight: bold;
	font-size: 18px;
	}

	.contact form{
	font-weight: bold;
	font-size: 20px;
	}

	.text form{
	font-weight: regular;
	font-size: 12px;
	color: #467da3;
	}

	.accept{
	font: Roboto Condensed;
	font-weight: regular;
	font-size: 12px;
	}

	/* APARTADO OPINIONES*/

	/APARTADOS PROFRSORES/

	</style>

	</head>


	<!-- aquí ejemplos de títulos-->

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

	<h1> TÍTULOS APARTADOS ---> </h1>

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

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

	<p class="text"> 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> MENÚ ---> </h1>

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

	<br>

	<!-- aquí formularios -->

	<h1> FORMULARIO ---> </h1>

	<h4 class="text title form"> PÍDENOS INFORMACIÓN: </h4>

	<h5 class="text subtitle form"> Contacta con nosotros </h5>

	<h6 class="text form"> Comentarios <br> Nombre <br> Teléfono </h6>

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


	<!-- aquí botones -->

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