CodeCamp Tribute Page

Developer
Jonathan De Jesús
Size
6,860 Kb
Views
18,207

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 Previews
IQ Test

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 = [];
CodeCamp Tribute Page - Script Codes
CodeCamp Tribute Page - Script Codes
Home Page Home
Developer Jonathan De Jesús
Username JonathanDeJesus
Uploaded November 24, 2022
Rating 3
Size 6,860 Kb
Views 18,207
Do you need developer help for CodeCamp Tribute Page?

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!

Jonathan De Jesús (JonathanDeJesus) Script Codes
Name
My first pen
Color
Moises
Css reference
Personal site
Responsive modal window
JS
Daily UI Sign Up
Blog design idea
Enveer
Create amazing web content 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!