CodeCamp Tribute Page
How do I make an codecamp tribute page?
Codecamp tribute page assignment.. What is a codecamp tribute page? How do you make a codecamp tribute page? This script and codes were developed by Jonathan De Jesús on 24 November 2022, Thursday.
CodeCamp Tribute Page - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CodeCamp Tribute Page</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html lang="en" ng-app="app">
<head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- Angular Material style sheet --> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en">
</head>
<body ng-controller="mainCtrl as mainVm" ng-cloak> <!-- Your HTML content here --> <div class="hero"> <div class="hero-wrapper" layout="row" layout-align="center center"> <div layout="column"> <h1 class="md-display-3">Bill Gates</h1> </div> </div> </div> <div class="section slanted"> <div class="section-wrapper" layout="row" layout-align="center center"> <div layout="column"> <div class="quote-block md-headline"> <md-icon class="rotate-180">format_quote</md-icon> I believe that if you show people the problems and you show them the solutions they will be moved to act.<md-icon>format_quote</md-icon> </div> </div> </div> <div class="section-wrapper no-padding-top" layout="row" layout-align="center center"> <div class="history"> <h2 class="md-title">TIMELINE<div class="border-shadow"></div></h2> <md-grid-list class="history-grid" md-cols-gt-md="8" md-cols-md="8" md-cols-sm="6" md-cols-xs="4" md-cols="4" md-row-height="1:1" md-gutter="8px"> <md-grid-tile ng-repeat="tile in mainVm.historyTiles track by $index" md-colspan="2" md-rowspan="2" ng-style="{'background-image': 'url('+tile.image+')'}"> <div class="tile-contents" layout="column" layout-align="center center"> <h2>{{tile.year}}</h2> <div class="md-body-2 tile-cover" layout="column" layout-align="center center"> <h2>{{tile.year}}</h2> <div>{{tile.title}}</div> </div> </div> </md-grid-tile> </md-grid-list> </div> </div> </div> <div class="section image-window"> </div> <div class="section footer"> <div class="section-wrapper" layout="row" layout-align="start center"> <div layout="column"> <div layout="row" layout-align="start center"> <img class="profile-image" src="https://pbs.twimg.com/profile_images/558109954561679360/j1f9DiJi.jpeg"> <div class="md-headline">Want to know more about Bill Gates? Feel free to check out <a href="https://www.gatesnotes.com/Bio" target="_blank">www.gatesnotes.com</a> </div> </div> </div> </div> <div class="author md-body-2" layout-align="center center"> Made with <md-icon>favorite</md-icon> by Young Park </div> </div> <!-- Angular Material requires Angular.js Libraries --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script> <!-- Angular Material Library --> <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
</body>
</html> <script src="js/index.js"></script>
</body>
</html>
CodeCamp Tribute Page - Script Codes CSS Codes
html,
body { font-family: Robotodraft;
}
/**mixins, variables, etc**/
.hero .hero-wrapper { text-align: center;
}
.no-padding-top { padding-top: 0 !important;
}
.hero { background-image: url("https://cdn0.vox-cdn.com/thumbor/MfuMLQzMvx6Yvp9I5FC7473WRrk=/0x0:1100x619/1600x900/cdn0.vox-cdn.com/assets/2657689/billgates.jpeg"); background-size: cover; background-repeat: no-repeat; background-position: 50% 50%;
}
.hero .hero-wrapper { padding: 16% 5%; background-color: rgba(0, 0, 0, 0.38);
}
.hero .hero-wrapper h1 { font-weight: 300; color: white; letter-spacing: .25em; text-transform: uppercase; border: 2px solid #fff; padding: 16px; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.12); position: relative; z-index: 1;
}
.hero .hero-wrapper h1:before, .hero .hero-wrapper h1:after { content: ""; position: absolute; left: 0px; width: 100%; height: 100%; z-index: -1; border-color: rgba(0, 0, 0, 0.12); border-style: solid; border-right: none; border-left: none;
}
.hero .hero-wrapper h1:before { border-bottom-width: 2px; top: 2px;
}
.hero .hero-wrapper h1:after { border-top-width: 2px; top: 0px;
}
h2.md-title { text-shadow: 0 2px 0 rgba(0, 0, 0, 0.12); border-bottom: 2px solid rgba(0, 0, 0, 0.87); border-top: 2px solid rgba(0, 0, 0, 0.87); padding: 8px 0;
}
.section { position: relative; z-index: 1;
}
.section.slanted:before, .section.slanted:after { content: ""; position: absolute; background-color: #fff; width: 100%; height: 100%; -webkit-transform-origin: 0%; transform-origin: 0%; left: 0; top: 0; z-index: -1;
}
.section.slanted:before { -webkit-transform: skewY(-5deg); transform: skewY(-5deg);
}
.section.slanted:after { -webkit-transform: skewY(5deg); transform: skewY(5deg);
}
.section .section-wrapper { padding: 5.625rem 1.25rem; max-width: 61.25rem; margin: 0 auto;
}
.section .section-wrapper .history { width: 100%; text-align: center; position: relative;
}
.section .section-wrapper .history h2 { display: inline-block;
}
.section .section-wrapper .history .history-grid { margin: 24px 0;
}
.section .section-wrapper .history .history-grid md-grid-tile { background-size: cover; background-repeat: no-repeat; background-position: 50% 50%;
}
.section .section-wrapper .history .history-grid md-grid-tile figure .tile-contents { text-shadow: 0 2px 0 rgba(0, 0, 0, 0.12); width: 100%; height: 100%; padding: 8px; background-color: rgba(0, 0, 0, 0.38); color: #fff; position: relative;
}
.section .section-wrapper .history .history-grid md-grid-tile figure .tile-contents h2 { font-weight: 400; border: 2px solid #fff; padding: 4px 8px; -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.section .section-wrapper .history .history-grid md-grid-tile figure .tile-contents .tile-cover { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.54); padding: 16px; -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); opacity: 0; visibility: hidden;
}
.section .section-wrapper .history .history-grid md-grid-tile figure .tile-contents .hide-text { -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); -webkit-transform: translateY(150%); transform: translateY(150%); overflow: hidden;
}
.section .section-wrapper .history .history-grid md-grid-tile figure:hover .tile-contents > h2 { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px);
}
.section .section-wrapper .history .history-grid md-grid-tile figure:hover .tile-cover { opacity: 1; visibility: visible;
}
.section .section-wrapper .history .history-grid md-grid-tile figure:hover .hide-text { max-height: 100px;
}
.section.image-window { z-index: 0; background-image: url("https://qzprod.files.wordpress.com/2014/12/bills-best-books-2014-1.jpg?quality=80&strip=all&w=1600"); background-size: cover; background-repeat: no-repeat; background-position: top; padding-top: 10%; min-height: 550px;
}
.section.footer { background-color: #424242; z-index: 0; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
}
.section.footer:before { content: ""; position: absolute; background-color: #424242; width: 100%; height: 100%; -webkit-transform-origin: 100%; transform-origin: 100%; left: 0; top: 0; z-index: -1;
}
.section.footer:before { -webkit-transform: skewY(5deg); transform: skewY(5deg);
}
.section.footer img { margin-right: 24px;
}
.section.footer a { color: #42A5F5;
}
.section.footer div.md-title { margin-right: 12%;
}
.section.footer .author { text-align: center; padding: 16px; border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.section.footer .author md-icon { font-size: 16px; width: 16px; height: 16px; min-height: 0; margin: -4px 0; color: #E91E63;
}
.quote-block { text-align: center; padding: 2.5em; line-height: 40px !important; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
}
.quote-block md-icon { font-size: 48px; width: 48px; height: 48px; margin: -10px 0;
}
a { text-decoration: none;
}
.rotate-180 { -webkit-transform: rotate3d(0, 0, 1, 180deg); transform: rotate3d(0, 0, 1, 180deg); text-shadow: 0 -2px 0 rgba(0, 0, 0, 0.12);
}
.profile-image { width: 120px; height: 120px; border: 2px solid #fff; border-radius: 50%; padding: 10px;
}
CodeCamp Tribute Page - Script Codes JS Codes
angular.module('app', ['ngMaterial']);
angular.module('app').controller("mainCtrl", mainCtrl);
function mainCtrl(){ var vm = this; vm.historyTiles = [ { year: 1955, title: "A legend is born.", image: "https://d3v93rzqvnwm3k.cloudfront.net/photos/images/c4f43cf93452db224a18cb51d027f22c_three_column.jpg" }, { year: 1967, title: "Attends Lakeside School.", image: "https://d3v93rzqvnwm3k.cloudfront.net/photos/images/f697fcc06aec128ad08a41bc0fedf325_three_column.jpg" }, { year: 1973, title: "Enrolls at Harvard University.", image: "https://harvardgazette.files.wordpress.com/2013/09/090913_gates_archives_019_605.jpg" }, { year: 1975, title: "Micro-Soft is formed, a partnership between Bill Gates and Paul Allen.", image:"https://d3v93rzqvnwm3k.cloudfront.net/photos/images/4a8aa7ff781018b94613c59a6def695c_three_column.jpg" }, // { // year: 1976, // title: "Writes \"Open Letter to Hobbyists\"." // }, { year: 1978, title: "Opens first international office in Japan.", image: "https://d3v93rzqvnwm3k.cloudfront.net/photos/images/1ad4b83971a6cc72d507d50740a87771_three_column.jpg" }, { year: 1979, title: "Relocates headquarters to Bellevue, Washington.", image:"https://media.licdn.com/mpr/mpr/shrinknp_800_800/AAEAAQAAAAAAAAKdAAAAJDNjNzZjYmU5LTgwMjAtNDFjZi1hZDU3LTNjYzk5ZTRmNmJiYQ.jpg" }, { year: 1980, title: "Microsoft partners with IBM to write BASIC for the IBM PC.", image: "http://www.computerhistory.org/atchm/wp-content/uploads/2013/12/IMG_19771.jpg" }, { year: 1981, title: "Microsoft becomes incorporated and Bill Gates becomes President.", image: "http://b-i.forbesimg.com/clareoconnor/files/2013/04/bill-gates-paul-allen-1981.jpg" }, { year: 1983, title: "Microsoft announces Windows as an extension of its MS-DOS operating system.", image: "https://expert4data.files.wordpress.com/2014/01/pc.jpg" }, // { // year: 1989, // title: "Bill Gates founds Corbis, an archive of art and photography." // }, { year: 1994, title: "Bill Gates marries Melida French.", image: "https://d3v93rzqvnwm3k.cloudfront.net/photos/images/787f438c34d55648e89a62e27cfd7220_three_column.jpg" }, { year: 2000, title: "Gates steps down as CEO of Microsoft and Steve Ballmer takes over the helm.", image: "https://3.bp.blogspot.com/-0xhmNGVGY2Q/Uh0R-eVLnsI/AAAAAAAAAbs/IqAeNiM58KM/s640/2.JPG" }, { year: 2007, title: "Graduates from Harvard after leaving his junior year to develop Microsoft in 1973.", image: "http://www.jeremyperson.com/wp-content/uploads/2009/07/bill-gates-commencement.jpg" }, ];
}
mainCtrl.$inject = [];

Developer | Jonathan De Jesús |
Username | JonathanDeJesus |
Uploaded | November 24, 2022 |
Rating | 3 |
Size | 6,860 Kb |
Views | 18,207 |
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!
Name | Size |
Color | 1,931 Kb |
Moises | 1,476 Kb |
Blog design idea | 2,787 Kb |
My first pen | 1,705 Kb |
Case Studies | 7,824 Kb |
Css reference | 2,022 Kb |
Personal site | 3,915 Kb |
Enveer | 1,372 Kb |
JS | 2,028 Kb |
Daily UI Sign Up | 1,384 Kb |
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!
Name | Username | Size |
Mapbox Directions with geolocation tracking | Pollardld | 5,827 Kb |
Direction-icon | Alexandremasy | 3,323 Kb |
Default Input, Textareas, Submits, and Buttons in iOS | Demersdesigns | 2,334 Kb |
CSS Dynamic Width Square Div | Elleestcrimi | 2,861 Kb |
Flat UI - Checkbox FIX | ARS | 2,663 Kb |
Responsive Pricing Table | Jeremycaris | 2,690 Kb |
Emberjs Bootstrap Modal Carousel | Somethingkindawierd | 4,233 Kb |
A Pen by Stan Williams | Stanssongs | 6,706 Kb |
Svg penguin | _massimo | 2,990 Kb |
Responsive Section hover effect to show content | Berdejitendra | 2,540 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!