En esta practica de HTML-CSS quise salirme un poco del estándar de crear mi propio portafolio y me atreví a jugar con gifs y distintas formas de utilizar las herramientas que tengo disponibles, por eso lo trabajé con un dibujo animado llamado Gumball Wayyerson, el cual es de una serie de televisión llamado el maravilloso mundo de Gumball, para asi explotar al 100% mi creatividad y no tener limitación alguna.
Sin mas que hablar aquí dejo una imagen de como se vería el proyecto (lastimosamente no se podrá apreciar el movimiento de la imagen) y los codigo usados para llevar a cabo el proyecto
Codigo del index.html
<!DOCTYPE html>
<html lang="es-mx">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portafolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header></header>
<main>
<h1>Eleve tu negocio digital a otro nivel <strong>con un front-end de alta calidad </strong> </h1>
<p>¡Hola! soy <strong>Gumball Watterson</strong> , personaje animado del universo de <span class="multicolor-span">"EL MARAVILLOSO MUNDO DE GUMBALL"</span>, "desarrollador" Front-end
con "especialización" en React, HTML y CSS.
Ayudo a pequeños negocios y diseñadores a llevar a cabo
buenas ideas. ¿Hablamos?</p>
<img src="Gumball.gif" alt="Imagen de gumball watterson">
<a href="https://www.instagram.com/gumball_watterson1/?hl=es">Instagram</a>
<a href="https://theamazingworldofgumball.fandom.com/wiki/Gumball_Watterson">Biografía</a>
<small>Esto es utilizado con finalidad de práctica para el curso de HTML-CSS, no es con el fin de ser comercializado</small>
</main>
</body>
</html>
Codigo del style.css
/* color de fondo*/
body{
background-color: black;
color: cornsilk;
}
/* Esta parte la use para generar el color del strong*/
strong {
color: #4eb5c8;
}
/* Esta parte la use para generar el texto multicolor*/
.multicolor-span {
font-size: 18px;
font-weight: bold;
background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
-webkit-background-clip: text;
color: transparent;
}
/* alineación del texto e imagen */
main {
display: flex;
flex-direction: column;
align-items: center;
}
main img {
margin-bottom: 20px;
}
/*color y alineación del small*/
small {
display: block;
font-size: 12px;
color: gray;
margin-top: 10px;
text-align: center;
}
