<DOCTYPE html>
<html>
<head> <! –– Contiene la informacion que le pasamos a la pagina ––>
<meta charset="UTF-8">
<title>Contacto - Barbería ALURA</title>
<link rel="stylesheet" href="C:\Users\marco\OneDrive\Escritorio\ALURA Latam\Cursos\HTML5 y CSS3 2 - Posicionamiento listas y navegación\CODIGO\reset.css">
<link rel="stylesheet" href="style-contacto.css">
</head>
<body>
<header class="cabeceraP"> <! –– Cabecera de la pagina ––>
<div class="caja">
<h1><img src="C:\Users\marco\OneDrive\Escritorio\ALURA Latam\Cursos\HTML5 y CSS3 2 - Posicionamiento listas y navegación\CODIGO\imagenes\logo.png"></h1>
<nav> <! –– Menu de navegación 1 ––>
<ul class="navegacionUlH">
<li class="navegacionLiH"><a href="C:\Users\marco\OneDrive\Escritorio\ALURA Latam\Cursos\HTML5 y CSS3 1 - Mi primera pagina WEB\CODIGOS\index.html" class="navegacionAH">Home</a></li>
<li class="navegacionLiH"><a href="C:\Users\marco\OneDrive\Escritorio\ALURA Latam\Cursos\HTML5 y CSS3 2 - Posicionamiento listas y navegación\CODIGO\productos.html" class="navegacionAH">Productos</a></li>
<li class="navegacionLiH"><a href="contacto.html" class="navegacionAH">Contacto</a></li>
</ul>
</nav>
</div>
</header>
<main> <! –– Contenido entre el header y el footer, cuerpo ––>
<form class="formularioMain">
<label for="nombreyapellido" class="formularioLabel">Nombre y Apellido</label>
<input type="text" id="nombreyapellido" class="formularioInput">
<label for="correoelectronico" class="formularioLabel">Correo Electrónico</label>
<input type="text" id="correoelectronico" class="formularioInput">
<label for="telefono" class="formularioLabel">Teléfono</label>
<input type="text" id="telefono" class="formularioInput">
<input type="submit" value="Enviar formulario" class="formularioEnviar">
</form>
</main>
<footer class="fotter1">
<img src="C:\Users\marco\OneDrive\Escritorio\ALURA Latam\Cursos\HTML5 y CSS3 2 - Posicionamiento listas y navegación\CODIGO\imagenes/logo-blanco.png">
<p class="fotterP"> © Copyright Barbería ALURA 2023</p>
</footer>
</body>
</html>
.cabeceraP{
background-color: #BBBBBB;
width: 100%;
padding: 20px 0;
}
.navegacionUlH{
position: absolute;
top: 110px;
right: 110px;
}
.caja{
width: 940px;
position: relative;
margin: 0 auto;
}
.navegacionLiH {
display: inline;
}
.navegacionAH{
text-transform: uppercase;
color: black;
font-weight: bold;
font-size: 22px;
text-decoration: none;
margin: 0 0 0 15PX;
}
.navegacionAH:hover {
color: #C78C19;
text-decoration: underline;
}
.formularioMain{
width: 940px;
margin: 40px auto;
}
.formularioLabel{
display: block;
font-size: 20px;
margin: 0 0 10px 0;
}
.formularioInput{
display: block;
margin: 0 0 20px 0;
padding: 10px 25px;
width: 50%;
}
.formularioEnviar{
width: 25%;
margin: 0 0 0 100px;
}
.fotter1{
text-align: center;
background: url("C:/Users/marco/OneDrive/Escritorio/ALURA Latam/Cursos/HTML5 y CSS3 2 - Posicionamiento listas y navegación/CODIGO/imagenes/bg.jpg");
padding: 40px;
}
.fotterP{
color: white;
font-size: 13px;
margin: 20px;
}
