Home | Clases | Sass y SCSS | Ejercicio Fuentes

Ejercicio Fuentes


Ejercicio Fuentes

Genera un sitio web que muestre la carta de fuentes de un sitio web, de manera similar a la mostrada a continuación pero con tus propios colores y fuentes:



Indicaciones:


  • Utiliza los colores del ejercicio anterior, más un gris claro de tu elección.

  • Toda la información relativa a las fuentes (incluyendo los textos con el nombre de fuente) debe ser añadida desde Sass.

  • Utiliza todo lo aprendido hasta ahora (funciones, variables, etc.) para optimizar tu hoja de estilos.

  • Se recomienda crear tu propio HTML pues te permitirá asociar mejor las variables y funciones, no obstante se añade aquí uno de ejemplo:



<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejercicio Fuentes</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header>
<h1>Fuentes</h1>
<hr>
</header>
<section>
<h2>Tipografías</h2>
<p>
<span class="fuente-cuerpo"></span> es la tipografía principal, mientras que
<span class="fuente-titulos"></span> será la tipografía para títulos y elementos de realce.
</p>
<!--Tipografía 1-->
<article class="fuente-cuerpo">
<h3></h3>
<div>
<span class="color-principal-1">Aa</span>
<span class="color-principal-2">Bb</span>
<span class="color-principal-3">Cc</span>
<span class="color-principal-4">Dd</span>
<span class="color-claro">0123456789</span>
</div>
</article>
<!--Tipografía 2-->
<article class="fuente-titulos">
<h3></h3>
<div>
<span class="color-principal-1">Aa</span>
<span class="color-principal-2">Bb</span>
<span class="color-principal-3">Cc</span>
<span class="color-principal-4">Dd</span>
<span class="color-claro">0123456789</span>
</div>
</article>
</section>
<section>
<h2>Títulos</h2>
<!--Títulos-->
<article class="titulos">
<div>
<label>h1</label><h1>Lorem ipsum dolor sit amet.</h1>
</div>
<div>
<label>h2</label><h2>Lorem ipsum dolor sit amet.</h2>
</div>
<div>
<label>h3</label><h3>Lorem ipsum dolor sit amet.</h3>
</div>
<div>
<label>h4</label><h4>Lorem ipsum dolor sit amet.</h4>
</div>
<div>
<label>h5</label><h5>Lorem ipsum dolor sit amet.</h5>
</div>
<div>
<label>h6</label><h6>Lorem ipsum dolor sit amet.</h6>
</div>
</article>
</section>
</body>
</html>


Solución

Cuando termines, puedes descargarte el proyecto completo para comparar mi solución con la tuya.
Fecha de publicación: 15/04/2019
Asignaturas: aplicaciones webdiseño de interfaces web
Temas: css css3 sass scss less preprocesadores
Utilizamos cookies propias y de terceros para mejorar su experiencia en la navegación. Al seguir navegando entendemos que acepta su uso.
Si lo desea, consulte nuestras políticas de privacidad y cookies
ENTENDIDO
[X] Cerrar

Contacta conmigo


[X] Cerrar

Acceso alumnos