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=Farsan);
- @import url(https://fonts.googleapis.com/css?family=UnifrakturCook);
- @import url(https://fonts.googleapis.com/css?family=Yellowtail);
- @import url(https://fonts.googleapis.com/css?family=Cormorant+Unicase);
- @import url(https://fonts.googleapis.com/css?family=Cormorant+Upright);
- ::-webkit-scrollbar { width: 4px; }
- ::-webkit-scrollbar-track { border-radius: 2px; background-color: #; }
- ::-webkit-scrollbar-thumb { border-radius: 2px; background-color: #; }
- body {
- background-color: #000;
- background-image: url(http://i.imgur.com/1lTVNlC.png);
- background-attachment: fixed;
- background-position:center;
- background-repeat: repeat;
- background-size:;
- overflow:hidden;}
- #box {
- z-index: 10;
- background-size: ;
- position: absolute;
- background-color:#;
- border: 1px solid #;
- top: 17%;
- left: 10%;
- height:70%;
- width: 75%;
- }
- #name{
- position: absolute;
- z-index:15;
- left: 7%;
- top: 8%;
- color: #76499A;
- text-shadow: 0.1vw 0.1vw 0.1vw #000;
- font-family: Yellowtail;
- font-size: 4vw;
- letter-spacing: 0.1vw;
- opacity:0.7;
- }
- #name2{
- position: absolute;
- z-index:15;
- left: 11%;
- top: 8%;
- color: #76499A;
- text-shadow: 0.1vw 0.1vw 0.1vw #000;
- font-family: Yellowtail;
- font-size: 4vw;
- letter-spacing: 0.1vw;
- opacity:0.7;
- }
- .box1 {background-color: #;
- z-index:3;
- position: absolute;
- width: 30%;
- height: 96%;
- left: 1%;
- top:1%;
- overflow:auto;
- border:1px solid #;
- opacity:0;
- -webkit-animation:borderslide 3s 1;
- -moz-transition: borderslide 3s 1;
- -ms-transition: borderslide 3s 1;
- -o-transition: borderslide 3s 1;
- animation:borderslide 3s 1;
- animation-delay:1.5s;
- animation-fill-mode:forwards;
- -webkit-animation-delay:1.5s;
- -webkit-animation-fill-mode:forwards;}
- @keyframes borderslide
- {from{left:40%;opacity:0;}
- to{left:1%;opacity:1;}}
- .box2 {background-color: #;
- z-index:3;
- position: absolute;
- width: 30%;
- height: 96%;
- right: 1%;
- top:1%;
- overflow:auto;
- border:1px solid #;
- opacity:0;
- -webkit-animation:borderslide2 3s 1;
- -moz-transition: borderslide2 3s 1;
- -ms-transition: borderslide2 3s 1;
- -o-transition: borderslide2 3s 1;
- animation:borderslide2 3s 1;
- animation-delay:1.5s;
- animation-fill-mode:forwards;
- -webkit-animation-delay:1.5s;
- -webkit-animation-fill-mode:forwards;}
- @keyframes borderslide2
- {from{right:40%;opacity:0;}
- to{right:1%;opacity:1;}}
- #infobackground{
- position: absolute;
- z-index: 3;
- top: 38%;
- left: 1%;
- height: 60%;
- width: 96%;
- background-size: ;
- background-color:#000;
- background-image:url(http://i.imgur.com/1xPqWhn.png);
- background-position: center;
- background-repeat:repeat;
- border:5px groove #202020;
- overflow: hidden;
- color: #500243;
- font-family: Segoe Print;
- font-size: 10vh;
- opacity:1;}
- #infobox{
- position: absolute;
- z-index: 4;
- top: 5%;
- left: 2.5%;
- height: 89%;
- width: 93%;
- overflow: hidden;
- color: #fff;
- text-align: justify;
- letter-spacing: .2px;
- line-height: 15px;
- border: 4px groove #202020;
- background-color:#151515;
- font-family: farsan;
- font-size: 16px;
- opacity:1;
- }
- #infobackground2{
- position: absolute;
- z-index: 3;
- top: 38%;
- left: 1%;
- height: 60%;
- width: 96%;
- background-size: ;
- background-color:#000;
- background-image:url(http://i.imgur.com/1xPqWhn.png);
- background-position: center;
- background-repeat:repeat;
- border:5px groove #202020;
- overflow: hidden;
- color: #500243;
- font-family: Segoe Print;
- font-size: 10vh;
- opacity:1;}
- #infobox2{
- position: absolute;
- z-index: 4;
- top: 5%;
- left: 2.5%;
- height: 89%;
- width: 93%;
- overflow: hidden;
- color: #fff;
- text-align: justify;
- letter-spacing: .2px;
- line-height: 15px;
- border: 4px groove #202020;
- background-color:#151515;
- font-family: farsan;
- font-size: 16px;
- opacity:1;
- }
- .tab1 { z-index:10; position: absolute; top: 33%; left: 13%; width: 30%; height: 3%; border-radius: 0%;background-color: #000;border:2px solid #340A55;font-family:Dr Sugiyama;color: #9CA241;text-align: center;font-size: 15px;border-radius: 10px 10px 10px 10px;}
- .tab2 { z-index:10; position: absolute; top: 33%; left: 57%; width: 30%; height: 3%; border-radius: 0%;background-color: #000;border:2px solid #340A55;font-family:Dr Sugiyama;color: #9CA241;text-align: center;font-size: 15px;border-radius: 10px 10px 10px 10px;}
- .tab3 { z-index:10; position: absolute; top: 33%; left: 13%; width: 30%; height: 3%; border-radius: 0%;background-color: #000;border:2px solid #340A55;font-family:Dr Sugiyama;color: #9CA241;text-align: center;font-size: 15px;border-radius: 10px 10px 10px 10px;}
- .tab4 { z-index:10; position: absolute; top: 33%; left: 57%; width: 30%; height: 3%; border-radius: 0%;background-color: #000;border:2px solid #340A55;font-family:Dr Sugiyama;color: #9CA241;text-align: center;font-size: 15px;border-radius: 10px 10px 10px 10px;}
- h1 {width: 100%; height: auto; font-size: 20px;font-family:Yellowtail;margin-top:0px; margin-bottom: 5px; text-align: center; border-bottom: 1px solid #ccc; color: #5A3D70;}
- b, strong { color: #5A3D70;text-shadow: 0.1vw 0.1vw 0.1vw #;}
- a {color: #8AA4CC; text-decoration: none; }
- a:hover {color: blue; text-decoration: line-through;
- cursor: url('http://media.tumblr.com/e7f72e808c4dbe5006b9c3a30dbc9b79/tumblr_inline_mh67vhwGnR1rdqsqf.png');}
- </style>
- <div id="box">
- <img src="http://i.imgur.com/WyVWMJJ.png" height="700" style="position:absolute; bottom:-10%; left: 30%; z-index:1;">
- <div class="box1">
- <img src="http://i.imgur.com/9swpKvd.gif" width="97%" height="30%" style="position:absolute; top:0%; left: 0%; z-index:4;border:5px groove #202020;">
- <div id="name">
- Evio Mangus
- </div>
- <a href="#1"><div class="tab1"></div></a>
- <a href="#2"><div class="tab2"></div></a>
- <div id="infobackground">
- <div id="infobox">
- <center>
- <div style="height: 100%; overflow-y: hidden;">
- <a name="1"></a>
- <div style="width:95%; height: 100%; top: 0px; overflow: auto;" align="left">
- <br>
- <h1>Title</h1>
- Tab1
- </div>
- </div>
- <div style="height: 100%; overflow-y: hidden;">
- <a name="2"></a>
- <div style="width:95%; height: 100%; top: 100px; overflow: auto;" align="left">
- <br>
- <h1>Saber (Alter)</h1>
- Corrupted by Angra Mainyu, she is vastly different from her normal self. She is also called Black Saber. In Fate/hollow ataraxia, she wears her casual clothes; a gothic dress called Alter Gothic Dress.
- <br><br><br>
- <h1>Title</h1>
- Tab 2
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="box2">
- <img src="http://i.imgur.com/2RRGTQd.gif" width="97%" height="30%" style="position:absolute; top:0%; left: 0%; z-index:4;border:5px groove #202020;">
- <div id="name2">
- Elven Mage
- </div>
- <a href="#3"><div class="tab3"></div></a>
- <a href="#4"><div class="tab4"></div></a>
- <div id="infobackground2">
- <div id="infobox2">
- <center>
- <div style="height: 100%; overflow-y: hidden;">
- <a name="3"></a>
- <div style="width:95%; height: 100%; top: 0px; overflow: auto;" align="left">
- <br>
- <h1>Title</h1>
- Tab 3
- </div>
- </div>
- <div style="height: 100%; overflow-y: hidden;">
- <a name="4"></a>
- <div style="width:95%; height: 100%; top: 100px; overflow: auto;" align="center">
- <br>
- <h1>Title</h1>
- Tab4
- </div>
- </div>
- </div>
- </div>
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement