A Pen by imran

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>A Pen by  imran</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html>
<head>
<link rel="stylesheet" type="text/css" href="./css/home.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r66/three.js"></script>
<script src="//js.leapmotion.com/leap-0.6.4.min.js"></script>
<script src="//js.leapmotion.com/leap-plugins-0.1.6.1.js"></script>
<script src="//js.leapmotion.com/leap.rigged-hand-0.1.3.min.js"></script>
    <nav>
      <ul>
        <img class="logo2" src="https://i.imgur.com/Ra5sVdL.png" />
        <li><a href="index.html" data-hover="Home">Home</a></li>
        <li><a href="values.html" data-hover="Values">Values</a></li>
        <li><a href="test.html" data-hover="Test">Test</a></li>
        <li><a href="control.html" data-hover="Control">Control</a></li>
        <li><a href="info.html" data-hover="Info">Info</a></li>
      </ul>

      <div class="checkbox_div">
         <div class="switch">
    	    <input type="checkbox" name="toggle">
    	   <label for="toggle"><i></i></label>
    	   <span></span>
      </div>

    </nav>
</head>
<body>
<div id="labels"></div>
 <section id="cover" class="cover">
    <h1>
<img src="https://i.imgur.com/LO1hxCP.png"></img>
    </h1>
    <p>Scroll</p>
 </section>

 <div id="box" class="content">
  <div>
      <h2>Info Page</h2>
  </div>
 </div>

 <div id="box" class="content">
  <div>
      <h2>About Air Leap</h2>
      <img src="http://www.techforanyone.com/wp-content/uploads/2013/12/leap-motion-controller.png" />
    <p>This project is designed to support navigation functionality aside from mouse and keyboard via motion sense and voice recognition. Functionality will include gestures and movement patterns programmed to be recognized as events that would otherwise be achieved with mouse and keyboard. Implementation will include an initial alpha release of the website with all intended functions available to be tested.
      
      <br><br><br>
    Hardware and Software Requirements: <br><br>
       The processor must be AMD Phenom™ II or Intel® Core™ i3/i5/i7 with 2 GB of RAM or more, USB 2.0 port, and an internet connection. The reason the operating system is needed is that the device is not fully compatible with Linux-based or other operating systems. The processor must be powerful enough to allow the website and devices to run properly. At least 2GB RAM is required because the website and Leap Motion device need at least that much memory to run smoothly. The USB 2.0 port is necessary to connect the leap motion device to the computer. The website will be tested off of a student’s laptop. <br><br>
        The only software required for this project will be the leap motion API and use of Google Chrome to use the website we have designed. The operating system must be Windows® 7/8 or Mac® OS X 10. An internet connection will also be required to connect to the website and use its full functionality. The website and code is custom developed, however the leap motion API is what allows us to use the Leap Motion device.<br><br><br>
      Contact: 
      <br><br>
      Cody Neuman - Quality Assurance Manager
		Title: Lead Developer
		Telephone: 778-555-9999 - ext: 999<br>
Imran Dosanjh - Web Design Manager
		Title: Lead UX Designer
Telephone: 778-555-9999 - ext: 998M<br>
Mahmoud Shehata - Program Manager
		Title: Lead Developer 
Telephone: 778-555-9999 - ext: 997<br><br><br>
      
      Disclaimer: <br><br>
      This system is available for use by anybody. There are no security or privacy concerns with the system. No private data will be taken from the user. We are not responsible for any injuries sustained by using Leap Motion on or outside of our website. We are not affiliated with Leap Motion in any way. The system code is not to be used elsewhere without knowledge or consent from our team. <br>
      
    </p>
  </div>
 </div>


 </div>
</body>
</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/imran2/a-pen-by-imran-yNZZpO */
@import "compass";
$color-active: rgba( 255, 55, 71, 1);
$color-white: rgba( 245, 250, 255, 1);
$color-black: rgba( 5, 15, 30, 1);
$color-main: rgba( 56, 38, 51, 1);
$sans: 'Titillium Web',
sans-serif;
body {
  background-color: #323c41;
}

#cursor {
      width: 25px;
      height: 25px;
      position: fixed;
      //margin-left: -50px;
      //margin-top: -50px;
      z-index: 910;
      opacity: 0.9;


      background: black;
      border-radius: 100%;
      background: -webkit-radial-gradient(100px 100px, circle, #5cabff, #000);
      background: -moz-radial-gradient(100px 100px, circle, #5cabff, #000);
      background: radial-gradient(100px 100px, circle, #5cabff, #000);
    }

label {
  position: fixed;
  white-space: nowrap;
  z-index: 5;
}

nav {
  background:#231F20;
  top: 10px;
  position: fixed;
  width: 75%;
  z-index: 5;
  height: 107.531px;
  border-radius: 8px;
  /*box-shadow: 0 3px 5px     rgba(0,0,0,.25);*/
  /* box-shadow: 0px 10px 35px 0px     rgba(0,0,0,.5);*/
  /*box-shadow: 2px 2px 5px rgba(0,0,0,0.4);*/

  text-align: center;
  /* display: inline; */

  -webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,.24),
                      0 1px 2px 0 rgba(0,0,0,.24);
-moz-box-shadow:      0 1px 3px 0 rgba(0,0,0,.24),
                      0 1px 2px 0 rgba(0,0,0,.24);
box-shadow:           0 1px 3px 0 rgba(0,0,0,.24),
                      0 1px 2px 0 rgba(0,0,0,.24);

                        /*box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);*/
}

nav ul li {
  display: inline-block;
  text-transform: uppercase;
  font-size: 1.17em;
  letter-spacing: 0.002rem;
}

nav ul li a {
  display: inline-block;
  padding: 1em;
  color: #00A69C;
  text-decoration: none;
  font-size:1.5vw;
  transition: transform 0.3s ease 0s;
  transform-origin: 50% 0px 0px;
  transform-style: preserve-3d;
}

nav ul li a:hover {
  background: #231F20;
  color: #000000;
  transform: rotateX(90deg) translateY(-22px);
}

nav ul li a::before {
  position: absolute;
  top: 100%;
  left: 0px;
  width: 100%;
  text-align: center;
  line-height: 80px;
  background: none repeat scroll 0% 0% #00A69C;
  color: #000000;
  content: attr(data-hover);
  transition: #6363CE 0.3s ease 0s;
  transform: rotateX(-90deg);
  transform-origin: 50% 0px 0px;
}

.logo2{
  position:fixed;
  left: 5%;
  top:0;
}

.checkbox_div {
  top: 10px;
  background:#231F20;
  position: fixed;
  width: 10%;
  z-index: 5;
  right: 8px;
  padding: 2.33rem;
  border-radius: 8px;
  /*box-shadow: 0 3px 5px     rgba(0,0,0,.25);*/

  -webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,.24),
                      0 1px 2px 0 rgba(0,0,0,.24);
-moz-box-shadow:      0 1px 3px 0 rgba(0,0,0,.24),
                      0 1px 2px 0 rgba(0,0,0,.24);
box-shadow:           0 1px 3px 0 rgba(0,0,0,.24),
                      0 1px 2px 0 rgba(0,0,0,.24);
  /*box-shadow: 2px 2px 5px rgba(0,0,0,0.4);*/

  text-align: center;
  /* display: inline; */
}

.switch input {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  opacity: 0;
  z-index: 100;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.switch {
  width: 80px;
  height: 33px;
  position: relative;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.switch label {
  display: block;
  width: 90%;
  height: 100%;
  position: relative;
  background: #29AAE2;
  border-radius: 30px 30px 30px 30px;
  box-shadow: inset 0 3px 8px 1px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.2);
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

.switch input ~ label i {
  display: block;
  height: 31.2px;
  width: 31.2px;
  position: relative;
  left: 0.5px;
  top: 1px;
  z-index: 5;
  border-radius: inherit;
  background: #00A69C;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 8px rgba(0, 0, 0, 0.3), 0 12px 12px rgba(0, 0, 0, 0.4);
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

.switch label + span {
  content: "";
  width: 15px;
  height: 15px;
  position: relative;
  transform: translate(-90%, -150%);
  line-height: 75%;
  display: inline-block;
  left: 80%;
  border-radius: 11px;
  background: #00A69C;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 10px rgba(185, 231, 253, 0), inset 0 0 8px rgba(0, 0, 0, 0.9), inset 0 -2px 5px rgba(0, 0, 0, 0.3), inset 0 -5px 5px rgba(0, 0, 0, 0.5);
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  z-index: 2;
}
/* Toggle */

.switch input:checked ~ label + span {
  content: "";
  width: 15px;
  height: 15px;
  position: relative;
  transform: translate(-90%, -150%);
  line-height: 75%;
  display: inline-block;
  left: 80%;
  border-radius: 10px;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  z-index: 2;
  background: #00A69C ;
  background: gradient-gradient(#ffffff, #77a1b9);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 10px rgba(100, 231, 253, 1), inset 0 0 8px rgba( 61, 157, 247, 0.8), inset 0 -2px 4px rgba(185, 231, 253, 0.3), inset 0 -3px 8px rgba(185, 231, 253, 0.5);
}

.switch input:checked ~ label i {
  left: auto;
  left: 60%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 7px rgba(0, 0, 0, 0.3), 0 8px 8px rgba(0, 0, 0, 0.3), inset -1px 0 1px #b9f3fe;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.cover {
  height: 100vh;
  box-sizing: border-box;
  background-color: #382633;
  z-index: 6;
}

.cover h1 {
  transform: translate(-50%, -50%);
  padding: 5vw;
  background-color: #382633;
  line-height: 75%;
  color: #ff3747;
  display: inline-block;
  position: relative;
  left: 50.5%;
  top: 50%;
}

.cover p {
  padding: 2vw;
  bottom: 2vw;
  color: #00A69C;
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
}

.cover p:before {
  content: "";
  bottom: 1vw;
  position: absolute;
  left: 50%;
  border-top: 6.5px solid #29AAE2;
  border-left: 6.5px solid transparent;
  border-right: 6.5px solid transparent;
  margin-left: -6.5px;
}

section {
  padding-top: 5vw;
  position: relative;
  display: block;

}

@media screen and (max-width: 300px) {
  section {
    padding-top: 15px;
  }
}
@media screen and (min-width: 1200px) {
  section {
    padding-top: 60px;
  }
}
section:last-of-type {
  padding-bottom: 5vw;
}

@media screen and (max-width: 300px) {
  section:last-of-type {
    padding-bottom: 15px;
  }
}
@media screen and (min-width: 1200px) {
  section:last-of-type {
    padding-bottom: 60px;
  }
}

#box {
  background:#0000FF;
	margin: 30px auto;
	width: 80%;
  height: auto;
	border-radius: 8px;
  box-sizing: border-box;
  z-index: 4;
  -webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,.24),
                      0 1px 2px 0 rgba(0,0,0,.24);
-moz-box-shadow:      0 1px 3px 0 rgba(0,0,0,.24),
                      0 1px 2px 0 rgba(0,0,0,.24);
box-shadow:           0 1px 3px 0 rgba(0,0,0,.24),
                      0 1px 2px 0 rgba(0,0,0,.24);
}

#box:after {
    padding-top: 0%;
    content: '';
    display: block;
}

.content {
  z-index: 1;
  text-align: center;
}
.content div {
  background-color: #00A69C;
  padding-top: 2vw;
  box-sizing: border-box;
  display: inline-block;
  text-align: left;
  max-width: 100%;
  width: 100%;
}

@media screen and (max-width: 300px) {
  .content div {
    padding-top: 2px;
  }
}
@media screen and (min-width: 1200px) {
  .content div {
    padding-top: 2px;
  }
}
.content div h2, .content div img, .content div p, .content div hr {
  margin-bottom: 2vw;
}

@media screen and (max-width: 300px) {
  .content div h2, .content div img, .content div p, .content div hr {
    margin-bottom: 15px;
  }
}
@media screen and (min-width: 1200px) {
  .content div h2, .content div img, .content div p, .content div hr {
    margin-bottom: 60px;
  }
}
.content div img:last-child {
  margin-bottom: 0 !important;
}
.content div h2, .content div p {
  padding-right: 5vw;
  padding-left: 5vw;
}
@media screen and (max-width: 300px) {
  .content div h2, .content div p {
    padding-right: 15px;
  }
}
@media screen and (min-width: 1200px) {
  .content div h2, .content div p {
    padding-right: 60px;
  }
}
@media screen and (max-width: 300px) {
  .content div h2, .content div p {
    padding-left: 15px;
  }
}
@media screen and (min-width: 1200px) {
  .content div h2, .content div p {
    padding-left: 60px;
  }
}
.content div img {
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
  opacity: 0.95;
  width: 100%;
  height: auto;
}
.content div img:hover {
  opacity: 1;
}

h1,
h2,
h3,
p {
  letter-spacing: 0.05em;
  line-height: 100%;
  font-family: "Titillium Web", sans-serif;
  position: relative;
  margin-top: 0.5%;
}

h1,
h3 {
  text-transform: uppercase;
}

h1 {
  font-size: 12vw;
  color: #231F20;
}

h2 {
  font-size: 2vw;
  font-family: "Arial Black", Gadget, sans-serif;
  text-align: center;
  color: #231F20;
}

p {
  font-size: 1.17em;
}



Comments