Durante este tutorial he tenido la oportunidad de crear un menú con 3 de los personajes de la saha de Nintendo de Super Mario. La idea viene de mi mismo nombre.
En este proyecto se aplicaron las bases aprendidas durante el curso de Fronted developer hasta el nivel 20, el cual cuenta con sus títulos, subtítulos, imágenes, links y fondos dinámicos.
Si nos adentramos mas, tiene div, márgenes, colores de fondos, contenedores clases y muchos otros métodos vistos durante el curso.
Es una pagina muy simple con la intención que sea lo mas atractivo para el usuario, tomando en cuenta que tiene un gran margen de mejora.
A continuación les dejo el código, ya que no se como subir imagenes en este portal 😦
Espero se de su agrado!
<Codigo>
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Document</title>
</head>
<style>
h1{
text-align: center;
color:green
}
body{
background-color: antiquewhite;
}
a{
display:block;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
p{
text-align: center;
font-size: 2vw;
color:brown
}
.padre{
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.mario img{
width: 20%;
height: 20%;
margin: 20px;
padding: 20px;
}
.luigi img{
width: 20%;
height: 20%;
margin: 20px;
padding: 20px;
}
.peach img{
width: 20%;
height: 20%;
margin: 20px;
padding: 20px;
}
</style>
<body>
<h1>PLATZI TUTORIAL</h1>
<p>Super Mario Nintendo</p>
<div class = "padre">
<div class = "mario">
<a class="navbar-brand">
<img src="C:\Users\Mario\OneDrive\Pictures\Mario Castillo\Code\mario.jpg" alt="logo"/>
<a href="https://www.nintendo.es/Juegos/Portal-de-Nintendo/Portal-para-Super-Mario/Portal-para-Super-Mario-627604.html">Mario Bros </a>
</a>
</div>
<div class = "luigi">
<a class="navbar-brand">
<img src="C:\Users\Mario\OneDrive\Pictures\Mario Castillo\Code\luigi.jpg" alt="logo" />
<a href="https://www.nintendo.es/Juegos/Juegos-de-Nintendo-Switch/Luigi-s-Mansion-3-1437312.html">Luigi </a>
</a>
</div>
<div class = "peach">
<a class="navbar-brand">
<img src="C:\Users\Mario\OneDrive\Pictures\Mario Castillo\Code\peach.jpg" alt="logo" />
<a href="https://www.nintendo.es/Buscar/Buscar-299117.html?q=peach&f=147393">Peach</a>
</a>
</div>
</div>
</body>
</html>