La imagen principal se puede diseñar usando HTML y CSS. Este artículo contiene dos secciones. La primera sección adjunta la imagen y el diseño de la estructura básica. La segunda sección diseña la imagen y los textos en las imágenes. La imagen del héroe se ve atractiva cuando la usa como banner. Supongamos que desea informar a otros sobre las funciones recién agregadas, entonces será el mejor procedimiento para proceder a usar esas funciones.
Creación de estructura:
En esta sección, crearemos la estructura básica para la imagen de portada de la imagen principal. Adjuntaremos la imagen y pondremos el texto que se colocará sobre la imagen en la siguiente sección.
- Código HTML: El código HTML se utiliza para crear una estructura de imagen principal. Dado que no contiene CSS, es solo una estructura simple. Usaremos alguna propiedad CSS para hacerlo atractivo.
HTML
<!DOCTYPE html> <html> <head> <title>Create a hero image</title> </head> <body> <div class="container"> <!-- background image --> <img class="gfg" src= "https://media.geeksforgeeks.org/wp-content/uploads/20191213145442/img40.png"> <!-- title and tag line with button --> <div class="logo"> <h1>GeeksforGeeks</h1> <p>A Computer Science Portal for Geeks</p> <button>Hire with Us</button> </div> </div> </body> </html>
Diseño de la estructura:
En la sección anterior, hemos creado la estructura de la página web básica y ahora vamos a utilizar la imagen principal con el título, la etiqueta y un botón. En esta sección diseñaremos la estructura.
- Código CSS: El código CSS se utiliza para hacer un sitio web atractivo. Esta propiedad CSS se utiliza para hacer que la imagen principal sea atractiva y llamativa.
HTML
<style>
/* blurring the image */
.gfg {
filter: blur(5px);
width: 100%;
}
/* designing title and tag line */
.logo {
text-align:center;
position: absolute;
font-size: 18px;
top: 50px;
left: 27%;
color: white;
}
h1, p {
border: 4px solid white;
padding: 10px 50px;
position: relative;
border-radius: 10px;
font-family: Arial, Helvetica, sans-serif;
}
h1:hover {
background: -webkit-linear-gradient( green, lime);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Designing button */
.logo button {
border: none;
outline: 0;
display: inline-block;
padding: 10px 25px;
color: black;
background-color: #ddd;
text-align: center;
cursor: pointer
}
.logo button:hover {
background-color: green;
color: white;
}
</style>
Combinación del código HTML y CSS: estos ejemplos combinan el código HTML y CSS para diseñar la imagen Hero.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Create a hero image</title>
<style>
/* blurring the image */
.gfg {
filter: blur(5px);
width: 100%;
}
/* designing title and tag line */
.logo {
text-align:center;
position: absolute;
font-size: 18px;
top: 50px;
left: 27%;
color: white;
}
h1, p {
border: 4px solid white;
padding: 10px 50px;
position: relative;
border-radius: 10px;
font-family: Arial, Helvetica, sans-serif;
}
h1:hover {
background: -webkit-linear-gradient( green, lime);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Designing button */
.logo button {
border: none;
outline: 0;
display: inline-block;
padding: 10px 25px;
color: black;
background-color: #ddd;
text-align: center;
cursor: pointer
}
.logo button:hover {
background-color: green;
color: white;
}
</style>
</head>
<body>
<div class="container">
<!-- background image -->
<img class="gfg" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20191213145442/img40.png">
<!-- title and tag line with button -->
<div class="logo">
<h1>GeeksforGeeks</h1>
<p>A Computer Science Portal for Geeks</p>
<button>Hire with Us</button>
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por Sabya_Samadder y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA