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=Yellowtail);
- @import url(https://fonts.googleapis.com/css?family=Boogaloo);
- @import url(https://fonts.googleapis.com/css?family=Handlee);
- @import url(https://fonts.googleapis.com/css?family=Farsan);
- ::-webkit-scrollbar { width: 4px; }
- ::-webkit-scrollbar-track { border-radius: 2px; background-color: #; }
- ::-webkit-scrollbar-thumb { border-radius: 2px; background-color: #A5CAEB; }
- body {
- background-color: #2e2e2e;
- background-image: url(http://i.imgur.com/fi2xIaa.png);
- background-position: center;
- background-repeat: repeat;
- background-size: ;
- overflow:hidden;}
- #bar {position: absolute; top: 15%; left:23%; background: #172E5F; width: 52%; height: 25%;border: 5px solid #000; border-radius: 50px 50px 50px 50px;}
- .name{position: absolute;
- z-index:50;
- left: 38%;
- top: -4%;
- color: #fff;
- text-shadow: 0.2vw 0.2vw 0.2vw #000;
- font-family: Boogaloo;
- line-height:80px;
- text-align:center;
- font-size: 4vw;
- letter-spacing: 0vw;}
- .name2{position: absolute;
- z-index:50;
- left: 29%;
- bottom: -4%;
- color: #fff;
- text-shadow: 0.2vw 0.2vw 0.2vw #000;
- font-family: Boogaloo;
- line-height:80px;
- text-align:center;
- font-size: 4vw;
- letter-spacing: 0vw;}
- .tab1 { z-index:10; position: absolute; top: 30%; left: 28%; width: 10%; height: 40%; border-radius: 0%;background-color: #;border:2px solid #;background: url(http://i.imgur.com/E7y1ETW.png);
- background-size: 100% 100%;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}
- .tab1:hover { z-index:10; position: absolute; width: 8%; height: 38%;top: 30%; left: 29%;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}
- .tab2 { z-index:10; position: absolute; top: 30%; left: 38%; width: 10%; height: 40%; border-radius: 0%;background-color: #;border:2px solid #;background:url(http://i.imgur.com/E7y1ETW.png);
- background-size: 100% 100%;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}
- .tab2:hover { z-index:10; position: absolute; width: 8%; height: 38%;top: 30%; left: 39%;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}
- .tab3 { z-index:10; position: absolute; top: 30%; left: 48%; width: 10%; height: 40%; border-radius: 0%;background-color: #;border:2px solid #;background:url(http://i.imgur.com/E7y1ETW.png);
- background-size: 100% 100%;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}
- .tab3:hover { z-index:10; position: absolute; width: 8%; height: 38%;top: 30%; left: 49%;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}
- .tab4 { z-index:10; position: absolute; top: 30%; left: 58%; width: 10%; height: 40%; border-radius: 0%;background-color: #;border:2px solid #;background:url(http://i.imgur.com/E7y1ETW.png);
- background-size: 100% 100%;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}
- .tab4:hover { z-index:10; position: absolute; width: 8%; height: 38%;top: 30%; left: 59%;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}
- .box {
- z-index: -1;
- background: url(http://i.imgur.com/y1PITwZ.png);
- background-position: center;
- background-repeat: repeat;
- background-size: ;
- position: absolute;
- background-color:#000;
- border: 5px solid #000;
- top: 30%;
- left: 32%;
- height:40%;
- width: 35%;
- opacity:0;
- transition: 0.8s;
- -webkit-transition: all 0.8s ease-in-out;
- -moz-transition: all 0.8s ease-in-out;
- -o-transition: all 0.8s ease-in-out;
- -ms-transition: all 0.8s ease-in-out;
- transition: all 0.8s ease-in-out;
- }
- .box:target {
- position:absolute;
- top: 43%;
- opacity: 1;
- z-index: 1;
- transition: 0.8s;
- -webkit-transition: all 0.8s ease-in-out;
- -moz-transition: all 0.8s ease-in-out;
- -o-transition: all 0.8s ease-in-out;
- -ms-transition: all 0.8s ease-in-out;
- transition: all 0.8s ease-in-out;
- }
- .abox {position: absolute;border: 5px solid #000;background-color: #172E5F;font-family: Farsan;font-size: 16px;padding: 4px;color: #fff;height:80%;top:7.5%;left: 6%;width: 85%;line-height:16px;
- overflow: auto;}
- h1 {width: 100%; height: auto; font-size: 25px;font-family:Boogaloo;margin-top:5px; margin-bottom: 5px; text-align: center; border-bottom: 1px solid #ccc; color: #f2f2a2;text-shadow: 0.2vw 0.2vw 0.2vw #000;}
- b, strong { color: #37739d;}
- a {color: #000; text-decoration: none; font-weight:bold; }
- a:hover {color: blue; text-decoration: line-through;
- 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: #5F5F5F;
- z-index:1;}
- </style>
- <div id="credit">
- Layout @ <a href="profile.php?user=Pachi" target="_blank">Pachi</a>
- </div>
- <div id="bar">
- <a href="##"><img src="http://i.imgur.com/ft3KUx8.png" height="370" style="position:absolute; bottom:-40%; right: -3%; z-index:4;"></a>
- <div class="name">
- Lucario
- </div>
- <div class="name2">
- Aura Pokémon
- </div>
- <a href="#1"><div class="tab1"></div></a>
- <a href="#2"><div class="tab2"></div></a>
- <a href="#3"><div class="tab3"></div></a>
- <a href="#4"><div class="tab4"></div></a>
- </div>
- <div id="1" class="box">
- <div class="abox">
- <h1>Title</h1>
- Tab1 <b>Bold</b> <i>Italics</i> <a href="link.com" target="_blank">Link</a>
- </div></div>
- <div id="2" class="box">
- <div class="abox">
- <h1>Title</h1>
- Tab2
- </div></div>
- <div id="3" class="box">
- <div class="abox">
- <h1>Title</h1>
- Tab3
- </div></div>
- <div id="4" class="box">
- <div class="abox">
- <h1>Title</h1>
- Tab4
- </div></div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement