-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
125 lines (122 loc) · 4.56 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SpaY.con - Main Page</title>
<link rel="stylesheet" href="./media/main.css">
<link rel="stylesheet" href="./media/index.css">
<script src="./media/toggle.js"></script>
</head>
<body>
<!-- Header -->
<header>
<a href="#">
<i class="fab fa-facebook-square"></i>
</a>
<a href="#">
<i class="fab fa-twitter"></i>
</a>
<a href="#">English</a>
<a href="#">My Page</a>
<a href="#">Logout</a>
</header>
<!-- Navigation Bar -->
<nav>
<i onclick="toggleBtn()" id="toggle-btn" class="fas fa-bars"></i>
<div>
<a class="brand toggle" href="./index.html"><img src="./media/logo.gif" alt="">
<p>SpaY.con</p>
</a>
</div>
<div class="nav-links">
<a class="nav-about toggle" href="./about.html">about</a>
<a class="nav-tickets toggle" href="./tickets.html">Tickets</a>
</div>
</nav>
<!-- Main Section -->
<main>
<div id="description">
<h3>WELCOME TO <i>SPAYCO</i>N</h3>
<p>Buy The Tickets Now to join your favorite creator <a href="https://youtube.com/SpaYco"
class="SpaYco">SpaYco</a> from April 5th to April 6th!</p>
<p>you like Fun? scroll down to see it!</p>
</div>
<div id="events">
<div class="title">
<h3>What do we Have?</h3>
<hr>
</div>
<div class="cards-container">
<div class="event-cards">
<img src="./media/DJ.jpeg" alt="DJ image">
<h3>We Have DJs</h3>
<div class="purple"></div>
</div>
<div class="event-cards">
<img src="./media/food.jpg" alt="Food">
<h3>We Have Food</h3>
<div class="orange"></div>
</div>
<div class="event-cards">
<img src="./media/fortnite.jpg" alt="Fortnite">
<h3>We Have Games</h3>
<div class="blue"></div>
</div>
</div>
</div>
<div id="people">
<div class="title">
<h3>Who's Coming?</h3>
<hr>
</div>
<div class="people-cards-container">
<div class="people-cards">
<img src="./media/pewdiepie.png" alt="pewdiepie">
<a href="https://www.youtube.com/PewDiePie">PewDiePie</a>
</div>
<div class="people-cards">
<img src="./media/marsh.jpg" alt="marshmello">
<a href="https://www.youtube.com/marshmellomusic">Marshmello</a>
</div>
<div class="people-cards">
<img src="./media/muselk.jpg" alt="Muselk">
<a href="https://www.youtube.com/mrmuselk">Muselk</a>
</div>
<div class="people-cards">
<img src="./media/alan.jpg" alt="Alan Walker">
<a href="https://www.youtube.com/channel/UCJrOtniJ0-NWz37R30urifQ">Alan Walker</a>
</div>
<div class="people-cards">
<img src="./media/SpaYco.jpg" alt="SpaYco">
<a href="https://www.youtube.com/SpaYco">SpaYco</a>
</div>
</div>
</div>
<div id="credits">
<div class="title">
<h3>Special Thanks To</h3>
<hr>
</div>
<div class="credit-pics">
<img src="./media/html.png" alt="html">
<img src="./media/css.png" alt="css">
<img src="./media/sass.png" alt="sass">
<img src="./media/github.png" alt="github">
</div>
</div>
</main>
<!-- Footer -->
<footer>
<img src="./media/SpaY.coDark.png" alt="">
<div>
<p>Copyright © 2020 Aziz Mejri, All rights reserved. </p>
<br>
<p>You may copy the content to individual third parties for their personal use, but only if you acknowledge
the website as the source of the material</p>
</div>
</footer>
<!-- FontAwesome script for icons -->
<script src="https://kit.fontawesome.com/e966a3bd22.js" crossorigin="anonymous"></script>
</body>
</html>