ControlC Pastebin - fe18c756 - Page: AUTUMNAL (bright)

Page: AUTUMNAL (bright)

Views: 494Total Chars: 21,342

Created: 11/3/17 2:23:27PM ET

Self Destructs: Never

<!DOCTYPE html>



<html>
<head>

<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<style type="text/css">

/* ---------------------------- GENERAL ----------------------------- */

/* -------- BASICS ------- */

body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Helvetica;
font-size: 12px;
line-height: 17px;
color: #777777;
/* Background */
background-color: #f6f6f6;
background-image: URL('http://static.tumblr.com/9nod2fq/rxhlrxzg6/bg_edited.png');
background-attachment: fixed;
background-repeat: repeat;
}

/* Webkit scrollbar */

::-webkit-scrollbar {
width: 8px;
height: 0px;
}

::-webkit-scrollbar-thumb:vertical {
height: 0px;
background-color: #222222;
border:3px solid #ffffff;
}

::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
height: 0px;
display: block;
background-color: #ffffff;
}

::-webkit-scrollbar-track-piece {
background-color: #ffffff;
}

/* Tumblr controls */

iframe.tmblr-iframe {
top:0px!important;
right:33px!important;
opacity:0.8;
transform:scale(0.6);
transform-origin:100% 0;
-webkit-transform:scale(0.8);
-webkit-transform-origin:100% 0;
-moz-transform:scale(0.8);
-moz-transform-origin:100% 0;
-ms-transform:scale(0.8);
-ms-transform-origin:100% 0;
-o-transform:scale(0.8);
-o-transform-origin:100% 0;
-webkit-filter:invert(1);
-moz-filter:invert(1);
-ms-filter:invert(1);
-o-filter:invert(1);
filter:invert(1);
z-index:100000!important;
}

iframe.tmblr-iframe:hover {
opacity:1!important;
}

/* Tooltips */

.ui-tooltip {
position:absolute;
z-index:9999;
padding-top:10px;
}

.ui-tooltip-content {
background:#ffffff;
padding:0 4px;
font-style:italic;
color:#222222;
text-transform:lowercase;
border:1px solid #eeeeee;
}

img {
opacity:1;
border:0;
text-decoration:none;
max-width:100%;
height:auto;
display:block;
}

pre {
padding:0;
margin:0;
line-height:inherit!important;
background:transparent;
font-family:inherit!Important;
font-size:inherit!important;
white-space:pre-wrap;
white-space:-moz-pre-wrap;
white-space:-pre-wrap;
white-space:-o-pre-wrap;
word-wrap:break-word;
}

/* Fix */

iframe, img, embed, object, video {
max-width: 100%;
border: none;
}

input, textarea, select, a { outline: none; }

/* Headings */

h1, h2, h3, h4 {
margin:1.5em;
font-size:1.5em;
padding:0;
font-weight:bold;
}

/* Paragraph */

p { margin:5px 0px;}

p:first-of-type { margin-top:0;}

p:last-of-type { margin-bottom:0;}

small, big, sub, pre {
font-size:1em!important;
line-height:1.4em!important;
vertical-align:baseline!important;
}

/* Bold and italic */

b, strong, b a, strong a {
font-weight:bold!important;
color:#333333;
}

i, em {
color: #555555;
}

/* Links */

a {
color:#333333;
text-decoration:none;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

a, a img {cursor:pointer;}

a:hover {
color:#D88552!important;
text-decoration:none;
}

ul, ol, li {
margin: 5px 10px;
padding: 0px;
}

/* Line break */

hr {
border:none;
box-shadow:0px;
margin-top:0px;
margin-bottom:15px;
margin-left:0px;
width:40px;
padding:0px;
border-top:1px solid #D88552;
}

/*------------ CONTAINER ------------*/

#container {
position:fixed;
top:50%;
left:50%;
width:600px;
height:450px;
z-index:100;
overflow:hidden;
-webkit-transform:translateX(-50%) translateY(-50%);
-moz-transform:translateX(-50%) translateY(-50%);
-ms-transform:translateX(-50%) translateY(-50%);
-o-transform:translateX(-50%) translateY(-50%);
transform:translateX(-50%) translateY(-50%);
/* Container background */
background:#ffffff;
border:1px solid #eeeeee;
}

/*-- SIDEBAR, I don't recommend changing anything but background, especially if you're not experienced --*/

#sidebar {
position:absolute;
top:0px;
left:300px;
width:300px;
height:450px;
/* Sidebar background */
background-color:#eeeeee;
background-image: URL('https://78.media.tumblr.com/e6719ca807e41fe904f332ce60b52384/tumblr_oxi8nn9xxV1w4d880o2_400.jpg');
background-repeat:no-repeat;
background-size:cover;
z-index:1000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

#sidebar.pushed{
-webkit-transform: translateX(-300px);
-moz-transform: translateX(-300px);
-ms-transform: translateX(-300px);
-o-transform: translateX(-300px);
transform: translateX(-300px);
}

/* Click icon */

#click {
position:absolute;
top:50%;
left:50%;
width:40px;
height:40px;
padding:5px;
line-height:45px;
border:1px solid #eeeeee;
background:rgba(255,255,255,1);
border-radius:100%;
text-align:center;
cursor:pointer;
z-index:1000;
-webkit-transform:translateX(-50%) translateY(-50%);
-moz-transform:translateX(-50%) translateY(-50%);
-ms-transform:translateX(-50%) translateY(-50%);
-o-transform:translateX(-50%) translateY(-50%);
transform:translateX(-50%) translateY(-50%);
}

/* Click icon left */

.clicon span{
color:#222222;
font-size:20px;
}

/* Click icon left, on hover */

.clicon:hover span{
color:#D88552;
}

/* Click icon right */

.cricon {
display:none;
margin-top:-10px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}

.cricon span{
color:#D88552;
font-size:20px;
}

/* Click icon right, on hover */

.cricon:hover span{
color:#222222;
}

/*-- PANEL ONE --*/

#panelone{
position:fixed;
top:0px;
left:0px;
height:450px;
width:300px;
background-color:#ffffff;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
z-index:1000!important;
}

/* I don't recommend editing */

.panelin{
position:absolute;
top:50%;
left:50%;
width:330px;
height:auto;
-webkit-transform:translateX(-50%) translateY(-50%);
-moz-transform:translateX(-50%) translateY(-50%);
-ms-transform:translateX(-50%) translateY(-50%);
-o-transform:translateX(-50%) translateY(-50%);
transform:translateX(-50%) translateY(-50%);
}

/* Avatar */

#avatar {
margin:15px auto;
width:90px;
height:90px;
border-radius:100px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

#avatar img{
margin:0;
width:100%;
height:100%;
border:1px solid #333333;
border-radius:100px;
}

/* Avatar on hover */

#avatar:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}

/* Blog title */

#blogtitle {
margin:10px auto;
width:285px;
height:31px;
font-size:27px;
line-height:30px;
color:#222222;
background: transparent;
font-family:'Brutal Type', sans-serif;
text-align:center;
}

/* Description */

#description {
margin:0px auto;
width:265px;
height:auto;
font-size:12px;
line-height:20px;
color:#222222;
background: transparent;
font-family:'Brutal Type', sans-serif;
text-align:center;
}

/* Main icons */

#icons {
margin:0px auto;
width:240px;
height:51px;
background: transparent;
text-align:center;
overflow:hidden;
}

#icons span {
display:inline-block;
height:40px;
margin:0px;
margin-left:-2px;
margin-right:-1px;
padding:7px 10px;
/* Main icons style */
color: #333333;
font-size:16px;
line-height:40px;
text-align:center;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

/* Main icons style on hover */

#icons span:hover {
color:#D88552;
}

/*-- PANEL TWO --*/

#paneltwo{
position:fixed;
top:0px;
left:0px;
height:450px;
width:300px;
background-color:#ffffff;
-webkit-transition: ease 0.5s;
-moz-transition: ease 0.5s;
-o-transition: ease 0.5s;
transition: ease 0.5s;
z-index:100!imnportant;
}

#paneltwo.pushedtwo{
-webkit-transform: translateX(300px);
-moz-transform: translateX(300px);
-ms-transform: translateX(300px);
-o-transform: translateX(300px);
transform: translateX(300px);
}

/* Big icons style, I don't recommend changing anything but color, especially if you're not experienced */

#paneltwo a{
display:inline-block;
margin:10px 10px 10px 32px;
width:110px;
height:85px;
padding-top:25px;
line-height:30px;
font-size:13px;
text-align:center;
cursor:pointer;
/* Big icon link color */
color:#222222;
}

.aicon:before, .licon:before, .ticon:before, .ficon:before, .bicon:before, .eicon:before{
display:block;
margin-bottom:10px;
font-family:'saturnicons';
font-size:32px;
}

/* About icon */

.aicon:before{
/* Icon code */
content:'\e275';
/* Icon color */
color:#222222;
}

.aicon:after{
/* Section title */
content:'ABOUT';
}

/* Links icon */

.licon:before{
/* Icon code */
content:'\e190';
/* Icon color */
color:#222222;
}

.licon:after{
/* Section title */
content:'LINKS';
}

/* Tags icon */

.ticon:before{
/* Icon code */
content:'\e24b';
/* Icon color */
color:#222222;
}

.ticon:after{
/* Section title */
content:'TAGS';
}

/* F.A.Q. icon */

.ficon:before{
/* Icon code */
content:'\e080';
/* Icon color */
color:#222222;
}

.ficon:after{
/* Section title */
content:'F.A.Q.';
}

/* Blogroll icon */

.bicon:before{
/* Icon code */
content:'\e123';
/* Icon color */
color:#222222;
}

.bicon:after{
/* Section title */
content:'BLOGROLL';
}

/* Extra icon */

.eicon:before{
/* Icon code */
content:'\e183';
/* Icon color */
color:#222222;
}

.eicon:after{
/* Section title */
content:'EXTRA';
}

.aicon:hover:before, .licon:hover:before, .ticon:hover:before, .ficon:hover:before, .bicon:hover:before, .eicon:hover:before {
/* Big icon color on hover */
color:#D88552;
}

/* Close icon */

.close{
width:110px;
height:60px;
}

.close:before{
display:block;
margin-bottom:10px;
/* Icon code */
content:'\e0c4';
font-family:'saturnicons';
font-size:30px;
color:#D88552;
}

.close:after{
content:'CLOSE';
}

.close:hover:before {
/* Icon on hover */
color:#333333;
}

/*-- CONTENT BOXES, I don't recommend changing anything but color, especially if you're not experienced */

#about, #links, #tags, #faq, #blogroll, #extra{
position:fixed;
top:0px;
left:0px;
height:450px;
width:300px;
background-color:#ffffff;
border:1px solid #eeeeee;
-webkit-transition: ease 0.5s;
-moz-transition: ease 0.5s;
-o-transition: ease 0.5s;
transition: ease 0.5s;
z-index:1000!important;
/* do not remove this line */
display:none;
}

.box{
position:absolute;
top:50%;
left:50%;
width:255px;
height:auto;
max-height:430px;
/* Content font style */
font-size:12px;
line-height:20px;
overflow:hidden;
-webkit-transform:translateX(-50%) translateY(-50%);
-moz-transform:translateX(-50%) translateY(-50%);
-ms-transform:translateX(-50%) translateY(-50%);
-o-transform:translateX(-50%) translateY(-50%);
transform:translateX(-50%) translateY(-50%);
}

.boxin{
margin-left:0px;
width:255px;
height:352px;
overflow-y:auto!important;
}

/* Box titles, style of headings */

.box h1{
margin:0px;
margin-bottom:15px;
color:#222222;
font-weight:700;
font-size:25px;
font-family:Poiret One;
}

/* Questions etc. */

.box big{
color:#333333;
font-size:15px!important;
font-weight:600;
}

/*-- Links --*/

#links a{
display:block;
padding:5px;
padding-left:0px;
font-size:14px;
color:#222222;
border-bottom:1px solid #eeeeee;
}

#links span{
margin-right:10px;
color:#D88552;
}

#links a:hover{
color:#D88552;
}

/*-- Tag links --*/

#tags a{
display:inline-block;
margin:4px;
padding:4px 6px;
color:#222222;
border:1px solid #eeeeee;
}

#tags span{
margin-right:5px;
color:#D88552;
}

#tags a:hover{
color:#D88552;
background:#555555;
}

/*-- Blogroll --*/

.person{
display: inline-block;
margin-top:5px;
margin-left:2px;
width:230px;
height:50px;
padding-bottom:10px;
border-bottom:1px solid #eeeeee;
overflow:hidden;
}

/* Followed person avatar */

.person img {
float:left;
margin:0px;
width:48px;
height:48px;
border:1px solid #222222;
border-radius:100%;
}

/* Followed person url */

.personurl {
margin-top:0px;
margin-left:15px;
width:150px;
padding:5px;
height:40px;
line-height:20px;
color:#222222;
text-align:center;
overflow:hidden;
}

.personurl a {
font-size:12px;
color:#222222;
}

/*-- CREDIT --*/

#credit {
position:fixed;
top: 10px;
right: 10px;
width:25px;
height:25px;
z-index: 100000;
}

#credit img{
border: 1px solid #eeeeee;
}

#credit img:hover{
border: 1px solid #222222;
}

/* --------------------------- Custom CSS -------------------------- */

{CustomCSS}

</style>

</head>

<body>

<div id="container">

<div id="panelone">

<div class="panelin">


<div id="avatar"><img src="https://i.pinimg.com/736x/75/6b/1d/756b1da5a75da7e6cb77d487b0718e84--autumn-day-autumn-leaves.jpg"></div>

<div id="blogtitle"> Autumnal </div>

<div id="description">

Lorem ipsum dolor <i>sit</i> amet adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, <b>vehicula</b> et, mauris.

</div>


<div id="icons">
<a href="/" Title="Index"><span class="sf sf-home"></span></a>
<a href="/ask" Title="Message"><span class="sf sf-chat"></span></a>
<a href="/submit" Title="Submit"><span class="sf sf-paperclip"></span></a>
<a href="/archive" Title="Archive"><span class="sf sf-clock-3"></span></a>
<a href="httpss://www.tumblr.com/dashboard" Title="Dashboard"><span class="sf sf-tumblr"></span></a>
</div>


</div>

</div>


<div id="paneltwo">
<div class="panelin">

<a><div id="aclick"><div class="aicon"></div></div></a>
<a><div id="lclick"><div class="licon"></div></div></a>
<a><div id="tclick"><div class="ticon"></div></div></a>
<a><div id="fclick"><div class="ficon"></div></div></a>
<a><div id="bclick"><div class="bicon"></div></div></a>
<a><div id="eclick"><div class="eicon"></div></div></a>

</div>

</div>


<div id="sidebar">

<div id="click">
<div class="clicon"><span class="sf sf-aero-cursor"></span></div>
<div class="cricon"><span class="sf sf-aero-cursor"></span></div></div>

</div>


<div id="about">

<div class="box">

<h1> ABOUT </h1> <hr>

<justify>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore <u>magna</u> aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in </b>reprehenderit</b> in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia <i>deserunt</i> mollit anim id est laborum.
</justify>

</div>

</div>


<div id="links">

<div class="box">

<h1> LINKS </h1> <hr>

<a href="https://"><span class="sf sf-leaf-2"></span> Link one </a>
<a href="https://"><span class="sf sf-leaf-2"></span> Link two </a>
<a href="https://"><span class="sf sf-leaf-2"></span> Link three </a>
<a href="https://"><span class="sf sf-leaf-2"></span> Link four </a>
<a href="https://"><span class="sf sf-leaf-2"></span> Link five </a>

</div>

</div>


<div id="tags">

<div class="box">

<h1> TAGS </h1> <hr>

<a href="https://"><span class="sf sf-tag"></span> tagone </a>
<a href="https://"><span class="sf sf-tag"></span> tagtwo </a>
<a href="https://"><span class="sf sf-tag"></span> tagthree </a>
<a href="https://"><span class="sf sf-tag"></span> tagfour </a>
<a href="https://"><span class="sf sf-tag"></span> tagfive </a>
<a href="https://"><span class="sf sf-tag"></span> tagsix </a>
<a href="https://"><span class="sf sf-tag"></span> tagseven </a>
<a href="https://"><span class="sf sf-tag"></span> tageight </a>

</div>

</div>


<div id="faq">

<div class="box">

<h1> F.A.Q. </h1> <hr>

<div class="boxin">

<big> 01. Question one </big><br>
- Answer one <br><br>

<big> 02. Question two </big><br>
- Answer two <br><br>

<big> 03. Question three </big><br>
- Answer three <br><br>

<big> 04. Question four </big><br>
- Answer four <br><br>

<big> 05. Question five </big><br>
- Answer five <br><br>

<big> 06. Question six </big><br>
- Answer six <br>

</div>

</div>

</div>


<div id="blogroll">

<div class="box">

<h1> BLOGROLL </h1> <hr>

<div class="boxin">
{block:Following}
{block:Followed}
<div class="person">
<img src="{FollowedPortraitURL-64}">
<div class="personurl">
<a href="{FollowedURL}">
<big>{FollowedName}</big><br>
{FollowedTitle}
</a></div>
</div>

{/block:Followed}
{/block:Following}
</div>


</div>

</div>


<div id="extra">

<div class="box">

<h1> EXTRA </h1> <hr>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore <u>magna</u> aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in </b>reprehenderit</b> in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

</div>

</div>


</div>






<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
$(document).ready(function(){

$( "#click" ).click(function() {
$( '#sidebar' ).toggleClass('pushed');
$( '#paneltwo' ).toggleClass('pushedtwo');
$( '.clicon' ).toggle(0);
$( '.cricon' ).toggle(0);
});

$( "#aclick" ).click(function(){
$( "#about" ).toggle(0);
$( "#aclick" ).toggleClass("close");
$('.aicon').toggle(0);
});

$( "#lclick" ).click(function(){
$( "#links" ).toggle(0);
$( "#lclick" ).toggleClass("close");
$('.licon').toggle(0);
});

$( "#tclick" ).click(function(){
$( "#tags" ).toggle(0);
$( "#tclick" ).toggleClass("close");
$('.ticon').toggle(0);
});

$( "#fclick" ).click(function(){
$( "#faq" ).toggle(0);
$( "#fclick" ).toggleClass("close");
$('.ficon').toggle(0);
});

$( "#bclick" ).click(function(){
$( "#blogroll" ).toggle(0);
$( "#bclick" ).toggleClass("close");
$('.bicon').toggle(0);
});

$( "#eclick" ).click(function(){
$( "#extra" ).toggle(0);
$( "#eclick" ).toggleClass("close");
$('.eicon').toggle(0);
});

});
</script>



<link href="https://fonts.googleapis.com/css?family=Great+Vibes|Exo|Poiret+One|Montez|Exo" rel="stylesheet">



<link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>



<div id="credit"><a href="http://borntobewildcodes.tumblr.com" title="page ALL IN ONE PAGE AUTUMNAL by @borntobewildcodes"><img src="http://i57.tinypic.com/301g6eg.jpg"></a></div>

</body>
</html>

21,342 chars, 1,944 words, 1,063 lines·Create new version