CODIGO HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="estilos.css" />
</head>
<body>
<nav>
<a href="">Inicio</a>
<a href="">Streams</a>
<a href="">Setup</a>
<a href="">Stickers</a>
</nav>
<div class="hero">
<h1>libreria</h1>
<div id="uno">
<p>Bienvenidos a nuestra pagina</p>
<p>tenemos los mejores productos y ofertas</p>
</div>
<img class="di"
src="imagenes/libro.jpg" alt="libro" width="50"
height="50">
<div class="dos">
<p>somos importadores</p>
<p>tenemos los mejores articulos<br> de escritorio y de
estudios,<br> con una gran variedad</p>
</div>
<ol type="i" start="1">
<li>papel
<li>libros
<li>cuadernos
<li>regla
</ol>
<button class="btn">OFERTAS</button>
</div>
</body>
</html>
.hero {
position: absolute;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.hero::before
{
content: "";
background-image:
url(imagenes/libres.jpg);
background-size: cover;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity: 0.5;
z-index: -1;
}
h1{
color:blue;
}
#uno{
color:purple;
}
.dos{
background-color: aqua;
color:blue;
font-size: medium;
text-align: center;
}
.btn{
background-color: #007bff; /* Blue
background */
color: white; /* White text */
border: none; /* No border */
padding: 12px 24px; /* Padding around text
*/
border-radius: 5px; /* Rounded corners */
font-size: 16px;
cursor: pointer; /* Pointer cursor on hover
*/
transition: background-color 0.3s ease;
}
.btn:hover
{
background-color: #45c5e6; /* Darker blue on
hover */
}
.btn:active
{
background-color: #004085; /* Even darker
blue when clicked */
}
.di{
text-align: right;
float:right;
}
No hay comentarios.:
Publicar un comentario