HAIRTON M.@estivenm_bloqueado
Hola a todos muy buenos días, en esta oportunidad estoy haciendo un "hero-image", quisiera que me den sus comentarios en que creen que puedo mejorar, se los agradecerla mucho.
CÒDIGO HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Background-image</title>
<link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
<div class="box1">
<p class="name">Maria Mercedes</p>
<p class="job">Fotogràfa Profesional</p>
<button class="moreInfo">Ver màs</button>
<img src="camera.svg">
</div>
</body>
</html>
CÒDIGO CSS
*, *::before, *::after
{
box-sizing: border-box;
}
body
{
margin: 0;
padding: 0;
}
:root
{
--colorForp: white;
}
.box1
{
width: 100%;
height: 700px;
background-color: orange;
margin-top: 0; /* lo coloco porque por defecto el navegador
google chrome le da un margin-block-start de 1em (16px) y le da
un margin-block-end de 1em (16px)*/
margin-bottom: 0;
background-image: url('mujer.jpg'), url('diagonal-squares.png');
background-repeat: no-repeat, round;
background-position: center;
position: absolute; /* el elemento se queda estatico y
se mantiene en su lugar*/
}
.name
{
font-size: 3em;
font-family: "courier";
margin-top: 340px;
text-align: center;
color: var(--colorForp);
}
.job
{
font-size: 2em;
color: var(--colorForp);
text-align: center;
}
.moreInfo
{
margin-left: 48%;
background-color: black;
color: var(--colorForp);
border: 0;
font-size: 1em;
font-family: "times new roman";
cursor: pointer;
border-radius: 40px / 100px;
}
.box1 img
{
display: block;
width: 100px;
height: auto;
margin-left: 700px;
}
Escribe una respuesta