Switch to English?
Yes
Переключитись на українську?
Так
Переключиться на русскую?
Да
Przełączyć się na polską?
Tak
Розмістіть свій проєкт безплатно та почніть отримувати пропозиції від фрилансерів-виконавців уже через хвилини після публікації!

Кликабельный фон на Wordpress

HTML та CSS верстання

Опублікувати схожий проєкт
  1. Роман Головатий
    32  
    2 дні140 UAH

    Здраствуйте, готов приступить к выполнению задания. Но заморачиватса и говорить куда писать код это долго легче скинуть копию сайта мне я все зделаю

     
  2.
    Ольга Філатова
    1107    29  0
    1 день127 UAH

    Здравствуйте, Алексей.
    Могу приступить к выполнению задания в ближайшее время.
    Стоимость - 300р.
    С уважением,
    Ольга.

     
  3.
    Роман Пелипець
    210    3  0
    1 день150 UAH

    Здравствуйте,

    Я разработчик WordPress / FrontEnd с 2-летним опытом работы, работая как инженером, так и руководителем команды на различных крупномасштабных платформах.

    Я совсем недавно перешел на фриланс, поэтому я был бы признателен, чтобы вы дали мне возможность проявить себя, несмотря на то, что мой профиль сейчас не заполнен. Я могу гарантировать вам быструю и надежную роботу, поверьте мне, вы не пожалеете.

    Жду ответа от Вас.

     
    4. Ще 4 ставки приховано
  • Микола В.
    18 липня 2018, 23:31 |

    На джаваскрипте сгодится ?
  • Профіль видалено
    18 липня 2018, 23:35 |

    Здравствуйте. По большому счету неважно, главное чтобы была возможность переодически менять картинку фона и её кликабельность (гиперссылку на ней). 
  • Микола В.
    18 липня 2018, 23:42 |

    В общем я ставку сделал, если устраивает, выбирайте и делаем через сейф.
  • Профіль видалено
    19 липня 2018, 0:38 |

    на чистом css без нагрузки на сервер


    <!DOCTYPE html>

    <html><head>

    <style>

    html {

        min-height: 100%

        }

    body {

        min-height: 100%;

        margin:0;

        padding:0;

        font: 15px Tahoma;

        color:#555;

        }

    p {

    margin: 1em 0;

    text-align: center;

    }

    #top {

        width:100%;

        background: #222;

        text-align:center;

        height:35px;

        line-height:35px;

        }

    #top a {

    color:#00FF00;

    text-decoration:none;

    }

    .logo {

        width:200px;

        font: 22px/125% Tahoma;

        float:left;

        line-height:35px;

        }

    .logo span {

    font: 12px/125% Tahoma;

    }

    .body_slides {

        list-style:none;

        margin:0;

        padding:0;

        z-index:-2; 

        background:#000;

        }

    .body_slides,

    .body_slides:after {

        position: fixed;

        width:100%;

        height:100%;

        top:0px;

        left:0px;

        }

    .body_slides:after { 

        content: '';

        background: transparent url(images/pattern.png) repeat top left;

        }

    @-webkit-keyframes anim_slides {

    0% {

    opacity:0;

    }

    6% {

    opacity:1;

    }

    24% {

    opacity:1;

    }

    30% {

    opacity:0;

    }

    100% {

    opacity:0;

    }

    }

    @-moz-keyframes anim_slides {

    0% {

    opacity:0;

    }

    6% {

    opacity:1;

    }

    24% {

    opacity:1;

    }

    30% {

    opacity:0;}

    100% {

    opacity:0;

    }

    }

    .body_slides li {

        width:100%;

        height:100%;

        position:absolute;

        top:0;

        left:0;

        background-size:cover;

        background-repeat:none;

        opacity:0;

        -webkit-animation: anim_slides 18s linear infinite 0s;

        -moz-animation: anim_slides 18s linear infinite 0s;

        -o-animation: anim_slides 18s linear infinite 0s;

        -ms-animation: anim_slides 18s linear infinite 0s;

        animation: anim_slides 18s linear infinite 0s;

    }

    .body_slides li:nth-child(1) {

    background-image: url(http://russian-consumer.ru/wp-content/uploads/2017/12/37997938_-_07_04_2016_-_eqgourmet10.jpg);

    }

    .body_slides li:nth-child(2) {

    -webkit-animation-delay: 6.0s;

    -moz-animation-delay: 6.0s;

    background-image: url(https://i2.wp.com/russian-consumer.ru/wp-content/uploads/2015/03/82a028a20bc552604144ad46d38709ad_XL1.jpg?resize=350%2C230);

    }

    .body_slides li:nth-child(3) {

    -webkit-animation-delay: 12.0s;

    -moz-animation-delay: 12.0s;

    background-image: url(https://i2.wp.com/russian-consumer.ru/wp-content/uploads/2018/07/ATB_0317.jpg?resize=350%2C230);

    }

    .logo a {

    color: #fff;

    font-size: 3rem;

    }

    .logo {

    width: 100%;

    text-align: center;

    padding: 3em 0 0;

    }

    </style>


    </head>

    <body id="body">

    <ul class="body_slides">

    <li></li>

    <li></li>

    <li></li>

    </ul>

    <div class="logo"><a href="http://russian-consumer.ru/" target="_blank">RC</a></div>

    </body>

    </html>


    откройте какой-нибудь ваш текстовый редактор, допустим Блокнот, вставте это дело, и сохраните куда-нибудь на компьютер, допустим как rc.html , обязательно чтоб было .html,  откройте этот файл в браузере и посмотрите что это такое.
  • Микола В.
    19 липня 2018, 0:46 |

    1- Если хотел показать себя, то делай уже до конца. (хотя бы в кодепен засунуть это полотно и сюда запостить ссылку)

    2- В тз как бы понятно указано, что нужно кликабельным сделать фон, который замещает пространство вокруг блока с основным материалом.

       Итог. Данный код никакого отношения к тз не имеет, хоть и неплохое решение для слайдера на цсс. 
  • Профіль видалено
    19 липня 2018, 0:43 |

    чтоб менять картинки в строку background-image: url(http://russian-consumer.ru/wp-content/uploads/2017/12/37997938_-_07_04_2016_-_eqgourmet10.jpg)      вместо        http://russian-consumer.ru/wp-content/uploads/2017/12/37997938_-_07_04_2016_-_eqgourmet10.jpg            , т.е. путь к картинке, вставляйте свои изображения.
  • Профіль видалено
    19 липня 2018, 1:04 |

    чтобы было всё как нужно сделайте следующее. Я не знаю какой у вас доступ к вашим файлам, через хостинг, а может через ftp, скорей всего так и так. Короче, откройте в вашей теме файл functions.php, и вставте такой код 

    function background_rc(){

    $content='<ul class="body_slides"><li></li><li></li><li></li></ul>';

    return $content;

    }

    add_shortcode( 'backgroundrc, 'background_rc');

    После этого в header.php  сразу после <body <?php body_class(); ?>>   вставте  <?php echo do_shortcode('[backgroundrc]'); ?>      всё что находится между <style></style> вставте в ваш основной css файл, обычно это в самой теме style.css

    Хотя что я вам пишу, может вам это и не надо. Но по крайней мере, в отличие от js, здесь не будет никакой нагрузки на сервер.
  • Микола В.
    19 липня 2018, 1:21 |

    Но по крайней мере, в отличие от js, здесь не будет никакой нагрузки на сервер. 

    Я всегда почему то был уверен, что JS выполняется на стороне клиента, и никакой нагрузки на сервер не делает ?

        
  • Микола В.
    19 липня 2018, 1:51 |

    function background_rc(){

    $content='<ul class="body_slides"><li></li><li></li><li></li></ul>';

    return $content;

    }

    add_shortcode( 'backgroundrc, 'background_rc');

    После этого в header.php  сразу после <body <?php body_class(); ?>>   вставте  <?php echo do_shortcode('[backgroundrc]'); ?>


    Как раз этот кусок кода делает нагрузку на сервер. ( Так как написан на php)
  • Профіль видалено
    19 липня 2018, 1:10 |

    слушай, грамотей, объясни ка мне дураку что такое кодепен, первый раз такой бред слышу.
  • Микола В.
    19 липня 2018, 1:15 |

    https://codepen.io/pen/
  • Микола В.
    19 липня 2018, 1:26 |

    Вот как можно было бы показать в работе свой код

     https://codepen.io/anon/pen/qyaPPy

     Все просто и наглядно, не надо ничего сохранять и создавать, все видно в браузере сразу.
  • Профіль видалено
    19 липня 2018, 2:01 |

    я ошибся 

    <body id="body">

    <a href="http://russian-consumer.ru/" target="_blank" title="RC">

    <ul class="body_slides">

    <li></li>

    <li></li>

    <li></li>

    </ul></a>

    <div class="logo"><a href="" target="_blank">RC</a></div>

    </body>

    кликабельный фон
  • Профіль видалено
    19 липня 2018, 3:45 |

    <!DOCTYPE html>

    <html><head>

    <style>

    .body_slides {

        list-style:none;

        margin:0;

        padding:0;

        z-index:-2; 

        background:#000;

        }

    .body_slides,

    .body_slides:after {

        position: fixed;

        width:100%;

        height:100%;

        top:0px;

        left:0px;

        }

    .body_slides:after { 

        content: '';

        background: transparent url(images/pattern.png) repeat top left;

        }

    @-webkit-keyframes anim_slides {

    0% {

    opacity:0;

    }

    6% {

    opacity:1;

    }

    24% {

    opacity:1;

    }

    30% {

    opacity:0;

    }

    100% {

    opacity:0;

    }

    }

    @-moz-keyframes anim_slides {

    0% {

    opacity:0;

    }

    6% {

    opacity:1;

    }

    24% {

    opacity:1;

    }

    30% {

    opacity:0;}

    100% {

    opacity:0;

    }

    }

    .body_slides li a {

        width:100%;

        height:100%;

        position:absolute;

        top:0;

        left:0;

        z-index: 9; 

        background-size:cover;

        background-repeat:none;

        opacity:0;

        -webkit-animation: anim_slides 18s linear infinite 0s;

        -moz-animation: anim_slides 18s linear infinite 0s;

        -o-animation: anim_slides 18s linear infinite 0s;

        -ms-animation: anim_slides 18s linear infinite 0s;

        animation: anim_slides 18s linear infinite 0s;

    }

    .body_slides li:nth-child(1) a {

    background-image: url(http://russian-consumer.ru/wp-content/uploads/2017/12/37997938_-_07_04_2016_-_eqgourmet10.jpg);

    }

    .body_slides li:nth-child(2) a {

    -webkit-animation-delay: 6.0s;

    -moz-animation-delay: 6.0s;

    background-image: url(https://i2.wp.com/russian-consumer.ru/wp-content/uploads/2015/03/82a028a20bc552604144ad46d38709ad_XL1.jpg?resize=350%2C230);

    }

    .body_slides li:nth-child(3) a {

    -webkit-animation-delay: 12.0s;

    -moz-animation-delay: 12.0s;

    background-image: url(https://i2.wp.com/russian-consumer.ru/wp-content/uploads/2018/07/ATB_0317.jpg?resize=350%2C230);

    }

    </style>


    <ul class="body_slides">

    <li><a href="http://russian-consumer.ru/" target="_blank" title="RC"></a></li>

    <li><a href="http://russian-consumer.ru/2018/07/18/%d0%bb%d0%b5%d0%bd%d1%82%d0%b0-%d0%be%d1%82%d0%ba%d0%b0%d0%b7%d0%b0%d0%bb%d0%b0%d1%81%d1%8c-%d0%be%d1%82-%d0%bf%d1%80%d0%b5%d1%82%d0%b5%d0%bd%d0%b7%d0%b8%d0%b9-%d0%ba-%d1%81%d0%b2%d0%b5/" target="_blank" title="RC"></a></li>

    <li><a href="http://russian-consumer.ru/2018/07/18/self-scanning/" target="_blank" title="RC"></a></li>

    </ul>
  • Профіль видалено
    20 липня 2018, 6:52 |

    а тебе разве не объяснили что такое codepen?
  • Профіль видалено
    19 липня 2018, 3:49 |

    тогда

    function background_rc(){

    $content='<ul class="body_slides">

    <li><a href="http://russian-consumer.ru/" target="_blank" title="RC"></a></li>

    <li><a href="http://russian-consumer.ru/2018/07/18/%d0%bb%d0%b5%d0%bd%d1%82%d0%b0-%d0%be%d1%82%d0%ba%d0%b0%d0%b7%d0%b0%d0%bb%d0%b0%d1%81%d1%8c-%d0%be%d1%82-%d0%bf%d1%80%d0%b5%d1%82%d0%b5%d0%bd%d0%b7%d0%b8%d0%b9-%d0%ba-%d1%81%d0%b2%d0%b5/" target="_blank" title="RC"></a></li>

    <li><a href="http://russian-consumer.ru/2018/07/18/self-scanning/" target="_blank" title="RC"></a></li>

    </ul>';

    return $content;

    }

    add_shortcode( 'backgroundrc, 'background_rc');

    После этого в header.php  сразу после <body <?php body_class(); ?>>   вставте  <?php echo do_shortcode('[backgroundrc]'); ?>

Актуальні фриланс-проєкти в категорії HTML та CSS верстання

Додати блок на сайт

Для сайта: https://queenstabledance.com/ Надо зробити блок контенту на двох мовних версіях - щоб він редагувався в адмінці. Приклад блоку нижче.

HTML та CSS верстання ∙ 1 година 18 хвилин тому ∙ 34 ставки

Потрібна натяжка макета на вордпресі: одразу верстка + wp

10 308 UAH

Потрібна натяжка макета на вордпресі, одразу верстка+wp, лендінг з шаблонними сторінками картинка текст, макет надішлю в лс, прохання відгукуватися тим, хто не підводить за термінами та якістю здачі проекту. (макет у фігма)

HTML та CSS верстання,  Веб-програмування ∙ 2 години 19 хвилин тому ∙ 71 ставка

Зібрати сторінку на Elementor Pro

Необхідно зібрати з нуля сторінку на сайті WordPress на плагіні Elementor (Pro-версія). Десктоп версія + адаптивна версія планшет та мобайл. Дизайн надаємо у Figma. Шаблон документу дизайну — у вкладеннях (тільки десктоп версія). Необхідно буде використовувати анімацію, тому…

HTML та CSS верстання,  Веб-програмування ∙ 3 години 56 хвилин тому ∙ 47 ставок

Оновлення плагінів і тем WP сайт putevka.uz

«Потрібно провести технічний аудит WordPress-сайту, перевірити актуальність, безпеку та сумісність встановлених плагінів і теми. За результатами — запропонувати легальні варіанти оновлення, заміни застарілих рішень або переходу на офіційно доступні аналоги. Платні плагіни та…

HTML та CSS верстання,  PHP ∙ 8 годин 45 хвилин тому ∙ 31 ставка

Розробка інтерактивної карти Palworld для сайту

Потрібно розробити інтерактивну карту Palworld за прикладом: https://palworld.gg/map Нам потрібна не просто статична картинка, а повноцінна інтерактивна карта, де користувач може дивитися локації, вмикати / вимикати категорії об’єктів, шукати потрібні точки та взаємодіяти з…

HTML та CSS верстання,  Javascript та Typescript ∙ 23 години 47 хвилин тому ∙ 28 ставок

Замовник
Профіль видалено


Проєкт опублікований
7 років тому
162 перегляди