-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtwentyonepilots.html
155 lines (139 loc) · 9.11 KB
/
twentyonepilots.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" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>TwentyOnePilot</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/twentyone.css" rel="stylesheet">
<!-- icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- 1st image -->
<div class="t21pilots1">
<div class="caption">
<span class="border">Twenty One Pilots</span>
</div>
</div>
<span id="section05" class="demo">
<a href="#thanks"><span></span>Scroll</a>
</span>
<!-- Navigation -->
<nav class="navbar transparent fixed-top navbar-expand-lg navbar-dark bg-dark ">
<div class="container">
<a class="navbar-brand" href="index.html" id="logo"><img src="images/logo.png" width="50px" height="50px">TwentyOnesPilots</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownAbout" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">About</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownAbout">
<a class="dropdown-item about" href="tylor.html">Tyler Joseph</a>
<a class="dropdown-item about" href="Josh.html">Josh Dun</a>
<a class="dropdown-item about" href="twentyonepilots.html">TwentyOnePilots</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownAlbums" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Albums
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownAlbums">
<a class="dropdown-item about" href="trench.html">The Trench</a>
<a class="dropdown-item about" href="blurryface.html">Blurryface</a>
<a class="dropdown-item about" href="vessel.html">Vessel</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Other Pages
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
<a class="dropdown-item about" href="concert.html">Concert Dates</a>
<a class="dropdown-item about" href="faq.html">FAQ</a>
</div>
<li class="nav-item">
<a class="nav-link" href="cart.html">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- text box -->
<div class="container">
<h2 class='text-center'>Twenty One Pilots' journey</h2>
<div class="row">
<div class="col-md-12">
<div class="main-timeline5">
<div class="timeline">
<div class="timeline-icon"><span class="year">2009</span></div>
<div class="timeline-content">
<h3 class="title">Formation</h3>
<p class="description">
Tyler Joseph first met future bandmate Nick Thomas at a young age while playing youth basketball in Columbus, Ohio. Thomas later transferred to Joseph's middle school, and the two would remain friends through high school.
Joseph began playing music after finding an old keyboard in his closet, a Christmas gift from his mother, and started mimicking radio melodies. In 2007, Joseph recorded a solo album titled No Phun Intended in his parent's basement. Thomas contributed guitar to several songs on the album, and collaborated on the track "Trees", which would later become a signature Twenty One Pilots song.</p>
</div>
</div>
<div class="timeline">
<div class="timeline-icon"><span class="year">2012</span></div>
<div class="timeline-content">
<h3 class="title">Major Label</h3>
<p class="description">
In April 2012, the band announced their signing to Atlantic Records subsidiary Fueled by Ramen, the label responsible for the commercial success of popular alternative artists like Panic! at the Disco and Paramore, during a sold out show at the Lifestyle Communities Pavilion. On July 17, 2012, they released their debut Fueled by Ramen recording, an EP entitled Three Songs. The next month, the band embarked on a short tour with Neon Trees and Walk the Moon.</p>
</div>
</div>
<div class="timeline">
<div class="timeline-icon"><span class="year">2015</span></div>
<div class="timeline-content">
<h3 class="title">blurryface</h3>
<p class="description">
On March 16, 2015, the band announced that a new album, Blurryface, was to be released on May 19. They released the first single, "Fairly Local", on March 17. Their second single of the album, "Tear in My Heart", and its music video were released on April 5, 2015. On April 28, "Stressed Out", the third single from the album, was released along with a music video. "Stressed Out" became the group's highest selling single, peaking at No. 2 on the U.S. Billboard Hot 100, and No. 1 on both Alternative Songs and Hot Rock Songs charts, while also surpassing one billion views on YouTube.</p>
</div>
</div>
<div class="timeline">
<div class="timeline-icon"><span class="year">2018</span></div>
<div class="timeline-content">
<h3 class="title">Trench</h3>
<p class="description">
n April 2018, a cryptic message was uncovered on the band's web store, which revealed a website. Fans began using clues and found other sections of this site, hinting at the possibility of the band's return. There were multiple images uploaded to the website, including letters from a character named "Clancy". In July 2018, Twenty One Pilots broke their year-long silence, first sending a cryptic email to fans and later posting a video to all social media platforms and updating their logo and branding. Tyler Joseph made his first media appearance in over a year for an interview with Zane Lowe of Beats 1 from his own home studio in Columbus, Ohio, in which he spoke about the band's year long hiatus, creating the new album, and battling against personal demons and insecurities
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 2nd image -->
<div class="t21pilots2">
</div>
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Production of schwa_hue©2019</p>
<p class="text-center">
<a href="https://twitter.com/twentyonepilots?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor" class="fa fa-twitter"></a>
<a href="https://www.youtube.com/user/twentyonepilots" class="fa fa-youtube"></a>
<a href="https://www.instagram.com/twentyonepilots/?hl=en" class="fa fa-instagram"></a>
<a href="https://www.facebook.com/twentyonepilots/" class="fa fa-facebook"></a>
</p>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Javascript for this page -->
<script src="js/main.js"></script>
</body>
</html>