LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Dan is a simple man.

He loves to roll around on carpets,

claw furniture, and play with yarn.

Adelle is an outgoing creature.

She loves to rave, play Uno,

and sing along with all her favorite

songs.

James is a sophisticated rhino.

He does things the way he thinks

they should be done, which is

usually the right way.

Grace is a quiet field mouse.

She will always keep her ideas

to herself, unless she gets to eat

pizza while sharing her ideas.

Off-Page Menu

CSS
*,
*:before,
*::before,
*:after,
*::after {
  margin: 0;
  padding: 0;
}
html,
body {
  background: #ff5722;
  height: 100vh;
}
.page {
  background: #ff5722;
  height: 100vh;
  z-index: -1;
}
.menu-page {
  filter: blur(100px);
  background: #fff;
  height: 100%;
  width: 200px;
  z-index: 1;
  -webkit-transform: translateX(-200%);
  -moz-transform: translateX(-200%);
  -o-transform: translateX(-200%);
  -ms-transform: translateX(-200%);
  transform: translateX(-200%);
  -webkit-transition: all 0.2s cubic-bezier(0.46, 0.15, 0.09, 0.93);
  -moz-transition: all 0.2s cubic-bezier(0.46, 0.15, 0.09, 0.93);
  -o-transition: all 0.2s cubic-bezier(0.46, 0.15, 0.09, 0.93);
  -ms-transition: all 0.2s cubic-bezier(0.46, 0.15, 0.09, 0.93);
  transition: all 0.2s cubic-bezier(0.46, 0.15, 0.09, 0.93);
  overflow: auto;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.hero {
  color: #fff;
  position: absolute;
  left: 150px;
  right: 0;
  top: -3%;
  font-size: 2em;
  -webkit-transition: all 0.2s cubic-bezier(0.46, 0.15, 0.09, 0.93);
  -moz-transition: all 0.2s cubic-bezier(0.46, 0.15, 0.09, 0.93);
  -o-transition: all 0.2s cubic-bezier(0.46, 0.15, 0.09, 0.93);
  -ms-transition: all 0.2s cubic-bezier(0.46, 0.15, 0.09, 0.93);
  transition: all 0.2s cubic-bezier(0.46, 0.15, 0.09, 0.93);
}
.hero-nav-showing {
  color: #fff;
  position: absolute;
  left: 210px;
  right: 0;
  top: -2.6%;
  font-size: 1em;
}
.menu-icon {
  position: absolute;
  padding: 0 30px 0 30px;
  background: #fff;
  opacity: 0.5;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  z-index: 99;
  -webkit-transition: all 0.2s cubic-bezier(0.46, 0.15, 0.09, 0.93);
  -moz-transition: all 0.2s cubic-bezier(0.46, 0.15, 0.09, 0.93);
  -o-transition: all 0.2s cubic-bezier(0.46, 0.15, 0.09, 0.93);
  -ms-transition: all 0.2s cubic-bezier(0.46, 0.15, 0.09, 0.93);
  transition: all 0.2s cubic-bezier(0.46, 0.15, 0.09, 0.93);
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.menu-icon:hover {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
.top {
  background: #000;
  width: 50px;
  height: 5px;
  margin: 40px 5px 5px 5px;
  -webkit-transition: all 0.5s cubic-bezier(0.46, 0.15, 0.09, 0.93);
  -moz-transition: all 0.5s cubic-bezier(0.46, 0.15, 0.09, 0.93);
  -o-transition: all 0.5s cubic-bezier(0.46, 0.15, 0.09, 0.93);
  -ms-transition: all 0.5s cubic-bezier(0.46, 0.15, 0.09, 0.93);
  transition: all 0.5s cubic-bezier(0.46, 0.15, 0.09, 0.93);
}
.middle {
  background: #000;
  width: 50px;
  height: 5px;
  margin: 5px;
  -webkit-transition: all 0.1s cubic-bezier(0.46, 0.15, 0.09, 0.93);
  -moz-transition: all 0.1s cubic-bezier(0.46, 0.15, 0.09, 0.93);
  -o-transition: all 0.1s cubic-bezier(0.46, 0.15, 0.09, 0.93);
  -ms-transition: all 0.1s cubic-bezier(0.46, 0.15, 0.09, 0.93);
  transition: all 0.1s cubic-bezier(0.46, 0.15, 0.09, 0.93);
}
.bottom {
  background: #000;
  width: 50px;
  height: 5px;
  margin: 5px 5px 40px 5px;
  -webkit-transition: all 0.5s cubic-bezier(0.46, 0.15, 0.09, 0.93);
  -moz-transition: all 0.5s cubic-bezier(0.46, 0.15, 0.09, 0.93);
  -o-transition: all 0.5s cubic-bezier(0.46, 0.15, 0.09, 0.93);
  -ms-transition: all 0.5s cubic-bezier(0.46, 0.15, 0.09, 0.93);
  transition: all 0.5s cubic-bezier(0.46, 0.15, 0.09, 0.93);
}
.icon {
  -webkit-transform: translateY(50px);
  -moz-transform: translateY(50px);
  -o-transform: translateY(50px);
  -ms-transform: translateY(50px);
  transform: translateY(50px);
  padding: 20px;
  text-align: center;
}
.icon p:hover {
  cursor: pointer;
}
.icon:nth-child(2) {
  background: #e6e6e6;
}
.icon:nth-child(4) {
  background: #e6e6e6;
}
.dan-icon {
  border: 5px solid #e6e6e6;
  border-radius: 50%;
}
.dan-icon:hover {
  cursor: pointer;
}
.adelle-icon {
  border: 5px solid #fff;
  border-radius: 50%;
}
.adelle-icon:hover {
  cursor: pointer;
}
.james-icon {
  border: 5px solid #e6e6e6;
  border-radius: 50%;
}
.james-icon:hover {
  cursor: pointer;
}
.grace-icon {
  border: 5px solid #fff;
  border-radius: 50%;
}
.grace-icon:hover {
  cursor: pointer;
}
.dan-info {
  filter: blur(100px);
  position: fixed;
  top: 50%;
  right: 0;
  background: #fff;
  padding: 10px;
  -webkit-transform: translateX(200%);
  -moz-transform: translateX(200%);
  -o-transform: translateX(200%);
  -ms-transform: translateX(200%);
  transform: translateX(200%);
  -webkit-transition: all 0.5s cubic-bezier(0.46, 0.15, 0.09, 0.93);
  -moz-transition: all 0.5s cubic-bezier(0.46, 0.15, 0.09, 0.93);
  -o-transition: all 0.5s cubic-bezier(0.46, 0.15, 0.09, 0.93);
  -ms-transition: all 0.5s cubic-bezier(0.46, 0.15, 0.09, 0.93);
  transition: all 0.5s cubic-bezier(0.46, 0.15, 0.09, 0.93);
}
.adelle-info {
  filter: blur(100px);
  position: fixed;
  top: 50%;
  right: 0;
  background: #fff;
  padding: 10px;
  -webkit-transform: translateX(200%);
  -moz-transform: translateX(200%);
  -o-transform: translateX(200%);
  -ms-transform: translateX(200%);
  transform: translateX(200%);
  -webkit-transition: all 0.5s cubic-bezier(0.46, 0.15, 0.09, 0.93);
  -moz-transition: all 0.5s cubic-bezier(0.46, 0.15, 0.09, 0.93);
  -o-transition: all 0.5s cubic-bezier(0.46, 0.15, 0.09, 0.93);
  -ms-transition: all 0.5s cubic-bezier(0.46, 0.15, 0.09, 0.93);
  transition: all 0.5s cubic-bezier(0.46, 0.15, 0.09, 0.93);
}
.james-info {
  filter: blur(100px);
  position: fixed;
  top: 50%;
  right: 0;
  background: #fff;
  padding: 10px;
  -webkit-transform: translateX(200%);
  -moz-transform: translateX(200%);
  -o-transform: translateX(200%);
  -ms-transform: translateX(200%);
  transform: translateX(200%);
  -webkit-transition: all 0.5s cubic-bezier(0.46, 0.15, 0.09, 0.93);
  -moz-transition: all 0.5s cubic-bezier(0.46, 0.15, 0.09, 0.93);
  -o-transition: all 0.5s cubic-bezier(0.46, 0.15, 0.09, 0.93);
  -ms-transition: all 0.5s cubic-bezier(0.46, 0.15, 0.09, 0.93);
  transition: all 0.5s cubic-bezier(0.46, 0.15, 0.09, 0.93);
}
.grace-info {
  position: fixed;
  top: 50%;
  right: 0;
  background: #fff;
  padding: 10px;
  -webkit-transform: translateX(200%);
  -moz-transform: translateX(200%);
  -o-transform: translateX(200%);
  -ms-transform: translateX(200%);
  transform: translateX(200%);
  -webkit-transition: all 0.5s cubic-bezier(0.46, 0.15, 0.09, 0.93);
  -moz-transition: all 0.5s cubic-bezier(0.46, 0.15, 0.09, 0.93);
  -o-transition: all 0.5s cubic-bezier(0.46, 0.15, 0.09, 0.93);
  -ms-transition: all 0.5s cubic-bezier(0.46, 0.15, 0.09, 0.93);
  transition: all 0.5s cubic-bezier(0.46, 0.15, 0.09, 0.93);
}
.dan-info-showing {
  filter: blur(0);
  -webkit-transform: translateX(0%);
  -moz-transform: translateX(0%);
  -o-transform: translateX(0%);
  -ms-transform: translateX(0%);
  transform: translateX(0%);
}
.adelle-info-showing {
  filter: blur(0);
  -webkit-transform: translateX(0%);
  -moz-transform: translateX(0%);
  -o-transform: translateX(0%);
  -ms-transform: translateX(0%);
  transform: translateX(0%);
}
.james-info-showing {
  filter: blur(0);
  -webkit-transform: translateX(0%);
  -moz-transform: translateX(0%);
  -o-transform: translateX(0%);
  -ms-transform: translateX(0%);
  transform: translateX(0%);
}
.grace-info-showing {
  filter: blur(0);
  -webkit-transform: translateX(0%);
  -moz-transform: translateX(0%);
  -o-transform: translateX(0%);
  -ms-transform: translateX(0%);
  transform: translateX(0%);
}
.menu-page-showing {
  filter: blur(0);
  background: #fff;
  height: 100%;
  width: 200px;
  z-index: 0;
  -webkit-transform: translateX(0%);
  -moz-transform: translateX(0%);
  -o-transform: translateX(0%);
  -ms-transform: translateX(0%);
  transform: translateX(0%);
}
.menu-icon-close {
  position: absolute;
  padding: 10px 15px 0 45px;
  background: #fff;
  opacity: 0.5;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  z-index: 1;
  -webkit-transform: scale(0.5) translate(-60px, -55px);
  -moz-transform: scale(0.5) translate(-60px, -55px);
  -o-transform: scale(0.5) translate(-60px, -55px);
  -ms-transform: scale(0.5) translate(-60px, -55px);
  transform: scale(0.5) translate(-60px, -55px);
  cursor: pointer;
}
.menu-icon-close:hover {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
.top-close {
  background: #000;
  width: 50px;
  height: 5px;
  margin: 40px 5px 5px 5px;
  -webkit-transform: rotate(-45deg) translate(-10px, -11px);
  -moz-transform: rotate(-45deg) translate(-10px, -11px);
  -o-transform: rotate(-45deg) translate(-10px, -11px);
  -ms-transform: rotate(-45deg) translate(-10px, -11px);
  transform: rotate(-45deg) translate(-10px, -11px);
}
.middle-close {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
.bottom-close {
  background: #000;
  width: 50px;
  height: 5px;
  margin: 5px 5px 40px 5px;
  -webkit-transform: rotate(45deg) translate(-25px, -4px);
  -moz-transform: rotate(45deg) translate(-25px, -4px);
  -o-transform: rotate(45deg) translate(-25px, -4px);
  -ms-transform: rotate(45deg) translate(-25px, -4px);
  transform: rotate(45deg) translate(-25px, -4px);
}
::-webkit-scrollbar {
  width: 10px;
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #bfbfbf;
}
::-webkit-scrollbar-track {
  background: #e6e6e6;
}
JS
$(".menu-icon").click(function() {
	$(".menu-page").toggleClass("menu-page-showing");
	$(".menu-icon").toggleClass("menu-icon-close");
	$(".top").toggleClass("top-close");
	$(".middle").toggleClass("middle-close");
	$(".middle-2").toggleClass("middle-2-close");
	$(".bottom").toggleClass("bottom-close");
	$(".hero").toggleClass("hero-nav-showing");
	
	// Hide info after menu close
	$(".dan-info").removeClass("dan-info-showing");
	$(".adelle-info").removeClass("adelle-info-showing");
	$(".james-info").removeClass("james-info-showing");
	$(".grace-info").removeClass("grace-info-showing");
});

$(".dan").click(function() {
	$(".dan-info").toggleClass("dan-info-showing");
	$(".adelle-info").removeClass("adelle-info-showing");
	$(".james-info").removeClass("james-info-showing");
	$(".grace-info").removeClass("grace-info-showing");
});

$(".adelle").click(function() {
	$(".adelle-info").toggleClass("adelle-info-showing");
	$(".dan-info").removeClass("dan-info-showing");
	$(".james-info").removeClass("james-info-showing");
	$(".grace-info").removeClass("grace-info-showing");
});

$(".james").click(function() {
	$(".james-info").toggleClass("james-info-showing");
	$(".dan-info").removeClass("dan-info-showing");
	$(".adelle-info").removeClass("adelle-info-showing");
	$(".grace-info").removeClass("grace-info-showing");
});

$(".grace").click(function() {
	$(".grace-info").toggleClass("grace-info-showing");
	$(".dan-info").removeClass("dan-info-showing");
	$(".adelle-info").removeClass("adelle-info-showing");
	$(".james-info").removeClass("james-info-showing");
});
Host Instantly Drag and Drop Website Builder

 

Term
Mon, 11/27/2017 - 21:58

Related Codes

Pen ID
Pen ID
Pen ID