Оформление виджета с цитатами Эйнштейна

Разработка Оформление виджета с цитатами Эйнштейна

Нет прав для скачивания
Оформление виджета с цитатами Эйнштейна.
Пишем код HTML:
HTML:
<div class='slider center'>
  <div class='counter'></div>
  <div class='lang'></div>
  <div class='love fa fa-heart-o'></div>
  <div class='progress'></div>
  <div class='slide'>
    <div class='quote'>The difference between stupidy and genius is that genius has its limits.</div>
  </div>
  <div class='slide'>
    <div class='quote'>Before God we are all equally wise - and equally foolish.</div>
  </div>
  <div class='slide'>
    <div class='quote'>I never teach my pupils. I only attempt to provide the conditions in which they can learn.</div>
  </div>
  <div class='slide'>
    <div class='quote'>Perfection of means and confusion of ends seems to characterize our age.</div>
  </div>
  <div class='slide'>
    <div class='quote'>If you are out to describe the truth, leave elegance to the tailor.</div>
  </div>
  <div class='slide'>
    <div class='quote'>It is a miracle that curiosity survives formal education.</div>
  </div>
  <div class='author'>
    <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/81117/einstein_1.png'>
    ALBERT EINSTIEN
  </div>
</div>
Пишем стиль:
CSS:
body {
  background-color: #4c4f52;
  font-family: 'Nunito', sans-serif;
  font-size: 14pt;
}
.slider {
  color: white;
  width: 315px;
  height: 375px;
  display: block;
  position: relative;
  box-shadow: 0px 0px 6px 3px #303234, 0 30px 20px -15px #303234;
  overflow: hidden;
}
.slider::before {
  content: "";
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/81117/albert-einstein.png);
  background-size: cover;
  opacity: 0.1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}
.slider > .slide {
  top: 65px;
  position: absolute;
}
.slider > .counter {
  display: block;
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 999;
}
.slider > .progress {
  width: 0px;
  height: 5px;
  background-color: #2ec7bf;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 999;
}
.slider > .progress::before {
  content: '';
  width: 315px;
  height: 5px;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 998;
  background-color: #2ec7bf;
  opacity: 0.25;
}
.center {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.quote {
  padding: 0 20px;
  font-size: 18pt;
  text-align: center;
}
.quote::before {
  content: '\f10d  ';
  font-family: FontAwesome;
  color: #2ec7bf;
  font-size: 18pt;
}
.quote::after {
  content: '  \f10e';
  font-family: FontAwesome;
  color: #2ec7bf;
  font-size: 18pt;
}
.author {
  width: 315px;
  position: absolute;
  left: 0;
  bottom: 23px;
  right: 0;
  margin: auto;
  text-align: center;
}
.author img {
  width: 62px;
  height: 62px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 5px solid #2ec7bf;
  position: absolute;
  left: 0;
  bottom: 25px;
  right: 0;
  margin: auto;
}
.love {
  border-radius: 50%;
  border: 2px solid white;
  padding: 4px 4px 2px 4px;
  right: 18px;
  top: 16px;
  position: absolute;
  content: '\f08a';
  font-family: FontAwesome;
  display: block;
}
.love:hover:before {
  color: #2ec7bf;
  content: '\f004';
}
Пишем код js:
JavaScript:
var current = 0,
    max = $(".slider > .slide").length;
$(".slider > .slide:gt(0)").hide();
$('.counter').text('1 of ' + max);

setInterval(function() {
  $('.slider > .slide:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('.slider');
  current++;
  if (current >= max) current = 0;
  $('.progress').width((current+1) * 315 / max);
  $('.counter').text(current+1 + ' of ' + max);
 
},  3000);
Смотрим полученный нами результат:
fg60.gif
Автор
baltun
Скачиваний
0
Просмотры
542
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0

Ещё ресурсы от baltun

Похожие ресурсы
Назад
Верх Низ