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 28 January 2022, Friday.

How do I make an codecamp tribute page?
  1. CodeCamp Tribute Page Previews
  2. CodeCamp Tribute Page HTML Codes
  3. CodeCamp Tribute Page CSS Codes
  4. CodeCamp Tribute Page JS Codes
CodeCamp Tribute Page Previews

CodeCamp Tribute Page 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 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 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 = [];
Do you want hide your ip address?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.