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 |
My first pen | 1,705 Kb |
Color | 1,931 Kb |
Moises | 1,476 Kb |
Css reference | 2,022 Kb |
Personal site | 3,915 Kb |
Responsive modal window | 9,264 Kb |
JS | 2,028 Kb |
Daily UI Sign Up | 1,384 Kb |
Blog design idea | 2,787 Kb |
Enveer | 1,372 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 |
CSS 3D Radio buttons | Andreasnylin | 1,650 Kb |
Coming Soon | MariamMassadeh | 1,680 Kb |
React Recipe Box | Krokodill | 5,347 Kb |
Sidebar Thing | Jonambas | 2,779 Kb |
FontAwesome icons with animation | Nicotinell | 2,083 Kb |
BSP Dungeon Generation | Xgundam05 | 5,326 Kb |
Scroll Arrow | Robooneus | 4,437 Kb |
Simple Responsive Text | Fbrz | 2,282 Kb |
Text Looping Transition | Agelber | 5,619 Kb |
A Pen by Moeid Saleem | Moeidsaleem | 1,862 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!