"Super legit layout"
Bootstrap 4.1.1 Snippet by Briancas20

<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.">&plus;</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>

Related: See More


Questions / Comments: