-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
163 lines (126 loc) · 6.21 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
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Music Camp Fire</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="CSS\styles.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!--Here are the fonts used for the brandig of the page-->
<!-- Here is Lato -->
<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=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
<!--Here are the icons-->
<script src="https://kit.fontawesome.com/321e54ee43.js" crossorigin="anonymous"></script>
</head>
<body>
<!--Here start navbar section-->
<nav class="navbar-light d-flex flex-row">
<div class="burger-menu">
<span class="burger-bar"></span>
<span class="burger-bar"></span>
<span class="burger-bar"></span>
</div>
<a
href="index.html"
class="logo-link">
<img class="logo-img" src="Images/fire-logo.png" alt="Logo">
</a>
<ul class="nav-navigation-mobile">
<li id="nav-logo"><img src="Images/fire-logo.png" alt=""></li>
<li ><a class="nav-link" href="about-page.html">About</a></li>
<li ><a class="nav-link" href="#">Program</a></li>
<li ><a class="nav-link" href="#">Join</a></li>
<li ><a class="nav-link" href="#">sponsor</a></li>
<li ><a class="nav-link" href="#">News</a></li>
</ul>
<ul class="nav-navigation flex-row">
<li><a href="about-page.html">About</a></li>
<li><a href="#">Program</a></li>
<li><a href="#">Join</a></li>
<li><a href="#">sponsor</a></li>
<li><a href="#">News</a></li>
</ul>
<button class="campaign">
CC Campaign
</button>
</nav>
<!--Here ends navbar -->
<!-- Here starts header -->
<header class="header d-flex flex-column justify-content-center">
<h3 id="header-subtitle">Hello, Music People!</h3>
<h1 id="header-title">FIRE MUSIC CAMP<br> GLOBAL SUMMIT <br>2022</h1>
<div id="header-description-container">
<p id="header-description">Ten days of camp with the best people in the industry and one festival in the end to show your talent. Fire Music Camp was disigned for musicians like you, to improve your skills and give you the oportunity of networking with people who have the same passion in the entire world.</p>
</div>
<div id="location">
<h3 id="location-date">2022.12.12(WED) ~ 21(SUN)</h3>
<p id="location-info">@ Buckskin State Park, Arizona</p>
</div>
</header>
<!--Here starts main section-->
<main class="d-flex flex-column">
<h2 id="main-title">Main Activities</h2>
<hr class="divisor">
<div class="activities-grid d-flex align-items-center">
<div class="activity d-flex align-items-center">
<img id="activity-img" src="Images/activity-icon-01.png" alt="">
<h4 id="activity-title">Master Classes</h4>
<p id="activity-description">One different Master Class each day with highly experienced teachers</p>
</div>
<div class="activity d-flex align-items-center">
<img id="activity-img" src="Images/activity-icon-02.png" alt="">
<h4 id="activity-title">Talent Show</h4>
<p id="activity-description">The oportunity to show your talent to all the campers in the finall day</p>
</div>
<div class="activity d-flex align-items-center">
<img id="activity-img" src="Images/activity-icon-03.png" alt="">
<h4 id="activity-title">Network</h4>
<p id="activity-description">Know people with the same pasion that you have.</p>
</div>
<div class="activity d-flex align-items-center">
<img id="activity-img" src="Images/activity-icon-04.png" alt="">
<h4 id="activity-title">Be Creative</h4>
<p id="activity-description">Feel free to create new things in one profesional music space</p>
</div>
<div class="activity d-flex align-items-center">
<img id="activity-img" src="Images/activity-icon-05.png" alt="">
<h4 id="activity-title">Recreation</h4>
<p id="activity-description">Recreation activities each day for an unforgetable experience</p>
</div>
</div>
<button id="join-btn">Join Fire Music Camp 2022</button>
</main>
<!-- Here starts featured teachers section -->
<section class="featured-teachers d-flex flex-column align-items-center">
<h2 id="featured-title">Featured Teachers</h2>
<hr class="divisor">
<!-- Here starts the featured grid -->
<div class="teachers-grid">
</div>
</section>
<!---- Featured teachers grid ends ---->
<!-- Here starts sponsors section -->
<section id="sponsors-home" class="sponsors align-items-center">
<h2 class="sponsors-title">Sponsors</h2>
<hr class="divisor">
<div class="sponsors-container">
<img class="sponsor-img" src="Images/sponsor_1.png" alt="">
<img class="sponsor-img" src="Images/sponsor_2.png" alt="">
<img class="sponsor-img" src="Images/sponsor_3.png" alt="">
<img class="sponsor-img" src="Images/sponsor_4.png" alt="">
</div>
</section>
<!-- Here start the footer section -->
<footer class="d-flex justify-content-center align-items-center">
<img id="creative-commons-logo" src="Images/cc-logo2.png" alt="">
<div class="license">
<p> 2015 Design of Creative Commons Korea. <br> Some rights reserved </p>
</div>
</footer>
<script src="js/burger-menu.js"></script>
<script src="js/teachers-grid.js"></script>
</body>
</html>