JS-Tabs/tabs.html at master · cryptorium-ctrl/JS-Tabs · 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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!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">

  <!-- Custom css file -->
  <link rel="stylesheet" href="css/normalize.css" type="text/css">
  <link rel="stylesheet" href="css/main.css" type="text/css">

  <title>Tabs</title>
</head>

<body>
<div id="my-tab">
  <div class="tabs">
    <nav class="tabs__nav">
      <ul>
        <li class="active">
          Tab one
        </li>

        <li>
          Tab two
        </li>

        <li>
          Tab three
        </li>

        <li>
          Tab four
        </li>
      </ul>
    </nav>

    <div class="tabs__body">
      <div class="tab active">
        <img src="assets/img/no-img.jpeg" alt="">

        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda odio praesentium, dolorem
          iste ullam necessitatibus provident cum animi eos, quam dolore, illo magnam quos! Labore quis
          veniam a ullam inventore esse. Dolore eaque voluptas voluptate fuga tenetur! Debitis iste,
          officiis molestias expedita aspernatur fugiat consequuntur non ipsam aliquam optio deserunt Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nisi dolorum soluta doloribus commodi suscipit sequi deleniti, aliquam recusandae dolores quibusdam?
        </p>
      </div>

      <div class="tab">
        <img src="assets/img/no-img.jpeg" alt="">

        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda odio praesentium, dolorem
          iste ullam necessitatibus provident cum animi eos, quam dolore, illo magnam quos! Labore quis
          veniam a ullam inventore esse. Dolore eaque voluptas voluptate fuga tenetur! Debitis iste,
          officiis molestias expedita aspernatur fugiat consequuntur non ipsam aliquam optio deserunt Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste aliquid vero, enim dicta error sunt ipsum beatae ex facilis consectetur molestias alias nostrum magni tempora dolores illo voluptatibus soluta. Rerum doloremque deleniti iure sapiente dolorum cupiditate? In, vero blanditiis, dolor optio, voluptas dolore adipisci corporis saepe repellat nobis dignissimos facere?
        </p>
      </div>

      <div class="tab">
        <img src="assets/img/no-img.jpeg" alt="">

        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda odio praesentium, dolorem
          iste ullam necessitatibus provident cum animi eos, quam dolore, illo magnam quos! Labore quis
          veniam a ullam inventore esse. Dolore eaque voluptas voluptate fuga tenetur! Debitis iste,
          officiis molestias expedita aspernatur fugiat consequuntur non ipsam aliquam optio deserunt Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vel error iure adipisci dignissimos, voluptate in aliquid debitis quam provident illo.
        </p>
      </div>

      <div class="tab">
        <img src="assets/img/no-img.jpeg" alt="">

        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda odio praesentium, dolorem
          iste ullam necessitatibus provident cum animi eos, quam dolore, illo magnam quos! Labore quis
          veniam a ullam inventore esse. Dolore eaque voluptas voluptate fuga tenetur! Debitis iste,
          officiis molestias expedita aspernatur fugiat consequuntur non ipsam aliquam optio deserunt Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, velit, dolore illum facere, obcaecati eveniet voluptas at distinctio voluptates quibusdam ex odit maxime molestiae. Ex, reprehenderit minus harum laborum tempore aliquid ratione consectetur nesciunt quasi qui, ad consequatur autem. Fugit vel assumenda natus laborum iste earum placeat suscipit et magnam.
        </p>
      </div>
    </div>
  </div>
</div>

<!-- Scripts -->
<script src="assets/script.js" type="text/javascript"></script>
</body>

</html>