Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <head>
- <!--
- © KRASIVAYAS (@ALLISONARGENS)
- navi #1
- rules:
- don't move, delete, or edit the credit
- don't use my theme as a base code
- don't steal parts of my code
- don't steal my themes or claim them as your own
- -->
- <link rel="shortcut icon" href="{Favicon}">
- <link rel="alternate" type="application/rss+xml" href="{RSS}">
- <script type="text/javascript">
- function unhide(divID) {
- var item = document.getElementById(divID);
- if (item) {
- item.className=(item.className=='hidden')?'unhidden':'hidden';
- }
- }
- </script>
- <script>
- var current_obj='';
- function showLinks(objID) {
- var obj=document.getElementById(objID);
- if (current_obj.style) {
- current_obj.style.display='none';
- }
- obj.style.display='block';
- current_obj=obj;
- }
- </script>
- <style type="text/css">
- #s-m-t-tooltip{
- position:absolute;
- padding:1px;
- margin-top:15px;
- margin-left:15px;
- z-index:9999;
- background:#fff;
- }
- body {
- background:#fff;
- color:#aaaaaa;
- font-family:arial;
- font-size:11px;
- text-align:justify;
- margin:0;
- line-height:16px;
- }
- a {
- color:#1c1e20;
- text-decoration:none;
- }
- .showhide_element {
- display:none;
- }
- #sidebar {
- text-align:right;
- position:fixed;
- margin-left:-225px;
- margin-top:250px;
- width:100px;
- }
- #title {
- font-size:43px;
- font-weight:bold;
- line-height:85%;
- margin-top:220px;
- margin-left:100px;
- color:#2f2b2b;
- -webkit-transform: rotate(-90deg);
- -moz-transform: rotate(-90deg);
- -ms-transform: rotate(-90deg);
- -o-transform: rotate(-90deg);
- filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
- }
- #links {
- font-size:20px;
- font-weight:bold;
- line-height:90%;
- margin-left:140px;
- color:#2f2b2b;
- }
- #links a:hover {
- color:#4f4b4b;
- }
- #entries {
- margin-top:157px;
- width:500px;
- margin-left:-50px;
- }
- .categoryname {
- font-size:26px;
- font-weight:bold;
- text-decoration:underline;
- text-transform:lowercase;
- color:#270A2B;
- line-height:150%;
- }
- .sectionname {
- font-size:16px;
- font-weight:bold;
- text-transform:lowercase;
- color:#007C8F;
- line-height:150%;
- }
- #tags {
- font-size:13px;
- font-weight:bold;
- text-transform:lowercase;
- color:#72B0B4;
- border-left:3px solid #72B0B4;
- padding: 3px 0px 3px 5px;
- margin-left: 20px;
- margin-top:5px;
- margin-bottom:30px;
- line-height:150%;
- width:150px;
- display:inline-block;
- text-align:left;
- }
- #tags a {
- color:#72B0B4;
- }
- #tags a:hover {
- color:gray;
- }
- #con {
- left:50%;
- margin-left:-250px;
- position:absolute;
- }
- .side1 a {
- text-decoration:none;
- text-shadow:none;
- }
- .side11 {
- display:block;
- padding:5px;
- background-color:#547980;
- color:transparent;
- height:110px;
- width:13px;
- float:left;
- margin: 5px 0 20px 0;
- text-align: center;
- font-size: 8px;
- padding: 1px;
- line-height: 10px;
- margin-top:-430px;
- margin-left:120px;
- -webkit-transition: all 0.7s ease;
- -moz-transition: all 0.7s ease;
- -o-transition: all 0.7s ease;
- -ms-transition: all 0.7s ease;
- transition: all 0.7s ease;
- }
- .side11:hover {
- color:#1c1e20;
- background-color:#ffffff;
- }
- .side12 {
- display:block;
- padding:5px;
- background-color:#45ada8;
- color:transparent;
- height:110px;
- width:13px;
- float:left;
- margin: 5px 0 20px 0;
- text-align: center;
- font-size: 8px;
- padding: 1px;
- line-height: 10px;
- margin-top:-320px;
- margin-left:120px;
- -webkit-transition: all 0.7s ease;
- -moz-transition: all 0.7s ease;
- -o-transition: all 0.7s ease;
- -ms-transition: all 0.7s ease;
- transition: all 0.7s ease;
- }
- .side12:hover {
- color:#1c1e20;
- background-color:#ffffff;
- }
- .side13 {
- display:block;
- padding:5px;
- background-color:#9de0ad;
- color:transparent;
- height:110px;
- width:13px;
- float:left;
- margin: 5px 0 20px 0;
- text-align: center;
- font-size: 8px;
- padding: 1px;
- line-height: 10px;
- margin-top:-210px;
- margin-left:120px;
- -webkit-transition: all 0.7s ease;
- -moz-transition: all 0.7s ease;
- -o-transition: all 0.7s ease;
- -ms-transition: all 0.7s ease;
- transition: all 0.7s ease;
- }
- .side13:hover {
- color:#1c1e20;
- background-color:#ffffff;
- }
- .side14 {
- display:block;
- padding:5px;
- background-color:#e5fcc2;
- color:transparent;
- height:110px;
- width:13px;
- float:left;
- margin: 5px 0 20px 0;
- text-align: center;
- font-size: 8px;
- padding: 1px;
- line-height: 10px;
- margin-top:-100px;
- margin-left:120px;
- -webkit-transition: all 0.7s ease;
- -moz-transition: all 0.7s ease;
- -o-transition: all 0.7s ease;
- -ms-transition: all 0.7s ease;
- transition: all 0.7s ease;
- }
- .side14:hover {
- color:#1c1e20;
- background-color:#ffffff;
- }
- #credit {
- font-size:8px;
- letter-spacing:1px;
- bottom:8px;
- right:8px;
- text-align:right;
- position:fixed;
- padding:1px 3px 1px 3px;
- font-weight:bold;
- -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;
- border: 1px solid white;
- }
- #credit a {
- text-decoration:none;
- text-shadow:none;
- }
- #credit:hover {
- border: 1px solid #454141;
- }
- </style>
- </head>
- <body>
- <div id="con">
- <div id="sidebar">
- <div id="title">navigation</div>
- <div id="links">
- <a href="">home</a>
- <a href="">mail</a>
- <a href="">dash</a>
- </div>
- <div class="side1">
- <a class="side11" href="#" onClick="showLinks('link1');return false;">I.</a>
- <a class="side12" href="#" onClick="showLinks('link2');return false;">II.</a>
- <a class="side13" href="#" onClick="showLinks('link3');return false;">III.</a>
- <a class="side14" href="#" onClick="showLinks('link4');return false;">IV.</a>
- </div>
- </div>
- <div id="entries">
- <div id="link1" class="showhide_element">
- <span class="categoryname">title 1</span><br>
- <span class="sectionname">category a: </span><br>
- <div id="tags">
- <a href="">tag name 1</a><br>
- <a href="">tag name 2</a><br>
- <a href="">tag name 3</a><br>
- <a href="">tag name 4</a><br>
- </div>
- <div id="tags">
- <a href="">tag name 5</a><br>
- <a href="">tag name 6</a><br>
- <a href="">tag name 7</a><br>
- <a href="">tag name 8</a><br>
- </div><br>
- <span class="sectionname">category b: </span><br>
- <div id="tags">
- <a href="">tag name 1</a><br>
- <a href="">tag name 2</a><br>
- <a href="">tag name 3</a><br>
- <a href="">tag name 4</a><br>
- </div>
- <div id="tags">
- <a href="">tag name 5</a><br>
- <a href="">tag name 6</a><br>
- <a href="">tag name 7</a><br>
- <a href="">tag name 8</a><br>
- </div><br>
- </div>
- <div id="link2" class="showhide_element">
- <span class="categoryname">title 2</span><br>
- <span class="sectionname">category c: </span><br>
- <div id="tags">
- <a href="">tag name 1</a><br>
- <a href="">tag name 2</a><br>
- <a href="">tag name 3</a><br>
- <a href="">tag name 4</a><br>
- </div>
- <div id="tags">
- <a href="">tag name 5</a><br>
- <a href="">tag name 6</a><br>
- <a href="">tag name 7</a><br>
- <a href="">tag name 8</a><br>
- </div><br>
- <span class="sectionname">category d: </span><br>
- <div id="tags">
- <a href="">tag name 1</a><br>
- <a href="">tag name 2</a><br>
- <a href="">tag name 3</a><br>
- <a href="">tag name 4</a><br>
- </div>
- <div id="tags">
- <a href="">tag name 5</a><br>
- <a href="">tag name 6</a><br>
- <a href="">tag name 7</a><br>
- <a href="">tag name 8</a><br>
- </div><br>
- </div>
- <div id="link3" class="showhide_element">
- <span class="categoryname">title 3</span><br>
- <span class="sectionname">category e: </span><br>
- <div id="tags">
- <a href="">tag name 1</a><br>
- <a href="">tag name 2</a><br>
- <a href="">tag name 3</a><br>
- <a href="">tag name 4</a><br>
- </div>
- <div id="tags">
- <a href="">tag name 5</a><br>
- <a href="">tag name 6</a><br>
- <a href="">tag name 7</a><br>
- <a href="">tag name 8</a><br>
- </div><br>
- <span class="sectionname">category f: </span><br>
- <div id="tags">
- <a href="">tag name 1</a><br>
- <a href="">tag name 2</a><br>
- <a href="">tag name 3</a><br>
- <a href="">tag name 4</a><br>
- </div>
- <div id="tags">
- <a href="">tag name 5</a><br>
- <a href="">tag name 6</a><br>
- <a href="">tag name 7</a><br>
- <a href="">tag name 8</a><br>
- </div><br>
- </div>
- <div id="link4" class="showhide_element">
- <span class="categoryname">title 4</span><br>
- <span class="sectionname">category g: </span><br>
- <div id="tags">
- <a href="">tag name 1</a><br>
- <a href="">tag name 2</a><br>
- <a href="">tag name 3</a><br>
- <a href="">tag name 4</a><br>
- </div>
- <div id="tags">
- <a href="">tag name 5</a><br>
- <a href="">tag name 6</a><br>
- <a href="">tag name 7</a><br>
- <a href="">tag name 8</a><br>
- </div><br>
- <span class="sectionname">category h: </span><br>
- <div id="tags">
- <a href="">tag name 1</a><br>
- <a href="">tag name 2</a><br>
- <a href="">tag name 3</a><br>
- <a href="">tag name 4</a><br>
- </div>
- <div id="tags">
- <a href="">tag name 5</a><br>
- <a href="">tag name 6</a><br>
- <a href="">tag name 7</a><br>
- <a href="">tag name 8</a><br>
- </div><br>
- </div>
- </div>
- <div id="credit"><a href="http://krasivayas.tumblr.com">ET</a> </div>
- </body> </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement