Semkari.github.io/index.html at main · Rschipman/Semkari.github.io · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>SEMKARI</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
</head>

<body>

<!-- Background Video -->
<video class="bg-video" autoplay muted loop playsinline>
  <source src="assets/bg-video.mp4" type="video/mp4">
</video>

<!-- Music -->
<audio id="bg-music" src="assets/song.mp3" loop></audio>

<div class="overlay">

<header>
  <h1>SEMKARI</h1>

  <nav>
    <a href="#about">ABOUT</a>
    <a href="#music">MUSIC</a>
    <a href="#tour">TOUR</a>
    <a href="#merch">MERCH</a>
    <a href="#fans">FANS</a>
  </nav>

  <div class="controls">
    <button id="theme-toggle" class="icon-btn">◐</button>
    <button id="music-toggle" class="icon-btn">▶</button>
  </div>
</header>

<!-- ABOUT -->
<section id="about" class="panel">
  <h2 class="glitch" data-text="ABOUT">ABOUT</h2>
  <p class="about-text">
    SEMKARI an locally established and internationally up- and coming rapper. Brings his unique Charlestonian sound to the scene world wide.
Recently just back from a tour in japan. Check this page for updates on upcoming tour dates and album announcments.
  </p>
</section>

<!-- MUSIC -->
<section id="music" class="panel">
  <h2 class="glitch" data-text="NEWEST SINGLE">NEWEST SINGLE</h2>

  <div class="single">
    <img src="assets/single.jpg" alt="Single Cover">
    <div>
      <p>OUT NOW ON ALL PLATFORMS</p>
      <a class="btn" href="#" target="_blank">LISTEN</a>
    </div>
  </div>
</section>

<!-- TOUR -->
<section id="tour" class="panel">
  <h2 class="glitch" data-text="UPCOMING TOUR">UPCOMING TOUR</h2>

  <ul class="tour-list">
    <li><span>03.12</span> LOS ANGELES, CA</li>
    <li><span>03.18</span> NEW YORK, NY</li> <!-- Gotta see if I can add real dates -->
    <li><span>03.25</span> BERLIN, DE</li>
  </ul>
</section>

<!-- MERCH -->
  <!-- this can all lead to a fourthwall page to let them deal with merch or whatever I just hate building shops -->
<section id="merch" class="panel">
  <h2 class="glitch" data-text="MERCH">MERCH</h2>

  <div class="merch-grid">
    <a href="https://store1.com" target="_blank" class="merch-item">
      <img src="assets/merch/shirt.jpg">
      <span>SHIRTS</span>
    </a>

    <a href="https://store2.com" target="_blank" class="merch-item">
      <img src="assets/merch/hoodie.jpg">
      <span>HOODIES</span>
    </a>

    <a href="https://store3.com" target="_blank" class="merch-item">
      <img src="assets/merch/vinyl.jpg">
      <span>VINYL</span>
    </a>
  </div>
</section>

<!-- FANS -->
<section id="fans" class="panel">
  <h2 class="glitch" data-text="FANS">FANS</h2>
  <p>TAG <strong>#SEMKARI</strong></p>

  <div class="fan-grid">
    <img src="assets/fans/fan1.jpg">
    <img src="assets/fans/fan2.jpg">
    <img src="assets/fans/fan3.jpg">
  </div>

  <a class="btn" href="https://www.instagram.com/seemkari/" target="_blank">
    SUBMIT YOUR PHOTO
  </a>
</section>

<footer>
  <p>©SEMKARI 2026 </p>
</footer>

</div>

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