Нужен код для двух плавающих боковых баннеров

Маркетплейс
1

Мне нужен кто-то, кто напишет код для добавления двух плавающих баннеров в боковые панели десктопной версии моего форума.

Screenshot_6
Screenshot_61919×955 177 KB

Я готов заплатить 50 долларов за эту работу.

3 лайка
2

Я предложу то, над чем я работал.

Это сборная солянка, неполная и созданная для баннеров изображений.

PNG
PNG932×484 191 KB

но может быть изменена для текста.

Самая большая проблема на данный момент — это размер экрана; вы увидите @media screen and (max-width: 1800px),
где изображения уменьшаются для меньшего экрана.

Этого недостаточно, и потребуется либо добавить условия для ещё меньших экранов, либо, что более вероятно, это можно значительно улучшить с помощью полного автоматического кода.

Надеюсь, вы сможете заставить это работать и направить свои $50 на чье-то праздничное счастье.

Полное раскрытие: я не играю программиста на телевидении, и я не останавливался в отеле Holiday Inn прошлой ночью. Это то, что есть: базовый шаблон и предложение помощи без гарантий. Я делал это как компонент для сайта, на котором не могу создать плагин.

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

<style>


</style>
</head>
<body>
<!-- левый баннер -->
<div class="sidenav1">
  <a href=
  "ссылка на левый баннер"
  target="_blank"><img width="270" height="648px" src=
  "изображение левого баннера"
  ></a>
</div>



<!-- правый баннер -->
<div class="sidenav2">
  <a href=
  "ссылка на правый баннер"
  target="_blank"><img width="270" height="648px" src=
  "изображение правого баннера"
 ></a>
</div>


</body>
CSS для рабочего стола 
/* левая боковая панель  */
.sidenav1 {
  resize: both;
  overflow: auto;
 // height: 100%;
 // width: 160px;
  position: fixed; 
  z-index: 1; 
  top: 100px; 
  left: 2em;
  background-color: transparent; 
  overflow-x: hidden; /* Отключить горизонтальную прокрутку */
  //padding-top: 20px;
}

/* Ссылки меню навигации */
.sidenav1 a {
  //padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #000;
  display: block;
  cursor:url("my custom"), default;
}

/* При наведении мыши на ссылки навигации измените их цвет */
.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;}
}



//////////



/* Боковое меню */
.sidenav2 {
  resize: both;
  overflow: auto;
 // height: 100%;
 // width: 160px; 
  position: fixed; 
  z-index: 1;
  top: 100px;
  right: 2em;
  background-color: transparent;
  overflow-x: hidden; /* Отключить горизонтальную прокрутку */
  //padding-top: 20px;
}

/* Ссылки меню навигации */
.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;}
}

Удачи.

5 лайков
3

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