Publicaci贸n destacada

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
Figure 1. Crear un banner de anuncio con CSS y HTML - sybcodex.com

Referencias


Pixabay (Pexels2022). 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.


Comentarios

Nuestras redes sociales

Contenido relacionado