Crear un banner de anuncio con CSS y HTML - Códigos y algoritmos 🚀

¡Qué tal! Aficionada y aficionado del conocimiento académico, les presento el siguiente contenido académico con fines didácticos sobre temas aprendidos en mi profesión.

Código Css y Html para realizar un banner de anuncio

<style>

.mainet-wrapper {
  position: relative;
  width: 70%;
  height: 260px;
  margin: 40px auto 0;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position-y: -600%;
  background-color: #ffa41c;
  border-radius: 4px;
  color: #FFF;
  box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.1);
}

.registred-wrapper {
  position: absolute;
  left: -30px;
  right: -30px;
  height: 150px;
  padding: 30px;
  background-position-x: 272%;
  background-position-y: -1px;
  background-repeat: no-repeat;
  background-color: #FFF;
  border-radius: 4px;
  color: #333;
  box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.1);
}

.registred-wrapper:after {
  position: absolute;
  content: "";
  right: -10px;
  bottom: 71px;
  width: 0;
  height: 0;
  border-left: 0px solid transmainet;
  border-right: 10px solid transmainet;
  border-bottom: 10px solid #ffa41c;
}

.registred-wrapper h4 {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 3px;
  line-height: 28px;
}

.registred-wrapper input:focus {
  outline: none;
  border-bottom: 1px solid #ffd814;
}

.registred-wrapper .submit-btn {
  position: absolute;
  border-radius: 30px;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  background-color: #ffd814;
  color: #FFF;
  padding: 12px 25px;
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 2px;
  right: -10px;
  bottom: 30px;
  cursor: pointer;
  transition: all .25s ease;
  box-shadow: -5px 6px 20px 0px rgba(51, 51, 51, 0.4);
}

.registred-wrapper .submit-btn:hover {
background-color: #ffa41c;
}
.registred-wrapper .submit-btn .tex-link {
 color: #000000;
}

</style>

<div class="mainet-wrapper">
<span class="material-icons">
icono_1
</span><span class="material-icons">
icono_2
</span><span class="material-icons">
icono_3
</span><span class="material-icons">
icono_4
</span><span class="material-icons">
icono_5
</span>
  <div class="registred-wrapper">
    <h4>Mensaje de barra de anuncio</h4>
    <div class="submit-btn"><a class="tex-link" target="_blank" href="url_of_site_web">Ingresar al mensaje del Anuncio</a></div>
  </div>
</div>

Uso de la información

Aclaro que el contenido de este artículo es un resumen de lo que he realizado y anotado de en mi aprendizaje profesional. Además, la información detallada o descrita en este articulo académico, puede ser utilizada como referencia para fines educativos y en el caso de realizar proyectos académicos oficiales, formales; es recomendable que valides la información con fuentes académicas confiables, en revistas científicas y repositorios de credibilidad.

Figure 1. Crear un banner de anuncio con CSS y HTML - sybcodex.com

Referencias

Pixabay (Pexels, 2022). Ilustración de este capítulo. [Figure 1]. Recuperado de https://pixabay.com/

Autor: Sybcodex (Joel Sotelo Bustamante)

Título del libro: «Códigos y algoritmos»

Título del capítulo: Crear un banner de anuncio con CSS y HTML

Escrito en el año: 2022

Tienda online de libros: 👉 Book Sh💓p

©Todos los derechos reservados al autor.