-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
207 lines (207 loc) · 11.7 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
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!DOCTYPE html>
<html>
<head>
<script src="https://use.fontawesome.com/e58093a846.js"></script>
<meta charset="utf-8">
<title>My Name is Skrillex</title>
<meta name="description" content="Skrillex Stats Page">
<meta name="author" content="Nick Teets">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<main>
<aside class="">
<div class="image-cropper">
<img src="assets/headshot.jpg" alt="" class="headshot">
</div>
<div class="aside-headers">
<h2>Skrillex <i class="fa fa-angle-down" aria-hidden="true"></i></h2>
<hr>
<h4>MAIN</h4>
<ul>
<li><i class="fa fa-home" aria-hidden="true"></i>HOME</li>
<li><i class="fa fa-calendar-check-o" aria-hidden="true"></i></i>EVENTS</li>
<li><i class="fa fa-music" aria-hidden="true"></i>DISCOGRAPHY</li>
<li><i class="fa fa-newspaper-o" aria-hidden="true"></i>NEWS</li>
<li><i class="fa fa-cog" aria-hidden="true"></i>SETTINGS</li>
</ul>
<hr>
<h4>SOCIAL</h4>
<ul>
<li><i class="fa fa-facebook" aria-hidden="true"></i>FACEBOOK</li>
<li><i class="fa fa-twitter" aria-hidden="true"></i>TWITTER</li>
<li><i class="fa fa-instagram" aria-hidden="true"></i>INSTAGRAM</li>
<li><i class="fa fa-soundcloud" aria-hidden="true"></i>SOUNDCLOUD</li>
<li><i class="fa fa-bandcamp" aria-hidden="true"></i>BANDCAMP</li>
</ul>
<hr>
<h4>CATEGORIES</h4>
<ul>
<li>
<input type="checkbox" id="checkbox_1">
<label for="checkbox_1">Bookmark</label>
</li>
<li>
<input type="checkbox" id="checkbox_2">
<label for="checkbox_2">Notifications</label>
</li>
<li>
<input type="checkbox" id="checkbox_3">
<label for="checkbox_3">Alerts</label>
</li>
<li>
<input type="checkbox" id="checkbox_4">
<label for="checkbox_4">Homepage</label>
</li>
</ul>
</div>
</aside>
<div class="content">
<header>
<div class="hamburger-angle">
<i class="fa fa-angle-left" aria-hidden="true"></i>
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
<div class="search-div">
<i class="fa fa-search" aria-hidden="true"></i>
<input type="text" name="" placeholder="Search for a song, mix or playlist" class="search">
</div>
<div class="absolute-top-right">
<i class="fa fa-plus-circle" aria-hidden="true"></i>
<i class="fa fa-calendar" aria-hidden="true"></i>
<i class="fa fa-th" aria-hidden="true"></i>
</div>
<div class="h1-div">
<h1>Skrillex (Sonny Moore)</h1>
<div class="h1-buttons-div">
<button type="button" class="h1-button h1-active-button" name="active"><i class="fa fa-circle" aria-hidden="true"></i>Active</button>
<button type="button" class="h1-button h1-circle-button" name="bookmark"><i class="fa fa-bookmark-o" aria-hidden="true"></i></button>
<button type="button" class="h1-button h1-circle-button" name="edit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></button>
<button type="button" class="h1-button h1-circle-button" name="trash"><i class="fa fa-trash-o" aria-hidden="true"></i></button>
</div>
<p class="location"><i class="fa fa-map-marker" aria-hidden="true"></i>Los Angeles, CA - <span class="favorites">Add to Favorites</span></p>
</div>
</header>
<nav>
<ul class="nav-bar">
<li>ABOUT</li>
<li>BIOGRAPHY</li>
<li>EVENTS</li>
<li>TRACKS</li>
<li>PHOTOS</li>
<li>NEWS</li>
</ul>
</nav>
<section class="graphs">
<div class="circle-graphs-div">
<div class="circle-graph circle-graph-1">
<p class="circle-graph-text circle-graph-text-top">92%</p>
<p class="circle-graph-text circle-graph-text-bottom">Skrillex</p>
</div>
<div class="circle-graph circle-graph-2">
<p class="circle-graph-text circle-graph-text-top">24%</p>
<p class="circle-graph-text circle-graph-text-bottom">Jack Ü</p>
<button type="button" class="h1-button circle-graph-button" name="circle-graph-button">Total - out of all sales</button>
</div>
<div class="circle-graph circle-graph-3">
<p class="circle-graph-text circle-graph-text-top">55%</p>
<p class="circle-graph-text circle-graph-text-bottom">Other</p>
</div>
</div>
<div class="bar-graph-div">
<img src="assets/graph2.png" class="graph-png" alt="">
<button type="button" class="h1-button bar-graph-button" name="bar-graph-button">Weight/Week (in German)</button>
</div>
</section>
<div class="break">
<hr>
<i class="fa fa-angle-up" aria-hidden="true"></i>
</div>
<section class="text">
<article class="table">
<hr class="table-hr table-hr-1">
<hr class="table-hr table-hr-2">
<hr class="table-hr table-hr-3">
<hr class="table-hr table-hr-4">
<hr class="table-hr table-hr-5">
<hr class="table-hr table-hr-6">
<hr class="table-hr table-hr-7">
<table>
<tr>
<th class="table-head-left">Artist Profile</th>
<th class="table-head-right"><p><i class="fa fa-pencil" aria-hidden="true"></i>Edit<p></th>
</tr>
<tr>
<td class="table-key">GENRE</td>
<td>Electronic</td>
</tr>
<tr>
<td class="table-key">LOCATION</td>
<td>Los Angeles, CA</td>
</tr>
<tr>
<td class="table-key">REAL NAME</td>
<td>Sonny Moore</td>
</tr>
<tr class="description-tr">
<td class="description-td" class="table-key">DESCRIPTION</td>
<td>
<div class="description-div">Sonny Moore found club and mainstream stardom beginning in 2008, when he swapped his gig as the frontman in post-hardcore band From First to Last for the dancefloor-oriented project Skrillex. He originally used the name for live DJ sets, but in 2009 the project moved into the studio with Skrillex remixing the likes of Lady Gaga ("Bad Romance") and Snoop Dogg ("Sensual Seduction"). In 2010, the self-released digital download EP My Name Is Skrillex appeared, combining the Benny Benassi and Deadmau5 styles of electro with the same type of over the top samples and giant noise of electronica acts like the Chemical Brothers and Fatboy Slim.<br /><br />Moore signed to Deadmau5's Mau5trap label in 2010, where he released his second EP, Scary Monsters & Nice Sprites, along with the club hit "Kill Everybody." If topping the club charts didn't prove the producer had arrived, a trio of Grammy Awards in 2011 helped considerably, including Best Dance/Electronica Album for Scary Monsters and Best Dance Recording for the title track. He also made an appearance on the revived Beavis & Butthead television series, and collaborated with the surviving members of the Doors on a single called "Breakin' a Sweat." The recording of the track was captured in the documentary film RE:GENERATION, while the song itself landed on Skrillex's Bangarang EP, which appeared in early 2012. The release won him two more Grammy Awards, one for the title track as Best Dance Recording and one for the EP itself as Best Dance/Electronica Album.<br /><br />Recess Most of Skrillex's recordings, however, were forced around his busy touring schedule, which found him on every inhabited continent playing to hundreds of thousands of dance fans. Still, he collaborated on singles with Damian Marley ("Make It Bun Dem After Hours") and Alvin Risk ("Try It Out"), and released another EP, Leaving, in 2012. His second proper full-length, Recess, appeared in March 2014 and promptly hit number four on the Billboard chart. In 2015, he collaborated with Diplo for the album Skrillex and Diplo Present Jack U. The following year saw Skrillex partner up with rapper Rick Ross for the hit single "Purple Lamborghini," which appeared on the soundtrack for Suicide Squad.
</div>
</td>
</tr>
<tr>
<td class="table-key">AFFILIATIONS</td>
<td>Diplo, Deadmau5</td>
</tr>
<tr>
<td class="table-key">LABEL</td>
<td class="owsla-td"><img src="assets/owsla.png" alt="OWSLA Logo" class="owsla-logo"><p class="owsla-p">OWSLA</p></td>
</tr>
<tr>
<td class="table-key">FAVORITE CEREAL</td>
<td>Cap'n Crunch</td>
</tr>
<tr>
<td class="table-key">NET WORTH</td>
<td class="bold-td">$45 Million</td>
</tr>
</table>
</article>
<article class="links">
<div class="links-link-container">
<button type="button" name="Facebook" class="links-social-button links-facebook-button"><i class="fa fa-facebook" aria-hidden="true"></i><p>Facebook</p></button>
<button type="button" name="Twitter" class="links-social-button links-twitter-button"><i class="fa fa-twitter" aria-hidden="true"></i><p>Twitter</p></button>
<button type="button" name="Soundcloud" class="links-social-button links-soundcloud-button"><i class="fa fa-soundcloud" aria-hidden="true"></i><p>Soundcloud</p></button>
</div>
<div class="links-div-container">
<div class="links-div website-links-div">
<h5><i class="fa fa-globe" aria-hidden="true"></i>Visit Website</h5>
<p>Sonny John Moore (born January 15, 1988), known professionally as Skrillex, is an American electronic dance music producer, DJ, singer and songwriter</p>
<div class="copy-link">
<p class="link-text">http://skrillex.com/</p><button type="button" name="copy-link">Copy</button>
</div>
</div>
<div class="links-div booking-links-div">
<h5><i class="fa fa-book" aria-hidden="true"></i>Booking</h5>
<p>Skrillex is fast becoming a form of hyper-digital jazz that values the improvised and unknown while creating electronic storms of devastating force and almost unimaginable size.</p>
<div class="copy-link">
<p class="link-text">[email protected]</p><button type="button" name="copy-link">Copy</button>
</div>
</div>
<div class="links-div email-links-div">
<h5><i class="fa fa-paper-plane" aria-hidden="true"></i>Email Newsletter</h5>
<p>Get Our Newsletter. Skrillex's Biggest News Delivered to Your Inbox.</p>
<div class="copy-link">
<p class="link-text">Click to Subscibe</p><button type="button" name="copy-link">Copy</button>
</div>
</div>
</div>
</article>
</section>
</div>
</main>
</body>
</html>