responsive-hero-slider-superhero-html-css-javascript/index.html at main · MDJAmin/responsive-hero-slider-superhero-html-css-javascript · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
    />
    <link
      rel="shortcut icon"
      href="assets/b8d0f4076816c52e2b0e23ca8d3b540d.jpg"
      type="image/x-icon"
    />
    <link
      rel="stylesheet"
      href="css/style.css"
    />
    <script
      type="module"
      defer
      src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
    ></script>
    <script
      defer
      src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"
    ></script>
    <script
      defer
      src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"
    ></script>
    <script
      defer
      src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"
    ></script>
    <script
      defer
      src="js/script.js"
    ></script>
    <title>Hero Slider</title>
  </head>

  <body>
    <audio
      id="background-music"
      loop
    >
      <source
        src="assets/Audio/19 Saving the Day_Award Ceremony_End Titles.mp3"
        type="audio/mpeg"
      />
      Your browser does not support the audio element.
    </audio>
    <button id="play-pause-button">
      <ion-icon
        class="audio-icon"
        id="play-music"
        name="play"
      ></ion-icon>
      <ion-icon
        class="audio-icon hidden"
        id="pause-music"
        name="pause"
      ></ion-icon>
    </button>

    <div
      id="particles-js"
      class="particles"
    ></div>

    <div class="container">
      <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img
              src="https://static.printler.com/cache/2/4/c/b/c/d/24cbcd37bd09944763de4a20e74a0954f6603bef.jpg"
            />
            <p>Superman</p>
          </div>
          <div class="swiper-slide">
            <img
              src="https://static.printler.com/cache/1/d/f/c/b/c/1dfcbcc2ad6b79aee980b7c8b62aa58d61f8e35f.jpg"
            />
            <p>Wonder Woman</p>
          </div>
          <div class="swiper-slide">
            <img
              src="https://static.printler.com/cache/d/e/f/c/2/0/defc20b88ceb44c0d60c4a4a28f01a00d242c46f.jpg"
            />
            <p>Batman</p>
          </div>
          <div class="swiper-slide">
            <img
              src="https://static.printler.com/cache/0/4/9/4/3/9/0494392a8e06037d523b66b0bf1f28fb23937e84.jpg"
            />
            <p>Flash</p>
          </div>
          <div class="swiper-slide">
            <img
              src="https://static.printler.com/cache/6/7/6/2/2/d/67622d0b766cb18a59e4ab785844ddc9a6853067.jpg"
            />
            <p>Joker</p>
          </div>
        </div>
      </div>
    </div>
    <div class="MDJAminDiv">
      <a
        class="MDJAmin"
        href="https://github.com/MDJAmin"
        target="_blank"
        >MDJAmin</a
      >
    </div>
  </body>
</html>