<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/manpreet/pen/dYvrNb?depth=everything&order=popularity&page=50&q=Overlay&show_forks=false" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Montez|Lato:100,300,400,700|Source+Sans+Pro:200,300,300italic,400,600|Open+Sans:300,400,600'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'><link rel='stylesheet prefetch' href='//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'><link rel='stylesheet prefetch' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'><link rel='stylesheet prefetch' href='//cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<style class="cp-pen-styles">.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: left;
}
.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;
}</style></head><body>
<body class="animated fadeIn">
<div id="wrapper">
<div id="menuOverlay" class="animated overlay-hidden"></div>
<!-- Main UI -->
<div class="menu animated fadeIn">
<button class='pulse-button' data-toggle="popover" title="Popover title" data-trigger="focus" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">+</button>
<ul>
<li>
<a href="">
<div class="bars"></div>
</a>
</li>
<li>
<div class="heading">
<div class="logo">
<span class="logo-part animated fadeIn">M</span><span class="logo-rest">ultiplier</span>
</div>
</div>
</li>
<li>
<a href="" class="tooltipped" data-position="right" data-delay="0" data-tooltip="Messaging">
<span class="icons ion-chatboxes"></span>
<span class="text">Chat</span>
</a>
</li>
<li>
<a href="" class="tooltipped" data-position="right" data-delay="0" data-tooltip="Profile">
<span class="icons ion-person"></span>
<span class="text">Profile</span>
</a>
</li>
<li>
<a href="" class="tooltipped" data-position="right" data-delay="0" data-tooltip="Startups">
<span class="icons ion-ios-briefcase"></span>
<span class="text">Startup</span>
</a>
</li>
<li>
<a href="" class="tooltipped" data-position="right" data-delay="0" data-tooltip="Settings">
<span class="icons ion-ios-settings-strong"></span>
<span class="text">Setting</span>
</a>
</li>
</ul>
</div>
<div class="view animated fadeIn">
<header class="green accent-4">
<div class="container">
<h1 class="h1">Strategic Planning – business analysis, budgeting and more</h1>
</div>
</header>
<div class="card-group container">
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="card small">
<div class="tabs" style="height: 100%;">
<span>Though the creation of an annual strategic plan and budget is a common</br> practice at larger companies, small to mid-size companies usually do not go</br> through the process thoroughly, mainly because they do not really know how</br> to, and do not fully comprehend the importance. </span>
<div class="tab-content">
<style>
.title1{
font-size: 14px;
}
</style>
<div role="tabpanel" class="tab-pane active table-responsive" id="home">
<h2 class ="title1">Creation of a solid plan takes into account everything</br> that impacts your business. Such as –
</h2>
<table class="table">
<thead>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Market landscape</td>
<td><span class="msg"></span></td>
</tr>
<tr>
<th>2</th>
<td>Seasonality</td>
<td><span class="msg"></span></td>
</tr>
<tr>
<th>3</th>
<td>Available resources such as cash, inventory, manpower,<br> space, technology. </td>
<td><span class="msg"></span></td>
</tr>
<tr>
<th>4</th>
<td>Available resources such as cash, inventory, manpower,<br> space, technology. </td>
<td><span class="msg"></span></td>
</tr>
<tr>
<th>5</th>
<td>Available resources such as cash, inventory, manpower,<br> space, technology. </td>
<td><span class="msg"></span></td>
</tr>
<tr>
<th>6</th>
<td>Available resources such as cash, inventory, manpower,<br> space, technology. </td>
<td><span class="msg"></span></td>
</tr>
<tr>
<th>7</th>
<td>Available resources such as cash, inventory, manpower,<br> space, technology. </td>
<td><span class="msg"></span></td>
</tr>
<tr>
<th>8</th>
<td>Available resources such as cash, inventory, manpower,<br> space, technology. </td>
<td><span class="msg"></span></td>
<th>9</th>
<td>Available resources such as cash, inventory, manpower,<br> space, technology. </td>
<td><span class="msg"></span></td>
<th>10</th>
<td>Available resources such as cash, inventory, manpower,<br> space, technology. </td>
<td><span class="msg"></span></td>
</tr>
</tbody>
</table>
</div>
<div role="tabpanel" class="tab-pane" id="profile">Profile</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="card small text-center">
<div class="card-content">
<h1 class="h1">Profile Progress</h1>
<h2 class="h2" style="font-size: 500%;">74%</h2>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100" style="width: 74%">
<span class="sr-only">74% Complete (success)</span>
</div>
</div>
<h1 class="h1" style="margin-top: 20px; margin-bottom: 0; font-size: 25px;">Connections</h1>
<h2 class="h2" style="color: #39cb58; font-size: 500%; margin: 0;">142</h2>
</div>
</div>
</div>
<!--<div class="col-md-3 col-sm-6 col-xs-12">
<div class="card text-center">
<div class="card-content">
<h1 class="h1">Profile Progress</h1>
<h2 class="h2">74%</h2>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100" style="width: 74%">
<span class="sr-only">74% Complete (success)</span>
</div>
</div>
</div>
</div>
</div>-->
<!--<div class="col-md-3 col-sm-6 col-xs-12">
<div class="card text-center">
<div class="card-content">
<h1 class="h1">Connections</h1>
<h1 class="h1">142</h1>
</div>
</div>
</div>-->
</div>
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="card medium text-center" style="min-height: 400px; height: auto;">
<div class="card-action">
<h2 class="h3">Startups Following</h2>
</div>
<div class="card-content" style="padding: 20px 7.5px;">
<h1 class="h1" style="color: #39cb58; font-size: 500%;">9</h1>
<div class="container-fluid startup_following" style="padding: 0;">
<div class="row" style="margin: 0;">
<div class="col-md-12">
<div class="alert alert-success" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself.
</div>
</div>
<div class="col-md-12">
<div class="alert alert-success" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself.
</div>
</div>
<div class="col-md-12">
<div class="alert alert-success" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="card medium text-center">
<div class="card-action">
<h2 class="h3">Job Status</h2>
</div>
<div class="card-content">
<h1 class="h1">Submission of Task</h1>
<h1 class="h1">..</h1>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="card medium text-center">
<div class="card-action">
<h2 class="h3">CrowdFunding</h2>
</div>
<div class="card-content">
<h1 class="h1">Recieved Amount</h1>
<h1 class="h1">5100$</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js'></script>
<script >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');
})
});
//# sourceURL=pen.js
</script>
</body></html>
