Colores

Aquí os muestro los estilos utilizados en esta página

body{ /*Estilos generales de la página*/
 background-color: whitesmoke; /*color de fondo*/
 font-family: cursive; /*tipo de fuente cursiva*/
}
header h1{ /*Estilos del elemento h1 dentro de header*/
 color: darkblue; /*Color de la letra*/
 text-decoration: underline; /*texto subrayado*/
 font-weight: bold; /*texto en negrita*/
 font-size: 30px; /*tamaño de la fuente*/
}
h1{ /*Estilos del elemento h1*/
 color: black; /*Color de la letra*/
 font-size: 18px; /*tamaño de la fuente*/
}
.colores{ /*Estilos del elemento con clase colores*/
 background: linear-gradient(to right, #eaf2e2 0%, #a0a899 100%); /*fondo del componente con degradado*/
 width: 900px; /*tamaño del ancho del componente*/
}

Tipografias externas

Aquí os muestro unos ejemplos de tipografia externa en la página

• Este es un ejemplo de texto con fuente "Pacifico" de Google fonts.

• Este es un ejemplo de texto con fuente "Lobster" de Google fonts

El código quedaría de la siguiente manera:

1. Se debe añadir la referencia en el componente head
   

   <link href="https://fonts.googleapis.com/css?family=Lobster|Pacifico" rel="stylesheet">

2. Añadir el estilo css al componente que se quiera utilizar. por ejemplo
   

   .pacifico{
    font-family: 'Pacifico', cursive;
    font-size: 15px;
   }
   .lobster{
    font-family: 'Lobster', cursive;
    font-size: 15px;
   }
   <p class="pacifico">Este es un ejemplo de texto con fuente "Pacifico" de Google fonts.</p>

Imagenes bitmap

Aquí os muestro unos ejemplos de imagenes bitmap responsive, la cual va cambiando dependiendo del tamaño de la pantalla

El código quedaría de la siguiente manera:

<picture>
 <source media="(min-width: 1100px)" srcset="/img/shaum6.jpg">
 <source media="(min-width: 1000px)" srcset="/img/shaum5.jpg">
 <source media="(min-width: 800px)" srcset="/img/shaum4.jpg">
 <source media="(min-width: 600px)" srcset="/img/shaum3.jpg">
 <source media="(min-width: 400px)" srcset="/img/shaum2.jpg">
 <source media="(min-width: 300px)" srcset="/img/shaum1.jpg">
 <img src="/img/shaum1.jpg" alt="shaum">
</picture>

Imagenes vectoriales

Aquí os muestro un ejemplo de imagen vectorial

El código quedaría de la siguiente manera:

<img src="/img/sheepsvg.svg" alt="shaum" width="300px" height="300px">

Video

Aquí os muestro un ejemplo de vídeo

El código quedaría de la siguiente manera: