Rythm-Radar-v2.0/index.html at main · Angeldealba12/Rythm-Radar-v2.0 · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description"
    content="Rhythm Radar is your ultimate guide to live music, concerts, and festivals, offering up-to-date information on attending events, securing tickets, and more for passionate music fans." />
  <link rel="shortcut icon" href="./img/logo.png" type="image/x-icon" />
  <link rel="stylesheet" href="./css/home/events-section.css" />
  <link rel="stylesheet" href="./css/home/footer.css" />
  <link rel="stylesheet" href="./css/home/navbar.css">
  <link rel="stylesheet" href="./css/home/stay-in-tune.css">
  <link rel="stylesheet" href="./css/home/merch-section.css">
  <link rel="stylesheet" href="./css/home/hero-banner.css">
  <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Anton&family=Archivo+Black&display=swap"
      rel="stylesheet"
    />
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
  <script src="https://kit.fontawesome.com/2c7412deb9.js" crossorigin="anonymous"></script>
  <meta name="author" content="Angel De Alba" />
  <title>Rhythm Radar</title>
</head>

<body>
  <!-- Navegation bar -->
   <nav class="navbar">
    <div class="logo"><i class="fa-solid fa-music"></i><a href="./index.html">Rhythm Radar</a></div>
    <ul>
      <li><a href="./pages/eventsPage.html">Events</a></li>
      <li><a href="./pages/musicBlog.html">Music Blog</a></li>
      <li><a href="./pages/merchandising.html">Mechardising</a></li>
      <li><a href="./pages/AboutUs.html">About Us</a></li>
      <li><a href="./pages/faq.html">FAQ</a></li>
    </ul>
    <div  class="ham-menu" id="ham-menu" onclick="myFunction()">
      <i class="fa-solid fa-bars"></i>
    </div>
    <div class="responsive-menu" id="responsive-menu">
      <ul>
        <li class="animate__bounceIn"><a href="./pages/eventsPage.html">Events</a></li>
        <li class="animate__bounceIn"><a href="./pages/musicBlog.html">Music Blog</a></li>
        <li class="animate__bounceIn"><a href="./pages/merchandising.html">Mechardising</a></li>
        <li class="animate__bounceIn"><a href="./pages/aboutUs.html">About Us</a></li>
        <li class="animate__bounceIn"><a href="./pages/faq.html">FAQ</a></li>
      </ul>
    </div>
  </nav>

  <!-- Hero Banner -->
  <div class="hero-banner">
    <p class="hero-banner-title">Tune into the Rhythm</p>
    <p class="hero-banner-description">
      Discover and book tickets for the hottest concerts
      <br />s
      and music festivals near you.
    </p>
    <a href="./pages/eventsPage.html">Explore Events</a>
  </div>


  <!-- Upcoming Events Section -->
  <section class="events-section" id="event-section">
    <p class="events-section-title">Upcoming events</p>
    <div class="events-section-cards" id="events-section-cards"></div>
    <div class="view-all-events">
      <a href="./pages/eventsPage.html" id="view-all-events">View All Events</a>
    </div>
  </section>

   <!-- Rhythm Radar Merch -->
   <section class="merch-section" id="merch-section">
    <div class="merch-title">
      <p>Rhythm Radar Merch</p>
    </div>
    <div class="merch-cards" id="merch-cards">

    </div>
    <div class="view-all-merch">
      <a href="./pages/merchandising.html">View All Merch</a>
    </div>
  </section>

   <!-- Stay in Tune Section -->
   <section class="stay-in-tune" id="stay-in-tune-section">
    <p>Stay in tune</p>
    <p>
      Subscribe to our newsletter for exclusive presale access and the latest
      event updates.
    </p>
    <form>
      <input type="text" placeholder="Enter your email" />
      <button type="submit">Subscribe</button>
    </form>
  </section>

  <!-- Footer -->
  <footer class="footer" id="stay-in-tune-section">
    <div class="footer-block">
      <p>Company</p>
      <a href="#">About Us</a>
      <a href="#">Careers</a>
      <a href="#">Press</a>
    </div>
    <div class="footer-block">
      <p>Support</p>
      <a href="#">Help Center</a>
      <a href="#">Contact Us</a>
      <a href="#">Ticket info</a>
    </div>
    <div class="footer-block">
      <p>Legal</p>
      <a href="#">Terms of Service</a>
      <a href="#">Privacy Policy</a>
      <a href="#">Cookie Policy</a>
    </div>
    <div class="footer-block">
      <p>Connect</p>
      <a href="#">Facebook</a>
      <a href="#">Twitter</a>
      <a href="#">Instagram</a>
    </div>
    <div class="copy-footer">
      <p>&copy; 2024 Rhythm Radar. All rights reserved. Angel De Alba</p>
    </div>
  </footer>
  <script src="./js/events.js"></script>
  <script src="./js/navbar.js"></script>
  <script src="./js/merch.js"></script>
</body>

</html>