Media Folder 1

by Salvatore Criscione

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="whole-web-page">
  <!-- Page Load -->
  <div class="page-load" style="display: none;">
    <span><i class="fa fa-bars" aria-hidden="true"></i></span>
  </div>
  
<!-- Start of Nav -->
  <div class="left-nav">
    <div class="some-name-123">
    
      <!-- Start of Profile Pic -->
      
      <span class="profile-sec">
         <span class="profile-pic">
          <img class="profile-pic-img" src="http://www.salcriscione.com/files/media-listing/Images/pic-md.png">
          </span>
          <img class="profile-pic-bg-logo" src="http://www.salcriscione.com/files/media-listing/Images/pic-bg-logo.png">
          <span class="profile-name">
            Courtney Cladwell
          </span>
      </span>
      <!-- End of Profile Pic -->
      
      <!-- Start of Nav Buttons -->
      <ul class="nav nav-pills nav-stacked">
        <li role="presentation"><a href="#"><i class="fa fa-home" aria-hidden="true"></i><span>Home</span></a></li>
        <li role="presentation" class=""><a href="#"><i class="fa fa-inbox" aria-hidden="true"></i><span>Inbox</span></a></li>
        <li role="presentation"><a href="#"><i class="fa fa-picture-o" aria-hidden="true"></i><span>Media</span></a></li>
        <li role="presentation" class="active"><a href="#"><i class="fa fa-file" aria-hidden="true"></i><span>Pages</span></a></li>
        <li role="presentation"><a href="#"><i class="fa fa-users" aria-hidden="true"></i><span>Shared</span></a></li>
        <li role="presentation"><a href="#"><i class="fa fa-calendar" aria-hidden="true"></i><span>Calendar</span></a></li>
        <li role="presentation"><a href="#"><i class="fa fa-pie-chart" aria-hidden="true"></i><span>Reports</span></a></li>
        <li role="presentation"><a href="#"><i class="fa fa-sliders"...

CSS

/* SCSS Converted to CSS */

@import 'https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i';
@import 'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css';


/* Font */
/* Font Sizes */
/* Font Weights */
/* Colors */
/* Opacity */
/* Spacing */
/* Radius */
/* Border */
/* Shadows */
/* Animation Transition */
/* Animation Delay */
/* Z-index */
/* *********** End of Variables *********** */
html, body {
  height: 100%;
}
/* Start of Page Load */
.page-load {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #f0f1f3;
  z-index: 100;
  /* Animation */
  animation-name: fade-out;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-delay: 2s;
  text-align: center;
}
.page-load span {
  position: absolute;
  top: calc(50% - 0px);
  left: calc(50% - 25px);
  display: block;
  width: 50px;
  height: 50px;
  font-size: 30px;
  color: #ccd5da;
  z-index: 110;
  /* Animation */
  animation-name: fade-out;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-delay: 1.5s;
}
/* Standard syntax */
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    z-index: -1;
  }
}
/* End of Page Load */
/* *** Start of "Whole Web Page" *** */
.whole-web-page {
  position: relative;
  height: 100%;
  min-height: 450px;
  background-color: #f0f1f3;
}
/* *** End of "Whole Web Page" *** */
/* *** Start of "Nav" *** */
.profile-sec {
  position: relative;
  display: block;
  float: left;
  width: 100%;
  padding-top: 30px;
  background: rgba(75, 199, 248, 0);
  overflow: hidden;
  -webkit-box-shadow: inset 0 -70px 140px -80px rgba(23, 155, 204, 0);
  box-shadow: inset 0 -70px 140px -80px rgba(23, 155, 204, 0);
  transition: all 0.75s ease;
  transition-delay: 0.5s;
}
.profile-sec .profile-pic {
  position: absolute;
  top: 15px;
  left: calc(50% - 18px);
  display: block;
  overflow: hidden;
 ...

JavaScript

// Scroll Div Content to the top
$('a.tab-btns').bind('click', function(){
    $('.tab-content').scrollTop(0);
});