Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save calvinwhitehurst/84a124c20904cebed8f080ad62f38d74 to your computer and use it in GitHub Desktop.
Save calvinwhitehurst/84a124c20904cebed8f080ad62f38d74 to your computer and use it in GitHub Desktop.
John Bonham Tribute Page
<style>
a:link {
color: black
}
a:visited {
color: black
}
a:hover {
color: white
}
.whole-page {
padding-top: 60px;
background-color: black;
}
.titles-body {
background-color: rgb(255, 193, 7);
display: block;
margin-left: 180px;
margin-right: 180px;
padding-bottom: 40px;
}
.titles {
padding-top: 20px;
font-size: 60px;
padding-bottom: 20px;
}
.photo-caption {
background-color: rgb(237, 233, 222);
padding-top: 3%;
padding-left: 3%;
padding-right: 3%;
padding-bottom: 8%;
margin-top: 10px;
margin-left: 140px;
margin-right: 140px;
border-style: solid;
border-color: rgb(211, 198, 158);
}
.caption {
margin-top: 30px;
}
.description-container {
width: 700px;
margin:0 auto;
text-align: left;
}
.description {
margin-top: 20px;
background: #f4d777;
padding: 20px;
font-size: 15px;
}
.timeline {
margin-top: 30px;
}
.list {
width: 700px;
margin:0 auto;
text-align: left;
}
.list-fluid {
margin-top: 20px;
background: #f4d777;
padding: 20px;
font-size: 15px;
}
.display-4 {
padding-top: 20px;
padding-bottom: 20px;
width: 900px;
margin:0 auto;
text-align: left;
}
.display-5 {
padding-right: 250px;
}
.lead {
font-size: 20px;
padding-top: 20px;
padding-bottom: 20px;
width: 900px;
margin:0 auto;
text-align: center;
}
.wiki {
padding-top: 60px;
}
hr.style1{
border-top: 1px solid #000000;
width: 800px;
}
.bonham-symbol {
padding-top: 50px;
}
</style>
<!-- style code above this line and html code below this line -->
<div class="whole-page">
<div class="titles-body">
<div class="titles">
<p class="first.name" align="center">John Bonham</p>
<h2 align="center">Bonafide Super-Star</h2></div>
<div class="photo-caption">
<img src="http://assets.teamrock.com/image/ebb31212-c803-40cc-b996-2159773f235f?w=800" class="img-fluid rounded" alt="A thrilling action shot of John Bonham playing the drums in concert under yellow stage lights."></img>
<div class="caption">
<h4 align="center"><em>A thrilling action shot of John Bonham playing the drums in concert.</em></h4>
</div>
</div>
<h1 class="timeline" align="center">
John Bonham- Rock and Roll Drummer
</h1>
<div class="description-container">
<p class="description"> John Bonham was an English musican and songwriter, best known as the drummer for the British rock band <em>Led Zeppelin</em>. Bonham was esteemed for his speed, power, fast bass-drumming, distinctive sound, and "feel" for the groove. He is widely considered to be one of the greatest drummers in rock history.
</div>
<h1 class="timeline" align="center">
The Timeline of John Bonham's Life:
</h1>
<div class="list">
<ul class="list-fluid">
<li><strong>1948-</strong> Bonham was born in Redditch, United Kingdom.</li>
<li><strong>1953-</strong> Bonham played drums on pots and pans in his mother's kicthen.</li>
<li><strong>1958-</strong> His mother gifts him his first snare drum, he was ten years old.</li>
<li><strong>1962-</strong> Bonham's father buys him his first drum set which Bonham would later describe as 'very rusty'.</li>
<li><strong>1963-</strong> Bonham plays in two different amatuer bands while still in school. </li>
<li><strong>1964-</strong> While working for his father as an apprentice carpenter and playing in semi-proffessional bands, Bonham quits school.</li>
<li><strong>1966-</strong> Bonham meets, future vocalist of <em>Led Zeppelin</em>, Robert Plant while playing with the band <em>Crawling King Snakes</em>.</li>
<li><strong>1968-</strong> After <em>The Yardbirds</em> disbanded, guitarist Jimmy Page set out to form <em>Led Zeppelin</em> with John Bonham as the drummer. Bonham accepted after quite a lot of convincing.</li>
<li><strong>1968-1980</strong> Bonham and <em>Led Zeppelin</em> recorded and released 9 multi-platinum studio albums</li>
<li><strong>1980-</strong> Bonham dies in his sleep after a rehearsal. Due to heavy alcohol consumption, Bonham choked on his own vomit. Afterwards <em>Led Zeppelin</em> disbanded citing that they could not produce music without John Bonham.</li>
</ul>
</div>
<div class="quote">
<h1 class="display-4"><strong>"</strong>There were times when I blundered and got the dreaded look from the lads. But that was a good sign. It showed I'd attempted something I'd not tried before.<strong>"</strong></h1>
<h1 class="display-5 float-right"><em> -John Bonham</em></h1>
</div>
<div class="wiki">
<p class="lead">To learn more about John Bonham please visit his <a href="https://en.wikipedia.org/wiki/John_Bonham" target="blank"><u> Wikipedia Page</u>.</a></p>
</div>
<hr class="style1">
<div class="bonham-symbol">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Zoso_John_Bonham_sigil_three_intersecting_circles.svg/220px-Zoso_John_Bonham_sigil_three_intersecting_circles.svg.png" class="img-responsive center-block" width="10%" alt="John Bonham's symbol featuring three intersecting rings"></img>
</div>
<div>
<p class="lead site-link">Website create by <a href="http://calvinjwhitehurst.com" target="blank"><u>Calvin Whitehurst</u>.</a></p>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment