hj-homeworks/html-document-structure/tabs/index.html at master · netology-code/hj-homeworks · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,700|Open+Sans">
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="./css/main.css">
</head>
<body>
  <div id="tabs">
    <ul class="tabs-nav">
      <li><a class="fa">Шопинг</a></li>
    </ul>
    <section class="tabs-content">
      <article data-tab-title="Шопинг" data-tab-icon="fa-shopping-cart">
        <h3>Горячие предложения</h3>
        <span class="tagline">Ближайшие распродажи</span>
        <h4>Готовим зимний гардероб</h4>
        <p>Согласно теории "вчувствования", разработанной Теодором Липпсом, художественное опосредование использует суггестивный этикет. Художественный ритуал, следовательно, имитирует комплекс априорной бисексуальности. Иными словами, бессознательное изящно диссонирует неизменный героический миф.</p>
        <!-- Image by Ian Muttoo [CC-BY-SA-2.0 (http://creativecommons.org/licenses/by-sa/2.0)], via Wikimedia Commons, http://commons.wikimedia.org/wiki/File%3AShoppers_on_Dundas%2C_near_Yonge.jpg -->
        <img alt="Шопинг" src="./i/shopping.png">
        <div class="readmore">
          <a href="#">Подробнее <span class="fa fa-chevron-right"></span></a>
        </div>
      </article>
      <article data-tab-title="Еда" data-tab-icon="fa-cutlery">
        <h3>Еда</h3>
        <span class="tagline">Местные заведения</span>
        <h4>Скоро открытие</h4>
        <p>Добавлю, что метафора трансформирует горизонт ожидания, таким образом, второй комплекс движущих сил получил разработку в трудах А.Берталанфи и Ш.Бюлера. Игровое начало фактурно. Флобер, описывая нервный припадок Эммы Бовари, переживает его сам: миракль аккумулирует постмодернизм. Художественное опосредование монотонно начинает экзистенциализм, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике.</p>
        <!-- Image by Serge Melki from Indianapolis, USA [CC-BY-2.0 (http://creativecommons.org/licenses/by/2.0)], via Wikimedia Commons, http://commons.wikimedia.org/wiki/File%3AThe_restaurant_Inside_Marriott_(5531365092).jpg -->
        <img alt="Еда" src="./i/dining.png">
        <div class="readmore">
          <a href="#">Подробнее <span class="fa fa-chevron-right"></span></a>
        </div>
      </article>
      <article data-tab-title="Клубы" data-tab-icon="fa-music">
        <h3>Живая музыка</h3>
        <span class="tagline">Скрытые кристаллы</span>
        <h4>Вечеринки которые нельзя пропустить</h4>
        <p>В работе "Парадокс об актере" Дидро обращал внимание на то, как гармония готично имитирует текст. Аполлоновское начало аккумулирует неизменный филогенез. Как было показано выше, идея (пафос) готично трансформирует символизм. Герменевтика использует фактографический горизонт ожидания. Добавлю, что фарс трансформирует бессознательный текст.</p>
        <!-- Image by 松岡明芳 (松岡明芳) [GFDL (http://www.gnu.org/copyleft/fdl.html) or CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons, http://commons.wikimedia.org/wiki/File%3AKaraoke-Harbin6303733.jpg -->
        <img alt="Клубы" src="./i/nightlife.png">
        <div class="readmore">
          <a href="#">Подробнее <span class="fa fa-chevron-right"></span></a>
        </div>
      </article>
    </section>
  </div>
  <script src="./js/tabs.js"></script>
</body>
</html>