Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <style type="text/css">
- @import url(https://fonts.googleapis.com/css?family=Handlee);
- @import url(https://fonts.googleapis.com/css?family=Farsan);
- @import url(https://fonts.googleapis.com/css?family=Allura);
- @import url('https://fonts.googleapis.com/css?family=Courgette');
- @import url('https://fonts.googleapis.com/css?family=Yellowtail');
- ::-webkit-scrollbar { width: 4px; }
- ::-webkit-scrollbar-track { border-radius: 2px; background-color: #; }
- ::-webkit-scrollbar-thumb { border-radius: 2px; background-color: #93cafd; }
- body {
- background-image: url("http://i.imgur.com/iSLe24t.png");
- background-repeat: repeat;
- background-color: #2D4356;
- background-size: ;
- background-position: bottom right;
- }
- @font-face{
- src:url(https://dl.dropboxusercontent.com/s/l8xn18qqbo3jn2z/Stylish%20Calligraphy%20Demo.ttf);
- font-family:'Stylish';}
- .name{position: absolute;
- z-index:50;
- left: 30%;
- top: 42%;
- color: #fde2b7;
- text-shadow: 0.2vw 0.2vw 0.2vw #000;
- font-family: Allura;
- line-height:80px;
- text-align:center;
- font-size: 5vw;
- letter-spacing: 0vw;}
- #frame {
- z-index: 3;
- background: url();
- background-size: 100% 100%;
- background-position: bottom left;
- background-repeat: repeat;
- position: absolute;
- box-shadow:0px 0px 20px #;
- background-color:#141414;
- border: 10px solid #395670;
- top: 20%;
- left: 28%;
- height: 55%;
- width: 35%;
- opacity: 1;
- }
- #box {
- z-index: 10;
- background: url();
- background-size: 1;
- background-position: bottom left;
- background-repeat: repeat;
- background-size: ;
- position: absolute;
- background-color:#;
- border-bottom: 5px solid #395670;
- top:0%;
- right: 0%;
- height:40%;
- width: 100%;
- }
- .content {position: absolute;
- z-index: -1;
- left: 1%;
- top:30%;
- border: 3px groove #;
- height:55%;
- width:97%;
- background-color:#;
- overflow-x:auto;
- overflow-y:auto;
- font-family:Farsan;
- font-size:15px;
- line-height:13px;
- padding:3px;
- opacity:0;
- color:#ddd;
- transition: 0.8s;
- -moz-transition: 0.8s;
- webkit-transition: 0.8s;
- -o-transition: 0.8s;}
- .content:target{position: absolute;
- z-index: 15;
- top:42.5%;
- opacity:1;
- transition: 0.8s;
- -moz-transition: 0.8s;
- webkit-transition: 0.8s;
- -o-transition: 0.8s;}
- .tab1 { z-index:10; position: absolute; top: 10%; left: 39.5%; width: 20%; height: 9%;background-color: #6394c3;box-shadow:0px 0px 10px #395670;color: #000;font-family:yellowtail;text-align:center;border-radius: 10px 10px 10px 10px;padding:2px;}
- .tab1:hover { z-index:10; position: absolute;background-color: #000;box-shadow:0px 0px 10px #ddd;color: #ddd;font-family:yellowtail;}
- .tab2 { z-index:10; position: absolute; top: 27%; left: 39.5%; width: 20%; height: 9%;background-color: #6394c3;box-shadow:0px 0px 10px #395670;color: #000;font-family:yellowtail;text-align:center;border-radius: 10px 10px 10px 10px;padding:2px;}
- .tab2:hover { z-index:10; position: absolute;background-color: #000;box-shadow:0px 0px 10px #ddd;color: #ddd;font-family:yellowtail;}
- .tab3 { z-index:10; position: absolute; top: 45%; left: 39.5%; width: 20%; height: 9%;background-color: #6394c3;box-shadow:0px 0px 10px #395670;color: #000;font-family:yellowtail;text-align:center;border-radius: 10px 10px 10px 10px;padding:2px;}
- .tab3:hover { z-index:10; position: absolute;background-color: #000;box-shadow:0px 0px 10px #ddd;color: #ddd;font-family:yellowtail;}
- .tab4 { z-index:10; position: absolute; top: 62%; left: 39.5%; width: 20%; height: 9%;background-color: #6394c3;box-shadow:0px 0px 10px #395670;color: #000;font-family:yellowtail;text-align:center;border-radius: 10px 10px 10px 10px;padding:2px;}
- .tab4:hover { z-index:10; position: absolute;background-color: #000;box-shadow:0px 0px 10px #ddd;color: #ddd;font-family:yellowtail;}
- .tab5 { z-index:10; position: absolute; top: 79%; left: 39.5%; width: 20%; height: 9%;background-color: #6394c3;box-shadow:0px 0px 10px #395670;color: #000;font-family:yellowtail;text-align:center;border-radius: 10px 10px 10px 10px;padding:2px;}
- .tab5:hover { z-index:10; position: absolute;background-color: #000;box-shadow:0px 0px 10px #ddd;color: #ddd;font-family:yellowtail;}
- h1 {width: 100%; height: auto; font-size: 23px;font-family:yellowtail;margin-top:0px; margin-bottom: 5px; text-align: center; border-bottom: 1px solid #000; color: #aac6c7;}
- b, strong { color: #aac6c7;text-shadow: 0.1vw 0.1vw 0.1vw #;}
- a {color: #aac6c7; text-decoration: none; }
- a:hover {color: blue;
- cursor: url('http://media.tumblr.com/e7f72e808c4dbe5006b9c3a30dbc9b79/tumblr_inline_mh67vhwGnR1rdqsqf.png');}
- #credit{ position: fixed;
- right: 1px;
- bottom: 0px;
- font-family: Arial;
- font-variant: normal;
- font-weight: normal;
- font-size: 90%;
- color: #000;
- z-index:1;}
- </style>
- <div id="credit">
- Layout © <a href="profile.php?user=Pachi" target="_blank">Pachi</a>
- </div>
- <div id="frame">
- <img src="http://i.imgur.com/B98m6IS.png" height="700" style="position:absolute;bottom:-35%; right: -38%;z-index:11;">
- <div id="box">
- <img src="http://i.imgur.com/6bfZZlD.jpg" height="100%" style="position:absolute;bottom:0%; left: 0%;z-index:11;border-right:5px solid #395670;">
- <img src="http://i.imgur.com/d0JKGhK.jpg" width="32%" height="100%" style="position:absolute;bottom:0%; right: 0%;z-index:11;border-left:5px solid #395670;">
- <a href="#1"><div class="tab1">Tab1</div></a>
- <a href="#2"><div class="tab2">Tab2</div></a>
- <a href="#3"><div class="tab3">Tab3</div></a>
- <a href="#4"><div class="tab4">Tab4</div></a>
- <a href="#5"><div class="tab5">Reset</div></a>
- </div>
- <div id="1" class="content">
- <h1>Title</h1>
- Words <b>Bold</b> <i>Italics</i> <a href="link.com" target="_blank">Link</a>
- </div>
- <div id="2" class="content">
- <h1>Ttitle</h1>
- Words
- </div>
- <div id="3" class="content">
- <h1>Title</h1>
- Words
- </div>
- <div id="4" class="content">
- <h1>Title</h1>
- Words
- </div>
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement