Home | Clases | Sass y SCSS | Ejercicio Colores

Ejercicio Colores


Ejercicio Colores

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



Indicaciones:


  • Escoge 4 códigos de colores principales (si quieres, de la dirección https://www.rapidtables.com/web/color/html-color-codes.html para hacerlo más rápido.

  • Los títulos, subtítulos, etiquetas y textos adicionales deben escribirse en HTML, mientras que toda la información relativa a los colores (nombre, rgb, hex, etc) 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 Colores</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>Colores</h1>
<hr>
</header>
<section>
<h2>Colores principales</h2>
<p>
Estos son los colores principales de nuestro sitio web.
</p>
<!--Color principal 1-->
<article class="color-principal-1">
<div class="muestra"></div>
<div class="datos">
<p><label>Nombre:</label><span class="nombre"></span></p>
<p><label>Color Hex:</label><span class="hex"></span></p>
<p><label>Color RGB:</label><span class="rgb"></span></p>
<p><label>Color HSL:</label><span class="hsl"></span></p>
</div>
</article>
<!--Color principal 2-->
<article class="color-principal-2">
<div class="muestra"></div>
<div class="datos">
<p><label>Nombre:</label><span class="nombre"></span></p>
<p><label>Color Hex:</label><span class="hex"></span></p>
<p><label>Color RGB:</label><span class="rgb"></span></p>
<p><label>Color HSL:</label><span class="hsl"></span></p>
</div>
</article>
<!--Color principal 3-->
<article class="color-principal-3">
<div class="muestra"></div>
<div class="datos">
<p><label>Nombre:</label><span class="nombre"></span></p>
<p><label>Color Hex:</label><span class="hex"></span></p>
<p><label>Color RGB:</label><span class="rgb"></span></p>
<p><label>Color HSL:</label><span class="hsl"></span></p>
</div>
</article>
<!--Color principal 4-->
<article class="color-principal-4">
<div class="muestra"></div>
<div class="datos">
<p><label>Nombre:</label><span class="nombre"></span></p>
<p><label>Color Hex:</label><span class="hex"></span></p>
<p><label>Color RGB:</label><span class="rgb"></span></p>
<p><label>Color HSL:</label><span class="hsl"></span></p>
</div>
</article>
</section>
<section>
<h2>Tonalidades</h2>
<p>
Estos colores son variaciones de tonalidad de nuestros colores primarios (25% más claro, normal y 75% más oscuro),
útiles para <em>hovers</em>, ilustraciones o pequeñas variaciones.
</p>
<!--Tonalidades color principal 1-->
<article class="tonalidades-color-principal-1">
<h3></h3>
<div class="muestra">
<div class="claro"></div>
<div class="normal"></div>
<div class="oscuro"></div>
</div>
</article>
<!--Tonalidades color principal 2-->
<article class="tonalidades-color-principal-2">
<h3></h3>
<div class="muestra">
<div class="claro"></div>
<div class="normal"></div>
<div class="oscuro"></div>
</div>
</article>
<!--Tonalidades color principal 3-->
<article class="tonalidades-color-principal-3">
<h3></h3>
<div class="muestra">
<div class="claro"></div>
<div class="normal"></div>
<div class="oscuro"></div>
</div>
</article>
<!--Tonalidades color principal 4-->
<article class="tonalidades-color-principal-4">
<h3></h3>
<div class="muestra">
<div class="claro"></div>
<div class="normal"></div>
<div class="oscuro"></div>
</div>
</article>
</section>
<section>
<h2>Combinaciones</h2>
<p>
Estos colores son combinaciones al 60% entre nuestros colores primarios, sirven para acentuar ciertos elementos
o para ilustraciones, pero no debemos abusar de ellos para evitar quitar presencia a los colores primarios. Se
muestran primero los colores primarios como referencia.
</p>
<!--Combinaciones color principal 1-->
<article class="combinaciones-color-principal-1">
<h3></h3>
<div class="muestra"></div>
<div class="mix-2">
<p></p>
<div></div>
</div>
<div class="mix-3">
<p></p>
<div></div>
</div>
<div class="mix-4">
<p></p>
<div></div>
</div>
</article>
<!--Combinaciones color principal 2-->
<article class="combinaciones-color-principal-2">
<h3></h3>
<div class="muestra"></div>
<div class="mix-1">
<p></p>
<div></div>
</div>
<div class="mix-3">
<p></p>
<div></div>
</div>
<div class="mix-4">
<p></p>
<div></div>
</div>
</article>
<!--Combinaciones color principal 3-->
<article class="combinaciones-color-principal-3">
<h3></h3>
<div class="muestra"></div>
<div class="mix-1">
<p></p>
<div></div>
</div>
<div class="mix-2">
<p></p>
<div></div>
</div>
<div class="mix-4">
<p></p>
<div></div>
</div>
</article>
<!--Combinaciones color principal 3-->
<article class="combinaciones-color-principal-3">
<h3></h3>
<div class="muestra"></div>
<div class="mix-1">
<p></p>
<div></div>
</div>
<div class="mix-2">
<p></p>
<div></div>
</div>
<div class="mix-3">
<p></p>
<div></div>
</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