He realizado la creacion de un mini menu web, con los pasos vistos en clase HTML y CSS.
He optado por la idea de un titulo, imagenes y link de esas imagenes, con ajuste de alineacion, margenes y color de fondo. Todo esto dicho aprendido en las bases del curso de Fronted.
Es un ejemplo muy simple pero se notan las bases aplicadas a lo largo del curso espero 😃
<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>
NOTA: No he logrado subir una imagen, por favor si me dicen como lo hago :)
Curso de Frontend Developer
0 Comentarios
para escribir tu comentario
