Animal-sliders/index.html at main · Ralphonk/Animal-sliders · 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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header>
      <nav>
        <a href="">Home</a>
        <a href="">Contacts</a>
        <a href="">Info</a>
      </nav>
    </header>

    <!-- carousel -->
    <div class="carousel">
      <!-- list item -->
      <div class="list">
        <div class="item">
          <img src="image/img1.jpg" />
          <div class="content">
            <div class="author">RALPH</div>
            <div class="title">DESIGN SLIDER</div>
            <div class="topic">Moose</div>
            <div class="des">
              <!-- lorem 50 -->
              Moose (Alces alces) are the largest members of the deer family.
              They are native to northern Europe, Asia, and North America. Moose
              can grow up to 7.5 feet tall and weigh up to 1,500 pounds. Their
              distinctive antlers can span up to 6 feet wide and are shed and
              regrown every year. Moose are herbivores and feed on leaves,
              twigs, and aquatic plants.
            </div>
            <div class="buttons">
              <button>SEE MORE</button>
              <button>SUBSCRIBE</button>
            </div>
          </div>
        </div>
        <div class="item">
          <img src="image/img2.jpg" />
          <div class="content">
            <div class="author">RALPH</div>
            <div class="title">DESIGN SLIDER</div>
            <div class="topic">Sambar Deer</div>
            <div class="des">
              Sambar deer (Rusa unicolor) are a species of deer native to the
              Indian subcontinent and Southeast Asia. They are also known as
              sambur, samboo, or sambo. Sambar deer are large and can grow up to
              4 feet tall and weigh up to 550 pounds. They have a distinctive
              coat of reddish-brown fur with white undersides and a prominent
              pair of antlers that can grow up to 3 feet long. Sambar deer are
              herbivores and feed on a variety of plants, including grasses,
              leaves, and fruits.
            </div>
            <div class="buttons">
              <button>SEE MORE</button>
              <button>SUBSCRIBE</button>
            </div>
          </div>
        </div>
        <div class="item">
          <img src="image/img3.jpg" />
          <div class="content">
            <div class="author">RALPH</div>
            <div class="title">DESIGN SLIDER</div>
            <div class="topic">Elephant</div>
            <div class="des">
              Elephants (Loxodonta africana and Elephas maximus) are the largest
              land animals on Earth. They are found in savannas, forests, and
              deserts in Africa and Asia, and can live for up to 70 years.
              Elephants have a highly developed brain and are known for their
              intelligence, social behavior, and strong family bonds. They have
              a distinctive trunk, tusks, and large ears, and can weigh between
              5,000-14,000 pounds. Elephants are herbivores and feed on a
              variety of plants, including grasses, leaves, and fruits, and can
              drink up to 30 gallons of water per day.
            </div>
            <div class="buttons">
              <button>SEE MORE</button>
              <button>SUBSCRIBE</button>
            </div>
          </div>
        </div>
        <div class="item">
          <img src="image/img4.jpg" />
          <div class="content">
            <div class="author">RALPH</div>
            <div class="title">DESIGN SLIDER</div>
            <div class="topic">Leopard</div>
            <div class="des">
              Leopards (Panthera pardus) are a species of big cat native to
              Africa and Asia. They are known for their distinctive spotted
              coats, which help them blend in with their surroundings and hunt
              prey. Leopards are solitary and nocturnal animals, and are skilled
              climbers and swimmers. They are carnivores and feed on a variety
              of prey, including antelopes, gazelles, and monkeys. Leopards are
              endangered due to habitat loss and poaching, and are protected by
              conservation laws in many countries.
            </div>
            <div class="buttons">
              <button>SEE MORE</button>
              <button>SUBSCRIBE</button>
            </div>
          </div>
        </div>
      </div>
      <!-- list thumnail -->
      <div class="thumbnail">
        <div class="item">
          <img src="image/img1.jpg" />
          <div class="content">
            <div class="title">Name Slider</div>
            <div class="description">Description</div>
          </div>
        </div>
        <div class="item">
          <img src="image/img2.jpg" />
          <div class="content">
            <div class="title">Name Slider</div>
            <div class="description">Description</div>
          </div>
        </div>
        <div class="item">
          <img src="image/img3.jpg" />
          <div class="content">
            <div class="title">Name Slider</div>
            <div class="description">Description</div>
          </div>
        </div>
        <div class="item">
          <img src="image/img4.jpg" />
          <div class="content">
            <div class="title">Name Slider</div>
            <div class="description">Description</div>
          </div>
        </div>
      </div>
      <!-- next prev -->

      <div class="arrows">
        <button id="prev"><</button>
        <button id="next">></button>
      </div>
      <!-- time running -->
      <div class="time"></div>
    </div>

    <script src="app.js"></script>
  </body>
</html>