Верстка и веб-дизайн. 3 курс. Практическое занятие №6. Bootstrap верстка Flip-карт

Вам нужно создать две flip-карты с фото на фронтальной панели и описанием на задней панели и разместить их горизонтально с помощью bootstrap-верстки.

Вам потребуются:

I) Bootstrap-библиотека стилей и Font Awesome;

II) Параметры стилей в CSS;

III) JavaScript-библиотека;

IV) Динамический сценарий JavaScript;

V) HTML.

Оба фото для flip-карт сохраните в нужном размере и загрузите в репозиторий

I) Bootstrap-библиотека стилей и Font Awesome

1) Библиотеку можно взять здесь и подключить: https://raw.githubusercontent.com/Dmitrykonn/konoplev/master/bootstrapmin.css

2) Font Awesome необходимо встроить используя ссылку: https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css

II) Параметры стилей в CSS

3) В универсальном селекторе указываем общие параметры блока:

* {

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

}

4) В селекторе body указываем отступы. Также здесь необходимо указать фон страницы, на котором будут располагаться flip-карты:

body {

  padding-top: 50px;

  padding-bottom: 20px;

}

5) Теперь задаем классы навигации по кнопкам flip-карт:

.btn-flip-extend, .btn-flip:hover, .btn-flip:focus {

  background-color: transparent;

  -moz-box-shadow: none;

  -webkit-box-shadow: none;

  box-shadow: none;

  opacity: 1;

}

.btn-flip {

  opacity: 0.8;

  color: #666666;

  background-color: transparent;

}

6) Создаем класс контейнера карты. Обратите внимание, что его высота равна высоте всей вашей карты:

.card-container {

  -moz-perspective: 800px;

  -webkit-perspective: 800px;

  perspective: 800px;

  -moz-transform-style: preserve-3d;

  -webkit-transform-style: preserve-3d;

  transform-style: preserve-3d;

  -moz-border-radius: 4px;

  -webkit-border-radius: 4px;

  border-radius: 4px;

  margin-bottom: 30px;

  width: 100%;

  height: 320px;

}

7) Добавляем классы движения flip-карт:

.card-container:not(.manual-flip):hover .front {

  -moz-transform: rotateY(180deg);

  -ms-transform: rotateY(180deg);

  -webkit-transform: rotateY(180deg);

  transform: rotateY(180deg);

}

.card-container:not(.manual-flip):hover .back {

  -moz-transform: rotateY(0deg);

  -ms-transform: rotateY(0deg);

  -webkit-transform: rotateY(0deg);

  transform: rotateY(0deg);

}

.card-container.hover.manual-flip .front {

  -moz-transform: rotateY(180deg);

  -ms-transform: rotateY(180deg);

  -webkit-transform: rotateY(180deg);

  transform: rotateY(180deg);

}

.card-container.hover.manual-flip .back {

  -moz-transform: rotateY(0deg);

  -ms-transform: rotateY(0deg);

  -webkit-transform: rotateY(0deg);

  transform: rotateY(0deg);

}

8) Создаем класс самой карты с параметрами перехода:

.card {

  -moz-transform-style: preserve-3d;

  -webkit-transform-style: preserve-3d;

  transform-style: preserve-3d;

  -moz-border-radius: 4px;

  -webkit-border-radius: 4px;

  border-radius: 4px;

  -moz-transition: -moz-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  -o-transition: -o-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  -webkit-transition: -webkit-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  position: relative;

  background: none repeat scroll 0 0 #fff;

  color: #444444;

  max-width: 412px;

  margin: 0 auto;

}

9) Теперь создаем класс класса для обложки flip-карт:

.card .cover {

  -moz-border-radius: 4px 4px 0 0;

  -webkit-border-radius: 4px;

  border-radius: 4px 4px 0 0;

  height: 320px;

  overflow: hidden;

  z-index: -2;

}

10) Поскольку обложка у нас будет в виде фото, нужно создать класс класса селектора, ориентируясь на пункт 9, с параметрами ширины и высоты. Ширину можно указать в 100%, высоту в пикселях - она совпадает с указанной в пункте 6. Имя селектора можно использовать стандартное для фото: img

11) Создаем класс класса для контента:

.card .content {

  background-color: transparent;

  -moz-box-shadow: none;

  -webkit-box-shadow: none;

  box-shadow: none;

  padding: 10px 20px 20px;

}

12) Для основного блока:

.card .content .main {

  min-height: 140px;

}

13) Для названия карты:

.card .name {

  font-size: 32px;

  text-align: center;

}

14) Для заголовка в названии карты. Здесь укажите цвет шрифта заголовка:

.card h3 {

  margin-top: -180px;

  font-weight: 300;

  line-height: 20px;

}

15) Футер flip-карт:

.card .footer {

  margin-top: -80px;

  text-align: center;

}

16) Кнопка футера flip-карт с фронтальной и с обратной стороны:

.card .footer .btn-simple {

  margin-top: -6px;

}

.back .btn-simple {

  position: absolute;

  left: 0;

  bottom: 4px;

}

17) Текст с обратной стороны. В качестве фона можно применить линейный градиент. Используйте свои цвета:

.card .header {

  padding: 55px 20px;

  background: linear-gradient(to top, #FF9314, #FF69B4, #FFC0CB);

  color: black;

  font-size: 11pt;

}

18) Пространство для текста с обратной стороны:

.card .back .content .main {

  height: 165px;

}

19) Класс фронтальной части flip-карт с трансформацией и размерами:

.front {

  -moz-backface-visibility: hidden;

  -webkit-backface-visibility: hidden;

  backface-visibility: hidden;

  -moz-transition: -moz-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  -o-transition: -o-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  -webkit-transition: -webkit-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  -moz-transform-style: preserve-3d;

  -webkit-transform-style: preserve-3d;

  transform-style: preserve-3d;

  -moz-transform: rotateY(0deg);

  -ms-transform: rotateY(0deg);

  -webkit-transform: rotateY(0deg);

  transform: rotateY(0deg);

  -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);

  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);

  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);

  -moz-border-radius: 4px;

  -webkit-border-radius: 4px;

  border-radius: 4px;

  position: absolute;

  background-color: #fff;

  width: 100%;

  height: 320px;

  top: 0;

  left: 0;

  z-index: 2;

}

20) То же самое для обратной стороны flip-карт:

.back {

  -moz-backface-visibility: hidden;

  -webkit-backface-visibility: hidden;

  backface-visibility: hidden;

  -moz-transition: -moz-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  -o-transition: -o-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  -webkit-transition: -webkit-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  -moz-transform-style: preserve-3d;

  -webkit-transform-style: preserve-3d;

  transform-style: preserve-3d;

  -moz-transform: rotateY(-180deg);

  -ms-transform: rotateY(-180deg);

  -webkit-transform: rotateY(-180deg);

  transform: rotateY(-180deg);

  -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);

  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);

  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);

  -moz-border-radius: 4px;

  -webkit-border-radius: 4px;

  border-radius: 4px;

  position: absolute;

  background-color: #fff;

  width: 100%;

  height: 320px;

  top: 0;

  left: 0;

}

III) JavaScript-библиотека

21) Библиотеку можно взять здесь и встроить через репозиторий: https://raw.githubusercontent.com/Dmitrykonn/konoplev/master/jqueryflip.js

IV) Динамический сценарий JavaScript

22) Мы используем функцию "вращать карту", совмещая ее с классом контейнера карты и класса кнопки:

function rotateCard(btn) {

  var $card = $(btn).closest('.card-container');

  console.log($card);

  if ($card.hasClass('hover')) {

    $card.removeClass('hover');

  } else {

    $card.addClass('hover');

  }

}

V) HTML

23) Указываем стандартные параметры:

<!DOCTYPE html>

<html lang="en" >

<head>

  <meta charset="UTF-8">

24) В теге <title> пишем условный заголовок, затем встраиваем bootstrap-библиотеку, Font Awesome и CSS.

25) Закрываем  </head> и внутри  <body> разворачиваем классы bootstrap-верстки:

<div class="container">

 <div class="row">

26) Теперь создаем класс секции, в котором у нас будут располагаться flip-карты:

<section class="card-holder">    

Обратите внимания, что эти классы будут закрыты после всех flip-карт.

27) Flip-карта начинается с класса верстки макета bootstrap:

<div class="col-md-4 col-sm-6">

28) Далее мы разворачиваем все классы, использовавшиеся в CSS, то есть:

<div class="card-container manual-flip">

<div class="card">

 <div class="front">

 <div class="cover">

29) Теперь встраиваем фото фронтальной части карты:

<img src="https://sites.google.com/site/konoplevmedia/lagoonfront.jpg"> 

 30) Закрываем класс обложки.

31) Открываем классы контента, основного содержимого и имени заголовка:

<div class="content">

<div class="main">

<h3 class="name">Венеция</h3>

32) Закрываем класс основного содержимого.

33) Открываем класс футера и в нем класс кнопки с атрибутом клика и параметром переворачивания карты:

<div class="footer">

<button class="btn btn-flip btn-qr" onclick="rotateCard(this)">

34) Теперь встраиваем стрелку кнопки через Font Awesome, задаем цвет надписи на кнопке (используйте свой) и закрываем все соответствующие классы:

<font color="black"><i class="fa fa-mail-forward"></i>подробнее</font></button>

</div>

</div>

</div>

35) Открываем классы обратной стороны карты и ее текстовой части:

<div class="back">

<div class="header">

36) В теге абзаца указываем нужный текст:

Ваш текст

37) Закрываем класс текстовой части.

38) Класс контента у нас пуст:

<div class="content"> </div>

39) В классе футера разворачиваем класс обратной кнопки:

<div class="footer">

<button class="btn btn-flip" onclick="rotateCard(this)"><font color="black">

<i class="fa fa-reply"></i>назад</font>

</button>

40) Закрываем все оставшиеся классы:

</div>

</div>

</div>

</div>

</div>

41) Повторяем пункты, начиная с 27 для второй flip-карты.

42) Закрываем теги секции, контейнера и ряда:

</section>

</div>

</div>

43) Встраиваем JavaScript-библиотеку и сам JavaScript

44) Закрываем </body> и </html>

Если все верно, то ваши flip-карты будут выглядеть как здесь: https://konoplevtech2.blogspot.com/p/flipcards.html

Ссылки на выполненное задание принимаются в комментариях к данному посту до 15:00 12 апреля.