ControlC ControlC.com

Page #16 - All in one v.1

Views: 343Total Chars: 21,588
Created: 4/16/18 8:40:38AM ET
Self Destructs: Never
<!DOCTYPE html>

<!----

© hunterthemes.tumblr.com | Page #16 - All in one v.1

* Do not redistribute this theme and claim it as your own.
* Do not remove the credit or move it to another page.
* Minor changes to this theme are allowed.

---->

<html>
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">

<!-- GOOGLE FONTS -->

<link href="https://fonts.googleapis.com/css?family=Rouge+Script|Lato|Open+Sans|Playfair+Display|Lora" rel="stylesheet">

<style type="text/css">

/* CSS */

/*-- GENERAL --*/

body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
color: #bbb;
font-family:"Open Sans";
font-size: 12px;
line-height: 18px;
background-color: #111;
background-image:url();
background-attachment: fixed;
background-repeat: no-repeat;
background-size:cover;
}

/* Headings (titles) */

h1{
margin:0;
padding:0;
font-family:"Playfair Display";
font-weight:normal;
}

h2 {
font-family:"Playfair Display";
margin:10px 0;
padding:0;
font-size:18px;
letter-spacing:2px;
color:#D14FAE;
}

p {
padding:0;
}

/* Lists */

ul, ol {
padding:0px;
margin-left:18.5px;
}

li {
margin:0px;
padding:0px;
}

/* Links */

a {
text-decoration: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

a:hover {
text-decoration: none;
color:#EB6C70;
}

/* Bold */

b, strong {color: #fff; }

/* Italic */

i, em {color: #D756A3; }

/* Blockquote */

blockquote{
padding:0px 0px 2px 10px;
margin:10px 0px 10px 10px;
border-left: 1px solid #bbb;
}

/* Tumblr controls */

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

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

/* Webkit scrollbar */

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

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

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

::-webkit-scrollbar-thumb:vertical {
height: 0px;
background-color: #222;
border: 4px solid #000;
}

/* Tooltips */

#s-m-t-tooltip {
margin:24px 14px 7px 12px;
padding: 5px;
max-width: 250px;
color: #111;
background: #000;
border: 1px solid pink;
font-size: 12px;
line-height: 15px;
z-index: 100000;
}

/* Fix */

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

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

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

#container {
position:fixed;
left:50%;
top:50%;
width:700px;
height:520px;
z-index:100;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}

/*-- SIDEBAR --*/

#sidebar {
position:fixed;
margin:0;
margin-top:50px;
width:40%;
height:calc(100% - 100px);
background-color: #000;
border:1px solid #222;
z-index:100;
}

/* Sidebar top */

#side-top {
position:fixed;
margin:0;
width:40%;
height:100px;
background-color: #111;
background-image:url(https://78.media.tumblr.com/2353622fa40377d61d3c14a4dbd15d9a/tumblr_p7a0yosaph1uo5urho2_1280.png);
background-repeat: no-repeat;
background-size:cover;
z-index:1;
}

/* Wave */

.wave {
margin-top: 30px;
width: 100%;
height: 100px;
z-index:1000;
}

path {
fill: rgba(0,0,0, 0.9);
animation: wave infinite linear;
}

path:first-child {
animation-duration: 18s;
}

path:last-child {
animation-duration: 30s;
}

@keyframes wave {
0%, 100% {
transform: scaleX(1);
}
50% {
transform: scaleX(1.3);
}
}

/* Sidebar in */

#sidebarin {
position:absolute;
left:50%;
top:calc(50% + 45px);
width:70%;
height:auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}

/* Siedbar title */

#sidebar-title {
margin:0px;
width:100%;
height:35px;
line-height:35px;
color:#eee;
letter-spacing:1px;
}

/* Avatar */

#avatar {
float:left;
margin:0;
margin-right:20px;
width:35px;
height:35px;
}

#avatar img {
width:100%;
height:100%;
border-radius:5px;
}

/* Sidebar links */

.tab-links {
margin:5px 0;
width:100%;
padding:0;
margin:0;
margin-top:10px;
padding:5px 0;
width:100%;
height:auto;
text-align:left;
border-top:1px solid #222;
border-bottom:1px solid #222;
}

/* Clearfix */
.tab-links:after {
display:block;
clear:both;
content:'';
}

.tab-links li {
list-style:none;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;
}

.tab-links a {
display:block;
margin:0;
padding:4px 5px;
font-size:15px;
color:#eee;
}

.tab-links a:hover {
color:#EB6C70;
background: #111;
}

li.active a, li.active a:hover {
color:#EB6C70;
}

.tab-links span {
float:left;
margin-right:15px;
}

/* Sidebar icons */

#sidebar-icons {
margin:0px;
width:100%;
height:30px;
line-height:30px;
text-align:center;
}

#sidebar-icons span {
display:inline-block;
margin:10px;
color:#eee;
font-size:16px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

#sidebar-icons span:hover {
color:#EB6C70;
}

/*-- CONTENT CONTAINER --*/

#content-container {
position:fixed;
left:20%;
top:0px;
width:60%;
height:100%;
padding-left:20%;
overflow:hidden;
background:#000;
z-index:10;
border:5px double #222;
}

.tab {
display:none;
}

.tab.active {
display:block;
}

/* Content headings */

.tab h1 {
font-family:"Playfair Display";
margin:0px;
padding:5px 0px;
font-size:25px;
line-height:30px;
letter-spacing:2px
color:#eee;
text-align:left;
}

.divider {
margin:15px 0;
width:40px;
height:2px;
background-color: #111;
background-image:url(https://78.media.tumblr.com/2353622fa40377d61d3c14a4dbd15d9a/tumblr_p7a0yosaph1uo5urho2_1280.png);
background-repeat: no-repeat;
border-radius:2px;
}

/*-- Quote section --*/

#quote {
position:absolute;
top:50%;
left:62%;
width:50%;
height:auto;
padding:20px;
line-height:30px;
text-align:center;
font-family:"Playfair Display";
font-size:25px;
color:#eee;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}

/*-- About panel --*/

#about {
position:absolute;
top:50%;
left:62%;
width:50%;
height:auto;
max-height:calc(100% - 100px);
padding:20px;
font-size:14px;
line-height:18px;
text-align:justify;
color:#eee;
overflow-y:auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}

/*-- Navigation panel --*/

#navigation {
position:absolute;
top:50%;
left:62%;
width:50%;
height:auto;
max-height:calc(100% - 100px);
overflow-y:auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}

.navi-section {
padding:10px 0;
border-bottom:1px solid #111;
}

#navigation h2 {
margin:0;
padding:0;
font-size:18px;
letter-spacing:2px
color:#D14FAE;
}

/* Style of the links and tags */

#navigation a {
display:inline-block;
margin-top:8px;
margin-right:10px;
padding:5px 0;
font-size:14px;
color:#eee;
}

#navigation a:hover {
color:#EB6C70;
padding:5px;
background:#111;
}

/*-- F.A.Q. panel --*/

#faq {
position:absolute;
top:50%;
left:62%;
width:50%;
height:auto;
max-height:calc(100% - 100px);
padding:20px;
overflow-y:auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}

.faq-section {
border-bottom:1px solid #111;
padding-bottom:10px;
/* Answer */
font-size:14px;
color:#eee;
}

/* Question */

#faq h2 {
margin-top:10px;
margin-bottom:8px;
padding:0;
font-size:18px;
letter-spacing:2px;
color:#D14FAE;
font-style:italic;
}

/*-- Blogroll panel --*/

#blogroll {
position:absolute;
top:50%;
left:62%;
width:50%;
height:auto;
max-height:calc(100% - 100px);
padding:20px;
text-align:center;
overflow-y:auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}

.blogroll-section {
display:inline-block;
margin:0px;
margin-top:0px;
width:calc(100% - 20px);
height:40px;
padding:10px;
line-height:20px;
font-size:12px;
color:#eee;
text-align:left;
border-bottom:1px solid #111;
}

.blogroll-section:hover {
background:#111;
}

/* Style of the blogroll images */

.blogroll-section img {
float:left;
width:40px;
height:40px;
margin-left:0px;
margin-right:15px;
border-radius:5px;
opacity:0.8;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.blogroll-section:hover img {
opacity:1;
}

.followed-name {
color:#eee;
font-weight:bold;
font-size:15px;
text-transform:lowercase;
}

.blogroll-section:hover .followed-name {
color:#D14FAE;
}

/*-- Extra panel --*/

#extra {
position:absolute;
top:50%;
left:62%;
width:50%;
height:auto;
max-height:calc(100% - 100px);
padding:20px;
text-align:justify;
color:#eee;
font-size:14px;
line-height:18px;
overflow-y:auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}

/*-- PAGE CREDIT --*/

#credit {
position:fixed;
right:10px;
top:10px;
width:30px;
}

/* END CSS */

{CustomCSS}

</style>

</head>

<!-- HTML -->

<body>

<!-- CONTAINER -->
<div id="container">

<!-- SIDEBAR -->
<div id="sidebar">

<div id="side-top">

<svg class="wave" viewBox="0 0 100 100" preserveAspectRatio="none">
<path>
<animate attributeName="d" values="M0,50 A50,200 0 0,1 50,50 A50,200 0 0,0 100,50 L100,100 L0,100;M0,50 A50,0 0 0,1 50,50 A50,0 0 0,0 100,50 L100,100 L0,100;M0,50 A50,0 0 0,0 50,50 A50,0 0 0,1 100,50 L100,100 L0,100;M0,50 A50,200 0 0,0 50,50 A50,200 0 0,1 100,50 L100,100 L0,100;M0,50 A50,0 0 0,0 50,50 A50,0 0 0,1 100,50 L100,100 L0,100;M0,50 A50,0 0 0,1 50,50 A50,0 0 0,0 100,50 L100,100 L0,100;M0,50 A50,200 0 0,1 50,50 A50,200 0 0,0 100,50 L100,100 L0,100;" keyTimes="0; 0.25; 0.25; 0.5; 0.75; 0.75; 1" dur="18s" repeatCount="indefinite" rotate="auto"></animate>
</path>
<path>
<animate attributeName="d" values="M0,50 A50,200 0 0,1 50,50 A50,200 0 0,0 100,50 L100,100 L0,100;M0,50 A50,0 0 0,1 50,50 A50,0 0 0,0 100,50 L100,100 L0,100;M0,50 A50,0 0 0,0 50,50 A50,0 0 0,1 100,50 L100,100 L0,100;M0,50 A50,200 0 0,0 50,50 A50,200 0 0,1 100,50 L100,100 L0,100;M0,50 A50,0 0 0,0 50,50 A50,0 0 0,1 100,50 L100,100 L0,100;M0,50 A50,0 0 0,1 50,50 A50,0 0 0,0 100,50 L100,100 L0,100;M0,50 A50,200 0 0,1 50,50 A50,200 0 0,0 100,50 L100,100 L0,100;" keyTimes="0; 0.25; 0.25; 0.5; 0.75; 0.75; 1" dur="30s" repeatCount="indefinite" rotate="auto"></animate>
</path>
</svg>

</div>
<!-- End side-op -->

<div id="sidebarin">

<div id="sidebar-title">

<div id="avatar">
<img src="https://static.tumblr.com/f13871c690646ad4e0cafbe32d653729/6dvmes1/peWp5pacn/tumblr_static_27kovsw519lw4o4sscwsgc8so.png">
</div>
<!--End avatar-->

<h1> Title </h1>

</div>
<!-- End sidebar-title -->

<div class="tabs">
<ul class="tab-links">
<li class="active"><a href="#tab1"> <span>00</span> Refresh </a></li>
<li><a href="#tab2"> <span>01</span> About </a></li>
<li><a href="#tab3"> <span>02</span> Navigation </a></li>
<li><a href="#tab4"> <span>03</span> F.A.Q. </a></li>
<li><a href="#tab5"> <span>04</span> Blogroll </a></li>
<li><a href="#tab6"> <span>05</span> Extra </a></li>
</ul>
</div>
<!-- End tabs -->

<div id="sidebar-icons">

<a href="/" title="Index"><span class="sf sf-home-o"></span></a>
<a href="/ask" title="Ask"><span class="sf sf-envelope-2-o"></span></a>
<a href="/submit" title="Submit"><span class="sf sf-paperclip-o"></span></a>
<a href="/archive" title="Archive"><span class="sf sf-clock-3-o"></span></a>

</div>
<!-- End sidebar-icons -->

</div>
<!-- End sidebarin -->


</div>
<!-- End sidebar -->

<div id="content-container">

<div class="tabs">

<!------------------------------ TAB 1 ------------------------------>

<div id="tab1" class="tab active">
<div class="tab-content">

<!-- Quote -->
<div id="quote">
"Lorem ipsum dolor sit amet, consectetuer adipiscing elit."

</div>
<!-- End quote -->

</div>
<!-- End tab-content -->
</div>
<!-- End tab1 -->

<!------------------------------ TAB 2 ------------------------------>

<div id="tab2" class="tab">
<div class="tabcontent">

<!-- About -->
<div id="about">

<h1> ABOUT ME </h1>

<div class="divider"></div>

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

<ul>
<li> Lorem ipsum dolor sit amet. </li>
<li> Consectetuer adipiscing elit. </li>
<li> Nam at tortor quis ipsum tempor aliquet. </li>
</ul>

Cum sociis <u>natoque</u> penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<h2> Suspendisse sed ligula. </h2>

Sed volutpat odio non turpis gravida luctus. Suspendisse ac pede.

<blockquote> Donec placerat mauris commodo dolor. Nulla tincidunt. Nulla vitae augue. </blockquote>

Cras tincidunt <i>pretium</i> felis. Cum sociis natoque penatibus et magnis dis parturient.

</div>
<!--End about-->

</div>
<!-- End tab-content -->
</div>
<!-- End tab2 -->

<!------------------------------ TAB 3 ------------------------------>

<div id="tab3" class="tab">
<div class="tabcontent">

<!-- Navigation -->
<div id="navigation">

<h1> NAVIGATION </h1>

<div class="divider"></div>

<div class="navi-section">

<h2> Section 1 </h2>

<a href="http://"> Link </a>
<a href="http://"> Link </a>
<a href="http://"> Link </a>
<a href="http://"> Link </a>
<a href="http://"> Link </a>

</div>
<!-- End navi-section -->

<div class="navi-section">

<h2> Section 2 </h2>

<a href="http://"> Link </a>
<a href="http://"> Link </a>
<a href="http://"> Link </a>
<a href="http://"> Link </a>
<a href="http://"> Link </a>

</div>
<!-- End navi-section -->

<div class="navi-section">

<h2> Section 3 </h2>

<a href="http://"> Link </a>
<a href="http://"> Link </a>
<a href="http://"> Link </a>
<a href="http://"> Link </a>
<a href="http://"> Link </a>

</div>
<!-- End navi-section -->


<!--------------------------------------------- COMMENT

To add more links:
copy and paste <a href="http://"> Link </a> under previous.

To add more sections:
copy and paste

<div class="navi-section">

<h2> Section 3 </h2>

<a href="http://"> Link </a>
<a href="http://"> Link </a>
<a href="http://"> Link </a>
<a href="http://"> Link </a>
<a href="http://"> Link </a>

</div>

under previous

END COMMENT ----------------------------------------->

</div>
<!-- End navigation -->

</div>
<!-- End tab-content -->
</div>
<!-- End tab3 -->

<!------------------------------ TAB 4 ------------------------------>


<div id="tab4" class="tab">
<div class="tabcontent">

<!-- F.A.Q. -->
<div id="faq">

<h1> Frequently Asked Questions </h1>

<div class="divider"></div>

<div class="faq-section">

<h2> Question goes here </h2>
- Answer goes here

</div>
<!-- End faq-section -->

<div class="faq-section">

<h2> Question goes here </h2>
- Answer goes here

</div>
<!-- End faq-section -->

<div class="faq-section">

<h2> Question goes here </h2>
- Answer goes here

</div>
<!-- End faq-section -->

<div class="question">

<h2> Question goes here </h2>
- Answer goes here

</div>
<!-- End faq-section -->

<div class="faq-section">

<h2> Question goes here </h2>
- Answer goes here

</div>
<!-- End faq-section -->


<!--------------------------------------------- COMMENT

To add more questions:
copy and paste

<div class="faq-section">

<h2> Question goes here </h2>
- Answer goes here

</div>

under previous

END COMMENT ----------------------------------------->

</div>
<!--End faq-->

</div>
<!-- End tab-content -->
</div>
<!-- End tab4 -->

<!------------------------------ TAB 5 ------------------------------>

<div id="tab5" class="tab">
<div class="tabcontent">

<!-- Blogroll-->
<div id="blogroll">

<h1> BLOGROLL </h1>

<div class="divider"></div>

{block:Following}
{block:Followed}
<a href="{FollowedURL}">
<div class="blogroll-section">
<img src="{FollowedPortraitURL-128}">
<div class="followed-name"> {FollowedName} </div>
{FollowedTitle}
</div>
</a>
{/block:Followed}
{/block:Following}

</div>
<!--End blogroll-->

</div>
<!-- End tab-content -->
</div>
<!-- End tab5 -->

<!------------------------------ TAB 6 ------------------------------>

<div id="tab6" class="tab">
<div class="tab-content">

<!-- Extra -->
<div id="extra">

<h1> EXTRA </h1>

<div class="divider"></div>

- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi <b>lorem</b>, pulvinar id, commodo feugiat, vehicula et, mauris. Cum sociis <u>natoque</u> penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<blockquote> Cras tincidunt <i>pretium</i> felis. Cum sociis natoque penatibus et magnis dis parturient. </blockquote>

- Suspendisse sed ligula. Sed volutpat odio non turpis gravida luctus. Suspendisse ac pede. Donec placerat mauris commodo dolor. Nulla tincidunt. Nulla vitae augue.

</div>
<!--End extra-->

</div>
<!-- End tab-content -->
</div>
<!-- End tab6 -->

</div>
<!------------------------------ END TABS ------------------------------>

</div>
<!--End content-container-->
</div>
<!--End container-->


<!------------------------------ SCRIPTS ------------------------------>

<!--Saturnicons script-->

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

<!-- Jquery -->

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

<script>
$(document).ready(function() {
$('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = $(this).attr('href');

// Show/Hide Tabs
$('.tabs ' + currentAttrValue).fadeIn(600).siblings().hide();

// Change/remove current tab to active
$(this).parent('li').addClass('active').siblings().removeClass('active');

e.preventDefault();
});
});
</script>

<script>
$(document).ready(function() {
$('#filterOptions li a').click(function() {
// fetch the class of the clicked item
var ourClass = $(this).attr('class');

// reset the active class on all the buttons
$('#filterOptions li').removeClass('active');
// update the active state on our clicked button
$(this).parent().addClass('active');

if(ourClass == 'all') {
// show all our items
$('#ourHolder').children('div.item').show();
}
else {
// hide all elements that don't share ourClass
$('#ourHolder').children('div:not(.' + ourClass + ')').hide();
// show all elements that do share ourClass
$('#ourHolder').children('div.' + ourClass).show();
}
return false;
});
});
</script>

<!-- Style my tooltips script -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="jquery.style-my-tooltips.js"></script>

<script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:200,
tip_fade_speed: 300
}
);
});
})(jQuery);
</script>

<!-- CREDIT (DO NOT REMOVE) -->
<div id="credit"><a href="http://www.hunterthemes.tumblr.com">
<img src="https://66.media.tumblr.com/b29d8873c09628252057b9408a7c4a88/tumblr_plbuq65td51uo5urho1_100.png" title="page by hunter themes"></div></a>

</body>
</html>

<!-- END HTML -->
21,588 chars, 2,131 words, 1,082 lines·Create new version