Project Ubiquity LaunchPad

In this example below you will see how to do a Project Ubiquity LaunchPad with some HTML / CSS and Javascript

A personal webpage for exposition of projects both finished and underway. Basically a start for my own website.

Thumbnail
This awesome code was written by darkphantom7, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright darkphantom7 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Project Ubiquity LaunchPad</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400|Raleway|Titillium+Web|Maven+Pro|Questrial|Exo|News+Cycle|Pontano+Sans|Cantarell|Cinzel' rel='stylesheet' type='text/css'>
<!-- collection of nice fonts.
https://www.google.com/fonts#ChoosePlace:select/Collection:Roboto:100,300,400|Raleway|Titillium+Web|Maven+Pro|Questrial|Exo|News+Cycle|Pontano+Sans|Cantarell|Cinzel
https://www.w3schools.com/bootstrap/bootstrap_navbar.asp

Good Images for sections: 
https://i.imgur.com/oBU6o3R.jpg
https://i.imgur.com/4sBdgZf.jpg
https://i.imgur.com/fRbGhWR.png
https://i.imgur.com/yXTMf7f.jpg
https://i.imgur.com/PmqssGZ.jpg
https://i.imgur.com/hLeD7PV.png
https://i.imgur.com/gXybUta.jpg
https://i.imgur.com/fVn3euP.jpg
https://i.imgur.com/ATezhkj.jpg
https://i.imgur.com/xF2J3pL.jpg
https://i.imgur.com/8LOmxEF.jpg
https://i.imgur.com/dlvHx91.jpg
https://i.imgur.com/Y0pEOhk.jpg
https://i.imgur.com/EZq5rGp.jpg
https://i.imgur.com/l1jHxqq.jpg
https://i.imgur.com/id0JgaO.jpg
https://i.imgur.com/viR1zBm.jpg
https://i.imgur.com/Zl2aeDD.jpg
https://i.imgur.com/iUoPHHv.jpg
https://i.imgur.com/AkTdqG4.jpg
https://i.imgur.com/IQ8Aeup.png
https://i.imgur.com/cDNUadd.png

https://i.imgur.com/P4hiIKi.jpg
https://i.imgur.com/ASfLrMo.jpg
https://i.imgur.com/9SDpIYp.png
-->
<nav id="mainBar" class="nav navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    
    <div class="navbar-header">
      
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      
      <a class="pull-left page-scroll" href="#about"><img src="http://cdn.cloth5.com/wp-content/uploads/2014/02/CLGLogoBlack50.png"</a>
      
      <a class="navbar-brand" href="#about">Project Ubiquity</a>
    </div>
    
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#about">About</a></li>
      <li><a href="#works">Portfolio</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </div>
</nav>
      
<div id="slides">
  <center><h1>Project Ubiquity</h1></center>
  <br>
    <div id="about" class="container-fluid">
      <h2>About</h2>
    </div>
    <div id="works">
      <h2>Portfolio</h2>
    </div>
    <div id="contact">
      <h2>Contact</h2>
    </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/darkphantom7/project-ubiquity-launchpad-reewZx */
/*body{
  background: linear-gradient(270deg, #ff0000, #00ff00, #0000ff);
  background-size: 600% 600%;
  font-family: Raleway;
  color: #d0d0d0;
}

@keyframes colorPulse {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

animation: colorPulse 10s ease infinite;
*/
html{
  background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

html{
  background-image:url(http://unisci24.com/data_images/wlls/1/173721-abstract.jpg)
}

html.scrolled{
  background-image:url(https://i.ytimg.com/vi/ORz-ZfG3x7Y/hqdefault.jpg);
}

h1{
  padding-top: 60px;
}

h2{
  text-align: center;
  padding-bottom: 800px;
}

.img-resize{
  max-height:22%;
  max-width:22%;
}

/*Downloaded from https://www.codeseek.co/darkphantom7/project-ubiquity-launchpad-reewZx */
jQuery(window).scroll(function(){
  var fromTopPx = 200;
  var scrollFromTop = jQuery(window).scrollTop();
  
  if(scrollFromTop > fromTopPx){ jQuery('html').addClass(scrolled);
  }
  else{ jQuery('html').removeClass(scrolled);
  }
});

Comments