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="bodywrap">
  <div id="chatcontainer">
  	<div class="navbar">
      <div class="roomiconcon">
        <div class="roomicon">
        	<div class="livecon">
            <p class="livetext"><span style="color: orange; font-weight: bold;">14</span> LIVE</p>
          </div>
        </div>
      </div>
      	<div class="roomdescon">
          <p class="roomtitle">#ChatBros</p>
          <p class="roomdes">Welcome to ChatBros. Chill and make friends. No nudity allowed, keep this place decent and friendly. Not the place to play with your wang.</p>
          <p class="roomlink">http://www.chatbros.com</p>
            
        </div>
        <div class="buttoncon"><i class="buticon fa fa-microphone"></i>
        </div>
        <div class="buttoncon"><i class="buticon fa fa-video-camera"></i>
        </div>
        <div class="buttoncon"><i class="buticon fa fa-share"></i>
        </div>
        <div class="buttoncon" style="box-shadow: inset 1px 0px 0px rgba(0,0,0,0.1);"><i class="buticon fa fa-cog"></i>
        </div>
    </div>
    <div id="concon">
      <div id="cambox">
        <div class="camcenter">
        <div class="cam"></div>
        <div class="cam"></div>
        <div class="cam"></div>
        <div class="cam"></div>
        <div class="cam"></div>
        <div class="cam"></div>
        <div class="cam"></div>
        <div class="cam"></div>
        <div class="cam"></div>
        <div class="cam"></div>
        <div class="cam"></div>
        <div class="cam"></div>
        <div class="cam"></div>
        <div class="cam"></div>
        <div class="cam"></div>
        <div class="cam"></div>
        </div>
      </div>
      <div id="chatbox">
        <div id="chat">
          <div class="messbox">
          <div class="mess"><strong>Chatbro: </strong>Gelaten die bekkens zee vroeger ons. Indische zes levendig bedraagt afstands ten brazilie</div>
          <div class="time">20:53</div>
          </div>
          <div class="messbox">
          <div class="mess"><strong>Chatbro: </strong>Gelaten die bekkens zee vroeger ons. Indische zes levendig bedraagt afstands ten brazilie</div>
          <div class="time">20:53</div>
          </div>
          <div class="messbox">
          <div class="mess"><strong>Chatbro: </strong>Gelaten die bekkens zee vroeger ons. Indische zes levendig bedraagt afstands ten brazilie</div>
          <div class="time">20:53</div>
          </div>
          <div class="messbox">
          <div class="mess"><strong>Chatbro: </strong>Gelaten die bekkens zee vroeger ons. Indische zes levendig bedraagt afstands ten brazilie</div>
          <div class="time">20:53</div>
          </div>
          <div class="messbox">
          <div class="mess"><strong>Chatbro: </strong>Gelaten die bekkens zee vroeger ons. Indische zes levendig bedraagt afstands ten brazilie</div>
          <div class="time">20:53</div>
          </div>
          <div class="messbox">
          <div class="mess"><strong>Chatbro: </strong>Gelaten die bekkens zee vroeger ons. Indische zes levendig bedraagt afstands ten brazilie</div>
          <div class="time">20:53</div>
          </div>
          <div class="messbox">
          <div class="mess"><strong>Chatbro: </strong>Gelaten die bekkens zee vroeger ons. Indische zes levendig bedraagt afstands ten brazilie</div>
          <div class="time">20:53</div>
          </div>
        </div>
        <input class="chatinput" type="text" cols="40" rows="2"></input>
      </div>
    
      <div id="userbox">
       <div id="userlist">
         
         <div class="namebox">
          <div class="statusicon">
            <i class="fa fa-video-camera"></i>
           </div>
            <div class="blockname">
            <i class="fa fa-ban"></i>
           </div>
           <div class="listname">
             Chatbro12
           </div>
         </div>
         <div class="namebox">
          <div class="statusicon">
            <i class="fa fa-video-camera"></i>
           </div>
            <div class="blockname">
            <i class="fa fa-ban"></i>
           </div>
           <div class="listname">
             Chatbro12
           </div>
         </div>
         <div class="namebox">
          <div class="statusicon">
            <i class="fa fa-video-camera"></i>
           </div>
            <div class="blockname">
            <i class="fa fa-ban"></i>
           </div>
           <div class="listname">
             Chatbro12
           </div>
         </div>
         <div class="namebox">
          <div class="statusicon">
            <i class="fa fa-video-camera"></i>
           </div>
            <div class="blockname">
            <i class="fa fa-ban"></i>
           </div>
           <div class="listname">
             Chatbro12
           </div>
         </div>
         <div class="namebox">
          <div class="statusicon">
            <i class="fa fa-video-camera"></i>
           </div>
            <div class="blockname">
            <i class="fa fa-ban"></i>
           </div>
           <div class="listname">
             Chatbro12
           </div>
         </div>
         <div class="namebox">
          <div class="statusicon">
            <i class="fa fa-video-camera"></i>
           </div>
            <div class="blockname">
            <i class="fa fa-ban"></i>
           </div>
           <div class="listname">
             Chatbro12
           </div>
         </div>
         <div class="namebox">
          <div class="statusicon">
            <i class="fa fa-video-camera"></i>
           </div>
            <div class="blockname">
            <i class="fa fa-ban"></i>
           </div>
           <div class="listname">
             Chatbro12
           </div>
         </div>
         <div class="namebox">
          <div class="statusicon">
            <i class="fa fa-video-camera"></i>
           </div>
            <div class="blockname">
            <i class="fa fa-ban"></i>
           </div>
           <div class="listname">
             Chatbro12
           </div>
         </div>
         <div class="namebox">
          <div class="statusicon">
            <i class="fa fa-video-camera"></i>
           </div>
            <div class="blockname">
            <i class="fa fa-ban"></i>
           </div>
           <div class="listname">
             Chatbro12
           </div>
         </div><div class="namebox">
          <div class="statusicon">
            <i class="fa fa-video-camera"></i>
           </div>
            <div class="blockname">
            <i class="fa fa-ban"></i>
           </div>
           <div class="listname">
             Chatbro12
           </div>
         </div>
         <div class="namebox">
          <div class="statusicon">
            <i class="fa fa-video-camera"></i>
           </div>
            <div class="blockname">
            <i class="fa fa-ban"></i>
           </div>
           <div class="listname">
             Chatbro12
           </div>
         </div>
         <div class="namebox">
          <div class="statusicon">
            <i class="fa fa-video-camera"></i>
           </div>
            <div class="blockname">
            <i class="fa fa-ban"></i>
           </div>
           <div class="listname">
             Chatbro12
           </div>
         </div>
         <div class="namebox">
          <div class="statusicon">
            <i class="fa fa-video-camera"></i>
           </div>
            <div class="blockname">
            <i class="fa fa-ban"></i>
           </div>
           <div class="listname">
             Chatbro12
           </div>
         </div>
         <div class="namebox">
          <div class="statusicon">
            <i class="fa fa-video-camera"></i>
           </div>
            <div class="blockname">
            <i class="fa fa-ban"></i>
           </div>
           <div class="listname">
             Chatbro12
           </div>
         </div>
         <div class="namebox">
          <div class="statusicon">
            <i class="fa fa-video-camera"></i>
           </div>
            <div class="blockname">
            <i class="fa fa-ban"></i>
           </div>
           <div class="listname">
             Chatbro12
           </div>
         </div>
      
        </div>      
      </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-Fcofn */
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700,300italic);

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body{
  width: 100%;
  height: 100%;
  font: 300 100% Open Sans Condensed;
  overflow: hidden;
}

#bodywrap{
  background: url('https://i.imgur.com/K5jwAUg.png');
  width: 100%;
  height: 100%;
  position: relative;
}

#chatcontainer{
  width: 1200px;
  height: 500px;
  background: linear-gradient(135deg, #14110f 1%,#0f1411 50%,#0f1114 100%);
  box-shadow: 0px 0px 100px rgba(0,0,0,0.3);
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  border-radius: 3px;
}

.navbar{
  height: 18%;
  width: 100%;
  box-shadow: 0px 1px 0px rgba(255,255,255,0.1), 	inset 0px 1px 0px rgba(0,0,0,0.1);
  display: block;
}

.roomiconcon{
  width: 8%;
  height: 100%;
  padding: 13px;
  box-shadow: 1px 0px 0px rgba(255,255,255,0.1), 	inset 1px 0px 0px rgba(0,0,0,0.1);
  float: left;
}

.roomicon{
	height: 100%;
  width: 100%;
  background: url('https://pbs.twimg.com/profile_images/571670194645262336/K7O2sGqN_400x400.png') no-repeat center center;
  background-size: cover;
  border-radius: 10px;
  box-shadow: 0px 1px 0px rgba(255,255,255,0.1), 	inset 0px 1px 0px rgba(0,0,0,0.1);
  position: relative;
}

.livecon{
  height: 40%;
  width: 100%;
  padding: 3px;
  position: absolute;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
}

.livetext{
 font-size: 16px;
 text-align: center;
 color: #fff;
}

.roomdescon{
  width: 68%;
  height: 100%;
  padding: 8px 13px;
  box-shadow: 1px 0px 0px rgba(255,255,255,0.1), 	inset 1px 0px 0px rgba(0,0,0,0.1);
  float: left;
}

.roomtitle{
  font-size: 24px;
  color: #fff;
  font-weight: bold;
  margin-bottom: 1px;
}

.roomdes{
  font-size: 13px;
  color: #fff;
}

.roomlink{
  font-size: 12px;
  color: orange;
  text-decoration: underline;
}

.buttoncon{
  width: 6%;
  height: 100%;
  padding: 13px;
  box-shadow: 1px 0px 0px rgba(255,255,255,0.1), 	inset 1px 0px 0px rgba(0,0,0,0.1);
  float: left;
  transition: all ease 0.5s;
  cursor: pointer;
}

.buttoncon:hover{
  background-color: rgba(0,0,0,0.5);
  transition: all ease 0.5s;
}

.buticon{
	position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  font-size: 20px;
  color: white;
  text-shadow: -1px -1px 0px rgba(255,255,255,0.5), 1px 1px 0px rgba(0,0,0,0.9);
}

#concon{
  height: 82%;
  width: 100%;
  box-shadow: 0px 1px 0px rgba(255,255,255,0.1), 	inset 0px 1px 0px rgba(0,0,0,0.1);
  overflow: hidden;
  display: block;
}

#cambox{
  width: 50%;
  height: 100%;
  box-shadow: 1px 0px 0px rgba(255,255,255,0.1), 	inset 1px 0px 0px rgba(0,0,0,0.1);
  float: left;
  position: relative;
  overflow: hidden;
}

.camcenter{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  padding: 26px 39px;
  margin: auto;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);  
}

.cam{
	height: 21.25%;
  width: 22.5%;
  margin: 1.25%;
  background: url('https://pbs.twimg.com/profile_images/844236519548370944/24uPjIUr_400x400.jpg') no-repeat center center;
  background-size: cover;
  z-index: 300;
  float: left;
}

.cam:hover{
	transform: scale(2,2);
  -webkit-transform: scale(2,2);
}

#chatbox{
  width: 35%;
  height: 100%;
  padding: 26px;
  box-shadow: 1px 0px 0px rgba(255,255,255,0.1), 	inset 1px 0px 0px rgba(0,0,0,0.1);
  float: left;
}

#chat{
  width: 100%;
  height: 85%;
  background-color: rgba(0,0,0,0.2);
  overflow-y: scroll;
  box-shadow: 0px 1px 0px rgba(255,255,255,0.1), 	inset 0px 1px 0px rgba(0,0,0,0.1);
}

.chatinput{
  width: 100%;
  height: 12.5%;
  margin-top: 2.5%;
  padding: 0px 10px;
  color: rgba(255,255,255,0.8);
  border: none;
  background-color: rgba(0,0,0,0.2);
  overflow-y: scroll;
  box-shadow: 0px 1px 0px rgba(255,255,255,0.1), 	inset 0px 1px 0px rgba(0,0,0,0.1);
  font-size: 12px;
}

.messbox{
  box-shadow: 0px 1px 0px rgba(255,255,255,0.1), 	inset 0px 1px 0px rgba(0,0,0,0.1);
  width: 100%;
  display: inline-block;
  padding: 13px;
}

.mess{
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.2px;
  color: rgba(255,255,255,0.8);
  width: 90%;
  float: left;
}

.time{
  font-size: 8px;
  color: grey;
  float: right;
  margin-right: 10px;
}


#userbox{
  width: 15%;
  height: 100%;
  padding: 26px 13px;
  box-shadow: 1px 0px 0px rgba(255,255,255,0.1), 	inset 1px 0px 0px rgba(0,0,0,0.1);
  float: left;
}

#userlist{
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.2);
  box-shadow: 0px 1px 0px rgba(255,255,255,0.1), 	inset 0px 1px 0px rgba(0,0,0,0.1);
  overflow-y:scroll;
}

.statusicon{
  padding: 3px;
  font-size: 12px;
  color: rgba(255,255,255,0.8);
  float: left;
}

.listname{
  padding: 3px;
  font-size: 12px;
  color: rgba(255,255,255,0.8);
  float: left;
  margin-left: 6px;
}

.namebox{
  box-shadow: 0px 1px 0px rgba(255,255,255,0.1), 	inset 0px 1px 0px rgba(0,0,0,0.1);
  width: 100%;
  display: inline-block;
  padding: 6px;
}

.blockname{
  padding: 3px;
  font-size: 12px;
  color: rgba(255,255,255,0.8);
  float: left;
  transition: all ease 0.5s;
  border-radius: 2px;
   margin-left: 6px;
}

.blockname:hover{
  background-color: orange;
  transition: all ease 0.5s;
}




/*Downloaded from https://www.codeseek.co/rockhill/a-pen-by-j-james-rockhill-Fcofn */
$(document).ready(

  function() { 

    $("#chat").niceScroll(
      {cursorcolor:"rgba(255,255,255,0.5)",
       cursorwidth:"15px",
       cursorborder:"solid 5px transparent"
    });

  }

);

$(document).ready(

  function() { 

    $("#userlist").niceScroll(
      {cursorcolor:"rgba(255,255,255,0.5)",
       cursorwidth:"10px",
       cursorborder:"solid 3px transparent"
    });

  }

);

Comments