<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>New Project</title>
<meta name="description" content="description coming soon">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />
<!-- Net & jQuery library -->
<link href="https://fonts.googleapis.com/css?family=Oxygen" rel="stylesheet">
<script src='https://use.fontawesome.com/releases/v5.0.6/js/all.js'></script> <!-- User Icon -->
<!-- Local-->
<link href="css/styles.css" rel="stylesheet" type="text/css">
<!-- slick css-->
<link rel="stylesheet" type="text/css" href="slick/slick.css">
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css">
<link rel='stylesheet' href='http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Fonts-->
<link href='https://fonts.googleapis.com/css?family=Karla' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet'>
</head>
<body>
<div class="Navbar" id="nav">
<div class="nav-wrapper">
<ul class="main_navigation" role="navigation">
<li class="hamburger" id="togglebutton">
<a href="javascript:void(0);" onclick="toggle_menu()">
<div class="bar1 bg2"></div>
<div class="bar2 bg2"></div>
<div class="bar3 bg2"></div>
</a>
</li>
<li class="main-logo txt2"><a href="#home"><i class="fas fa-chess-knight"></i> Brand</a></li>
<li class= "link txt2 Features">Features</li>
<li class= "link txt2">Service</li>
<li class= "link txt2">About</li>
<li class= "link txt2">Contact</li>
<li class="txt5 mobile-user nav-item">
<i class="fas fa-user"></i>
</li>
<li class= "signup txt5">Get started</li>
<li class ="signin txt5">
<button type="submit" class="Navbar__Link buttonstyle2 txt-color1">
<a>
<i class="fas fa-sign-in-alt"></i>
Sign in
</a>
</button>
</li>
</ul>
</div>
</div>
<!-- overlay -->
<div id="myNav" class="overlay">
<div class="overlay-content">
<div class="searchContainer cf">
<input class="searchBox" type="search" name="search" placeholder="Search the site...">
<button type="submit" class="searchButton">Search</button>
</div>
<div class="link-container">
<div class="overlay-link">
<a><i class="fas fa-user"></i></a>
Login
</div>
<div class="overlay-link">
<a><i class="fas fa-home"></i></a>
Home
</div>
<div class="overlay-link">
<a><i class="fas fa-cogs"></i></a>
Service
</div>
<div class="overlay-link">
<a><i class="fas fa-info-circle"></i></a>
About
</div>
<div class="overlay-link">
<a><i class="fas fa-address-book"></i></a>
Contact
</div>
<div class="overlay-link">
<a><i class="fas fa-star"></i></a>
More
</div>
</div>
</div>
</div>
<!--Slick Slider -->
<div class="Modern-Slider">
<div class="Gallery-Slider">
<!-- The Slider --->
<!-- Item -->
<div class="item">
<div class="img-fill">
<img src="https://i.imgur.com/JNKiMHU.jpg" alt="">
<div class="info">
<h3>Seed money rockstar beta</h3>
<p>
Seed money rockstar beta conversion stealth creative www.discoverartisans.com. Seed round iteration long tail product management churn rate buzz sales social proof growth hacking influencer. Ecosystem android assets partner network. Alpha value proposition validation. User experience infrastructure termsheet interaction design sales business-to-consumer ramen </p>
</div>
</div>
</div>
<!-- // Item -->
<!-- Item -->
<div class="item">
<div class="img-fill">
<img src="https://i.imgur.com/ESMjChq.jpg" alt="">
<div class="info">
<h3>Seed money rockstar beta</h3>
<p>
Seed money rockstar beta conversion stealth creative www.discoverartisans.com. Seed round iteration long tail product management churn rate buzz sales social proof growth hacking influencer. Ecosystem android assets partner network. Alpha value proposition validation. User experience infrastructure termsheet interaction design sales business-to-consumer ramen </p>
</div>
</div>
</div>
<!-- // Item -->
<!-- Item -->
<div class="item">
<div class="img-fill">
<img src="https://i.imgur.com/TDxSvHH.jpg" alt="">
<div class="info">
<h3>Seed money rockstar beta</h3>
<p>
Seed money rockstar beta conversion stealth creative www.discoverartisans.com. Seed round iteration long tail product management churn rate buzz sales social proof growth hacking influencer. Ecosystem android assets partner network. Alpha value proposition validation. User experience infrastructure termsheet interaction design sales business-to-consumer ramen </p>
</div>
</div>
</div>
<!-- // Item -->
</div>
<div class="Slick-Navigation">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js/index.js" type="text/javascript"></script>
<script src="slick/slick.min.js" type="text/javascript"></script>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src='https://kenwheeler.github.io/slick/slick/slick.js'></script>body {
margin: 0;
font-family: 'Lora';
font-size: 1.1em;
background: #F7F5E6;
}
html, body {margin: 0; height: 100%; overflow: hidden}
a {
color: inherit;
font-family: inherit;
font-size: inherit;
text-decoration: none;
font-size: 0.9em;
}
a:hoover {
text-decoration: none;
color: white;
}
a:hover, a:visited, a:link, a:active
{
text-decoration: none;
color: white;
}
/* http://paletton.com/export/index.php */
/* Text Color Classes */
.txt-color0, .txt0 a, .txt00 li a , .txt0 li .txt0 li a{
color: rgba(232,232,232,1) !important; /* White */
}
.primary1, .txt1, .txt1 a, .txt1 li, .txt1 li a {
color: #4E6D9C !important;
}
.primary2, .txt2 , .txt2 a, .txt2 li, .txt2 li a {
color: #335485 !important; /* Darker */
}
.primary3, .txt3, .txt3 a,.txt3 li, .txt3 li a {
color: #1E406E !important; /* Darkest */
}
.primary4, .txt4, .txt4 a, .txt4 li, .txt4 li a {
color: #7691B9 !important; /* Lighter */
}
.primary5, .txt5, .txt5 a, .txt5 li, .txt5 li a {
color: #AABDDA !important; /* Lightest */
}
.complement1, .txt6, .txt6 a, .txt6 li, .txt6 li a {
color: #ECD26B !important; /* Lightest */
}
.complement2, .txt7, .txt7 a, .txt7 li, .txt7 li a {
color: #ED9E6B !important; /* Lightest */
}
:root {
--colorW: rgba(232,232,232,1);
--colorB: #333;
--color-2: #1E406E; /* Darkest */
--color-1: #335485; /* Darker */
--color0: #4E6D9C; /* Primary */
--color1: #7691B9; /* Lighter */
--color2: #AABDDA /* Lightest */
--color3: #ECD26B; /* Complement Color */
--color4: #ED9E6B; /* Complement Color */
}
.bgW { background: rgba(232,232,232,1) !important; }
.bgB { background: #333 !important; }
.bg-2 { background: #1E406E !important; }
.bg-1 { background: #335485 !important; }
.bg0 { background: #4E6D9C !important; }
.bg1 { background: #7691B9 !important; }
.bg2 { background: #AABDDA !important; }
.bg3 { background: #ECD26B !important; }
.bg4 { background: #ED9E6B !important; }
.txtW , txtW a { color: rgba(232,232,232,1) !important; }
.txtB, .txtB a { color: #333 !important; }
.txt-2, .txt-2 a { color: #1E406E !important; }
.txt-1, .txt-1 a { color: #335485 !important; }
.txt0, .txt0 a { color: #4E6D9C !important; }
.txt1, .txt1 a { color: #7691B9 !important; }
.txt2, .txt2 a { color: #AABDDA !important; }
.txt3, .txt3 a { color: #ECD26B !important; }
.txt4, .txt4 a { color: #ED9E6B !important; }
/* End */
.Navbar {
display: flex;
justify-content: center;
align-items: center;
position: fixed; /* Stay in place */
height: 60px;
z-index: 2;
position: relative; /* Stay in place */
width: 100%;
flex-direction: row;
border-top: 1px solid #a2a2a2;
background-color: #4E6D9C;
/*background: -webkit-linear-gradient(top, rgba(232,232,232,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); */
background-color: var(--color-1);
-webkit-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
border-bottom: 4px solid #7691B9;
box-shadow:
0px 20px 15px -10px rgba(1,1,1,0.2);
}
.nav-wrapper {
text-align: center;
width: 80%;
}
ul {
padding: 0;
list-style: none;
}
.main_navigation {
display: flex;
height: 46px;
align-items: center;
padding: 0 10px;
font-size: 0.9em;
}
.main_navigation a {
}
.link {
padding: 0 10px;
border-left: 1px solid #AABDDA;
box-shadow: -1px 0px 0px 0px rgba(118,145,185,0.45);
}
.main-logo {
margin-right: 20px;
position: relative;
}
.main-logo a {
font-size: 1.8em;
}
.signup {
margin-left: auto;
}
.Features {
position: relative;
}
.signin a {
color: #7E97BB;
}
.hamburger, .mobile-user {
display: none;
}
.mobile-user {
font-size: 2em;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
margin: 6px 0;
transition: 0.4s;
border-radius: 4px;
}
.bar2 {transition: 0.3s; }
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
position: relative;
width: 0;
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
.Signup a {
color: white !important;
font-size: 14px;
}
.buttonstyle2 a {
font-size: 14px;
}
.Signup:hover {
background-color: #335485 !important;
box-shadow:
3px 3px 0px 0px #335485,
-3px -3px 0px 0px #335485,
3px -3px 0px 0px #335485,
-3px 3px 0px 0px #335485;
}
.Signup .fa-user, .fa-sign-in-alt {
font-size: 15px ;
}
.buttonstyle2 {
margin-left: 15px;
background: rgba(78,109,156,0);
border: 1px solid #7E97BB;
border-radius: 5px;
transition: 0.4s !important;
height: 35px;
padding-left: 15px;
padding-right: 15px;
color: #6155A4;
}
.buttonstyle2:Hover {
background-color: rgba(230,230,230,1);
}
/* Ipad Pro*/
@media only screen and (max-width: 1024px) {
.nav-wrapper {
width: 100%;
}
}
/* mobile/tablet version*/
@media only screen and (max-width: 768px) {
.Navbar__Items, .Navbar , .nav-wrapper {
}
.nav-wrapper {
width: 100%;
}
.Navbar {
padding-left: 0px;
padding-right: 0px;
}
.hamburger, .mobile-user {
display: flex;
}
.link, .signup, .signin {
display: none;
}
.main-logo {
margin-left: auto;
margin-right: auto;
}
}
@media only screen and (min-width: 769px) {
.Modern-Slider .Gallery-Slider:hover .PrevArrow {
opacity: 1 !important;
}
.Modern-Slider .Gallery-Slider:hover .NextArrow {
opacity: 1;
}
}
.site-navigation div {
/* -webkit-transition: width 2s; */
/* transition: 2s; */
}
.site-navigation div:hover {
color: rgb(28, 121, 184);
}
/* Animated Bottom Line */
.site-navigation div:after {
content: '';
position: relative;
display: block;
width: 0;
height: 2px;
top: 0px;
background: rgb(28, 121, 184);
transition: width .5s;
}
.site-navigation div:hover::after {
width: 100%;
//transition: width .3s;
}
/* Overlay */
.overlay {
height: 100%;
margin-top: 60px; /* Magic number */
width: 100%;
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: -100%;
top: 0;
background-color: #f1f1f1;
overflow-x: hidden; /* Disable horizontal scroll */
transition: left 0.5s;
}
.overlayopen {
width: 100%;
height: 100%;
left: 0;
}
/* Position the content inside the overlay */
.overlay-content {
margin-top: 8px; /* Magic number */
position: relative;
width: 100%; /* 100% width */
color: #1E406E;
}
/* Search Container */
.searchContainer {
display: inline-flex;
justify-content: Center;
width: 96%;
margin-left: 2%;
margin-bottom: 20px;
position: relative;
flex-direction: row;
padding: 2px 5px;
overflow: hidden;
background:#f4f4f4;
background:rgba(244,244,244,.79);
border: 1px solid #d3d3d3;
box-shadow:0 4px 9px rgba(0,0,0,.37);
-moz-box-shadow:0 4px 9px rgba(0,0,0,.37);
-webkit-box-shadow:0 4px 9px rgba(0,0,0,.37);
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px
}
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
.searchContainer input {
background:#fefefe;
border: none;
font:12px/12px 'HelveticaNeue', Helvetica, Arial, sans-serif;
margin-right: 5px;
padding: 10px;
width: 216px;
box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75);
-moz-box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75);
-webkit-box-shadow: 0 0 4px rgba(0,0,0,.4) inset, 1px 1px 1px rgba(255,255,255,.75);
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px
}
.searchContainer input:focus {
outline: none;
box-shadow:0 0 4px #0d76be inset;
-moz-box-shadow:0 0 4px #0d76be inset;
-webkit-box-shadow:0 0 4px #0d76be inset;
}
.searchContainer input::-webkit-input-placeholder {
font-style: italic;
line-height: 15px
}
.searchContainer input:-moz-placeholder {
font-style: italic;
line-height: 15px
}
.searchIcon {
padding: 15 15 15 15;
margin-right: 10px;
}
.searchBox {
border: 0;
padding: 0.5rem 0.5rem 0.5rem 0;
flex: 1;
}
.searchButton {
background: rgb(30,64,110);
border: none;
color:#fff;
cursor: pointer;
font: 13px/13px 'HelveticaNeue', Helvetica, Arial, sans-serif;
padding: 10px;
width:106px;
box-shadow: 0 0 2px #2692dd inset;
-moz-box-shadow: 0 0 2px #2692dd inset;
-webkit-box-shadow: 0 0 2px #2692dd inset;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
}
/* END Search Container */
.link-container {
display: flex; /* or inline-flex */
flex-wrap: wrap;
justify-content: Center;
}
.overlay-link {
border: 1px solid #4E6D9C;
width: 32%;
height: 110px;
font-size: 14px;
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
line-height: 30px;
}
.overlay-link:hover {
background: #AABDDA;
}
.overlay-link a:hover {
color: #1E406E;
}
.overlay-link:nth-child(1) {
border-bottom: none;
border-top-left-radius: 5px;
}
.overlay-link:nth-child(2) {
border-left: none;
border-bottom: none;
}
.overlay-link:nth-child(3) {
border-left: none;
border-bottom: none;
border-top-right-radius: 5px;
}
.overlay-link:nth-child(4) {
border-bottom-left-radius: 5px;
}
.overlay-link:nth-child(5) {
border-left: none;
}
.overlay-link:nth-child(6) {
border-left: none;
border-bottom-right-radius: 5px;
}
/* The navigation links inside the overlay */
.overlay-link a {
text-decoration: none;
font-size: 28px !important;
display: block; /* Display block instead of inline */
font-size: 1.0em;
letter-spacing: 1.2px;
font-family: 'Oxygen' ;
}
@media screen and (min-width:769px){
.overlayopen{display:none;}
}
/* Slick Slider */
/* ==== Main CSS === */
body{padding:0;margin:0;}
.img-fill {
width: 100%;
display: block;
overflow: hidden;
position: relative;
text-align: center
}
.img-fill img {
height: 100%;
min-width: 100%;
position: relative;
display: inline-block;
max-width: none
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.04);
}
.Grid1k {
padding: 0 15px;
max-width: 1200px;
margin: auto;
}
.blocks-box,
.slick-slider {
margin: 0 0;
padding: 0!important;
}
.slick-slide {
float: left /* If RTL Make This Right */ ;
padding: 0px;
}
/* ==== Slider Style === */
.Modern-Slider{
position:relative;
}
.Gallery-Slider {
position: relative;
overflow: hidden;
background: red;
}
.Modern-Slider .Gallery-Slider {
background: #000;
}
.Modern-Slider .NextArrow{
position:absolute;
top:50%;
right:0px;
width:45px;
height:45px;
background:rgba(0,0,0,.50);
background:rgba(78, 109, 156,.20);
border:0 none;
margin-top:-22.5px;
text-align:center;
font:20px/45px FontAwesome;
color:#FFF;
z-index:5;
transition: all 1s;
opacity: 0;
}
.Modern-Slider .NextArrow:before{content:'\f105';}
.Modern-Slider .PrevArrow{
position:absolute;
top:50%;
left:0px;
width:45px;
height:45px;
background:rgba(0,0,0,.50);
background:rgba(78, 109, 156,.20);
border:0 none;
margin-top:-22.5px;
text-align:center;
font:20px/45px FontAwesome;
color:#FFF;
z-index:5;
opacity: 0;
transition: all 1s;
}
.Modern-Slider .PrevArrow:before{content:'\f104';}
.Modern-Slider .Gallery-Slider .img-fill {
/* height: 50vh; /* Removed */
background:#000;
max-height: 440px; /* Added */
display: flex !important; /* Added */
justify-content: center; /* Added */
}
.Modern-Slider .img-fill:before {
content: '';
display: block;
width:100%;
height:100%;
top:0px;
left:0px;
z-index:2;
background:rgba(0,0,0,.50);
position: absolute;
}
.Modern-Slider .img-fill img{
filter:blur(5px);
}
.Modern-Slider .img-fill .info {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
z-index:3;
top:25%;
padding:0 20px;
}
.Gallery-Slider .Slick-Gallery:hover .NextArrow {
opacity: 1;
}
.NextArrow:hover, .PrevArrow:hover {
width: 50px;
}
.NextArrow:focus, .PrevArrow:focus{
outline:0;
}
.Modern-Slider .img-fill h3{
font:22px/50px RalewayB;
color:#FFF;
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
visibility:hidden;
text-transform:uppercase;
}
.Modern-Slider .img-fill p{
max-width:650px;
margin:auto;
margin-top:15px;
font:14px/22px NeoSansR;
color:#FFF;
height:66px;
text-align:justify;
overflow:hidden;
visibility:hidden;
text-transform:capitalize;
}
.Modern-Slider .slick-active h3{
animation:fadeInDown 1s both 0.5s;
visibility:visible;
}
.Modern-Slider .slick-active p{
animation:fadeInUp 1s both 1s;
visibility:visible;
}
.Modern-Slider .slick-dots{
position:absolute;
height:50px;
top:8px;
width:100%;
left:0px;
padding:0px;
margin:0px;
list-style-type:none;
text-align:center;
}
.Modern-Slider .slick-dots li{
display:inline-block;
width:15px;
height:15px;
background:Transparent;
-webkit-transition:all 0.5s;
transition:all 0.5s;
-webkit-border-radius:50%;
border-radius:50%;
border:2px solid #FFF;
margin:0 2.5px;
cursor:pointer;
position:relative;
}
.Modern-Slider .slick-dots li.slick-active{
background:#fff;
-webkit-box-shadow:inset 0 0 0 2px rgba(0,0,0,.28);
box-shadow:inset 0 0 0 2px rgba(0,0,0,.28);
}
.Modern-Slider .slick-dots li a{
position:absolute;
bottom:100%;
left:50%;
width:120px;
height:75px;
display:block;
visibility:hidden;
border:4px solid rgba(0,0,0,.50);
margin-left:-60px;
margin-bottom:15px;
-webkit-transition:visibility 0.5s linear 0.5s;
transition:visibility 0.5s linear 0.5s;
-webkit-animation:fadeOut 0.5s both;
animation:fadeOut 0.5s both;
}
.Modern-Slider .slick-dots li a:after{
content:'';
position:absolute;
left:50%;
margin-left:-8px;
top:100%;
width:0;
height:0;
border:8px solid Transparent;
border-top-color:rgba(0,0,0,.50);
margin-top:4px;
}
.Modern-Slider .slick-dots li:hover a{
visibility:visible;
-webkit-transition-delay:0s;
transition-delay:0s;
-webkit-animation:fadeIn 0.5s both;
animation:fadeIn 0.5s both;
}
.Modern-Slider .slick-dots li a img{
width:100%;
height:100%;
}
.Slick-Navigation {
background:rgba(78, 109, 156,.20);
/*background: linear-gradient(to bottom, #1E406E 0%,#4E6D9C 100%); W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
border-top: 1px dashed rgba(78, 109, 156,.60);
position: relative;
height: 40px;
top: -70px;
}
/* ==== Slick Slider Css Ruls === */
.slick-slider{position:relative;display:block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}
.slick-list:focus{outline:none}.slick-list.dragging{cursor:hand}
.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.slick-track{position:relative;top:0;left:0;display:block}
.slick-track:before,.slick-track:after{display:table;content:''}.slick-track:after{clear:both}
.slick-loading .slick-track{visibility:hidden}
.slick-slide{display:none;float:left /* If RTL Make This Right */ ;height:100%;min-height:1px}
.slick-slide.dragging img{pointer-events:none}
.slick-initialized .slick-slide{display:block}
.slick-loading .slick-slide{visibility:hidden}
.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}
function toggle_menu() {
const navs = document.querySelectorAll('.site-navigation')
var element = document.getElementById("togglebutton");
$(".site-navigation").toggleClass("mobilenav");
$(".nav-wrapper").toggleClass("mobile-wrap");
$(".overlay").toggleClass("overlayopen");
navs.forEach(nav => nav.classList.toggle('Navbar__ToggleShow'));
element.classList.toggle('change');
}
function toggleanimation(x) {
x.classList.toggle("change");
}
$(document).ready(function() {
$(".Gallery-Slider").slick({
autoplay: true,
autoplaySpeed:9000,
speed:700,
mobileFirst: true,
slidesToShow:1,
slidesToScroll:1,
pauseOnHover:false,
dots:true,
appendDots:$(".Slick-Navigation"),
respondTo:'min',
cssEase:'linear',
prevArrow:'<button class="PrevArrow "></button>',
nextArrow:'<button class="NextArrow"></button>',
})
})
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.