Serve codice per due banner laterali fluttuanti

Mercato
1

Ho bisogno che qualcuno crei un codice che aggiunga due banner fluttuanti nelle barre laterali della versione desktop del mio forum.

Screenshot_6
Screenshot_61919×955 177 KB

Posso pagare 50 $ per questo lavoro.

3 Mi Piace
2

Condivido quello su cui ho lavorato finora,

è frammentario, incompleto e pensato per banner immagine

PNG
PNG932×484 191 KB

ma può essere adattato per il testo

il problema principale al momento è la dimensione dello schermo: noterete @media screen and (max-width: 1800px)
dove le immagini si ridimensionano per schermi più piccoli

Non è sufficiente e dovrà essere integrato anche per schermi ancora più piccoli, o più probabilmente potrà essere notevolmente migliorato con un codice completamente automatico,

spero possiate farlo funzionare e destinare i vostri 50 dollari alla gioia delle vacanze di qualcuno

Per completezza di informazione, non recito il ruolo di programmatore in TV e non ho pernottato in un Holiday Inn stanotte: questo è quello che c’è, un modello di base e un’offerta di aiuto senza garanzie. Stavo lavorando a questo come componente per un sito su cui non potevo creare un plug-in

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

<style>


</style>
</head>
<body>
<!-- banner sinistro -->
<div class="sidenav1">
  <a href=
  "link banner sinistro"
  target="_blank"><img width="270" height="648px" src=
  "immagine banner sinistro"
  ></a>
</div>



<!-- banner destro -->
<div class="sidenav2">
  <a href=
  "link banner destro"
  target="_blank"><img width="270" height="648px" src=
  "immagine banner destro"
 ></a>
</div>


</body>
CSS Desktop 
/* barra laterale sinistra  */
.sidenav1 {
  resize: both;
  overflow: auto;
 // height: 100%;
 // width: 160px;
  position: fixed; 
  z-index: 1; 
  top: 100px; 
  left: 2em;
  background-color: transparent; 
  overflow-x: hidden; /* Disabilita lo scorrimento orizzontale */
  //padding-top: 20px;
}

/* Link del menu di navigazione */
.sidenav1 a {
  //padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #000;
  display: block;
  cursor:url("my custom"), default;
}

/* Quando passi il mouse sui link di navigazione, cambia il loro colore */
.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;}
}



//////////



/* Menu della barra laterale */
.sidenav2 {
  resize: both;
  overflow: auto;
 // height: 100%;
 // width: 160px; 
  position: fixed; 
  z-index: 1;
  top: 100px;
  right: 2em;
  background-color: transparent;
  overflow-x: hidden; /* Disabilita lo scorrimento orizzontale */
  //padding-top: 20px;
}

/* Link del menu di navigazione */
.sidenav2 a {
  //padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #000;
  display: block;
  cursor:url("my custom"), 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;}
}

Buona fortuna.

5 Mi Piace
3

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