LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

google...

take a picture

record a video

hangout with

get directions to

CSS
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700);

* { box-sizing:border-box; }
input { display: none; }

html, body {
  font: 100 100%/1 "Roboto", sans-serif;
  position: relative;
  height: 100%;
  overflow: hidden;
  color: rgba(255,255,255,.85);
}

body, .reality { background: url(https://www.google.com/glass/start/assets/img/bg-video-end-image.jpg) 100%/100%; }

 

.reality, .panel {
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;  
}

.reality { animation: blur 1s 2s both; }

.glass {
  position: relative;
  animation: unblur 1s 2s ease both;
  -webkit-filter: blur(5px);
  float: right;
  margin: 1.5rem;
  width: 24rem;
  height: 15rem;
  background: rgba(50,50,50,.2);
  border-radius: .25rem;
  box-shadow:
    inset 0 0 8rem rgba(50,50,50,.2),
    inset 0 0 5rem rgba(250,245,255,.3);
}
.panel { user-select: none; padding:1.5rem 2rem; overflow: hidden; }

.timeframe {
  transition: opacity .5s;
  z-index: 100;
  text-align: center;
  cursor: pointer;
}
time { font-size: 6rem; line-height: 8rem; }
h2 {
  font-weight: 300;
  font-size: 1.4rem;
  line-height: 2.5rem;
}
.timeframe h2:before,
.timeframe h2:after { 
  content: "\2022"; 
  color: rgba(200,200,200,.8);
  padding: 0 .2rem;
}
input:checked ~ .timeframe { opacity: 0; }

.okglass { opacity: 0; transition: .2s;  }
.okglass h2 {
  transform: translateY(12rem);
  opacity: 0;
  transition: .8s;
}
aside {
  float: left;
  height: 12rem;
  padding-right: .8rem;
}

input:checked ~ .okglass { opacity: 1;  }
input:checked ~ .okglass h2 {
  opacity: 1;
  transform: none;
}

.okglass h2:nth-child(2){ transition-delay: .05s; }
.okglass h2:nth-child(3){ transition-delay: .1s; }
.okglass h2:nth-child(4){ transition-delay: .15s; }
.okglass h2:nth-child(5){ transition-delay: .2s; }
.okglass h2:nth-child(6){ transition-delay: .25s; }

@keyframes unblur { to { -webkit-filter: blur(0); } }
@keyframes blur { to { -webkit-filter: blur(5px); } }

JS
//////./
/////// 
//////   Click on the Google Glass
/////    in the demo to toggle...
//// 
///
//



// Just a little javascript to get your time...

var time = new Date();
var h = time.getHours();
if (h > 12) {
    h -= 12;
} else if (h === 0) {
  h = 12;
}
var m = time.getMinutes();
if (m < 10){ m = "0" + m;  }

$("time").text(h + ":" + m);
Host Instantly Drag and Drop Website Builder

 

Description

http://google.com/glass
Term
Mon, 11/27/2017 - 21:51

Related Codes

Pen ID
Pen ID
Pen ID