A Pen by Reed Sutton on CodePen.
Last active
October 9, 2017 06:52
-
-
Save reedtsutton/ea76f580b311b4deb7392d51a66c514b to your computer and use it in GitHub Desktop.
Elon Musk Tribute Page
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- Credits: | |
| - https://en.wikipedia.org/wiki/Elon_Musk | |
| - https://en.wikipedia.org/wiki/Tesla_Roadster | |
| - https://en.wikipedia.org/wiki/Hyperloop | |
| - https://en.wikipedia.org/wiki/SolarCity | |
| - https://en.wikipedia.org/wiki/Tesla_Model_S | |
| - https://en.wikipedia.org/wiki/SpaceX | |
| --> | |
| <div class="container-fluid"> | |
| <div class="row"> | |
| <div class="col-sm-12 top-banner"> | |
| <h1 class="main-title text-center"><span class="keyword">Elon Musk</span></h1> | |
| </div> | |
| </div> | |
| <hr> | |
| <div class="row"> | |
| <div class="col-md-12"> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-sm-6"> | |
| <h2 class="timeline"><center>Career History</center></h2> | |
| <ul class="list-group"> | |
| <li class="list-group-item">Born June 28, 1971 in <a href="https://en.wikipedia.org/wiki/Pretoria" target="_blank">Pretoria, Transvaal, South Africa</a>.</li> | |
| <li class="list-group-item">1981 he discovered computing using a <a href="https://en.wikipedia.org/wiki/Commodore_VIC-20" target="_blank">Commodore VIC-20.</a></li> | |
| <li class="list-group-item">1983 he taught himself computer programming and sold the code for a <a href="https://en.wikipedia.org/wiki/BASIC" target="_blank">BASIC</a> video game for US$500.</li> | |
| <li class="list-group-item">1989 moved to Canada after obtaining Canadian citizenship through his Canadian born mother.</li> | |
| <li class="list-group-item">1990 was accepted into <a href="http://www.queensu.ca/" target="_blank">Queens University</a> in Kingston, Ontario for undergraduate study.</li> | |
| <li class="list-group-item">1992 he transferred to the <a href="http://www.upenn.edu/">University of Pensylvania</a>.</li> | |
| <li class="list-group-item">1994 recieved a Bachelor of Science in physics from <a href="http://www.college.upenn.edu/" target="_blank">College of Arts and Sciences</a>.</li> | |
| <li class="list-group-item">1995 recieved a Bachelor of Science in economics <a href="https://www.wharton.upenn.edu/" target="_blank">Wharton School</a>, and moved to California to begin a PhD in applied physics from <a href="https://www.stanford.edu/" target="_blank">Stanford University</a>. | |
| However, he left the program after two days to pursue his entrepeneurial aspirations the areas of the Internet, renewable energy and outer space.</li> | |
| <li class="list-group-item">1995 Elon and his brother Kimbal started Zip2, a web software company. They developed an Internet "city guide".</li> | |
| <li class="list-group-item">1999 Compaq accquired Zip2 for US$307 million in cash and US$34 million in stock options.</li> | |
| <li class="list-group-item">1999 Elon co-founded X.com, an online financial services and email payment company with US$10 million from the sale of Zip2.</li> | |
| <li class="list-group-item">2000 X.com merged with anoter company called Cofinity, which had a money transfer service called PayPal. The merged company focused on PayPal and thus, the company was renamed to Paypal in 2001.</li> | |
| <li class="list-group-item">2002 Paypal was accquired by eBay for US$1.5 billion in stock, of which US$165 million was given to Elon.</li> | |
| <li class="list-group-item">2002 He founded Space Exploration Technologies, also known as <a href="http://www.spacex.com/" target="_blank">SpaceX</a>.</li> | |
| <li class="list-group-item">2002 He became a US citizen.</li> | |
| <li class="list-group-item">2003 <a href="https://www.teslamotors.com/" target="_blank">Tesla Motors </a>was incorporated.</li> | |
| <li class="list-group-item">2006 <a href="https://en.wikipedia.org/wiki/Tesla_Roadster" target="_blank">Tesla Roadster</a> was revelead in a small event at Barker Hangar at Santa Monica Airport</li> | |
| <li class="list-group-item">2006 Musk provided the initial concept, and financial capitals for <a href="http://www.solarcity.com/">SolarCity</a>, which was then co-founded by his cousins.</li> | |
| <li class="list-group-item">2008 The first Tesla Roadster was delivered.</li> | |
| <li class="list-group-item">2009 The <a href="https://www.teslamotors.com/models" target="_blank">Tesla Model S</a> prototype vehicle was displayed at a press conference.</li> | |
| <li class="list-group-item">2012 The Model S was introduced into the market in June 2012</li> | |
| <li class="list-group-item">2013 He introduced and release to the public the prelimanary plans for a high-speed transportation system called the <a href="https://en.wikipedia.org/wiki/Hyperloop" target="_blank">"Hyperloop"</a>.</li> | |
| <li class="list-group-item">2015, Elon Musk announced the creation of <a href="https://openai.com/blog/introducing-openai/" target="_blank">OpenAI</a>, a not-for-profit artificial intelligence (AI) research company.</li> | |
| <li class="list-group-item">2016, Elon Musk, bored in traffic, <a href="https://twitter.com/i/moments/810167683752693760?lang=en" target="_blank"> tweeted</a> about starting a company to drill underground tunnels for transportation. Thus, <a href="https://www.boringcompany.com/" target="_blank">the Boring Company</a> was born.</li> | |
| </ul> | |
| </div> | |
| <div class="col-md-6"> | |
| <h2 class="timeline"><center>Current Companies</center></h2> | |
| <a href="#" class="thumbnail"> | |
| <img src="http://www.car-brand-names.com/wp-content/uploads/2015/05/Tesla-Motors-logo-3.jpg"> | |
| </a> | |
| <a href="#" class="thumbnail"> | |
| <img src="https://localtvwiti.files.wordpress.com/2015/01/test.jpg?quality=85&strip=all&w=770" alt="Elon and Model S"> | |
| </a> | |
| <a href="#" class="thumbnail"> | |
| <img src="https://ih1.redbubble.net/image.365337764.7285/ap,550x550,16x12,1,transparent,t.u1.png" alt="Model X"> | |
| </a> | |
| <a href="#" class="thumbnail"> | |
| <img src="https://upload.wikimedia.org/wikipedia/en/thumb/4/4d/OpenAI_Logo.svg/1200px-OpenAI_Logo.svg.png" style="padding:50px;" alt="SpaceX Rocket"> | |
| </a> | |
| <a href="#" class="thumbnail"> | |
| <center> | |
| <img src="https://www.neuralink.com/images/neuralink_logo_black.png" style="margin:50px;" alt="Neuralink"> | |
| </center> | |
| </a> | |
| </div> | |
| </div> | |
| <hr> | |
| <div class="row"> | |
| <div class="col-sm-12 bottom-banner"> | |
| <h2 class="main-footer">"Failure is an option here. | |
| <br> | |
| If things are not failing,<br> you are not innovating enough."</h2> | |
| </div> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Animate CSS code */ | |
| $(".main-title").addClass("animated bounceInLeft"); | |
| $(".timeline").hover(function() { | |
| $(this).addClass("animated fadeIn"); | |
| }); | |
| $( | |
| ".timeline" | |
| ).on("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationEnd", function( | |
| event | |
| ) { | |
| $(this).removeClass("animated fadeIn"); | |
| }); | |
| //rotating keywords for Elon | |
| var keywords = ["Tony Stark", "Automotive<br>Innovator", "Online<br>Payment<br>Pioneer","Energy<br>Futurist", "Rocket<br>Scientist"]; | |
| var colours = ["black", "#EE2424", "#60CDF6", "#D490BF", "#8Ac597"]; | |
| var count = 1; | |
| setInterval(function(){ | |
| $("span.keyword").fadeOut(800, function(){ | |
| $(this).html(keywords[count]).css("color", colours[count]); | |
| count++; | |
| if(count == keywords.length) | |
| count = 0; | |
| $(this).fadeIn(800); | |
| }); | |
| }, 3000); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.15.0/vis.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| margin-top: 0; | |
| margin-bottom: 0; | |
| } | |
| hr { | |
| height: 2px; | |
| } | |
| .main-title { | |
| position: relative; | |
| z-index: 1; | |
| top: 10px; | |
| right: 30%; | |
| font-size: 5em; | |
| letter-spacing: 0.1em; | |
| color: black; | |
| } | |
| .main-footer { | |
| position: relative; | |
| z-index: 1; | |
| top: 80px; | |
| left: 10px; | |
| font-size: 3.5em; | |
| letter-spacing: 0.05em; | |
| color: #ccac55; | |
| } | |
| .top-banner { | |
| background: url(https://i.imgsafe.org/1e/1ed39d9a50.jpeg) | |
| no-repeat | |
| center | |
| fixed; | |
| background-size: fill; | |
| height: 500px; | |
| } | |
| .bottom-banner { | |
| background: url(http://images.inc.com/uploaded_files/image/1940x900/elon-musk_31838.jpg) | |
| no-repeat | |
| center | |
| fixed; | |
| height: 400px; | |
| } | |
| img { | |
| width: 50%; | |
| height: auto; | |
| } | |
| @media (max-width: 400px) { | |
| .main-title { | |
| font-size: 5em; | |
| letter-spacing: 0.2em; | |
| top: 8px; | |
| left: 0; | |
| } | |
| .main-footer { | |
| font-size: 2.5em; | |
| top: 20px; | |
| left: 5px; | |
| } | |
| } | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment