<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" aria-hidden="true"></i><span>Settings</span></a></li>
</ul>
<!-- End of Nav Buttons -->
</div>
</div>
<div class="nav-cover">
<!-- Slight opacity over Header & Main Page -->
</div>
<!-- End of Nav -->
<!-- Start of Header -->
<div class="header">
<div class="logo">
<img src="http://www.salcriscione.com/files/media-listing/Images/logo.png">
</div>
<div class="header-btns">
<!-- Start of Search Button -->
<span class="search">
<input type="text" name="search" value="">
<span class="btn-icon search-icon" href="#"><i class="fa fa-search" aria-hidden="true"></i></span>
<span class="search-underline"></span>
</span>
<!-- End of Search Button -->
<!-- Start of Account Button -->
<div class="btn-group act-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-user" aria-hidden="true"></i></button>
<ul class="dropdown-menu">
<li><a href="#">View Profile</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">My Messages</a></li>
<li><a href="#">My Groups</a></li>
<li><a href="#">My Events</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Invite</a></li>
</ul>
</div>
<!-- End of Account Button -->
<!-- Start of App Button -->
<div class="btn-group app-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-globe" aria-hidden="true"></i></button>
<ul class="dropdown-menu">
<li><a href="#">Sign Out</a></li>
<li><a href="#">Account Settings</a></li>
<li><a href="#">Help</a></li>
</ul>
</div>
<!-- End of App Button -->
</div>
</div>
<!-- End of Header -->
<!-- Start of Main Page -->
<div class="page">
<!-- Start of Content Header -->
<div class="content-header">
<!-- Start of Page Title -->
<span class="page-title">Pages</span>
<!-- End of Page Title -->
<!-- Start of Nav tabs -->
<div class="content-tabs">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a class="tab-btns" href="#drafts" aria-controls="drafts" role="tab" data-toggle="tab">Drafts</a></li>
<li role="presentation"><a class="tab-btns" href="#published" aria-controls="published" role="tab" data-toggle="tab">Published</a></li>
<li role="presentation"><a class="tab-btns" href="#archive" aria-controls="archive" role="tab" data-toggle="tab">Archive</a></li>
</ul>
</div>
<!-- End of Nav tabs -->
</div>
<!-- End of Content Header -->
<!-- Start of Main Content -->
<div class="main-content">
<!-- Start of Folders -->
<div class="folders">
<ul class="nav nav-pills nav-stacked" role="tablist">
<li role="presentation" class="new-folder-btn"><a class="" href="#new-folder" aria-controls="new-folder" role="tab" data-toggle="tab"><i class="fa fa-plus" aria-hidden="true"></i><span class="folder-title">New Folder</span></a></li>
<li role="presentation"><a href="#favorites" aria-controls="favorites" role="tab" data-toggle="tab"><i class="fa fa-star" aria-hidden="true"></i><span class="folder-title">Favorites</span><span class="folder-count">19</span></a></li>
<li class="active" role="presentation"><a href="#lisas-content" aria-controls="lisas-content" role="tab" data-toggle="tab"><i class="fa fa-folder" aria-hidden="true"></i><span class="folder-title">Lisa's Content</span><span class="folder-count">37</span></a></li>
<li role="presentation"><a href="#markerting-maddness" aria-controls="markerting-maddness" role="tab" data-toggle="tab"><i class="fa fa-folder" aria-hidden="true"></i><span class="folder-title">Markerting Maddness</span><span class="folder-count">81</span></a></li>
<li role="presentation"><a href="#markerting-maddness" aria-controls="markerting-maddness" role="tab" data-toggle="tab"><i class="fa fa-folder" aria-hidden="true"></i><span class="folder-title">Events</span><span class="folder-count">46</span></a></li>
<li role="presentation"><a href="#markerting-maddness" aria-controls="markerting-maddness" role="tab" data-toggle="tab"><i class="fa fa-folder" aria-hidden="true"></i><span class="folder-title">Webinars</span><span class="folder-count">27</span></a></li>
<li role="presentation"><a href="#markerting-maddness" aria-controls="markerting-maddness" role="tab" data-toggle="tab"><i class="fa fa-folder" aria-hidden="true"></i><span class="folder-title">Onboarding</span><span class="folder-count">14</span></a></li>
</ul>
</div>
<!-- Start of Fab Button -->
<span class="fab-btn-sec">
<a class="fab-btn" href="#"><i class="fa fa-plus" aria-hidden="true"></i></a>
<a class="fab-btn fab-sm" href="#"><i class="fa fa-upload" aria-hidden="true"></i></a>
<a class="fab-btn fab-sm" href="#"><i class="fa fa-globe" aria-hidden="true"></i></a>
</span>
<!-- End of Fab Button -->
<!-- Start of "Assets Title of Selected Folder" -->
<div class="folder-title-assets">
<div class="btn-group act-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-ellipsis-v" aria-hidden="true"></i></button>
<ul class="dropdown-menu">
<li><a href="#">Rename</a></li>
<li><a href="#">Share</a></li>
<li><a href="#">Duplicate</a></li>
<li><a href="#">Delete</a></li>
</ul>
</div>
<span>Lisa's Content</span>
</div>
<!-- End of "Assets Title of Selected Folder" -->
<!-- Start of "Assets" -->
<div class="assets">
<!-- Drafts Tab -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="drafts">
<ul>
<li><!-- Asset Item -->
<div class="asset-icon">
<i class="fa fa-file-text-o" aria-hidden="true"></i>
</div>
<div class="asset-text">
<p class="asset-title">
Thanks for Attending: Email Wizardry Webinar
</p>
<p class="asset-sharing-text">
Destination: Marketing Website
</p>
<span class="asset-btn">
<input type="checkbox" name="star" value="favorite">
<label><i class="fa fa-star-o" aria-hidden="true"></i></label>
</span>
</div>
</li>
<li><!-- Asset Item -->
<div class="asset-icon">
<i class="fa fa-file-video-o" aria-hidden="true"></i>
</div>
<div class="asset-text">
<p class="asset-title">
Delivery Insight Webinar
</p>
<p class="asset-sharing-text">
Destination: Blog
</p>
<span class="asset-btn">
<input type="checkbox" name="star" value="favorite">
<label><i class="fa fa-star-o" aria-hidden="true"></i></label>
</span>
</div>
</li>
<li><!-- Asset Item -->
<div class="asset-icon">
<i class="fa fa-file-text-o" aria-hidden="true"></i>
</div>
<div class="asset-text">
<p class="asset-title">
MAS Webinar Follow Up
</p>
<p class="asset-sharing-text">
Destination: Marketing Website
</p>
<span class="asset-btn">
<input type="checkbox" name="star" value="favorite">
<label><i class="fa fa-star-o" aria-hidden="true"></i></label>
</span>
</div>
</li>
<li><!-- Asset Item -->
<div class="asset-icon">
<i class="fa fa-file-video-o" aria-hidden="true"></i>
</div>
<div class="asset-text">
<p class="asset-title">
Personalized Holiday Video - SCP Version
</p>
<p class="asset-sharing-text">
Destination: App Notification
</p>
<span class="asset-btn">
<input type="checkbox" name="star" value="favorite">
<label><i class="fa fa-star-o" aria-hidden="true"></i></label>
</span>
</div>
</li>
<li><!-- Asset Item -->
<div class="asset-icon">
<i class="fa fa-file-video-o" aria-hidden="true"></i>
</div>
<div class="asset-text">
<p class="asset-title">
Enterprise to customers with less than 12 month terms
</p>
<p class="asset-sharing-text">
Destination: Marketing Website
</p>
<span class="asset-btn">
<input type="checkbox" name="star" value="favorite">
<label><i class="fa fa-star-o" aria-hidden="true"></i></label>
</span>
</div>
</li>
<li><!-- Asset Item -->
<div class="asset-icon">
<i class="fa fa-file-pdf-o" aria-hidden="true"></i>
</div>
<div class="asset-text">
<p class="asset-title">
CRME Skyline Soirée
</p>
<p class="asset-sharing-text">
Destination: Marketing Website
</p>
<span class="asset-btn">
<input type="checkbox" name="star" value="favorite">
<label><i class="fa fa-star-o" aria-hidden="true"></i></label>
</span>
</div>
</li>
<li><!-- Asset Item -->
<div class="asset-icon">
<i class="fa fa-file-text-o" aria-hidden="true"></i>
</div>
<div class="asset-text">
<p class="asset-title">
ALUV/PSO Exclusive Offer
</p>
<p class="asset-sharing-text">
Destination: Knowledge Base
</p>
<span class="asset-btn">
<input type="checkbox" name="star" value="favorite">
<label><i class="fa fa-star-o" aria-hidden="true"></i></label>
</span>
</div>
</li>
<li><!-- Asset Item -->
<div class="asset-icon">
<i class="fa fa-file-text-o" aria-hidden="true"></i>
</div>
<div class="asset-text">
<p class="asset-title">
Austin Roadshow - Bring a colleague
</p>
<p class="asset-sharing-text">
Destination: Blog
</p>
<span class="asset-btn">
<input type="checkbox" name="star" value="favorite">
<label><i class="fa fa-star-o" aria-hidden="true"></i></label>
</span>
</div>
</li>
<li><!-- Asset Item -->
<div class="asset-icon">
<i class="fa fa-file-text-o" aria-hidden="true"></i>
</div>
<div class="asset-text">
<p class="asset-title">
Newsletter survey
</p>
<p class="asset-sharing-text">
Destination: Marketing Website
</p>
<span class="asset-btn">
<input type="checkbox" name="star" value="favorite">
<label><i class="fa fa-star-o" aria-hidden="true"></i></label>
</span>
</div>
</li>
<li><!-- Asset Item -->
<div class="asset-icon">
<i class="fa fa-file-pdf-o" aria-hidden="true"></i>
</div>
<div class="asset-text">
<p class="asset-title">
Partner Breakfast_SF_2015
</p>
<p class="asset-sharing-text">
Destination: Blog
</p>
<span class="asset-btn">
<input type="checkbox" name="star" value="favorite">
<label><i class="fa fa-star-o" aria-hidden="true"></i></label>
</span>
</div>
</li>
<li><!-- Asset Item -->
<div class="asset-icon">
<i class="fa fa-file-video-o" aria-hidden="true"></i>
</div>
<div class="asset-text">
<p class="asset-title">
Vidyard Free Trial Registration
</p>
<p class="asset-sharing-text only-you">
Destination: Marketing Website
</p>
<span class="asset-btn">
<input type="checkbox" name="star" value="favorite">
<label><i class="fa fa-star-o" aria-hidden="true"></i></label>
</span>
</div>
</li>
<li><!-- Asset Item -->
<div class="asset-icon">
<i class="fa fa-file-text-o" aria-hidden="true"></i>
</div>
<div class="asset-text">
<p class="asset-title">
IHM Awards
</p>
<p class="asset-sharing-text">
Destination: Marketing Website
</p>
<span class="asset-btn">
<input type="checkbox" name="star" value="favorite">
<label><i class="fa fa-star-o" aria-hidden="true"></i></label>
</span>
</div>
</li>
<li><!-- Asset Item -->
<div class="asset-icon">
<i class="fa fa-file-text-o" aria-hidden="true"></i>
</div>
<div class="asset-text">
<p class="asset-title">
Cyn ondemand rebroadcast
</p>
<p class="asset-sharing-text">
Destination: Marketing Website
</p>
<span class="asset-btn">
<input type="checkbox" name="star" value="favorite">
<label><i class="fa fa-star-o" aria-hidden="true"></i></label>
</span>
</div>
</li>
</ul>
</div>
<!-- Published Tab -->
<div role="tabpanel" class="tab-pane" id="published">
<ul>
<li><!-- Asset Item -->
<div class="asset-icon">
<i class="fa fa-file-text-o" aria-hidden="true"></i>
</div>
<div class="asset-text">
<p class="asset-title">
8 Inbound Tactics to Master in 2016
</p>
<p class="asset-sharing-text">
Posted: Marketing Website
</p>
<span class="asset-btn">
<input type="checkbox" name="star" value="favorite">
<label><i class="fa fa-star-o" aria-hidden="true"></i></label>
</span>
</div>
</li>
<li><!-- Asset Item -->
<div class="asset-icon">
<i class="fa fa-file-pdf-o" aria-hidden="true"></i>
</div>
<div class="asset-text">
<p class="asset-title">
More Traffic, More Leads, & More Business
</p>
<p class="asset-sharing-text">
Posted: Knowledge Base
</p>
<span class="asset-btn">
<input type="checkbox" name="star" value="favorite">
<label><i class="fa fa-star-o" aria-hidden="true"></i></label>
</span>
</div>
</li>
<li><!-- Asset Item -->
<div class="asset-icon">
<i class="fa fa-file-text-o" aria-hidden="true"></i>
</div>
<div class="asset-text">
<p class="asset-title">
Build a Referral Form
</p>
<p class="asset-sharing-text">
Posted: Marketing Website
</p>
<span class="asset-btn">
<input type="checkbox" name="star" value="favorite">
<label><i class="fa fa-star-o" aria-hidden="true"></i></label>
</span>
</div>
</li>
<li><!-- Asset Item -->
<div class="asset-icon">
<i class="fa fa-file-video-o" aria-hidden="true"></i>
</div>
<div class="asset-text">
<p class="asset-title">
Automate Customer Marketing
</p>
<p class="asset-sharing-text">
Posted: Marketing Website
</p>
<span class="asset-btn">
<input type="checkbox" name="star" value="favorite">
<label><i class="fa fa-star-o" aria-hidden="true"></i></label>
</span>
</div>
</li>
<li><!-- Asset Item -->
<div class="asset-icon">
<i class="fa fa-file-video-o" aria-hidden="true"></i>
</div>
<div class="asset-text">
<p class="asset-title">
Send Qualified Leads to Sales
</p>
<p class="asset-sharing-text">
Posted: App Notification
</p>
<span class="asset-btn">
<input type="checkbox" name="star" value="favorite">
<label><i class="fa fa-star-o" aria-hidden="true"></i></label>
</span>
</div>
</li>
<li><!-- Asset Item -->
<div class="asset-icon">
<i class="fa fa-file-pdf-o" aria-hidden="true"></i>
</div>
<div class="asset-text">
<p class="asset-title">
Empower Sales with New Tools
</p>
<p class="asset-sharing-text">
Posted: Blog
</p>
<span class="asset-btn">
<input type="checkbox" name="star" value="favorite">
<label><i class="fa fa-star-o" aria-hidden="true"></i></label>
</span>
</div>
</li>
<li><!-- Asset Item -->
<div class="asset-icon">
<i class="fa fa-file-pdf-o" aria-hidden="true"></i>
</div>
<div class="asset-text">
<p class="asset-title">
Automate the Nurture Process
</p>
<p class="asset-sharing-text">
Posted: Marketing Website
</p>
<span class="asset-btn">
<input type="checkbox" name="star" value="favorite">
<label><i class="fa fa-star-o" aria-hidden="true"></i></label>
</span>
</div>
</li>
<li><!-- Asset Item -->
<div class="asset-icon">
<i class="fa fa-file-video-o" aria-hidden="true"></i>
</div>
<div class="asset-text">
<p class="asset-title">
Manage Prospects with Segments
</p>
<p class="asset-sharing-text">
Posted: Blog
</p>
<span class="asset-btn">
<input type="checkbox" name="star" value="favorite">
<label><i class="fa fa-star-o" aria-hidden="true"></i></label>
</span>
</div>
</li>
<li><!-- Asset Item -->
<div class="asset-icon">
<i class="fa fa-file-text-o" aria-hidden="true"></i>
</div>
<div class="asset-text">
<p class="asset-title">
Compose & Send Engaging Email
</p>
<p class="asset-sharing-text">
Posted: Knowledge Base
</p>
<span class="asset-btn">
<input type="checkbox" name="star" value="favorite">
<label><i class="fa fa-star-o" aria-hidden="true"></i></label>
</span>
</div>
</li>
<li><!-- Asset Item -->
<div class="asset-icon">
<i class="fa fa-file-text-o" aria-hidden="true"></i>
</div>
<div class="asset-text">
<p class="asset-title">
Capture Visitors with Forms
</p>
<p class="asset-sharing-text">
Posted: Marketing Website
</p>
<span class="asset-btn">
<input type="checkbox" name="star" value="favorite">
<label><i class="fa fa-star-o" aria-hidden="true"></i></label>
</span>
</div>
</li>
<li><!-- Asset Item -->
<div class="asset-icon">
<i class="fa fa-file-text-o" aria-hidden="true"></i>
</div>
<div class="asset-text">
<p class="asset-title">
Join the Social Conversation
</p>
<p class="asset-sharing-text">
Posted: Marketing Website
</p>
<span class="asset-btn">
<input type="checkbox" name="star" value="favorite">
<label><i class="fa fa-star-o" aria-hidden="true"></i></label>
</span>
</div>
</li>
<li><!-- Asset Item -->
<div class="asset-icon">
<i class="fa fa-file-text-o" aria-hidden="true"></i>
</div>
<div class="asset-text">
<p class="asset-title">
Build a Customer Referral Program
</p>
<p class="asset-sharing-text">
Posted: App Notification
</p>
<span class="asset-btn">
<input type="checkbox" name="star" value="favorite">
<label><i class="fa fa-star-o" aria-hidden="true"></i></label>
</span>
</div>
</li>
<li><!-- Asset Item -->
<div class="asset-icon">
<i class="fa fa-file-video-o" aria-hidden="true"></i>
</div>
<div class="asset-text">
<p class="asset-title">
Send Qualified Leads to Sales
</p>
<p class="asset-sharing-text">
Posted: Marketing Website
</p>
<span class="asset-btn">
<input type="checkbox" name="star" value="favorite">
<label><i class="fa fa-star-o" aria-hidden="true"></i></label>
</span>
</div>
</li>
<li><!-- Asset Item -->
<div class="asset-icon">
<i class="fa fa-file-text-o" aria-hidden="true"></i>
</div>
<div class="asset-text">
<p class="asset-title">
2016 Minneapolis IHM Customer
</p>
<p class="asset-sharing-text">
Posted: Marketing Website
</p>
<span class="asset-btn">
<input type="checkbox" name="star" value="favorite">
<label><i class="fa fa-star-o" aria-hidden="true"></i></label>
</span>
</div>
</li>
<li><!-- Asset Item -->
<div class="asset-icon">
<i class="fa fa-file-text-o" aria-hidden="true"></i>
</div>
<div class="asset-text">
<p class="asset-title">
ProServices AP Campaign Aug16
</p>
<p class="asset-sharing-text">
Posted: Marketing Website
</p>
<span class="asset-btn">
<input type="checkbox" name="star" value="favorite">
<label><i class="fa fa-star-o" aria-hidden="true"></i></label>
</span>
</div>
</li>
<li><!-- Asset Item -->
<div class="asset-icon">
<i class="fa fa-file-text-o" aria-hidden="true"></i>
</div>
<div class="asset-text">
<p class="asset-title">
IHM Toronto Customer List
</p>
<p class="asset-sharing-text">
Posted: Marketing Website
</p>
<span class="asset-btn">
<input type="checkbox" name="star" value="favorite">
<label><i class="fa fa-star-o" aria-hidden="true"></i></label>
</span>
</div>
</li>
<li><!-- Asset Item -->
<div class="asset-icon">
<i class="fa fa-file-text-o" aria-hidden="true"></i>
</div>
<div class="asset-text">
<p class="asset-title">
UK Current Customers Contacts
</p>
<p class="asset-sharing-text">
Posted: Marketing Website
</p>
<span class="asset-btn">
<input type="checkbox" name="star" value="favorite">
<label><i class="fa fa-star-o" aria-hidden="true"></i></label>
</span>
</div>
</li>
<li><!-- Asset Item -->
<div class="asset-icon">
<i class="fa fa-file-video-o" aria-hidden="true"></i>
</div>
<div class="asset-text">
<p class="asset-title">
Marketing Automation Strategy
</p>
<p class="asset-sharing-text">
Posted: Knowledge Base
</p>
<span class="asset-btn">
<input type="checkbox" name="star" value="favorite">
<label><i class="fa fa-star-o" aria-hidden="true"></i></label>
</span>
</div>
</li>
<li><!-- Asset Item -->
<div class="asset-icon">
<i class="fa fa-file-text-o" aria-hidden="true"></i>
</div>
<div class="asset-text">
<p class="asset-title">
What's New Closer Look
</p>
<p class="asset-sharing-text">
Posted: Marketing Website
</p>
<span class="asset-btn">
<input type="checkbox" name="star" value="favorite">
<label><i class="fa fa-star-o" aria-hidden="true"></i></label>
</span>
</div>
</li>
<li><!-- Asset Item -->
<div class="asset-icon">
<i class="fa fa-file-text-o" aria-hidden="true"></i>
</div>
<div class="asset-text">
<p class="asset-title">
Website Prospector & SEO
</p>
<p class="asset-sharing-text">
Posted: Marketing Website
</p>
<span class="asset-btn">
<input type="checkbox" name="star" value="favorite">
<label><i class="fa fa-star-o" aria-hidden="true"></i></label>
</span>
</div>
</li>
</ul>
</div>
<!-- Archive Tab -->
<div role="tabpanel" class="tab-pane" id="archive">
<ul>
<li><!-- Asset Item -->
<div class="asset-icon">
<i class="fa fa-file-text-o" aria-hidden="true"></i>
</div>
<div class="asset-text">
<p class="asset-title">
Marketing Automation Strategy
</p>
<p class="asset-sharing-text">
Destination: Marketing Website
</p>
<span class="asset-btn">
<input type="checkbox" name="star" value="favorite">
<label><i class="fa fa-star-o" aria-hidden="true"></i></label>
</span>
</div>
</li>
<li><!-- Asset Item -->
<div class="asset-icon">
<i class="fa fa-file-text-o" aria-hidden="true"></i>
</div>
<div class="asset-text">
<p class="asset-title">
What's New Closer Look
</p>
<p class="asset-sharing-text">
Destination: Marketing Website
</p>
<span class="asset-btn">
<input type="checkbox" name="star" value="favorite">
<label><i class="fa fa-star-o" aria-hidden="true"></i></label>
</span>
</div>
</li>
<li><!-- Asset Item -->
<div class="asset-icon">
<i class="fa fa-file-text-o" aria-hidden="true"></i>
</div>
<div class="asset-text">
<p class="asset-title">
Website Prospecting & SEO
</p>
<p class="asset-sharing-text">
Destination: Marketing Website
</p>
<span class="asset-btn">
<input type="checkbox" name="star" value="favorite">
<label><i class="fa fa-star-o" aria-hidden="true"></i></label>
</span>
</div>
</li>
<li><!-- Asset Item -->
<div class="asset-icon">
<i class="fa fa-file-text-o" aria-hidden="true"></i>
</div>
<div class="asset-text">
<p class="asset-title">
Thanks for Attending: Nurture Process Webinar
</p>
<p class="asset-sharing-text">
Destination: App Notification
</p>
<span class="asset-btn">
<input type="checkbox" name="star" value="favorite">
<label><i class="fa fa-star-o" aria-hidden="true"></i></label>
</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- End of Assets -->
</div>
<!-- End of Main Content -->
</div>
<!-- End of Main Page -->
</div>
/* 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;
background-color: transparent;
width: 38px;
height: 38px;
border-radius: 100%;
transition: all 0.75s ease;
transition-delay: 0.5s;
-webkit-box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.0);
box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.0);
z-index: 60;
/* z-index: $z-profile-pic; */
}
.profile-sec .profile-pic .profile-pic-img {
width: 38px;
height: 38px;
transition: all 0.75s ease;
transition-delay: 0.5s;
}
.profile-sec .profile-pic-bg-logo {
position: absolute;
bottom: -30px;
left: 100px;
opacity: 0;
transition: all 0.75s ease;
transition-delay: 0.5s;
z-index: 55;
}
.profile-sec .profile-name {
display: block;
opacity: 0;
color: #fff;
height: 26px;
width: 220px;
text-align: center;
font-weight: 600;
transition: all 0.75s ease;
}
.left-nav {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 60px;
height: 100%;
background-color: #f4f4f2;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4), 0 -1px 4px 0 rgba(0, 0, 0, 0.15);
transition: all 0.75s ease;
transition-delay: 0.5s;
z-index: 50;
}
.left-nav .nav {
float: left;
width: 60px;
padding: 0 8px;
transition: all 0.75s ease;
transition-delay: 0.5s;
}
.left-nav .nav li {
margin: 4px 0px;
border-radius: 4px;
overflow: hidden;
width: 100%;
transition: all 0.75s ease;
transition-delay: 0.5s;
}
.left-nav .nav li:first-child {
margin-top: 10px;
}
.left-nav .nav li:hover {
cursor: pointer;
}
.left-nav .nav li a {
min-width: 140px;
width: 100%;
color: #8d9599;
background: none;
}
.left-nav .nav li a i {
margin-right: 20px;
}
.left-nav .nav li a:hover {
cursor: pointer;
}
.left-nav .nav li.active a {
background: #dce1e2;
color: #01374e;
}
.left-nav + .nav-cover {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background-color: #01374e;
opacity: 0;
transition: all 0.75s ease;
transition-delay: 0.5s;
}
.left-nav:hover {
width: 220px;
transition: all 0.75s ease;
transition-delay: 2s;
}
.left-nav:hover .profile-sec {
background: rgba(75, 199, 248, 1);
padding-top: 140px;
-webkit-box-shadow: inset 0 -70px 140px -80px rgba(23, 155, 204, 1);
box-shadow: inset 0 -70px 140px -80px rgba(23, 155, 204, 1);
transition: all 0.75s ease;
transition-delay: 2s;
}
.left-nav:hover .profile-sec .profile-pic {
top: 20px;
left: calc(50% - 50px);
width: 100px;
height: 100px;
transition: all 0.75s ease;
transition-delay: 2s;
-webkit-box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.2);
box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.2);
}
.left-nav:hover .profile-sec .profile-pic .profile-pic-img {
width: 100px;
height: 100px;
transition: all 0.75s ease;
transition-delay: 2s;
}
.left-nav:hover .profile-sec .profile-pic-bg-logo {
opacity: 1;
transition: all 0.75s ease;
transition-delay: 2s;
}
.left-nav:hover .profile-sec .profile-name {
opacity: 1;
transition: all 0.75s ease;
transition-delay: 2s;
}
.left-nav:hover .nav {
width: 100%;
transition: all 0.75s ease;
transition-delay: 2s;
}
.left-nav:hover .nav li {
width: 100%;
transition: all 0.75s ease;
transition-delay: 2s;
}
.left-nav:hover .nav li a:hover {
color: #01374e;
}
.left-nav:hover .nav li a:hover span {
color: #01374e;
}
.left-nav:hover .nav li:hover a {
background: #dce1e2;
}
.left-nav:hover .nav li.active:hover a {
background: #dce1e2;
color: none;
}
.left-nav:hover ~ .nav-cover {
z-index: 40;
opacity: 0.15;
transition: all 0.75s ease;
transition-delay: 2s;
}
/* *** End of "Nav" *** */
/* *** Start of "Header" *** */
.header {
float: left;
width: 100%;
height: 51px;
padding-left: 60px;
background: #01374e;
}
.logo {
float: left;
margin-top: 5px;
padding: 5px 15px;
color: #fff;
opacity: 0.5;
}
.header-btns {
float: right;
padding: 5px 15px;
}
.header-btns .dropdown-menu {
right: 0;
left: initial;
}
/* *** End of "Header" *** */
/* *** Start of "Main Page" *** */
.page {
float: left;
width: 100%;
height: calc(100% - 51px);
padding-left: 60px;
}
.content-header {
height: 45px;
padding: 0 20px 0 10px;
background-color: #01374e;
opacity: 0.9;
-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4), 0 -1px 4px 0 rgba(0, 0, 0, 0.15);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4), 0 -1px 4px 0 rgba(0, 0, 0, 0.15);
}
.page-title {
display: block;
float: left;
margin: 10px 0 0 5px;
width: 208px;
color: #fff;
font-size: 18px;
font-weight: 600;
}
.content-tabs {
display: block;
float: left;
width: calc(100% - 232px);
}
.content-tabs ul {
border: none;
}
.content-tabs ul li {
padding: 0 10px;
}
.content-tabs ul li a {
text-transform: uppercase;
color: #fff;
font-size: 14px;
font-weight: 600;
opacity: 0.75;
border: none;
}
.content-tabs ul li a:hover {
background: none;
border: none;
color: #fff;
opacity: 1;
}
.content-tabs ul li a:focus, .content-tabs ul li a:focus {
background: none;
border: none;
color: #fff;
}
.content-tabs ul li.active {
border-bottom: 4px solid #fff;
}
.content-tabs ul li.active a {
background: none;
border: none;
color: #fff;
opacity: 1;
}
.content-tabs ul li.active a:hover {
background: none;
border: none;
color: #fff;
opacity: 1;
}
.content-tabs ul li.active a:active, .content-tabs ul li.active a:focus {
background: none;
border: none;
color: #fff;
}
.main-content {
position: relative;
/* min-height: 350px; */
height: calc(100% - 45px);
}
/* Start of "Folders" */
.folders {
float: left;
padding: 0 15px;
margin-top: 42px;
width: 232px;
}
.folders .nav-pills li {
margin-top: 5px;
}
.folders .nav-pills li a {
display: block;
width: 100%;
height: 45px;
color: #2a3033;
font-size: 14px;
}
.folders .nav-pills li a i {
display: block;
float: left;
width: 35px;
margin-top: 4px;
}
.folders .nav-pills li a .folder-title {
display: block;
float: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100px;
}
.folders .nav-pills li a .folder-count {
display: block;
float: right;
width: 30px;
text-align: right;
}
.folders .nav-pills li a:hover {
background: #dce1e2;
}
.folders .nav-pills li.new-folder-btn {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin-top: 0px;
}
.folders .nav-pills li.new-folder-btn a:hover {
color: #4bc7f8;
background: none;
}
.folders .nav-pills li.active a {
font-weight: 600;
background: #dce1e2;
}
.folders .nav-pills li.active a i.fa-folder::before {
content: "\f07c";
}
.folders .nav-pills li.active a:hover, .folders .nav-pills li.active a:focus, .folders .nav-pills li.active a:active {
color: #2a3033;
}
.folders .nav-pills li.new-folder-btn a {
background: transparent;
font-weight: 400;
}
/* End of "Folders" */
.folder-title-assets {
display: block;
float: left;
height: 30px;
margin: 5px 0;
}
.folder-title-assets > button {
/* Abc */
}
.folder-title-assets span {
display: inline-block;
color: #01374e;
font-size: 16px;
font-weight: 600;
}
/* Start of "Assets" */
.assets {
float: left;
width: calc(100% - 232px);
height: calc(100% - 65px);
}
.assets .tab-content {
overflow-y: scroll;
height: 100%;
background: #fff;
margin-right: 40px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4), 0 -1px 4px 0 rgba(0, 0, 0, 0.15);
}
.assets .tab-content .tab-pane ul {
list-style: none;
margin: 0;
padding: 0;
}
.assets .tab-content .tab-pane ul li {
display: table;
width: 100%;
}
.assets .tab-content .tab-pane ul li:hover {
cursor: pointer;
background: rgba(75, 199, 248, 0.1);
}
.assets .tab-content .tab-pane ul li .asset-icon {
float: left;
width: 70px;
text-align: center;
padding-top: 15px;
}
.assets .tab-content .tab-pane ul li .asset-icon i {
font-size: 34px;
color: #01374e;
}
.assets .tab-content .tab-pane ul li .asset-text {
position: relative;
float: left;
width: calc(100% - 70px);
border-bottom: 1px solid #ccc;
color: #2a3033;
}
.assets .tab-content .tab-pane ul li .asset-text .asset-title {
font-size: 14px;
font-weight: 600;
color: #2a3033;
margin: 12px 0 0;
}
.assets .tab-content .tab-pane ul li .asset-text .asset-sharing-text {
font-size: 12px;
font-weight: 400;
color: #2a3033;
margin: 0 0 12px;
height: 17px;
}
.assets .tab-content .tab-pane ul li .asset-text .asset-btn {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
width: 50px;
text-align: center;
color: #2a3033;
}
.assets .tab-content .tab-pane ul li .asset-text .asset-btn input {
position: absolute;
display: block;
z-index: 10;
right: 0px;
top: 0;
left: 0;
bottom: 0;
margin: 0;
width: 50px;
height: 80px;
opacity: 0;
}
.assets .tab-content .tab-pane ul li .asset-text .asset-btn input:hover {
cursor: pointer;
}
.assets .tab-content .tab-pane ul li .asset-text .asset-btn input:checked + label i::before {
content: "\f005";
}
.assets .tab-content .tab-pane ul li .asset-text .asset-btn label {
padding-top: 10px;
font-size: 18px;
color: #2a3033;
}
/* End of "Assets" */
/* *** End of Main Page *** */
/* *** Start of Buttons *** */
a:hover, button:hover, .nav li:hover {
cursor: pointer;
}
.search {
position: relative;
display: inline-block;
float: left;
text-align: right;
margin: 1px 0px 0px 0px;
padding-right: 0px;
/* border-bottom: 1px solid $rgba-white; */
}
.search input {
width: 170px;
height: 32px;
padding: 0 35px 0 10px;
border: none;
border-radius: 4px;
background: transparent;
transition: all 0.3s ease;
color: #fff;
}
.search input:active, .search input:focus {
background: rgba(255, 255, 255, 0.5);
border: none;
outline: none;
transition: all 0.3s ease;
}
.search input:active ~ .search-underline, .search input:focus ~ .search-underline {
background: rgba(255, 255, 255, 0.0);
}
.search .search-icon {
position: absolute;
top: 6px;
right: 15px;
color: #fff;
opacity: 0.5;
}
.search .search-icon:hover {
cursor: pointer;
}
.search .search-underline {
display: block;
position: absolute;
height: 1px;
width: 150px;
top: 31px;
right: 10px;
background: rgba(255, 255, 255, 0.5);
}
.fab-btn-sec {
position: absolute;
display: block;
top: -30px;
right: 30px;
width: 60px;
height: 60px;
text-align: center;
z-index: 10;
}
.fab-btn-sec .fab-btn {
display: block;
margin: 0 auto 10px;
background: #4bc7f8;
color: #fff;
width: 60px;
height: 60px;
border-radius: 100%;
text-align: center;
padding: 12px 0;
font-size: 26px;
-webkit-box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.4);
box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.4);
transition: all 0.3s ease;
}
.fab-btn-sec .fab-btn:hover {
background: #26aad3;
color: #fff;
transition: all 0.3s ease;
}
.fab-btn-sec .fab-sm {
width: 40px;
height: 40px;
padding: 6px 0;
font-size: 18px;
transform: scale(0);
/* Animation */
animation-name: bounce-out;
animation-duration: 0.3s;
animation-fill-mode: forwards;
animation-delay: 0s;
}
.fab-btn-sec:hover {
height: 170px;
z-index: 100;
}
.fab-btn-sec:hover .fab-sm {
-webkit-animation-name: bounce-in;
/* Chrome, Safari, Opera */
-webkit-animation-duration: 0.3s;
/* Chrome, Safari, Opera */
-webkit-animation-fill-mode: forwards;
/* Chrome, Safari, Opera */
-webkit-animation-delay: 0s;
/* Chrome, Safari, Opera */
animation-name: bounce-in;
animation-duration: 0.3s;
animation-fill-mode: forwards;
animation-delay: 0s;
}
.fab-btn-sec:hover .fab-sm + .fab-sm {
animation-delay: 0.1s;
}
/* Standard syntax */
@keyframes bounce-in {
0% {
transform: scale(0);
}
60% {
transform: scale(1.05);
}
75% {
transform: scale(0.98);
}
90% {
transform: scale(1.005);
}
100% {
transform: scale(1);
}
}
/* Standard syntax */
@keyframes bounce-out {
0% {
transform: scale(1);
}
60% {
transform: scale(1.05);
}
100% {
transform: scale(0);
}
}
.btn-group button {
background: none;
border: none;
border-radius: 4px;
min-width: 30px;
color: #2a3033;
transition: all 0.3s ease;
}
.btn-group button:hover, .btn-group button:active, .btn-group button:focus {
background: transparent;
border: none;
box-shadow: none;
}
.btn-group ul {
padding: 0 5px 5px;
}
.btn-group ul li {
margin-top: 5px;
}
.btn-group ul li a {
padding: 6px 30px 6px 10px;
transition: all 0.3s ease;
}
.btn-group ul li a:hover {
background: #f0f1f3;
color: #2a3033;
transition: all 0.3s ease;
}
.btn-group.open button.dropdown-toggle {
background: #dce1e2;
border: none;
box-shadow: none;
transition: all 0.3s ease;
}
.header-btns .btn-group {
display: inline-block;
float: left;
}
.header-btns .btn-group button {
background: transparent;
border: none;
color: #fff;
opacity: 0.5;
}
.header-btns .btn-group button:hover {
opacity: 0.75;
}
.header-btns .btn-group.open button.dropdown-toggle {
background: transparent;
color: #fff;
opacity: 1;
}
/* *** End of Buttons *** */
/* CSS Class Order */
/*
position
display
float
overflow
top
right
bottom
left
width
height
margin
padding
text-align
font-family
font-size
font-weight
background-color
color
border
border-radius
box-shadow
opacity
transition
transition-delay
z-index
*/