Tribute with Timeline 
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>TRIBUTE PAGE FOR STEVE JOBS</title>
        <meta name="description" content="TRIBUTE PAGE FOR STEVE JOBS">
        <link rel="stylesheet" href="stylesheet.css">
    <link href="https://fonts.googleapis.com/css?family=Dosis|Lato|Oswald|Pacifico|Roboto" rel="stylesheet">
</head>
    <body>
        <div id="container">
            
            <div id="header">
            
            </div> <!-- header div-->
            
            <div id="quote-1">
            <p id="text"><span> The people who are crazy enough to think they can change the world are the ones who do.</span><br> 
                </p></div>
            <div id="content">
                
                <div class="subsection-header" id="bio-header">
                    TIMELINE
                </div>
                
                <div id="main-content">
                  <div class="event-date event-date-first-child">24 Feb 1955</div>  
                    <div class="event-desc event-desc-nth-child">Steven Paul was born in San Francisco, the son of Abdulfattah Jandali and Joanne Schieble. He is quickly adopted by Paul and Clara Jobs</div>
                    
                    <div class="event-date">1969</div>
                    <div class="event-desc event-desc-nth-child">Steve Jobs meets Steve Wozniak, 5 years older, through a mutual friend. Woz and Steve share a love of electronics, Bob Dylan, and pranks</div>
                
                    <div class="event-date">Mar 1976</div>
                    <div class="event-desc event-desc-nth-child">Woz and Steve show the early Apple I board at the Homebrew Computer Club</div>
                    
                    <div class="event-date">28 Aug 1976</div>
                    <div class="event-desc event-desc-nth-child">Steve Jobs and Woz show off the Apple I at the Personal Computing Festival in Atlantic City, with help from Dan Kottke</div>
                    
                    <div class="event-date">1978</div>
                    <div class="event-desc event-desc-nth-child">At Apple, work starts on the Apple III and the Lisa, while Jef Raskin begins <em>The Book of Macintosh</em></div>
                    
                    <div class="event-date">May 1980</div>
                    <div class="event-desc event-desc-nth-child">Apple launches the Apple III, which will prove a disastrous flop</div>
                    
                    <div class="event-date">Jan 1983</div>
                    <div class="event-desc event-desc-nth-child">Launch of the Lisa computer. The Lisa team later merges with the Mac team under Steve Jobs's leadership</div>
                    
                    <div class="event-date">8 Apr 1983</div>
                    <div class="event-desc event-desc-nth-child">PepsiCo CEO John Sculley becomes Apple's CEO after having been wooed by Steve Jobs for several months</div>
                    
                    <div class="event-date">17 Sep 1985</div>
                    <div class="event-desc event-desc-last-child">Steve Jobs resigns from Apple and starts NeXT with five other refugees from Apple. Apple announces it will sue NeXT</div>
                    
                    <div class="event-date">Dec 1996</div>
                    <div class="event-desc event-desc-last-child">Apple, which was desperately looking for a modern operating system to buy, eventually buys NeXT for $400 million. Steve Jobs is named <em>"informal adviser"</em> to Apple CEO Gil Amelio</div>
                    
                    <div class="event-date">6 May 1998</div>
                    <div class="event-desc event-desc-nth-child">Steve Jobs introduces Apple's revolutionary iMac at the Flint Center auditorium in Cupertino, 14 years after he had introduced the Macintosh at that same place</div>
                    
                    <div class="event-date">5 Oct 1999</div>
                    <div class="event-desc event-desc-nth-child">Introduction of the iMac DVs and of iMovie, the first of Apple's first <em>Digital Hub</em> app</div>
                    
                    <div class="event-date">28 Apr 2003</div>
                    <div class="event-desc event-desc-nth-child">Apple opens the revolutionary online iTunes Music Store in the US, after negotiating landmark deals with all major music labels</div>
                    
                    <div class="event-date">15 Jan 2008</div>
                    <div class="event-desc event-desc-nth-child">At Macworld 2008, Steve Jobs introduces MacBook Air, with the tagline 'the world's thinnest notebook'. Three years later, it will come to redefine all of Apple's notebook product line</div>
                    
                    <div class="event-date">24 Aug 2011</div>
                    <div class="event-desc event-desc-nth-child"> Steve Jobs resigns as CEO of Apple, with the words '<em>I have always said if there ever came a day when I could no longer meet my duties and expectations as Apple's CEO, I would be the first to let you know. Unfortunately, that day has come.</em>' Tim Cook becomes Apple CEO</div>
                    
                    <div class="event-date">5 Oct 2011</div>
                    <div class="event-desc event-desc-nth-child">Steve Jobs dies at home, surrounded by his family</div>
            
                </div> <!-- main-content-->
                
                <div id="side-content">
                
                    <table class="info">
                        
<tbody>
    <tr>
        <th  colspan="2" id="nutshell"> IN A NUTSHELL
            <img id="second-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Steve_Jobs_WWDC07.jpg/609px-Steve_Jobs_WWDC07.jpg?20081010161423" /></th>
    </tr>
    <tr>
    <th> 
        Born
    </th>	
        <td>Steven Paul Jobs<br>
    February 24, 1955<br>
San Francisco, California, U.S.
    </td>
    </tr>
    <tr>
    <th>
        Died</th>
    <td>
        	October 5, 2011 (aged 56)<br>
Palo Alto, California, U.S.</td></tr>
    <tr>
    <th> Occupation</th>
    <td>Co-founder, Chairman, and CEO of Apple Inc.<br>
Primary investor and CEO of Pixar<br>
Founder and CEO of NeXT</td></tr>
    <tr>
    <th>Parents</th>
    <td>	
Paul Jobs (adoptive father)<br>
Clara Jobs (adoptive mother)<br>
Abdulfattah Jandali
(biological father)<br>
Joanne Schieble Simpson (biological mother)</td></tr>
    <tr>
    <th>Children</th>
    <td>	with Brennan;<br>
Lisa Brennan (b. 1978)<br>
with Powell;<br>
Reed Jobs (b. 1991)<br>
Erin Jobs (b. 1995)<br>
Eve Jobs (b. 1998)</td></tr>
    <tr>
    <th> Cause of <br> death</th>
    <td>	Pancreatic cancer and <br> respiratory arrest</td></tr>
</tbody>
                    </table>

                    
                </div> <!-- side-content-->
                
                
            </div> <!-- content div-->
            
            <div id="footer">
            
                <div id="quote"> <p>"Have the courage to follow your heart and intuition. They somehow know what you truly want to become."<br>
                    -STEVE JOBS</p>
                    <p>Do read more about this impeccable personality <a href="https://en.wikipedia.org/wiki/Steve_Jobs">Here.</a></p></div>
                
            </div> <!--footer div-->
            
        </div> <!-- container div -->
    </body>
</html>
#container{
  margin-left: auto;
  margin-right: auto;
  width: 1100px;
  background-color: white;
}
#header{
  width: 950px;
  height: 550px;
  background-color: ghostwhite;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Steve_Jobs.jpg/411px-Steve_Jobs.jpg?20090223024859);
  background-size: cover;
  margin-left: auto;
  margin-right: auto;
}
#quote-1{
  height: 75px;
}
p span{
  border: 0 solid black;
  padding: 12px;
  position: relative;
  background-color: white;
}
#text{
  text-align: center;
  font-family: 'Pacifico', cursive;
  font-size: 25px;
}
#bio-header{
  background: ;
  position: relative;
  top: 10px;
  left: 150px;
}
.subsection-header{
  line-height: 120px;
  padding-left: 30px;
  font-size: 50px;
  color: #ecec;
  font-weight: bold;
  height: 120px;
  width: 768px;
}
#content{
  width: 1100px;
  height: 900px;
  margin-right: auto;
  margin-left: auto;
  background-color: white;
}
#main-content{
  height: 700px;
  width: 800px;
  background-color: white;
  position: relative;
  top: 25px;
  left: 10px;
  font-family: 'Dosis',sans-serif;
}
.event-date-first-child{
  border-top: 1px solid #ccc;
  margin-top: 0;
}
.event-date{
  width: 100px;
  height: 7px;
  text-align: center;
  line-height: 26px;
  float: left;
  font-size: 14px;
  border-top: 2px solid #ccc;
  margin: -1px 0 0 0;
  padding: 4px 5px 6px 0;
  clear: left;
  font-weight: bold;
}
.event-desc{
  width: 625px;
  background: #f9f9;
  float: left;
  margin: 0;
  padding: 8px 12px 8px 8px;
  border-top: 1px solid #ccc;
  clear: right;
  font-size: 14px;
}
.event-desc-nth-child{
  border-bottom: 1px solid #ccc;
}
#side-content{
  height: 700px;
  width: 290px;
  background-color: white;
  float: right;
  clear: left;
  position: relative;
  bottom: 680px;
}
#second-image{
  width: 250px;
  height: 200px;
  position: relative;
  top: 7px;
  float: right;
  right: 18px;
}
.info{
  font-size: 90%;
  font-family: 'Dosis',sans-serif;
  position: relative;
  margin-bottom: 2em;
  text-align: center;
  background-color: white;
}
.th, .info td{
  vertical-align: top;
  border: 0;
  border-bottom: 1px solid #dddddd;
  padding: 0.2em;
}
#nutshell{
  font-family: 'Lato', sans-serif;
  font-weight: bold;
  font-size: 26px;
}
#footer{
  background-color: #ecec;
  height: 200px;
}
#quote{
  font-family: 'Pacifico',cursive;
  text-align: center;
  position: relative;
  top: 5px;
  left: 150px;
}
.a{
  color: dodgerblue;
  text-decoration: none;
}
a:hover{
  text-decoration: underlie;
  color: blue;
}
/* ESLint rules https://eslint.org/docs/2.0.0/rules/ */
/* eslint no-undef: "off" */

Tribute with Timeline

By jacktorch
  • Files
  • Index
  • Style
  • Script
  • README
  • CDN Add
HTML
PLEASE WAIT...