Skip to content

Instantly share code, notes, and snippets.

@stanwmusic
Created June 15, 2017 02:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save stanwmusic/ff03af0e346e3c82946b3324c84c83e9 to your computer and use it in GitHub Desktop.
Save stanwmusic/ff03af0e346e3c82946b3324c84c83e9 to your computer and use it in GitHub Desktop.
tribute page (video background) of Thomas Edison
<main>
<header>
<video autoplay loop>
<source src="https://res.cloudinary.com/dzjiv8sye/video/upload/v1472205518/Coverr-lamp_jikfrz.webm">
<source src="https://res.cloudinary.com/dzjiv8sye/video/upload/v1472205519/Coverr-lamp_krhevy.mp4">
</video>
<h1>I have not failed. I've just found 10,000 ways that won't work.</h1>
</header>
<div id="maincontent">
<h1>Thomas Alva Edison</h1>
<table class="table">
<tr>
<td>1847</td>
<td>
<span class="sum-title">Thomas Edison is born </span>
Thomas Edison was born in Ohio on February 11. His family later moved to Michigan.
</td>
</tr>
<tr>
<td>1859</td>
<td>
<span class="sum-title">Thomas sets up one of his first chemistry labs </span>
As a boy, Thomas Edison worked with the Grand Trunk Railroad. He set up his very own chemistry lab on board the train.
</td>
</tr>
<tr>
<td>1867</td>
<td>
<span class="sum-title">Thomas Edison begins his first of many experiments </span>
Throughout the Civil War Thomas worked as a wire operator. He became familiar with the telegraph instruments and started experimenting with them.
</td>
</tr>
<tr>
<td>1868</td>
<td>
<span class="sum-title">Thomas Edison files his first patent </span>
After beginning work with Western Union, Thomas invented an automatic vote recorder. He filed his very first patent for this machine.
</td>
</tr>
<tr>
<td>1870</td>
<td>
<span class="sum-title">Edison becomes a full time inventor </span>
He moved to New Jersey and used all of his money and time to work on new inventions. He invented several stock market machines during this time.
</td>
</tr>
<tr>
<td>1871</td>
<td>
<span class="sum-title">Thomas Edison gets married to Mary Stillwell </span>
Mary was one of Thomas's employees in New Jersey. They were married on Christmas Day.
</td>
</tr>
<tr>
<td>1874</td>
<td>
<span class="sum-title">A new invention for Western Union </span>
Thomas invented a new telegraph system for Western Union that could send four telegraphs at once.
</td>
</tr>
<tr>
<td>1875</td>
<td>
<span class="sum-title">Edison invents the first version of a copy machine </span>
Thomas called his invention the electric pen. It was an early form of a copy machine.
</td>
</tr>
<tr>
<td>1877</td>
<td>
<span class="sum-title">Thomas invents the phonograph </span>
Thomas invented the phonograph, which played music. He later improved the phonograph, and made it cheap enough for the general public to afford.
</td>
</tr>
<tr>
<td>1877</td>
<td>
<span class="sum-title">The carbon transmitter is invented </span>
Thomas Edison invented the carbon transmitter, which was used in the telephone and helped it work much better. The carbon discovery helped pave the way for Edison's most well-known invention.
</td>
</tr>
<tr>
<td>1879</td>
<td>
<span class="sum-title">Edison invents the carbon-powered lamp </span>
Using the power of carbon, Edison invented a lamp that lit without the use of oil and fire.
</td>
</tr>
<tr>
<td>1880</td>
<td>
<span class="sum-title">Edison works toward widespread electricity </span>
Thomas opened an industrial park to figure out how to spread electricity to the public.
</td>
</tr>
<tr>
<td>1883</td>
<td>
<span class="sum-title">Electricity goes public</span>
Edison moved across the east, helping cities to install electricity for the people.
</td>
</tr>
<tr>
<td>1892</td>
<td>
<span class="sum-title">General Electric is established </span>
Thomas Edison merged his electric company with The Thomson-Houston Company to form General Electric.
</td>
</tr>
<tr>
<td>1900</td>
<td>
<span class="sum-title">Thomas Edison invents the battery </span>
Thomas began working on a way to store energy for use when electricity wasn't available. He eventually came up with the battery.
</td>
</tr>
<tr>
<td>1931</td>
<td>
<span class="sum-title">Thomas Edison dies </span>
Thomas Edison died on October 18, and the country dimmed their lights in his honor on the day of his funeral. Thomas's inventions changed the way our world worked, and he gave us some of our most prized conveniences-electricity, batteries, and even a way to listen to music!
</td>
</tr>
</table>
<blockquote>
<p>Restlessness is discontent and discontent is the first necessity of progress. Show me a thoroughly satisfied man and I will show you a failure.</p>
<footer> Thomas A. Edison</footer>
</blockquote>
<p>If you have time, you should read more about this incredible human being on his <a href="http://en.wikipedia.org/wiki/Thomas_Edison" target="_blank">Wikipedia entry</a>.</p>
</div>
</main>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
* {
box-sizing: border-box;
}
body {
background: #ccc;
margin: 0;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
main {
width: 80%;
max-width: 750px;
margin: 0 auto;
background: #ffe;
}
main > header {
position: relative;
}
main > header video {
width: 100%;
height: auto;
}
main > header h1 {
position: absolute;
top: 20%;
font-size: 5rem;
text-transform: uppercase;
line-height: 1;
font-weight: 600;
color: white;
background: black;
opacity: 0.5;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
#maincontent {
padding: 2rem;
}
@media all and (max-width: 750px) {
main {
width: 100%;
}
}
@media all and (max-width: 500px) {
main > header h1 {
top:0px;
font-size: 3rem;
}
}
.sum-title{
font-weight: bold;
display: block;
}
blockquote{
border-left: 5px solid #ccc;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
@stanwmusic
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment