-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
155 lines (144 loc) · 5.34 KB
/
index.html
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
155
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DIAGONAL</title>
<link rel="stylesheet" href="./styles/styles.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
/>
</head>
<body>
<!-- <nav class="main-nav">
<div class="logo">DIAGONOL</div>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
<div class="nav-links">
<a href="/shop.html">Shop</a>
<a href="/whats-on.html">What's On</a>
<a href="/news.html">News</a>
<a href="#info">Info</a>
<a href="#hire">Hire</a>
<a href="#gallery">Gallery</a>
</div>
</nav> -->
<!-- Hero Section -->
<header class="hero">
<!-- <video autoplay muted loop id="hero-video">
<source src="your-video.mp4" type="video/mp4" />
</video> -->
<!-- Add this typewriter section -->
<div class="typewriter-container">
<div class="typewriter-text"></div>
</div>
</header>
<!-- Photo Gallery Slider -->
<section class="gallery-slider">
<button class="slider-arrow prev-arrow">
<i class="fas fa-chevron-left"></i>
</button>
<div class="slider-container">
<div class="slider-track">
<div class="slide">
<img src="/assets/images/diagonal1.jpg" alt="Venue Image 1">
</div>
<div class="slide">
<img src="/assets/images/diagonal2.jpg" alt="Venue Image 2">
</div>
<div class="slide">
<img src="/assets/images/diagonal3.jpg" alt="Venue Image 3">
</div>
<!-- Add more slides as needed -->
</div>
</div>
<button class="slider-arrow next-arrow">
<i class="fas fa-chevron-right"></i>
</button>
</section>
<!-- Latest News Section -->
<section class="news-section">
<h2>Latest News</h2>
<div class="news-grid">
<!-- Only show first 3 news items -->
<div class="news-card">
<img src="/assets/images/news1.png" alt="DIAGONAL Takes Over Berlin">
<div class="news-content">
<p class="date">30 January 2025</p>
<h3>DIAGONAL Takes Over Berlin</h3>
<p>This summer, DIAGONAL brings its signature industrial atmosphere to Berlin's legendary Kraftwerk...</p>
</div>
</div>
<div class="news-card">
<img src="/assets/images/news2.jpg" alt="DIAGONAL x UNDERGROUND">
<div class="news-content">
<p class="date">17 May 2024</p>
<h3>DIAGONAL x UNDERGROUND</h3>
<p>Following years of pioneering events, DIAGONAL partners with Underground Festival...</p>
</div>
</div>
<div class="news-card">
<img src="/assets/images/news3.png" alt="DIAGONAL STORE LAUNCH">
<div class="news-content">
<p class="date">5 May 2024</p>
<h3>DIAGONAL STORE LAUNCH</h3>
<p>To commemorate our groundbreaking first season, we're excited to announce the release of limited-edition DIAGONAL merchandise...</p>
</div>
</div>
</div>
<a href="news.html" class="view-all-btn">View All News</a>
</section>
<!-- Hire Section -->
<section class="hire-section">
<h2>HIRE</h2>
<p class="hire-description">A world-class venue for culture and nightlife, DIAGONAL is our flagship venue. The site features 10,000 square metres of versatile event space providing an authentic industrial setting for live performances, concerts, exhibitions, and more.</p>
<a href="hire.html" class="hire-btn">HIRE VENUE</a>
</section>
<!-- Contact Section -->
<section class="contact-section">
<h2>Find Us</h2>
<div class="contact-info">
<p>42 Quantum Avenue<br>
Neo District<br>
Cyberpunk City<br>
CYB2025</p>
<p>Email: [email protected]<br>
Tel: +44 (0)20 2025 2025</p>
</div>
</section>
<!-- Testimonials -->
<section class="testimonials">
<div class="testimonial-slider">
<!-- Testimonials will be inserted here via JavaScript -->
</div>
</section>
<!-- Footer -->
<footer>
<div class="footer-content">
<div class="footer-section">
<h3>DIAGONAL</h3>
<p>42 Quantum Avenue</p>
<p>Neo District, Cyberpunk City</p>
<p>CYB2025</p>
</div>
<div class="footer-section">
<h3>Subscribe</h3>
<form class="subscribe-form">
<input type="email" placeholder="Email *" required />
<button type="submit">Sign Up</button>
</form>
</div>
</div>
</div>
</footer>
<script src="./scripts/script.js"></script>
<script src="./scripts/shop.js"></script>
<script src="./scripts/nav.js"></script>
<script src="./scripts/gallery.js"></script>
<script src="./scripts/typewriter.js"></script>
</body>
</html>