Freelance projects

Freelance projects

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

HTML & CSS — incorrectly specified categories?

Proposals 7 Discussions 16

Roman Golovaty

0 0

Projects -
Rating -
Rating 32

Budget: 140 UAH Deadline: 2 days

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

Olha Filatova

29 0

Projects 29
Rating -
Rating 1 173

Budget: 300 RUB Deadline: 1 day

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

Roman Pelipets

3 0

Projects 3
Rating -
Rating 210

Budget: 150 UAH Deadline: 1 day

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

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

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

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

Mikola V. 18 July 2018

На джаваскрипте сгодится ?

Aleksey Vinogradov

18 July 2018

Здравствуйте. По большому счету неважно, главное чтобы была возможность переодически менять картинку фона и её кликабельность (гиперссылку на ней).

Mikola V. 18 July 2018

В общем я ставку сделал, если устраивает, выбирайте и делаем через сейф.

German Vasilenko 19 July 2018

на чистом 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, откройте этот файл в браузере и посмотрите что это такое.

Mikola V. 19 July 2018

1- Если хотел показать себя, то делай уже до конца. (хотя бы в кодепен засунуть это полотно и сюда запостить ссылку)
2- В тз как бы понятно указано, что нужно кликабельным сделать фон, который замещает пространство вокруг блока с основным материалом.
Итог. Данный код никакого отношения к тз не имеет, хоть и неплохое решение для слайдера на цсс.

German Vasilenko 19 July 2018

чтоб менять картинки в строку 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 , т.е. путь к картинке, вставляйте свои изображения.

German Vasilenko 19 July 2018

чтобы было всё как нужно сделайте следующее. Я не знаю какой у вас доступ к вашим файлам, через хостинг, а может через 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, здесь не будет никакой нагрузки на сервер.

Mikola V. 19 July 2018

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

Mikola V. 19 July 2018

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)

German Vasilenko 19 July 2018

слушай, грамотей, объясни ка мне дураку что такое кодепен, первый раз такой бред слышу.

Mikola V. 19 July 2018

https://codepen.io/pen/

Mikola V. 19 July 2018

Вот как можно было бы показать в работе свой код
https://codepen.io/anon/pen/qyaPPy
Все просто и наглядно, не надо ничего сохранять и создавать, все видно в браузере сразу.

German Vasilenko 19 July 2018

я ошибся
<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>
кликабельный фон

German Vasilenko 19 July 2018

<!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>

Eldar Yusupzhanov 20 July 2018

а тебе разве не объяснили что такое codepen?

German Vasilenko 19 July 2018

тогда
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]'); ?>

Add Comment

Aleksey Vinogradov
Moscow, Russia

Projects -
Rating -
Rating 45

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

Roman Golovaty

Olha Filatova

Roman Pelipets

Proposals concealed

Proposals are currently absent

Current freelance projects in the category HTML & CSS

Website layout based on the ready design

Create a Sales Funnel on the Website Builder (not difficult)

Разработка профессионального HTML email и подготовка его к рассылке.

Layout + design of a sushi bar

Redesign and relaunch of the Brovchak Family Dental Care website.