Necesito código para dos banners flotantes en la barra lateral

Mercado
1

Necesito que alguien cree un código que añada dos banners flotantes en las barras laterales de la versión de escritorio de mi foro.

Screenshot_6
Screenshot_61919×955 177 KB

Puedo pagar 50 dólares por este trabajo.

3 Me gusta
2

Les comparto lo que he estado trabajando,

es fragmentado, incompleto y está diseñado para banners de imagen

PNG
PNG932×484 191 KB

pero se puede adaptar para texto

el mayor problema en este momento es el tamaño de pantalla; verán @media screen and (max-width: 1800px)
donde las imágenes se reducen para pantallas más pequeñas

Eso no es suficiente y será necesario añadir más reglas para pantallas aún más pequeñas o, lo más probable, se puede mejorar enormemente con un código completamente automático,

espero que puedan hacerlo funcionar y destinar sus 50 dólares a la felicidad de las vacaciones de alguien

Para ser totalmente transparente: no soy un programador de televisión y no me alojé en un Holiday Inn anoche. Esto es lo que es: una plantilla base y una oferta de ayuda sin garantías. Lo estaba desarrollando como un componente para un sitio en el que no puedo crear un plugin.

HTML 
<!DOCTYPE html>
<html>
<head>

<style>


</style>
</head>
<body>
<!-- banner izquierdo -->
<div class="sidenav1">
  <a href=
  "enlace del banner izquierdo"
  target="_blank"><img width="270" height="648px" src=
  "imagen del banner izquierdo"
  ></a>
</div>



<!-- banner derecho -->
<div class="sidenav2">
  <a href=
  "enlace del banner derecho"
  target="_blank"><img width="270" height="648px" src=
  "imagen del banner derecho"
 ></a>
</div>


</body>
CSS para escritorio 
/* barra lateral izquierda  */
.sidenav1 {
  resize: both;
  overflow: auto;
 // height: 100%;
 // width: 160px;
  position: fixed; 
  z-index: 1; 
  top: 100px; 
  left: 2em;
  background-color: transparent; 
  overflow-x: hidden; /* Desactivar desplazamiento horizontal */
  //padding-top: 20px;
}

/* Enlaces del menú de navegación */
.sidenav1 a {
  //padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #000;
  display: block;
  cursor:url("mi personalizado"), default;
}

/* Cuando el ratón pasa sobre los enlaces de navegación, cambia su color */
.sidenav1 a:hover {
  color: #f1f1f1;
}






@media screen and (max-width: 1800px) {
  .sidenav1 {left: 3.5em;}
  .sidenav1 a {font-size: 18px;}
  .sidenav1 img {width: 70%;}
  .sidenav1 img {height: auto;}
}



//////////



/* Menú de la barra lateral */
.sidenav2 {
  resize: both;
  overflow: auto;
 // height: 100%;
 // width: 160px; 
  position: fixed; 
  z-index: 1;
  top: 100px;
  right: 2em;
  background-color: transparent;
  overflow-x: hidden; /* Desactivar desplazamiento horizontal */
  //padding-top: 20px;
}

/* Enlaces del menú de navegación */
.sidenav2 a {
  //padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #000;
  display: block;
  cursor:url("mi personalizado"), default;
}


.sidenav2 a:hover {
  color: #f1f1f1;
}




@media screen and (max-width: 1800px) {
  .sidenav2 {right: -2em;}
  .sidenav2 a {font-size: 18px;}
  .sidenav2 img {width: 70%;}
  .sidenav2 img {height: auto;}
}

Buena suerte.

5 Me gusta
3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.