Tribute Page v1

Developer
Christian
Size
5,740 Kb
Views
24,288
  1. Tribute Page v1 Previews
  2. Tribute Page v1 HTML Codes
  3. Tribute Page v1 CSS Codes
  4. Tribute Page v1 JS Codes

How do I make an tribute page v1?

What Steve Jobs did when He is still on the land of the living.. What is a tribute page v1? How do you make a tribute page v1? This script and codes were developed by Christian on 15 October 2022, Saturday.

Tribute Page v1 Previews
IQ Test

Tribute Page v1 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tribute Page v1</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Tribute Page to Steve v1 -->
<section id="hero-section"> <figure> <!-- Load the image! --> <img src="https://www.dropbox.com/s/p6yhuz81i3k7nzl/Steve-Crop%20%281%29.jpg?raw=1" alt="Steve Jobs" /> <div id="uniq-wrap"> <h1>Steve Jobs</h1> <figcaption>The man who built the future</figcaption> </div> </figure>
</section>
<main ng-app="tribute" ng-cloak> <section id="blue-bg"> <div id="timeline" ng-controller="TimelineController as steve"> <h2>Jobs Timeline</h2> <ul> <li ng-repeat="timeline in steve.timeline"> <strong>{{timeline.date}}</strong> - {{timeline.description}} </li> </ul> </section> <blockquote class="wrap"> <p>"Design is not just what it looks like and feels like. Design is how it works."</p> <cite>- Steve Jobs</cite> </blockquote> <section id="link"> <p>Wanna learn more about Steve Jobs <a href="http://www.wikiwand.com/en/Steve_Jobs" target="_blank">Click here</a>.</p> </div> </section>
</main>
<footer class="wrap"><small>Made with <span id="heart">❤</span> by <a href="https://github.com/chpecson" target="_blank">Christian Pecson</a></small></footer> <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Tribute Page v1 - Script Codes CSS Codes

/*=============== Base Font
===============*/
@import url(https://fonts.googleapis.com/css?family=Varela);
/*=============== Base Class
===============*/
.ng-cloak,
[ng-cloak] { display: none;
}
* { cursor: default; margin: 0; padding: 0;
}
body { background-color: #fafafa;; font-family: Varela, sans-serif; font-size: 100%; color: #112;
}
h1 { font-size: 250%;
}
.wrap { margin: 0 auto; text-align: center; width: 50%;
}
.wrap:nth-child(2) { margin-top: 2em; width: 65%;
}
a { color: #08f; text-decoration: none;
}
a:hover { text-decoration: underline;
}
/*=============== Steve's Styles
===============*/
#hero-section figure img { width: 100%;
}
#hero-section { font-size: 2em; text-align: center;
}
/*================ Section Styles
================*/
#blue-bg { background-color: #2af; padding: 2em 0;
}
blockquote,
#link,
#timeline { background-color: #fafafa; border-radius: .2em; margin: 2rem auto; padding: 2em; text-align: center; width: 80%;
}
blockquote,
#link { background: #efefef;}
#timeline h2 { font-size: 2.5em;
}
#timeline ul { display: inline-block; line-height: 1.5; margin: 1em 2em; text-align: left;
}
#timeline li { margin: 1em 0;
}
#timeline li > strong { font-size: 1.2em;
}
#timeline li .date { font-weight: bold;
}
#timeline p { display: inline;
}
/*================ Quote Styles
================*/
blockquote,
cite { display: block; }
blockquote { font-size: 150%; text-align: center; transition: all 1s;
}
blockquote:hover { box-shadow: 0 .1em .5em #000; transform: scale(1.1);
}
blockquote cite { margin-top: 1.5em; text-align: right;
}
/*================ Footer Styles
================*/
footer { font-size: 110%; margin: 2em 0;
}
#heart { color: #f77;
}
/*================ Media Quieries
================*/
@media (max-width: 700px) { blockquote:hover { transform: scale(0.85); } #steve { font-size: .5em; }
}
@media(max-width: 480px){ blockquote:hover { transform: scale(0.8); } footer{ font-size: 80%; } #steve { font-size: .4em; } #uniqwrap { margin: .2em auto; }
}

Tribute Page v1 - Script Codes JS Codes

(function() { var app = angular.module('tribute', []); app.controller('TimelineController', function() { this.timeline = timeline; }) var timeline = [{ date: 1955, description: "Stephen Paul Jobs is born on Feb. 24." }, { date: 1972, description: "Jobs enrolls at Reed College in Portland, Oregon, but drops out after a semester." }, { date: 1974, description: "Jobs works for video game maker Atari and attends meetings of the Homebrew Computer Club with Steve Wozniak, a high school friend who was a few years older." }, { date: 1975, description: "Jobs and Wozniak attend Homebrew Computer Club meetings." }, { date: 1976, description: "Apple Computer is formed on April Fool's Day, shortly after Wozniak and Jobs create a new computer circuit board in a Silicon Valley garage. A third co-founder, Ron Wayne, leaves the company after less than two weeks. The Apple I computer goes on sale by the summer for $666.66." }, { date: 1977, description: "Apple is incorporated by its founders and a group of venture capitalists. It unveils Apple II, the first personal computer to generate color graphics. Revenue reaches $1 million." }, { date: 1978, description: "Jobs' daughter Lisa is born to girlfriend Chrisann Brennan." }, { date: 1979, description: "Jobs visits Xerox Palo Alto Research Center, or PARC, and is inspired by a computer with a graphical user interface." }, { date: 1980, description: "Apple goes public, raising $110 million in one of the biggest initial public offerings to date." }, { date: 1982, description: "Annual revenue climbs to $1 billion" }, { date: 1983, description: "The Lisa computer goes on sale with much fanfare, only to be pulled two years later. Jobs lures John Sculley away from Pepsico Inc. to serve as Apple's CEO." }, { date: 1984, description: "Iconic \"1984\" Macintosh commercial directed by Ridley Scott airs during the Super Bowl. The Macintosh computer goes on sale." }, { date: 1985, description: "Jobs and Sculley clash, leading to Jobs' resignation. Wozniak also resigns from Apple this year." }, { date: 1986, description: "Jobs starts Next Inc., a new computer company making high-end machines for universities. He also buys Pixar from \"Star Wars\" creator George Lucas for $10 million." }, { date: 1989, description: "First NeXT computer goes on sale with a $6,500 price tag." }, { date: 1991, description: "Apple and IBM Corp. announce an alliance to develop new PC microprocessors and software. Apple unveils portable Macs called PowerBook." }, { date: 1993, description: "Apple introduces the Newton, a hand-held, pen-based computer. The company reports quarterly loss of $188 million in July. Sculley is replaced as CEO by Apple president Michael Spindler. Apple restructures, and Sculley resigns as chairman. At Next, Jobs decides to focus on software instead of whole computers." }, { date: 1994, description: " Apple introduces Power Macintosh computers based on the PowerPC chip it developed with IBM and Motorola. Apple decides to license its operating software and allow other companies to \"clone\" the Mac, adopting the model championed by Microsoft Corp." }, { date: 1995, description: "The first Mac clones go on sale. Microsoft releases Windows 95, which is easier to use than previous versions and is more like the Mac system. Apple struggles with competition, parts shortages and mistakes predicting customer demand. Pixar's \"Toy Story,\" the first commercial computer-animated feature, hits theaters. Pixar goes to Wall Street with an IPO that raises $140 million." }, { date: 1996, description: " Apple announces plans to buy Next for $430 million for the operating system Jobs' team developed. Jobs is appointed an adviser to Apple. Gil Amelio replaces Spindler as CEO." }, { date: 1997, description: "Jobs becomes \"interim\" CEO after Amelio is pushed out. He foreshadows the marketing hook for a new product line by calling himself \"iCEO.\" Jobs puts an end to Mac clones" }, { date: 1998, description: "Apple returns to profitability. It shakes up personal computer industry in 1998 with the candy-colored, all-in-one iMac desktop, the original models shaped like a futuristic TV. Apple discontinues the Newton." }, { date: 2000, description: "Apple removes \"interim\" label from Jobs' CEO title." }, { date: 2001, description: "The first iPod goes on sale, as do computers with OS X, the modern Mac operating system based on Next software. Apple also releases iTunes software." }, { date: 2003, description: "Apple launches the iTunes Music Store with 200,000 songs at 99 cents each, giving people a convenient way to buy music legally online. It sells 1 million songs in the first week." }, { date: 2004, description: "Jobs undergoes surgery for a rare but curable form of pancreatic cancer. Apple discloses his illness after the fact." }, { date: 2005, description: "Apple expands the iPod line with the tiny Nano and an iPod that can play video. The company also announces that future Macs will use Intel chips." }, { date: 2006, description: "Disney buys Pixar for $7.4 billion. Jobs becomes Disney's largest individual shareholder, and much of his wealth is derived from this sale." }, { date: 2007, description: "Apple releases its first smartphone, the iPhone. Crowds camp overnight at stores to be one of the first to own the new device." }, { date: 2008, description: "Speculation mounts that Jobs is ill, given weight loss. In September he kicks off an Apple event and says, \"The reports of my death are greatly exaggerated,\" making a play off a famous Mark Twain quote after Bloomberg News accidentally publishes, then retracts, an obituary that it had prepared in advance." }, { date: 2009, description: "Jobs explains severe weight loss by saying he has a treatable hormone imbalance and that he will continue to run Apple. Days later he backtracks and announces he will be on medical leave. He returns to work in June. Later it is learned that he received a liver transplant." }, { date: 2010, description: "Apple sells 15 million of its newest gadget, the iPad, in nine months, giving rise to a new category of modern touch-screen tablet computers." }, { date: "Jan. 17, 2011", description: "In a memo to Apple employees, Jobs announces a second medical leave with no set duration. Cook again steps in to run day-to-day operations. Jobs retains CEO title and remains involved in major decisions." }, { date: "Aug. 24, 2011", description: " Apple announces that Jobs is resigning as CEO. Cook takes the CEO title, and Apple names Jobs chairman." }, { date: "Oct. 5, 2011", description: "Jobs dies at 56. Apple announces his death without giving a specific cause." }];
})();
Tribute Page v1 - Script Codes
Tribute Page v1 - Script Codes
Home Page Home
Developer Christian
Username chpecson
Uploaded October 15, 2022
Rating 3
Size 5,740 Kb
Views 24,288
Do you need developer help for Tribute Page v1?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Christian (chpecson) Script Codes
Name
Day 6 - Author
Day 5 - Restaurant menu
Wikipedia viewer
Tribute Page V2
Day 7 -Movie Trailer
Day 2 - Invitation
Day 17 - Fashion website
Day 15 - Motivational speaker
Day 12 - Club
Day 4 - Product site
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!