Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <head>
- <!--all in one page: degrassé by eurhipides. basic rules apply, enjoy!---->
- <title>navigation</title>
- <link rel="shortcut icon" href="{Favicon}">
- <link rel="alternate" type="application/rss+xml" href="{RSS}">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
- <script>
- $(document).ready(function(){
- $(".t").click(function(){
- $('#side').find('.selected').removeClass('selected');
- $(this).addClass('selected');
- $('#con').animate({
- scrollLeft: 0
- }, 650);
- });
- });
- </script>
- <script>
- $(document).ready(function(){
- $(".onet").click(function(){
- $('#side').find('.selected').removeClass('selected');
- $(this).addClass('selected');
- $('#con').animate({
- scrollLeft: 450
- }, 650);
- });
- });
- </script>
- <script>
- $(document).ready(function(){
- $(".twot").click(function(){
- $('#side').find('.selected').removeClass('selected');
- $(this).addClass('selected');
- $('#con').animate({
- scrollLeft: 900
- }, 650);
- });
- });
- </script>
- <script>
- $(document).ready(function(){
- $(".threet").click(function(){
- $('#side').find('.selected').removeClass('selected');
- $(this).addClass('selected');
- $('#con').animate({
- scrollLeft: 1350
- }, 650);
- });
- });
- </script>
- <script>
- $(document).ready(function(){
- $(".fourt").click(function(){
- $('#side').find('.selected').removeClass('selected');
- $(this).addClass('selected');
- $('#con').animate({
- scrollLeft: 1800
- }, 650);
- });
- });
- </script>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
- <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
- <script>
- (function($){
- $(document).ready(function(){
- $("a[title]").style_my_tooltips({
- tip_follows_cursor:true,
- tip_delay_time:100,
- tip_fade_speed:300,
- attribute:"title"
- });
- });
- })(jQuery);
- </script>
- <link href='http://fonts.googleapis.com/css?family=Raleway:200,400' rel='stylesheet' type='text/css'>
- <link href='http://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'>
- <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
- <style type="text/css">
- #s-m-t-tooltip {
- max-width:150px;
- padding:5px 8px;
- margin:20px 14px 7px 10px;
- background-color:#fff;
- font-family:Calibri;
- font-size:10px;
- line-height:11px;
- letter-spacing:1px;
- text-transform:uppercase;
- color:{color:link};
- z-index:99999999;
- }
- ::-webkit-scrollbar {
- height:3px;
- width:3px;
- background-color: transparent;
- }
- #con::-webkit-scrollbar {
- height:0px;
- width:0px;
- }
- ::-webkit-scrollbar-thumb {
- background-color: #aaa; /*change scrollbar color*/
- }
- ::selection {
- background-color: #000;
- color: #fff;
- }
- body {
- background-color: #e5e5e5; /*change background color*/
- font-family:arial;
- font-size:11px;
- }
- a {
- text-decoration: none;
- -webkit-transition: 0.5s;
- -moz-transition: 0.5s;
- transition: 0.5s;
- color: #000;
- }
- a:hover {
- text-decoration: none;
- -webkit-transition: 0.5s;
- -moz-transition: 0.5s;
- transition: 0.5s;
- color: white;
- }
- .con {
- top:0;
- bottom:0;
- left:0;
- position:fixed;
- width:700px;
- border-radius:3px;
- height:550px;
- right:0;
- margin:auto;
- background:#fff; /*change sidebar color*/
- }
- #side {
- position:absolute;
- left:0;
- line-height:30px;
- top:0;
- bottom:0;
- }
- #side a, .title {
- display:block;
- font-family:'Lato', sans-serif;
- font-size:12px;
- font-weight:700;
- text-transform:uppercase;
- letter-spacing:2px;
- color:#bbb; /*change sidebar links color*/
- }
- #side a:hover {
- color:#777; /*change sidebar links hover color*/
- }
- #side a.selected {
- color:#555; /*change sidebar selected links color*/
- }
- #con {
- position:absolute;
- height:550px;
- overflow-x:scroll;
- overflow-y:hidden;
- white-space:nowrap;
- box-sizing:border-box;
- width:450px;
- right:0;
- }
- #one, #two, #three, #four, #five {
- width:450px;
- height:550px;
- position:absolute;
- color:#b4b4b4; /*change tabs text color*/
- line-height:17px;
- white-space:normal;
- overflow:auto;
- padding:50px;
- font-family:'Lato', sans-serif;
- letter-spacing:1px;
- box-sizing:border-box;
- background:#fafafa; /*change tabs background color*/
- display:inline-block;
- }
- #one {
- background:url(https://36.media.tumblr.com/0028517e0c8da52ebdd3993f769cfd9e/tumblr_njgpuavAv41rrcm6ho1_1280.jpg) no-repeat; /*change first tab image*/
- background-size:cover;
- }
- #two {
- left:450px;
- }
- #two p {
- padding:15px;
- }
- #two a {
- color:#ccc;
- }
- #two a:hover {
- color:#777;
- }
- .title {
- color:#666; /*change tabs title color*/
- font-weight:900;
- font-size:13px;
- position:relative;
- margin-bottom:40px;
- }
- .title:after {
- content:' ';
- height:2px;
- position:absolute;
- bottom:-7px;
- background:#666; /*change tabs title border-bottom color*/
- left:-3px;
- width:25px;
- }
- .tags {
- width:100%;
- margin:15px 0px;
- padding:15px;
- box-sizing:border-box;
- position:relative;
- display:block;
- }
- .tagt {
- font-weight:bold;
- text-transform:uppercase;
- font-size:12px;
- margin-bottom:5px;
- color:#666; /*change tags title color*/
- }
- .tags a {
- padding-left:10px;
- color:#bbb; /*change tags color*/
- line-height:180%;
- text-transform:uppercase;
- }
- .tags a:hover, #four b {
- color:#777; /*change tags hover and faq question color*/
- }
- #three {
- left:900px;
- }
- #four {
- left:1350px;
- }
- #five {
- left:1800px;
- }
- </style>
- </head>
- <body>
- <div class="con">
- <div id="side">
- <div style="display:table;height:100%;width:100px;margin-left:65px">
- <div style="display:table-cell;height:100%;vertical-align:middle">
- <a href="javascript:;" class="t selected">navigation</a>
- <a href="javascript:;" class="onet">about</a>
- <a href="javascript:;" class="twot">tags</a>
- <a href="javascript:;" class="threet">faq</a>
- <a href="javascript:;" class="fourt">blogroll</a>
- <a href="http://astraeus.co.vu">credit</a>
- </div>
- </div>
- </div>
- <div id="con">
- <div id="one"></div>
- <div id="two">
- <div style="display:table;width:350px;height:450px;">
- <div style="display:table-cell;height:100%;vertical-align:middle">
- <div class="title">01. about</div>
- <!--description--->
- <p><a href="/">Link</a>, <b>bolded</b>, <u>underlined</u>, <i>italicized.</i> Make sure to wrap each paragraph in < p > and < / p > tags.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id orci est. Ut sagittis lectus sed velit eleifend, sed bibendum mauris efficitur. Vivamus a faucibus nulla. In sollicitudin mi vel erat tristique elementum. Morbi rhoncus, mi eget pharetra interdum, ex justo feugiat magna, non imperdiet massa ex sit amet lectus.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id orci est. Ut sagittis lectus sed velit eleifend, sed bibendum mauris efficitur. Vivamus a faucibus nulla.</p>
- <!---end description--->
- </div>
- </div>
- </div>
- <div id="three">
- <div style="display:table;width:350px;height:450px;">
- <div style="display:table-cell;height:100%;vertical-align:middle">
- <div class="title">02. tags</div>
- <!---to add new tags copy and paste from here-->
- <div class="tags">
- <div class="tagt">tag title</div>
- <a href="/">link</a>
- <a href="/">link</a>
- <a href="/">link</a>
- <a href="/">link</a>
- <a href="/">link</a>
- </div>
- <!---to here--->
- <div class="tags">
- <div class="tagt">tag title</div>
- <a href="/">link</a>
- <a href="/">link</a>
- <a href="/">link</a>
- <a href="/">link</a>
- </div>
- <div class="tags">
- <div class="tagt">tag title</div>
- <a href="/">link</a>
- <a href="/">link</a>
- <a href="/">link</a>
- </div>
- </div>
- </div>
- </div>
- <div id="four">
- <div style="display:table;width:350px;height:450px;">
- <div style="display:table-cell;height:100%;vertical-align:middle">
- <div class="title">03. frequently asked questions</div>
- <!---to add new question copy and paste from here--->
- <p><b>here is a question?</b> here is your answer.</p>
- <!--to here---->
- <p><b>here is a question?</b> here is your answer.</p>
- <p><b>here is a question?</b> here is your answer.</p>
- <iframe frameborder="0" scrolling="no" width="100%" height="260" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com" style="overflow:auto; margin-top:10px" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]-->
- </div>
- </div>
- </div>
- <div id="five">
- <div style="display:table;width:350px;height:450px;">
- <div style="display:table-cell;height:100%;vertical-align:middle">
- <div class="title">04. blogroll</div>
- {block:Following}{block:Followed}
- <div style="display:inline-block; margin:7px" class="following">
- <a target="_blank" href='{FollowedURL}' title='{FollowedName}'><img src='{FollowedPortraitURL-40}'></a>
- </div>
- {block:Followed}{/block:Following}
- </div>
- </div>
- </div>
- </div><!---id con--->
- </div><!--class con--->
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement