LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

  

Welcome Manpreet!

No. Name Message
1 Manpreet Hi! How are you ? .. Could you help me out with my new Venture.. !!
2 Jacob Hey Manni, lets catch up .. could we meet for a cup of Coffee.. Whatsay ?
3 Larry The messaging is working pretty cool .. !
Profile

Profile Progress

74%

74% Complete (success)

Connections

142

Startups Following

9

Job Status

Submission of Task

..

CrowdFunding

Recieved Amount

5100$

CSS
.h1,.h2,.h3,.h4,.h5,.h6 {
  font-family: Lato;
  font-weight: 300;
}
body {
  position: relative;
  color: #555;
  background-color: #fff;
  font-family: Lato;
  font-weight: 300;
}
#wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
}
#menuOverlay {
  position: fixed;
  height: 100%;
  top: 0;
  left: 0;
  right: 15px;
  bottom: 0;
  transition: 0.5s ease;
  /* visibility: hidden; */
}
.overlay-visible {
  background-color: rgba(0,0,0,0.5);
  /* visibility: visible; */
  z-index: 10;
}
.overlay-hidden {
  background-color: rgba(0,0,0,0);
  /* visibility: hidden; */
  z-index: -1;
}
.menu {
  position: fixed;
  float: left;
  background-color: #fff;
  height: 100%;
  width: 80px;
  top: 0;
  border-right: 1px solid #ddd;
  box-shadow: 1.5px 0 10px rgba(0,0,0,0.075);
  z-index: 10;
  transition: 0.5s ease;
}
.menu-open {
  width: 200px;
}
.menu ul {
  list-style: none;
  margin: 0;
  padding: 10px 0;
  overflow: hidden;
}
.menu ul > li {
  padding: 15px 20px;
  width: 100%;
  text-align: left;
}
.menu li:nth-child(2) {
  padding: 0;
}
.menu a {
  color: #333;
  text-decoration: none;
  display: inline-block;
  width: 100px;
  transition: 1s ease;
}
ul li a span.fa, ul li a span.icons {
  padding: 0 15px;
}
.icons {
  font-size: 30px;
  margin: 0;
  padding: 0 7.5px !important;
  color: #555;
  transition: 0.5s ease;
}
.icons:hover {
  color: #999;
}
.bars {
  position: relative;
  display: inline-block;
  height: 1px;
  width: 30%;
  background-color: #555;
  margin: 0 5px;
}
.bars:before {
  content: ' ';
  position: absolute;
  top: -7px;
  height: 1px;
  width: 100%;
  background-color: #555;
}
.bars:after {
  content: ' ';
  position: absolute;
  bottom: -7px;
  height: 1px;
  width: 100%;
  background-color: #555;
}
ul li a span.text {
  /*margin-left: 10px;*/
   opacity: 0; 
  transition: 0.35s ease;
  display: inline-block;
  transform: translateY(7.5px);
  font-family: Lato;
  font-size: 17px;
  font-weight: 300;
}
.logo-rest {
  opacity: 0;
  transform: translateY(7.5px);
  transition: 0.35s ease;
}
.tooltip {
  font-size: 14px;
  //padding: 0 20px !important;
  width: 100px;
}


/* Main View
------------------------------------------*/
/* Main Content View 
---------------------------*/
.view {
  position: relative;
  background-color: #fff;
  background-color: rgba(0,0,0,0.025);
  float: right;
  /*height: 100%;
  min-height: 100%;*/
  height: auto;
  width: calc(100% - 80px);
}
.navbar {
  padding: 20px;
  color: #333;
  background-color: #fff;
  font-family: Lato;
  font-size: 20px;
  font-weight: 300;
  border-bottom: 1px solid #ddd;
  box-shadow: 0 0 3.5px rgba(0,0,0,0.1);
}
header {
  padding: 80px 0;
  /* background-color: #39cb58; */
}
header .h1 {
  margin: 0 30px;
  color: #fff;
  text-shadow: 2px 3px 2.5px rgba(0,0,0,0.25);
}
.card-group {
  position: relative;
  top: -50px;
}
/*.card {
  position: relative;
  margin: 10px auto;
  padding: 15px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 2.5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  overflow: hidden;
  font-family: Lato;
  font-weight: 200;
}

/* Card in Card-group
------------------------*/
.card.small .card-action, .card.medium .card-action, .card.large .card-action {
  position: relative;
}
.card .card-action {
  border-bottom: 1px solid rgba(160,160,160,0.2);
}
.card .card-action .h3 {
  margin: 0;
}
.card.medium .card-content, .card.small .card-content {
  height: auto;
}
.card .h1 {
  margin-top: 0;
}
.card .h1:first-child, .card-panel .h1:first-child {
  font-size: 25px;
}
.card .h1:nth-child(2), .card-panel .h1:nth-child(2) {
  font-size: 500%;
  font-weight: 300;
  color: #39cb58;
  text-align: center;
}
.startup_following .row .col-md-12 {
  padding: 0;
}
.card .alert-success {
  padding: 7px 15px;
  margin-bottom: 5px;
}

/* Progress Bar
-----------------------------*/
.progress {
  margin: 0;
  margin-top: 10px;
  height: 10px;
  background-color: #eee;
  border-radius: 50px;
  width: 90%;
  margin: 0 auto;
}
.progress-bar {
  background-color: #39cb58;
}
.card-content .h2 {
  color: #39cb58;
  font-size: 350%;
}

/* Messaging Preview
-----------------------------*/
.tabs {
  padding: 10px 25px;
  margin: 0 auto;
}
.nav-pills {
  margin: 10px 0;
  border: 1px solid #eee;
  display: inline-block;
  border-radius: 100px !important;
  transition: 0.5s ease;
}
.nav-pills>li+li {
  margin: 0;
}
.nav-pills li a{
  min-width: 100px;
  text-align: center;
  padding: 6.5px 0;
  font-weight: 500;
  border-radius: 100px 0 0 100px;
  transition: 0.5s ease;
  color: #bbb;
}
.nav-pills li.active a, .nav-pills li.active a:hover, .nav-pills li.active a:focus   {
  background-color: #39cb58;
}
.nav-pills li:nth-child(2) a {
  border-radius: 0 100px 100px 0;
}
.table {
  position: relative;
  cursor: default;
  transition: 0.5s ease !important;
}
.table tr, .table td, .table th{
  /* transition: 0.5s ease !important; */
  text-align: center;
}
.table th {
  text-align: center;
}
.table tbody tr:hover {
  color: #fff !important;
  background-color: rgba(57, 203, 88, 1) !important;
  font-weight: 500;
}
.table tr:hover .msg {
  /* overflow: auto; */
  white-space: normal;
  /* transition: 0.4s ease !important; */
}
span.msg {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 100px;
  max-width: 220px;
  /* background-color: #ddd; */
  transition: 0.4s ease;
}


/* Toggling the sidebar
-----------------------------*/
.menu-open ul li a .text {
  opacity: 1;
  transform: translateY(-7.5px);
}
.menu-open ul li .heading .logo-rest {
  opacity: 1;
  transform: translateY(0px);
}




/* Media Queries
------------------------------*/
@media only screen and (max-width: 990px) {
  .card .h1:first-child {
    text-align: center;
  }
  .card .h1:nth-child(2) {
    font-size: 400%;
  }
  header {
    padding: 35px 0;
  }
  header .h1 {
    margin: 0;
    text-align: center;
  }
  .card-group {
    top: 10px !important;
    padding: 0;
  }
  .tabs {
    text-align: center;
  }
}
@media only screen and (max-width: 768px) {
  .tabs {
    padding: 10px ;
  }
  .nav-pills {
    display: block;
    margin: 0 auto;
    margin-bottom: 10px;
    width: 80%;
  }
  .nav-pills li {
    width: 50%;
  }
}
@media only screen and (max-width: 480px) {
  .nav-pills {
    width: 100%;
  }
}










/* #Logo and Motto */
.heading { position: relative; top: 0; left: 0; right: 0; display: inline-block; cursor: default; }
.heading p { margin: 10px 0; font-size: 17.5px; }
div.logo { margin: 0 auto; text-align: center; font-family: "Source Sans Pro"; font-size: 30px; font-weight: 300; color: #39cb58; width: 100%; left: 0; right: 0; z-index: 200; margin-top: 8px; padding: 10px 0; }
span.logo-part { color: #fff; background-color: #39cb58; padding: 2px 5.5px 0px 10px; border-radius: 100%; margin: 5px; margin: 20px; margin-right: 3px; font-family: "Montez"; }
span.sub-head-logo { font-weight: 600; color: #39cb58; }
/* End of #Logo and Motto */






/* Pulse Effect for Tour */
.pulse-button {
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  position: absolute;
  display: block;
  width: 25px;
  height: 25px;
  padding-bottom: 8px;
  font-size: 1.3em;
  font-weight: bold;
  color: #fff;
  border: none;
  box-shadow: 0 0 0 0 #f0f0f0, 0 0 0 0 rgba(90, 153, 212, 0.7);
  border-radius: 100%;
  v-align: middle;
  line-height: 20px;
  background: #5a99d4;
  cursor: pointer;
  transform: translate3d(0, 0, 0);
  animation: pulse 1.25s infinite cubic-bezier(0.66, 0.33, 0, 1);
}
.pulse-button:hover {
  animation-play-state: paused;
}

@keyframes pulse {
  to {
    box-shadow: 0 0 0 2px transparent, 0 0 0 12px rgba(90, 153, 212, 0);
  }
}



.menu .pulse-button {
  position: absolute;
  top: 135px;
  right: 2.5px;
}
.popover {
  z-index: 100000;
}
JS
var menu = $('.menu'),
    overlay = $("#menuOverlay");

$('.menu ul li:first-child').click(function(e) {
  e.preventDefault();
  $('.menu').toggleClass('menu-open');
  overlay.toggleClass('overlay-visible overlay-hidden');
});

/*$(".btn-floating").click(function() {
    $('.fixed-action-btn').openFAB();
});*/

$(document).ready(function(){
  $('.tooltipped').tooltip({delay: 50});
  $('[data-toggle="popover"]').popover();
  
  $('.pulse-button').on('show.bs.popover', function() {
    //alert('Popover Initiated !');
    // $('#menuOverlay').addClass('overlay-visible').removeClass('overlay-hidden');
  });
  $('.pulse-button').on('hide.bs.popover', function() {
    //alert('Popover Initiated !');
    $('#menuOverlay').addClass('overlay-hidden').removeClass('overlay-visible');
  })
});
Host Instantly Drag and Drop Website Builder

 

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

Related Codes

Pen ID
Pen ID
Pen ID