A Pen by J. James Rockhill

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>A Pen by  J. James Rockhill</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css'>

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

  
</head>

<body>

  <div id="chatbar">
  <ul id="menu">
    <a class="menu-link wind-link toollink" href="#toolmenu">
      <li class="menubutton"><i class="fa fa-bars"></i></li> 
    </a>
    <a class="notif-link wind-link toollink" href="#notifmenu">
      <li class="menubutton"><i class="fa fa-bell"></i></li> 
    </a>
    <a class="chat-link wind-link toollink" href="#chatmenu">
      <li class="menubutton"><i class="fa fa-comments"></i></li> 
    </a>
    <a class="user-link wind-link toollink" href="#friendmenu">
      <li class="menubutton"><i class="fa fa-users"></i></li> 
    </a>
    <a id="exit" class="toollink">
      <li class="menubutton"><i class="fa fa-ban"></i></li> 
    </a>
  </ul>
</div>

<div id="main">
  <iframe class="framecon" src="http://www.wikipedia.org">
  </iframe>
</div>

<div id="toolmenu">
  <div class="formwrap" style="width: 80%; margin: 10px auto;">
  <div class="profilephoto"></div>
  <p class="profiletitle">Felicia H.</p>
  <p class="profilesub">New York, NY</p>
  <p class="profilelog">Not you? Sign in:</p>
  <input id="loginname" style="border-top-left-radius:5px; border-top-right-radius:5px;" class="formfield1" placeholder="username"></input>
  <input id="loginpassword" style="border-bottom-left-radius:5px; border-bottom-right-radius:5px; border-top: solid 1px #B5AB9F;" class="formfield1" placeholder="password"></input>
  <button class="loginbut">Login</button>
  <hr class="line"/>
    <button id="sbutton" class="soundbutton"><p class="onoff">Sound is </p></button>
  </div> 
</div>
<div id="chatmenu">
</div>  
<div id="friendmenu">
</div>  
<div id="notifmenu">
  <div class="textlist">
    <div class="textwhite">
      <div class="textphoto"></div>
      <div class="textentry"><strong class="greentext">This Dude</strong> commented on <strong class="greentext">World's 2nd-richest man suggests 3-day work week</strong> you were chatting about.</div>
    </div>
     <div class="textgreen">
      <div class="textphoto"></div>
      <div class="textentry"><strong class="greentext">This Dude</strong> commented on <strong class="greentext">World's 2nd-richest man suggests 3-day work week</strong> you were chatting about.</div>
    </div>
		<div class="textwhite">
      <div class="textphoto"></div>
      <div class="textentry"><strong class="greentext">This Dude</strong> commented on <strong class="greentext">World's 2nd-richest man suggests 3-day work week</strong> you were chatting about.</div>
    </div>
     <div class="textgreen">
      <div class="textphoto"></div>
      <div class="textentry"><strong class="greentext">This Dude</strong> commented on <strong class="greentext">World's 2nd-richest man suggests 3-day work week</strong> you were chatting about.</div>
    </div>
    <div class="textwhite">
      <div class="textphoto"></div>
      <div class="textentry"><strong class="greentext">This Dude</strong> commented on <strong class="greentext">World's 2nd-richest man suggests 3-day work week</strong> you were chatting about.</div>
    </div>
     <div class="textgreen">
      <div class="textphoto"></div>
      <div class="textentry"><strong class="greentext">This Dude</strong> commented on <strong class="greentext">World's 2nd-richest man suggests 3-day work week</strong> you were chatting about.</div>
    </div>
    <div class="textwhite">
      <div class="textphoto"></div>
      <div class="textentry"><strong class="greentext">This Dude</strong> commented on <strong class="greentext">World's 2nd-richest man suggests 3-day work week</strong> you were chatting about.</div>
    </div>
     <div class="textgreen">
      <div class="textphoto"></div>
      <div class="textentry"><strong class="greentext">This Dude</strong> commented on <strong class="greentext">World's 2nd-richest man suggests 3-day work week</strong> you were chatting about.</div>
    </div>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdn.rawgit.com/inuyaksa/jquery.nicescroll/master/jquery.nicescroll.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/rockhill/a-pen-by-j-james-rockhill-czkvl */
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,300,100);

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  transition: all 0.5s ease;
}

html, body {
	background: url('https://i.imgur.com/inQf7DG.png');
  height: 100%;
  width: 100%;
  overflow: hidden;
  font: 300 100% Lato;
}

#main{
  width: 1306px;
  height: 100%;
  position: absolute;
  -webkit-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
  transition: all 0.5s ease;
}

#main.active{
  -webkit-transform: translate(-300px, 0px);
  transform: translate(-300px, 0px);
  transition: all 0.5s ease;
}

.framecon{
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  box-sizing: border-box;
}

#chatbar{
  background-color: #332E2D;
  width: 60px;
  height: 100%;
  top: 0;
  bottom: 0;
  right: 0;
  position: fixed;
  z-index: 6;
  transition: all 0.5s ease;
}

#chatbar.active{
	box-shadow: -3px 0 8px rgba(0,0,0,0.4);
  transition: all 0.5s ease;
}

#menu{
  list-style: none;
  width: 100%;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.5s ease;
}

.toollink{
  width: 100%;
  text-align: center;
  transition: all 0.5s ease;
}

.menubutton{
  color: #F0E3D3;
  padding: 15px 0;
  width: 100%;
  transition: all 0.5s ease;
}

.menubutton:hover{
  background-color: #FF9C24;
  transition: all 0.5s ease;
}

.menubutton:link{
  color: #F0E3D3;
}

.menubutton:visited{
  color: #F0E3D3;
}

#toolmenu{
  width: 300px;
  height: 100%;
  position: fixed;
  padding: 15px;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #332E2D;
  -webkit-transform: translate(300px, 0px);
  transform: translate(300px, 0px);
  z-index: 5;
  transition: all 0.5s ease;
}

#toolmenu.active{
  -webkit-transform: translate(-60px, 0px);
  transform: translate(-60px, 0px);
  transition: all 0.5s ease;
}

.profilephoto{
  width: 150px;
  height: 150px;
  background: url("https://pbs.twimg.com/profile_images/718588760003383296/2AG8omMO_400x400.jpg") no-repeat center;
  background-size: cover;
  margin: 0 auto 30px auto;
  border-radius: 100%;
  box-shadow: 0px 3px 8px rgba(0,0,0,0.4);
}

.profiletitle{
  color: #F0E3D3;
  font-size: 21px;
  font-weight: 700;
  text-align: center;
}

.profilesub{
  color: #F0E3D3;
  font-size: 16px;
  font-weight: 300;
  text-align: center;
  margin-bottom: 30px;
}

.profilelog{
  color: #F0E3D3;
  font-size: 11px;
  font-weight: 300;
  text-align: left;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.formfield1{
	background-color: #F0E3D3;
  color: #332E2D;
  width: 100%;
  padding: 10px;
  border: none;
  box-sizing: border-box;
  text-transform: uppercase;
  font: 300 12px Lato;
}

.loginbut{
  background-color: #506654;
  text-shadow: -1px -1px 1px rgba(255,255,255,0.2);
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  box-shadow: 0px 3px 8px rgba(0,0,0,0.2);
  box-shadow: inset 0px -8px 8px rgba(0,0,0,0.1);
  border-top: solid 1px rgba(255,255,255,0.1);
  border-left: none;
  border-right: none;
  border-bottom: none;
  width: 100%;
  border-radius: 5px;
  padding: 10px;
  margin-top: 20px;
  color: #F0E3D3;
  text-transform: uppercase;
  font: 700 14px Lato;
  cursor: pointer;
}

.loginbut:hover{
  background-color: #FF9C24;
  box-shadow: 0 0 8px rgba(0,0,0,0.4);
}

.soundbutton{
  background-color: #506654;
  text-shadow: -1px -1px 1px rgba(255,255,255,0.2);
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  box-shadow: 0px 3px 8px rgba(0,0,0,0.2);
  box-shadow: inset 0px -8px 8px rgba(0,0,0,0.1);
  border-top: solid 1px rgba(255,255,255,0.1);
  border-left: none;
  border-right: none;
  border-bottom: none;
  width: 100%;
  border-radius: 5px;
  padding: 10px;
  color: #F0E3D3;
  text-transform: uppercase;
  font: 700 12px Lato;
  transition: all 0.5s ease;
  cursor: pointer;
}

.soundbutton:hover{
  background-color: #FF9C24;
  transition: all 0.5s ease;
}

.soundbutton.active{
  background-color: #FF9C24;
  transition: all 0.5s ease;
}

.soundbutton.active:hover{
  background-color: #506654;
  transition: all 0.5s ease;
}

.onoff:after{
  content:"On";
}

.onoff.active:after{
  content:"Off";
}

.line{
  width: 80%;
  margin: 30px auto;
  border-top: solid 1px #423C3A;
  border-bottom: solid 1px #1F1C1B;
  border-right: none;
  border-left: none;
  height: 0px;
  background: none;
}

#chatmenu{
  width: 300px;
  height: 100%;
  position: fixed;
  padding: 15px;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #332E2D;
  -webkit-transform: translate(300px, 0px);
  transform: translate(300px, 0px);
  z-index: 5;
  transition: all 0.5s ease;
}

#chatmenu.active{
  -webkit-transform: translate(-60px, 0px);
  transform: translate(-60px, 0px);
  transition: all 0.5s ease;
}

#friendmenu{
  width: 300px;
  height: 100%;
  position: fixed;
  padding: 15px;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #332E2D;
  -webkit-transform: translate(300px, 0px);
  transform: translate(300px, 0px);
  z-index: 5;
  transition: all 0.5s ease;
}

#friendmenu.active{
  -webkit-transform: translate(-60px, 0px);
  transform: translate(-60px, 0px);
  transition: all 0.5s ease;
}

#notifmenu{
  width: 300px;
  height: 100%;
  position: fixed;
  padding: 30px;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #332E2D;
  -webkit-transform: translate(300px, 0px);
  transform: translate(300px, 0px);
  z-index: 5;
  transition: all 0.5s ease;
}

#notifmenu.active{
  -webkit-transform: translate(-60px, 0px);
  transform: translate(-60px, 0px);
  transition: all 0.5s ease;
}

.textlist{
  width: 100%;
  height: 450px;
  border-radius: 5px;
  display: inline-block;
  background-color: #F0E3D3;
  box-shadow: inset 0px 0px 8px rgba(0,0,0,0.3);
  overflow-y: hidden;
}

.textwhite{
  width: 100%;
  padding: 15px;
  display: flex;
  border-bottom: dotted 1px rgba(0,0,0,0.3);
  flex: none;
}

.textgreen{
  width: 100%;
  background-color: rgba(80,102,8,0.1);
  padding: 15px;
  display: flex;
  border-bottom: dotted 1px rgba(0,0,0,0.3);
  flex: none;
}

.textphoto{
  display: flex;
  width: 30px;
  height: 30px;
  background: url('https://pbs.twimg.com/profile_images/2877768723/e32f9a8a76b9a41f89dce20832bf9b43_400x400.png') no-repeat center;
  background-size: cover;
  border-radius: 100%;
  box-shadow: 0px 2px 2px rgba(0,0,0,0.3);
  margin: 0px 15px 0px 0px;
}

.textentry{
  flex: 2;
  font-size: 12px;
  padding-right: 5px;
}

.greentext{
  color: #506654;
  cursor: pointer;
  font-weight: 700;
}

#exit{
  display:none;
}

#exit.active{
  display:inherit;
  transition: all 0.5s ease;
}



/*Downloaded from https://www.codeseek.co/rockhill/a-pen-by-j-james-rockhill-czkvl */
$(".menu-link").click(function () {
          if ($("#notifmenu, #chatmenu, #friendmenu").hasClass("active")) {
             $("#notifmenu, #chatmenu, #friendmenu").removeClass("active");
          }
          
            $(" #main, #chatbar,#toolmenu,#exit ").addClass("active");
        });

$(".notif-link").click(function () {
          if ($("#toolmenu, #chatmenu, #friendmenu").hasClass("active")) {
             $("#toolmenu, #notifmenu, #chatmenu, #friendmenu").removeClass("active");
          }
          
            $(" #main, #chatbar, #notifmenu, #exit ").addClass("active");
        });

$(".chat-link").click(function () {
          if ($("#friendmenu, #toolmenu, #notifmenu").hasClass("active")) {
             $("#notifmenu, #toolmenu, #friendmenu").removeClass("active");
          }
          
            $("#main, #chatmenu, #chatbar, #exit ").addClass("active");
        });

$(".user-link").click(function () {
          if ($("#chatmenu, #toolmenu, #notifmenu").hasClass("active")) {
             $("#notifmenu, #toolmenu, #chatmenu").removeClass("active");
          }
          
            $("#main, #friendmenu, #chatbar, #exit ").addClass("active");
        });

$("#exit").click(function () {          
            $("#main, #chatbar, #exit, #friendmenu, #chatmenu, #notifmenu, #toolmenu").removeClass("active")
});

$("#sbutton").click(function () {
  $(".soundbutton, .onoff").toggleClass("active")
});

$('.textlist')
.niceScroll({});

Comments