<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RIP Steve Jobs</title>
<link rel="stylesheet" href="tribute-style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css" crossorigin="anonymous">
</head>
<body>
<div class="container" id="main">
<div class="dark-mode-toggle">
<button class="dark-btn" id="dark-btn" onClick="darkMode()">
<i class="dark-icon fa fa-moon" id="dark-icon" title="Dark mode Toggle"></i>
</button>
</div>
<div class="content-wrap" id="title">
<h1>Steve Jobs</h1>
<h3>Stay Hungry Stay Foolish</h3>
</div>
<div class="img-container">
<img src="https://source.unsplash.com/collection/27383063/1600x900" alt="Steve Jobs Glasses and Steve Jobs Photos" id="#img">
<p id="#img-text">Steve Jobs: the man behind iWorld!</p>
</div>
<section class="timeline">
<h3>Here's a timeline of Job's Extraordinary Life</h3>
<ul class="timeline-item">
<li><strong>1955</strong> Steven Paul Jobs is born in San Francisco to Joanne Carole Schieble and Abdulfattah Jandali.</li>
<li><strong>1977</strong> Co-founds Apple Computer with Wozniak and Ronald Wayne.
That same year, the company sells the Apple I in the form of a kit that sells for $666.66.
</li>
<li><strong>1984</strong>
Two days after the $1.5 million Ridley Scott-directed "1984" Super Bowl commercial airs,
introduces the Macintosh to much fanfare during Apple's shareholder meeting.
"For the first time ever, I'd like to let Macintosh speak for itself."
The computer's voice then says, "Never trust a computer you can't lift."
Macintosh becomes the first commercially successful small computer with a graphical user interface.
</li>
<li><strong>1985</strong>
CEO John Sculley engineers Jobs' ouster from Apple.
Jobs resigns as Apple chairman, saying in a board meeting,
"I've been thinking a lot, and it's time for me to get on with my life.
It's obvious that I've got to do something. I'm 30 years old." Soon thereafter,
Jobs starts NeXT Computer (which later becomes NeXT Software),
funded by selling $70 million of his Apple stock. An "interpersonal" NeXT workstation,
sporting a built-in Ethernet port,
is used by Tim Berners-Lee at CERN to become the first server of the World Wide We
</li>
<li><strong>1995</strong>
Becomes Pixar's president and CEO. Later in the year,
Jobs brings Pixar pubic one week after the release of "Toy Story,"
with Tom Hanks doing the voice of Woody and Tim Allen as Buzz Lightyear. The film earns $192 million at the box office.
Its success helps make it
quite attractive for celebrities to lend their voices to animated characters.
</li>
<li><strong>1996</strong>
Returns to Apple, as an adviser, after it buys NeXT for $429 million.
</li>
<li><strong>1997</strong>
Apple buy NeXT for $427 million, bringing Jobs back to the company he had cofounded
</li>
<li><strong>2008</strong>
Introduces the App Store as an update to iTunes. Also introduces the MacBook Air.
The App Store facilitated 18 billion app downloads as of October 4, 2011.
</li>
<li><strong>2011</strong>
Jobs announce his resignation as Apple’s CEO due to his cancer. He named Tim Cook as his successor.
</li>
<li>
<strong>2011</strong>
Gives a keynote speech at Apple's Worldwide Developers Conference, it's Jobs'
last public appearance at an Apple event.
</li>
</ul>
</section>
<section class="quote-wrapper" id="citation">
<blockquote>
<q>Your time is limited, so don't waste it living someone else's life.</q>
</blockquote>
<cite>- Steve Jobs</cite>
</section>
<footer>
<h2>If you have time, you should read more about this incredible human being on his <a href="https://en.wikipedia.org/wiki/Steve_Jobs" target="_blank">Wikipedia entry.</a></h2>
</footer>
</div>
<script src="tribute-script.js"></script>
</body>
</html> @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Roboto Condensed';
background-color: #eee;
}
img {
max-width: 100%;
}
#main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding:4rem 3rem ;
}
#title {
display: flex;
flex-direction: column;
align-items: center;
padding:3rem;
}
.content-wrap h1 {
font-size: 4rem;
}
.img-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding:2rem;
background-color: #fff;;
}
.img-container p {
display: inline-block;
margin:20px;
}
.timeline {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding:4rem;
gap:1rem;
}
.timeline-item li {
padding:1rem;
}
#citation {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#citation p {
font-size: 2em;
font-weight: 300;
font-style: italic;
letter-spacing: 0.01em;
}
cite {
font-size: 1.250em;
}
footer {
margin-top:2rem;
}
footer a {
text-decoration: none;
}
section ul {
list-style: none;
border-left: 2px solid blue;
}
blockquote q {
font-size:1.5rem;
}
.dark-mode {
color: #eee;
background: #121212;
}
.dark-mode a {
color: #809fff;
}
.dark-mode blockquote p::before,
.dark-mode blockquote p::after
{
color:#eee;
}
.dark-mode .dark-btn {
background-color: #121212;
}
.dark-mode .img-container {
background-color: grey;
}
.dark-btn {
border: none; /* Remove borders */
color: grey; /* White text */
padding: 12px 16px; /* Some padding */
font-size: 24px; /* Set a font size */
cursor: pointer; /* Mouse poi
tnter on hover */
}
.timeline-item li::before{
content: '';
display:inline-block;
position:relative;
left:-25px;
width: 15px;
height: 15px;
-moz-border-radius: 7.5px;
-webkit-border-radius: 7.5px;
border-radius: 7.5px;
background-color: #69b6d5;
}
strong {
font-size:20px;
}
@media all and (max-width:40rem) {
blockquote {
display:flex;
flex-direction:column;
max-width:320px;
}
}
function darkMode() {
let element = document.body;
let icon=document.getElementById("dark-icon");
let button=document.getElementById("dark-btn");
element.classList.toggle("dark-mode");
icon.classList.toggle("fa-sun")
button.title="Toggle Light Mode"
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.