-
Notifications
You must be signed in to change notification settings - Fork 0
/
homepage.html
151 lines (138 loc) · 9.34 KB
/
homepage.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>DubLand</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="background-color:darkred">
<!--Navbar, links to other pages-->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">DubLand</a>
</div>
<ul class="nav navbar-nav">
<li><a href="history.html">History</a></li>
<li><a href="e&s.html">Equipment & Software</a></li>
<li><a href="artists.html">Artists</a></li>
</ul>
</div>
</nav>
<br />
<br />
<!--Website Name-->
<div id="Website Banner">
<header style="text-align:center;font-family:'Arial Rounded MT';font-size:120px;color:yellow">DubLand</header>
<h6 style="text-align:center;font-family:'Arial Rounded MT';font-size:40px;color:black">Bass. Boosted.</h6>
</div>
<br />
<!--Carousel-->
<div id="myCarousel" class="carousel slide" data-ride="carousel" style="width:63%; margin: 0 auto" data-interval="15000">
<!--Carousel indicators-->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
<li data-target="#myCarousel" data-slide-to="5"></li>
</ol>
<!--Carousel Elements-->
<div class="carousel-inner" style="overflow:hidden">
<div class="item active">
<img src="skrillex-edmtunes.jpg" alt="Skrillex" />
<div class="carousel-caption">
<p style="color:white"><strong>One of the most decorated dubstep artists ever, Skrillex throws some amazing concerts.</strong></p>
<p style="color:white">Image Source: edmtunes.com</p>
</div>
</div>
<div class="item">
<img src="bassnectar-rukes.jpg" alt="Live Show" />
<div class="carousel-caption">
<p style="color:white"><strong>Some dubstep shows can attract thousands of people and put on one heck of a lightshow!</strong></p>
<p style="color:white">Image Source: rukes.com</p>
</div>
</div>
<div class="item">
<img src="paradox-rukes.jpg" alt="Paradox Stage" />
<div class="carousel-caption">
<p style="color:white"><strong>The stage production for some artists is not of this world, as shown at an Excision show here!</strong></p>
<p style="color:white">Image Source: rukes.com</p>
</div>
</div>
<div class="item">
<img src="rusko-getty.jpg" alt="Rusko" />
<div class="carousel-caption">
<p style="color:white"><strong>Rusko is one of the most infulential dubstep artists of all time, starting back in the early 2000's and has a huge part in shaping dubstep into what it is today.</strong></p>
<p style="color:white">Image Source: Daniel Zuchnik/Getty Images</p>
</div>
</div>
<div class="item">
<img src="ll-ohdagyo.jpg" alt="Lost Lands" />
<div class="carousel-caption">
<p><strong>Lost Lands is one of the largest dubstep/bass music festivals in the world. And yes, those are massive T-Rexes.</strong></p>
<p>Image Source: OhDagYo Photography</p>
</div>
</div>
<div class="item">
<img src="d9-tony.jpg" alt="District n9ne" style="height:100%"/>
<div class="carousel-caption">
<p><strong>A lot of dubstep shows are held in smaller club style venues.</strong></p>
<p>Image Source: Tony Colasurdo Photography</p>
</div>
</div>
</div>
<!--Carousel Controls-->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--Intro-->
<div id="introduction">
<h6 style="font-size:80px;font-family:'Comic Sans MS';text-align:center;color:white">Welcome To <span style="color:black;font-family:'Comic Sans MS';font-size:80px">DubLand</span>!</h6>
<p style="font-size:25px;font-family:'Comic Sans MS';color:white">So you may have heard of dubstep before but don't know much about it ("That guy Skrillex created it right?").
Or maybe you have literally not the slightest idea what it is. But maybe some of you know exactly what it is and are here to look around. Well you are all in luck!</p>
<br />
<p style="font-size:25px;font-family:'Comic Sans MS';color:white">DubLand will tell you all you need to know about dubstep, such as the history of dubstep
and some of the inner workings of creating dubstep. The world changed forever once music was starting to be created digitally,
meaning little to no live instruments were used in production. Electronic Dance Music, or EDM, eventually spawned from this and swept the globe in so many forms,
dubstep being just one of the very many.</p>
<br />
<p style="font-size:25px;font-family:'Comic Sans MS';color:white">So have a look around the site and dive deeper into dubstep. The genre is ever changing, being pushed to new and
exciting boundaries each and every day. Go look into some of the hottest artists in the dubstep scene, a lot of which are still very active even though they may have been around since the beginning!
Hopefully you leave this site with your head nodding a bit, it's all about the good beats and deep bass here!</p>
</div>
<!--GIF-->
<div id="hb gif">
<p style="text-align:center"><img src="headbang.gif" /></p>
<p style="font-family:Garamond;color:white;text-align:center;font-size:20px">Some concert goers really getting into their dubstep. Source: giphy.com</p>
</div>
<!--Scrollbox-->
<center>
<div style="width:90%;height:250px;line-height:3em;overflow:scroll;padding:5px;background-color:#FCFADD;color:#714D03;scrollbar-base-color:#DEBB07;background-color:black">
<h3 style="font-size:40px;font-family:'Trebuchet MS';color:red"><u>Testimonials on Dubstep</u></h3>
<br />
<p style="font-size:20px;font-family:'Trebuchet MS';color:red">"I saw Skrillex for the first time back in October of 2009... my life INSTANTLY changed after that. I researched all I could about dubstep and here I am years later still absolutley in love with it." -Jeremy Einhorn</p>
<br />
<p style="font-size:20px;font-family:'Trebuchet MS';color:red">"As weird as it all may sound, the amount of fun you have at shows is insane. The energy is through the roof and the nicest people you will ever meet are at these shows. Highly reccomend giving dubstep a shot!" -Steve Smith</p>
<br />
<p style="font-size:20px;font-family:'Trebuchet MS';color:red">"I've been following dubstep since early 2000's. You know, guys like Zed Bias, Skream, etc. I could not be more proud to be apart of this music scene, just too much fun and so many good songs coming out so often." -Frank Pickles</p>
<br />
<p style="font-size:20px;font-family:'Trebuchet MS';color:red">"Life lesson: DON'T KNOCK IT UNTIL YOU TRY IT! Gosh, I could not be more happy I decided to give dubstep a try. I really disliked it at first, it was all just too weird. But my friends pushed me, introduced me to all the unique artists and that was it. BEST MUSIC EVER." -Kayla Trafter</p>
<br />
<p style="font-size:20px;font-family:'Trebuchet MS';color:red">"I could go on for probably like 5 minutes straight just naming my favorite dubstep artists. What I love is how all of them bring their own unique sound to the dubstep scene. There are a lot of Skrillex imitators out there, but they are starting to vanish thankfully." -Amanda Waller</p>
<br />
<p style="font-size:20px;font-family:'Trebuchet MS';color:red">"You may want to have a higher IQ to listen to dubstep to be honest, but I still feel like you will at least appreciate it a little, even if your IQ is low." -Some Random Guy</p>
</div>
</center>
</body>
</html>