A Pen by Anuj Yadav on CodePen.
Last active
July 24, 2019 22:18
-
-
Save yadavanuj1996/a9863b9805017b4fbbd2e976276726d8 to your computer and use it in GitHub Desktop.
FCC: 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
<!-- <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script> | |
--> | |
<!Doctype html> | |
<html lang="en-US"> | |
<head> | |
<title>Steve Jobs Tribute</title> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta name="author" content="Anuj Yadav"> | |
<meta name="description" content="This is a tribute page to steve jobs and part of for free code camp project"> | |
<link rel="stylesheet" href="./style.css"> | |
</head> | |
<body> | |
<div id="main"> | |
<header> | |
<h1 id="title">Steve Jobs</h1> | |
<p id="page-subtitle" class="no-top-margin bold-font">The man who put dent in the universe</p> | |
</header> | |
<main> | |
<div id="img-div"> | |
<figure> | |
<img id="image" src="https://assets.webiconspng.com/uploads/2017/09/Steve-Jobs-PNG-Image-10092-300x300.png"> | |
<figcaption id="img-caption">Here’s to the crazy ones, the misfits, the rebels, the troublemakers, the round pegs in the square holes… the ones who see things differently — they’re not fond of rules… You can quote them, disagree with them, glorify or vilify them, but the only thing you can’t do is ignore them because they change things… they push the human race forward, and while some may see them as the crazy ones, we see genius, because the ones who are crazy enough to think that they can change the world, are the ones who do. | |
</figcaption> | |
</figure> | |
</div> | |
<div id="tribute-info"> | |
<h2>Early Life</h2> | |
Steve Jobs was born in San Francisco, 1955, to two university students Joanne Schieble and Syrian-born John Jandali. They were both unmarried at the time, and Steven was given up for adoption. | |
Steven was adopted by Paul and Clara Jobs, whom he always considered to be his real parents. Steven’s father, Paul, encouraged him to experiment with electronics in their garage. This led to a lifelong interest in electronics and design. | |
Jobs attended a local school in California and later enrolled at Reed College, Portland, Oregon. His education was characterised by excellent test results and potential. But, he struggled with formal education and his teachers reported he was a handful to teach. | |
At Reed College, he attended a calligraphy course which fascinated him. He later said this course was instrumental in Apple’s multiple typefaces and proportionally spaced fonts. | |
<h2>Steve Jobs in India</h2> | |
In 1974, Jobs travelled with Daniel Kottke to India in search of spiritual enlightenment. They travelled to the Ashram of Neem Karoli Baba in Kainchi. During his several months in India, he became aware of Buddhist and Eastern spiritual philosophy. At this time, he also experimented with psychedelic drugs; he later commented that these counter-culture experiences were instrumental in giving him a wider perspective on life and business. | |
“Bill Gates‘d be a broader guy if he had dropped acid once or gone off to an ashram when he was younger.” – Steve Jobs, The New York Times, Creating Jobs, 1997 | |
Job’s first real computer job came working for Atari computers. During his time at Atari, Jobs came to know Steve Wozniak well. Jobs greatly admired this computer technician, whom he had first met in 1971. | |
<h2>Steve Jobs and Apple</h2> | |
In 1976, Wozniak invented the first Apple I computer. Jobs, Wozniak and Ronald Wayne then set up Apple computers. In the very beginning, Apple computers were sold from Jobs parents’ garage. | |
Over the next few years, Apple computers expanded rapidly as the market for home computers began to become increasingly significant. | |
In 1984, Jobs designed the first Macintosh. It was the first commercially successful home computer to use a graphical user interface (based on Xerox Parc’s mouse driver interface.) This was an important milestone in home computing and the principle has become key in later home computers. | |
Despite the many innovative successes of Jobs at Apple, there was increased friction between Jobs and other workers at Apple. In 1985, removed from his managerial duties, Jobs resigned and left Apple. He later looked back on this incident and said that getting fired from Apple was one of the best things that happened to him – it helped him regain a sense of innovation and freedom, he couldn’t find work in a large company. | |
<h2>Life After Apple</h2> | |
On leaving Apple, Jobs founded NeXT computers. This was never particularly successful, failing to gain mass sales. However, in the 1990s, NeXT software was used as a framework in WebObjects used in Apple Store and iTunes store. In 1996, Apple bought NeXT for $429 million. | |
Much more successful was Job’s foray into Pixar – a computer graphic film production company. Disney contracted Pixar to create films such as Toy Story, A Bug’s Life and Finding Nemo. These animation movies were highly successful and profitable – giving Jobs respect and success. | |
In 1996, the purchase of NeXT brought Jobs back to Apple. He was given the post of chief executive. At the time, Apple had fallen way behind rivals such as Microsoft, and Apple was struggling to even make a profit. | |
<h2>Return to Apple</h2> | |
Jobs launched Apple in a new direction. With a certain degree of ruthlessness, some projects were summarily ended. Instead, Jobs promoted the development of a new wave of products which focused on accessibility, appealing design and innovate features. | |
The iPod was a revolutionary product in that it built on existing portable music devices and set the standard for portable digital music. In 2008, iTunes became the second biggest music retailer in the US, with over six billion song downloads and over 200 million iPods sold. | |
In 2007, Apple successfully entered the mobile phone market, with the iPhone. This used features of the iPod to offer a multi-functional and touchscreen device to become one of the best-selling electronic products. In 2010, he introduced the iPad – a revolutionary new style of tablet computers. | |
The design philosophy of Steve Jobs was to start with a fresh slate and imagine a new product that people would want to use. This contrasted with the alternative approach of trying to adapt current models to consumer feedback and focus groups. Job’s explains his philosophy of innovative design. | |
“But in the end, for something this complicated, it’s really hard to design products by focus groups. A lot of times, people don’t know what they want until you show it to them.” | |
– Steve Jobs, BusinessWeek (25 May 1998) | |
Apple has been rated No.1 in America’s most admired companies. Jobs management has been described as inspirational, although c-workers also state, Jobs could be a hard taskmaster and was temperamental. NeXT Cofounder Dan’l Lewin was quoted in Fortune as saying of that period, “The highs were unbelievable … But the lows were unimaginable.” | |
“My job is not to be easy on people. My jobs is to take these great people we have and to push them and make them even better.” – All About Steve Jobs [link] | |
Under Jobs, Apple managed to overtake Microsoft regarding share capitalization. Apple also gained a pre-eminent reputation for the development and introduction of groundbreaking technology. Interview in 2007, Jobs said: | |
“There’s an old Wayne Gretzky quote that I love. ‘I skate to where the puck is going to be, not where it has been.’ And we’ve always tried to do that at Apple. Since the very very beginning. And we always will.” | |
Despite, growing ill-health, Jobs continued working at Apple until August 2011, when he resigned. | |
Wealth | |
“I was worth over $1,000,000 when I was 23, and over $10,000,000 when I was 24, and over $100,000,000 when I was 25, and it wasn’t that important because I never did it for the money.” | |
– Steve Jobs | |
Jobs earned only $1million as CEO of Apple. But, share options from Apple and Disney gave him an estimated fortune of $8.3billion. | |
<h2>Personal life</h2> | |
In 1991, he married Laurene Powell, together they had three children and lived in Palo Alto, California. | |
In 2003, he was diagnosed with Pancreatic Cancer. Over the next few years, Jobs struggled with health issues and was often forced to delegate the running of Apple to Tim Cook. In 2009, he underwent a liver transplant, but two years later serious health problems returned. He worked intermittently at Apple until August 2011, where he finally retired to concentrate on his deteriorating health. He died as a result of complications from his pancreatic cancer, suffering cardiac arrest on 5 October 2011 in Palo Alto, California. | |
<br></br> | |
<a id="tribute-link" href="https://www.biographyonline.net/business/steve-jobs.html" target="_blank" alt="More Info about Jobs">More Details about Steve Jobs life</a> | |
</div> | |
</main> | |
</div> | |
</body> | |
</html> |
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
// !! IMPORTANT README: | |
// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place. | |
/*********** | |
INSTRUCTIONS: | |
- Select the project you would | |
like to complete from the dropdown | |
menu. | |
- Click the "RUN TESTS" button to | |
run the tests against the blank | |
pen. | |
- Click the "TESTS" button to see | |
the individual test cases. | |
(should all be failing at first) | |
- Start coding! As you fulfill each | |
test case, you will see them go | |
from red to green. | |
- As you start to build out your | |
project, when tests are failing, | |
you should get helpful errors | |
along the way! | |
************/ | |
// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example! | |
// Once you have read the above messages, you can delete all comments. |
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
/*declaring css variables*/ | |
:root { | |
--direction-of-flex: row; | |
} | |
@media (max-width: 650px) { | |
:root { | |
--direction-of-flex: column; | |
} | |
} | |
body { | |
margin: 0px; | |
} | |
h1 { | |
font-size: 58px; | |
margin: 0px; | |
} | |
header { | |
text-align: center; | |
margin: 0px; | |
background-color: #373535; | |
color: white; | |
} | |
.no-top-margin { | |
margin-top: 0px; | |
} | |
.bold-font { | |
font-weight: bold; | |
} | |
#page-subtitle { | |
padding-bottom: 10px; | |
} | |
figure { | |
min-height: 400px; | |
display: flex; | |
flex-direction: var(--direction-of-flex,row); | |
justify-content: space-around; | |
align-items: center; | |
} | |
figcaption { | |
font-size: 20px; | |
} | |
img{ | |
display: block; | |
height: auto; | |
max-width: 100%; | |
margin: 0 auto; | |
} | |
#tribute-info{ | |
padding: 25px; | |
background-color: #373535; | |
color: white; | |
} | |
h2{ | |
text-align: center; | |
} | |
a{ | |
color: white; | |
} | |
#img-caption{ | |
color: #373535; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment