Code Pasta

Untitled

3 years ago in HTML

                            <!DOCTYPE html>
<!--PAGE THEME #08: DEJA VU by @nonspace.
 Don't steal.
 Don't claim as your own.
 Don't use as base code.
 Editing for personal use is fine!-->
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <link rel="icon" type="image/png" href="{Favicon}">
 <title>{Title}</title>
 <!--FONTS-->
 <link href="https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,700,700i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Chivo:400,400i,700|Playfair+Display:400,400i,700,700i|Roboto+Slab:400,700|Source+Code+Pro:400,700&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
 <!--FONT AWESOME-->
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" crossorigin="anonymous">
 <!--JQUERY-->
 <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
 <!--You can find all color settings at the beginning of the style tag.
 All of the colors and some other details are changeable through this 
 variables.
 Hopefully that makes it easier to customise!
 If you want individual colors per tab/character you will need to 
 enable it below in "Color per tab toggle". This is disabled by default.
 To add more tabs:
 1. Copy/paste a new entry within the navigation. 
 I've marked what you need to copy. You can search for "Copy here". Change the 'data-tab' to #tab-x (x being a number not used before, 
 e.g. tab-6)
 2. Copy/paste a new tab. Important! Make sure your new tab does NOT have the 'current' class; change its ID to tab-x (see above 
 (they must match!!) e.g. tab-6),
 -->
 
 <!--COLOR PER TAB TOGGLE-->
 <script type="text/javascript">
 /*This lets you enable/disable different colors per tab.
 true = enabled, false =disabled*/
 var colorPerTab = false;
 </script>
 <style>
/*SETTINGS & COLORS*/
:root {
 /*colors*/
 --accentColorOne: #FF4B2B;
 --accentColorTwo: #FF416C;
 
 /*color per tab if enabled above*/
 --accentColorOne-1: #FFF;
 --accentColorTwo-1: #FFF;
 --accentColorOne-2: #FFF;
 --accentColorTwo-2: #FFF;
 --accentColorOne-3: #FFF;
 --accentColorTwo-3: #FFF;
 --accentColorOne-4: #FFF;
 --accentColorTwo-4: #FFF;
 --accentColorOne-5: #FFF;
 --accentColorTwo-5: #FFF;
 
 --colorOne: #1e1e1e;
 --colorTwo: #111;
 --fontColor: #1e1e1e;
 --sidebar: #1e1e1e;
 --borderColor: #bbb;
 /*misc*/
 --fontOne: 'Montserrat';
 --fontTwo: 'Chivo';
 --sidebarPrefix: 'x ';
 --gallery: 100px; /*to disable gallery on all tabs set to 0*/
 /*status*/
 /*by adding active, other or closed as a class to the
 nav li you can change the color of the right border.
 e.g. to indicate the status of the item*/
 --active: #36b276;
 --other: #ffab33;
 --closed: #dd4b39;
}
nav ul li.active {
 border-color: var(--active);
}
nav ul li.other {
 border-color: var(--other);
}
nav ul li.closed {
 border-color: var(--closed);
}
/*GENERAL*/
*{
 box-sizing: border-box;
 padding: 0;
 margin: 0;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-rendering: optimizeLegibility;
}
body {
 font-family: var(--fontOne);
 color: #1e1e1e;
}
.chivo-dark {
 font-family: var(--fontTwo);
 text-transform: uppercase;
 background: #111;
 color: #fff;
}
/*titles*/
h2, h3 {
 font-weight: normal;
 letter-spacing: 4px;
 font-size: 16px;
 text-align: center;
 padding: 20px;
}
h2 {
 font-size: 18px;
 border-bottom: 5px solid #222;
}
.content h3 {
 background: none;
 color: var(--fontColor);
 text-align: left;
 padding: 0 20px 0 0;
}
/*LAYOUT*/
#wrapper {
 position: relative;
 height: 100vh;
 width: 100vw;
 display: flex;
 overflow-y: hidden;
}
nav {
 background: var(--sidebar);
 color: #fff;
 font-size: 16px;
 width: 250px;
 min-width: 250px;
 overflow-y: auto;
 padding-bottom: 80px;
}
/*menu button*/
#close {
 position: absolute;
 top: 0;
 left: 245px;
 color: var(--fontColor);
 padding: 10px 20px;
 background: #fff;
 font-size: 28px;
 cursor: pointer;
 z-index: 999;
}
#close:before {
 position: relative;
 font-family: "Font Awesome 5 Free";
 font-weight: 900;
}
#close.x {
 background: none;
 color: #fff;
}
nav h2 {
 position: relative;
 z-index: 99;
}
/*navigation*/
nav ul {
 padding-top: 0;
 position: absolute;
 width: 335px;
 top: 0px;
 height: 100%;
 overflow-y: auto;
 padding-bottom: 0;
 z-index: 3;
}
nav ul::-webkit-scrollbar {
 position: relative;
 margin-top: -65px;
 width: 5px;
 height: 8px;
 background-color: #f8f8f8;
}
nav ul::-webkit-scrollbar-thumb {
 background: var(-accentColorOne); 
 background: -webkit-linear-gradient(to bottom, var(--accentColorOne), var(--accentColorTwo)); /* Chrome 10-25, Safari 5.1-6 */
 background: linear-gradient(to bottom, var(--accentColorOne), var(--accentColorTwo)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
nav ul li {
 list-style-type: none;
 background: #222;
 display: flex;
 padding: 0 0px;
 width: 250px;
 height: 60px;
 margin: 10px 0;
 border-right: 5px solid var(--sidebar);
}
nav ul li span:before, .headline ul li:before {
 content: var(--sidebarPrefix);
 text-transform: lowercase;
}
/*current list item*/
nav ul li.current, nav ul li:hover {
 position: relative;
 background: #f8f8f8;
 color: var(--fontColor);
 cursor: pointer;
 transform: scale(1.03,1.05);
 transform-origin: left;
 border: none;
}
nav ul li img {
 height: 60px;
 width: 60px;
 object-fit: cover;
 filter: grayscale(100%);
}
nav ul li div {
 padding: 0 10px;
 align-self: center;
}
nav ul li span {
 display: block;
 font-style: italic;
 color: #999;
 font-size: 14px;
}
main {
 position: relative;
 background: #f8f8f8;
 flex: 1;
}
/*tab*/
.tab {
 position: relative;
 width: 100%;
 height: 100%;
 display: none;
 -webkit-animation-duration: 0.8s;
 animation-name: fadeIn;
 animation-duration: 0.8s;
}
.tab.current {
 display: flex;
}
/*tab link bar*/
.bar {
 position: relative;
 width: 80px;
 height: 100%;
 background: #FF416C; /* fallback for old browsers */
 background: -webkit-linear-gradient(to bottom, var(--accentColorOne), var(--accentColorTwo)); /* Chrome 10-25, Safari 5.1-6 */
 background: linear-gradient(to bottom, var(--accentColorOne), var(--accentColorTwo)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 display: flex;
 flex-direction: column;
}
.bar-links {
 position: relative;
 flex: 2;
 margin: 80px auto 10px;
 z-index: 4;
}
.bar-links li {
 list-style-type: none;
 padding-bottom: 20px;
}
.bar-links li a {
 color: #fff /*#1e1e1e*/;
 font-size: 21px;
}
.bar-bottom {
 position: relative;
 flex: 1;
 text-align: center;
 color: #fff;
 font-size: 12px;
 margin: 20px auto 20px;
}
.rotate {
 position: absolute;
 bottom: 0;
 font-family: var(--fontTwo);
 letter-spacing: 4px;
 text-transform: uppercase;
 display: block;
 width: 100%;
 transform: rotate(-90deg);
}
/*detail bar*/
.stats {
 position: relative;
 width: 250px;
 height: 100%;
 display: flex;
 flex-direction: column;
 z-index: 2;
}
.stats span {
 text-align: right;
}
.picture {
 position: relative;
 height: 250px;
}
.picture img {
 object-fit: cover;
 height: 250px;
 width: 250px;
}
.details {
 position: relative;
 background: #eee;
 flex: 1;
 overflow: hidden;
}
.details ul {
 padding: 10px 20px;
 height: 100%;
 overflow: auto;
}
.details ul li {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 8px 0px;
 border-bottom: 1px dashed #1e1e1e;
}
.details ul li:last-child {
 border-bottom: none;
}
.details i {
 font-family: var(--fontTwo);
 font-style: normal;
 text-transform: uppercase;
 font-size: 15px;
 width: 80px;
 word-break: break-word;
}
/*inner tab content*/
.info {
 position: relative;
 background: #fff;
 height: 600px;
 max-width: 950px;
 align-self: center;
 flex: 1;
 display: flex;
 overflow: hidden;
 margin: auto 0;
}
.content {
 position: relative;
 flex: 1;
 display: flex;
 padding: 25px 40px;
 flex-direction: column;
}
.row-1, .row-2 {
 position: relative;
 display: flex;
 padding: 15px 0;
 flex: 1;
 overflow: hidden;
 align-items: center;
}
.row-1 {
 border-bottom: 1px dashed var(--borderColor);
}
.headline {
 min-width: 150px;
 word-break: break-word;
}
.headline ul {
 margin: 15px 0px;
}
.headline li {
 list-style-type: none;
 padding: 2px;
 margin: 3px;
 font-size: 12px;
 width: auto;
 letter-spacing: 2px;
}
.text {
 position: relative;
 display: flex;
 align-items: baseline;
 height: 100%;
 padding: 0 0px 10px 0px;
}
.text .txt {
 position: relative;
 overflow-y: auto;
 height: 100%;
 line-height: 150%;
}
.text .txt p {
 margin: 10px 0;
}
.quote, .bubbles {
 margin: auto;
}
.quote {
 position: relative;
 flex: 1;
 font-family: 'Playfair Display';
 font-size: 15px;
 line-height: 100%;
 font-style: italic;
 color: #1e1e1e;
 padding: 10px 0px 10px 25px;
 overflow-y: auto;
 overflow-x: hidden;
 height: 100%;
}
.quote span {
 display: block;
 text-align: right;
 font-style: normal;
 font-size: 13px;
 font-family: var(--fontTwo);
 margin-top: 8px;
 text-transform: uppercase;
 color: #1e1e1e;
}
.bubbles { 
 flex: 1;
 padding: 10px 20px 10px 0px;
 border-right: 1px dashed var(--borderColor);
 height: 100%;
}
.bubbles ul {
 list-style-type: none;
 height: 100%;
 overflow-y: auto;
}
.bubbles ul li {
 display: inline-block;
 word-break: break-all;
 font-family: var(--fontTwo);
 font-size: 14px;
 text-transform: uppercase;
 letter-spacing: 0px;
 color: #fff;
 width: auto;
 padding: 5px;
 margin: 5px 2.5px 5px;
 background: var(--accentColorOne); /* fallback for old browsers */
 background: -webkit-linear-gradient(to right, var(--accentColorOne), var(--accentColorTwo)); /* Chrome 10-25, Safari 5.1-6 */
 background: linear-gradient(to right, var(--accentColorOne), var(--accentColorTwo)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.gallery {
 width: var(--gallery);
 overflow: auto;
}
.gallery ul {
 display: flex;
 flex-direction: column;
}
.gallery ul li {
 list-style-type: none;
 line-height: 0;
 font-size: 0;
 flex: 1;
 background: var(--colorTwo);
 height: 100px;
}
.gallery li img {
 width: 100px;
 height: 100px;
 object-fit: cover;
 filter: grayscale(100%);
}
.side-title {
 background: var(--sidebar);
 color: #fff;
 height: 600px;
}
.side-title .rotate {
 margin: 50px auto 50px;
}
#credit {
 position: absolute;
 bottom: 0;
 width: 250px;
 text-align: center;
 padding: 15px;
 font-size: 10px;
 letter-spacing: 1px;
 color: #555;
 z-index: 10;
}
#credit a {
 color: #ccc;
 text-decoration: none;
}
/*transitions*/
nav ul li, nav, #close {
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -ms-transition: all 0.5s ease;
 transition: all 0.5s ease;
}
/*shadows*/
.stats, .info, .bar, #close {
 -webkit-box-shadow: 0px 0px 100px -35px rgba(0,0,0,0.3);
 -moz-box-shadow: 0px 0px 100px -35px rgba(0,0,0,0.3);
 box-shadow: 0px 0px 100px -35px rgba(0,0,0,0.3);
}
nav {
 -webkit-box-shadow: inset 0px 0px 53px -17px rgba(0,0,0,1);
 -moz-box-shadow: inset 0px 0px 53px -17px rgba(0,0,0,1);
 box-shadow: inset 0px 0px 53px -17px rgba(0,0,0,1);
}
/*ANIMATION KEYFRAMES*/
@-webkit-keyframes fadeIn {
 0% { opacity: 0; }
 20% { opacity: 0; }
 40% { opacity: 0.3; }
 60% { opacity: 0.5; }
 80% { opacity: 0.9; }
 100% { opacity: 1; }
}
@keyframes fadeIn {
 0% { opacity: 0; }
 20% { opacity: 0; }
 40% { opacity: 0.3; }
 60% { opacity: 0.5; }
 80% { opacity: 0.9; }
 100% { opacity: 1; }
}
 </style>
 <!--MOBILE STYLES-->
 <link rel="stylesheet" type="text/css" href="https://drive.google.com/uc?export=view&id=1YhHjX9QD1fzQ03jjOrSqN1oTWJOAcyy3" />
</head>
<body>
 <div id="wrapper">
 <nav class="hidden">
 <ul>
 <div class="picture">
 <img src="https://media.giphy.com/media/LpifIfp0JxrgWUqzhC/giphy.gif">
 </div>
 <div class="picture">
 <img src="https://s8.gifyu.com/images/ezgif.com-crop.gif">
 </div>
 <div class="picture">
 <img src="https://media.giphy.com/media/WRvJm6INikyYsosv7G/giphy.gif">
 </div>
 <div class="picture">
 <img src="https://media.giphy.com/media/WV4LZKVMfEY6DIMFTE/giphy.gif">
 </div>
 <div class="picture">
 <img src="https://media.giphy.com/media/kHsReQgnVKXDstMcsy/giphy.gif">
 </div>
 <div class="picture">
 <img src="https://media.giphy.com/media/VFSpLQFFLlN29bg1wh/giphy.gif">
 </div>
 <div class="picture">
 <img src="https://media.giphy.com/media/iIGnB4c9MUYNOsnuAl/giphy.gif">
 </div>
 <div class="picture">
 <img src="https://media.giphy.com/media/UTATyOXorJiHuuC5H5/giphy.gif">
 </div> 
<div class="picture">
 <img src="https://media.giphy.com/media/TGXbpmoiR479ZfT73z/giphy.gif">
 </div>
 <div class="picture">
 <img src="https://media.giphy.com/media/igz329ycJbZvIXs6uE/giphy.gif">
 </div> 
 <div class="picture">
 <img src="https://media.giphy.com/media/PkdiIfBz5UvaiksEkP/giphy.gif">
 </div>
<div class="picture">
 <img src="https://media.giphy.com/media/Wp5lmQFFG4CxOcaBlu/giphy.gif">
 </div>
 <div class="picture">
 <img src="https://s5.gifyu.com/images/ezgif.com-crop93a06177332adf9c.gif">
 </div>
 <div class="picture">
 <img src="https://s5.gifyu.com/images/ezgif.com-resize7150bd63ba205f56.gif">
 </div>
 <div class="picture">
 <img src="https://s5.gifyu.com/images/ezgif.com-resizeb56bdeac3824b534.gif">
 </div>
 <div class="picture">
 <img src="https://media.giphy.com/media/U3n2FolINURQjaNd4x/giphy.gif">
 </div>
<div class="picture">
 <img src="https://s5.gifyu.com/images/ezgif.com-cropc45644063d883658.gif">
 </div>
<div class="picture">
 <img src="https://s5.gifyu.com/images/ezgif.com-crop11f5c476af13c17f.gif">
 </div>
<div class="picture">
 <img src="https://s5.gifyu.com/images/ezgif.com-crop-1b8deaa0b514d2f08.gif">
 </div>
<div class="picture">
 <img src="https://s5.gifyu.com/images/ezgif.com-crop0761b19daa2dbcf6.gif">
 </div>
<div class="picture">
 <img src="https://s5.gifyu.com/images/ezgif.com-crop21fbdd186f5ba7a0.gif">
 </div>
 <!--PASTE NEW NAV ENTRIES HERE-->
 </ul>
 </nav>
 <main>
 <!--TAB ONE-->
 <div class="tab current" id="tab-1">
 <div class="bar">
 <div class="bar-links">
 <ul>
 <li><a target="_blank" href="https://www.flickr.com/gp/185425600@N02/U4fVHw" >
 <i class="fas fa-camera" ></i></a></li>
 <li><a target="_blank" href="https://youtu.be/H_vQt_v8Jmw" >
 <i class="fas fa-music" ></i></a></li>
 </ul>
 </div>
 
 </div>
 <div class="stats">
 <div class="picture">
 <img src="https://i.ibb.co/vPSd5L9/oie-g-JPw-DXPXKv-EG.png">
 </div>
 <div class="details">
 <h3 class="chivo-dark">Carson Walsh</h3>
 <ul>
 <li> <i>Nickname</i> <span>Cee, C-Dub</span> </li>
<li> <i>Species</i> <span>Handsome</span> </li>
 <li> <i>Age</i> <span>26</span> </li>
 <li> <i>Birthplace</i> <span>Detroit, MI</span> </li>
 <li> <i>Height</i> <span>6'1"</span> </li>
 <li> <i>Weight</i> <span>200</span> </li>
 <li> <i>Personality</i> <span>Awesome</span> </li>
 </ul>
 </div>
 </div>
<div class="info">
 <div class="content">
 <div class="row-1">
 <div class="text">
 <div class="headline">
 <h3 class="chivo-dark">Biography</h3>
<ul>
 <li>Extremely DM friendly.</li>
 <li>Character is malleable.</li>
 <li>Questions? Feel free to ask!</li>
 <li>Let's talk about something and nothing in particular.</li>
 <li>We'll create the next roman-fleuve together.</li>
 </ul>
 </div>
 <div class="txt">
A veritable sea of sectarians stretched and surpassed the diminution of visual perception, ebbing and flowing with the undulating fluctuations of a hypnotic ocean tide. The consequent and frenzied tumult that emerged beleaguered the stage with the devastating impact of a tsunami upon a concatenation of archipelagos, ravenous rabble thirsting for more, bodies glistening with the sheen of activity in propinquity, their surroundings punctuated with an exclamation point by the potent mélange of alcohol and narcotics. These were no longer mere spectators, the foregoing fraternity of ne'er-do-wells, drunkards, potheads, and music aficionados having been metamorphosed into votaries by the shirtless, six-packed preacher's sermon. There was a discernible effervescence flowing among the horde, one that originated as a murmur of anticipation coalescing into a cacophonous conclusion once the inimitable sonic boom courtesy the persistent vibration of membranous tissue—or vocal cords—punctured their collective eardrums. Throngs of concert-goers supplicated in unison, desperate for a repeat performance that wouldn't manifest.
<br></br>
Why?
<br></br>
Because this was the end of Carson Walsh.
<br></br>
Mammoth metacarpals were clasped together in an appreciative gesture before his disciples, yet Carson harbored no messianic delusions of grandeur. Nomadic, vibrant hazels perambulated fastidiously over those gathered, memorizing every single face and subtle movement in an attempt to comprehensively savor the moment. Flawless rows of picture-perfect, pearly white dentitions—complemented by dual depressions into which subservient submersion was prospective—astonished by their raucous reaction. It was an ephemeral and efficacious injection into his bloodstream superior to any heroin needle; a resounding reminder as to why he'd decided to become a rock 'n' roll star during formative years.
<br></br>
A decade later, the preceding chapter reached its abrupt and ostensibly premature cessation. As for the subsequent one? Page unrelieved by decorative features; limits endless. The inscrutable and enigmatic and capricious crooner changed directions with the fickleness of a nor'eastern squall, never complacent with playing a song that droned on too long for a disinterested audience. Nobody realized this permanent sabbatical was on the horizon, nor would they've extrapolated Walsh's deceptively impetuous decision to abandon a successful and lucrative career during its apogee. Was this an egocentric maneuver? Not at all. There were legitimate reasons, ones rooted in abject tragedy and an enduring promise of friendship and brotherhood.
<br></br>
The rugged rocker reveled in the sonorous roar one final, transient moment before stealthily succumbing to the crepuscular shadows lurking backstage. Despite vocal protests from the onlookers, the only encore they received was strident feedback from the fallen microphone.
 </div>
 </div>
 </div>
 <div class="row-2">
 <div class="bubbles">
 <ul>
 <li>Hopeless romantic looking for The One®</li>
 <li>Addictive personality</li>
 <li>Corybantic and Delphic</li>
 <li>Bad boy who makes worse decisions</li>
 <li>Chill and sensible and perspicacious</li>
 <li>Ultimately mercurial</li>
 </ul>
 </div>
 <div class="quote">
 <div>
 "Like most others, I was a seeker, a mover, a malcontent, and, at times, a stupid hell-raiser. I was never idle long enough to do much thinking, but I felt somehow that some of us were making real progress, that we had taken an honest road, and that the best of us would inevitably make it over the top. At the same time, I shared a dark suspicion that the life we were leading was a lost cause, that we were all actors, kidding ourselves along on a senseless odyssey. It was the tension between these two poles—a restless idealism on one hand and a sense of impending doom on the other—that kept me going."
 <span>- <i>Hunter S. Thompson</i></span>
</a>
 </div>
 </div>
 </div>
 </div>
 <div class="gallery">
 <ul>
 <li><img src="https://media.giphy.com/media/eLkHFqY6atRunUb4WL/giphy.gif"></li>
 <li><img src="https://images.pexels.com/photos/105470/pexels-photo-105470.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"></li>
 <li><img src="https://images.pexels.com/photos/965879/pexels-photo-965879.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"></li>
 <li><img src="https://images.pexels.com/photos/1007523/pexels-photo-1007523.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"></li>
 <li><img src="https://images.pexels.com/photos/275033/pexels-photo-275033.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"></li>
 <li><img src="https://images.pexels.com/photos/735911/pexels-photo-735911.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"></li>
 </ul>
 </div>
 <div class="bar side-title">
 <div class="rotate">Character Name</div>
 </div>
 </div>
 </div>
 </main>
 </div>
 <!--DO NOT TOUCH THE SCRIPTS UNLESS YOU KNOW WHAT YOU'RE DOING-->
 <script>
 $( document ).ready(function() {
 $('nav li').on('click', function(e) {
 var currentAttrValue = $(this).attr('data-tab');
 window[FILTERED].hash = $(this).attr('data-tab');
 $('.tab' + currentAttrValue).addClass('current').siblings('.tab').removeClass('current');
 $(this).addClass('current').siblings('nav li').removeClass('current');
 });
 /*HASH SCRIPT*/
 var hash = $.trim(window[FILTERED].hash);
 if (hash) {
 $('nav li[data-tab$="' + hash + '"]').trigger('click');
 }
 $('#close').on('click', function() {
 if ( ($(this)).hasClass('x') ) {
 $('#close, nav, nav .current, nav ul').removeAttr('style');
 $('#close').removeClass('x');
 }
 else {
 $('nav .current').css({
 'transform' : 'scale(1)',
 });
 $('nav').css({
 'margin-left' : '-250px',
 });
 $('nav ul').css({
 'overflow-y' : 'hidden',
 });
 $('#close').css({
 'left' : '12px',
 });
 $('#close').addClass('x'); 
 }
 });
 
 /*color per tab*/
 if( colorPerTab === true) {
 var i = 1;
 $(".tab").each(function() {
 var thisNext = $(this).find("nav ul, .bar, .bubbles ul li");
 thisNext.css({
 "background" : "var(--accentColorOne-" + i + ")",
 "background" : "-webkit-linear-gradient(to bottom, var(--accentColorOne-" + i + "), var(--accentColorTwo-" + i + "))",
 "background" : "linear-gradient(to bottom, var(--accentColorOne-" + i + "), var(--accentColorTwo-" + i + "))"
 });
 i++;
 });
 }
 });/*document ready*/
 </script>
</body>
</html>

                        
Recent Public Pastes
bootp - 3 hours ago Untitled - 9 hours ago Untitled - 9 hours ago Untitled - 9 hours ago Untitled - 19 hours ago Subscription - 1 day ago Untitled - 1 day ago Tets - 2 days ago markplace-items-73463434 - 2 days ago ПРИВАТНАЯ ВИДЕО КОЛЛЕКЦИЯ С МАЛОЛЕТКАМИ СЛИВ МАЛОЛЕТОК ШКОЛЬНИЦ МОЛОДЫЕ МОДЕЛИ - 2 days ago