Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <style>
- @import url(http://fonts.googleapis.com/css?family=Kaushan+Script);
- @import url(http://fonts.googleapis.com/css?family=Josefin+Slab);
- @import url(http://fonts.googleapis.com/css?family=EB+Garamond);
- .pfor {display: none;}
- #profile {background: transparent; border: none;}
- body {
- background: white;
- }
- a{text-decoration: none; color: black;}
- #whole {
- position: fixed;
- top: 0px;
- left: 0px;
- right: 0px;
- bottom: 0px;
- background-image: url(http://fc01.deviantart.net/fs70/f/2014/270/e/6/jack__of_blades_by_demon551-d80q49l.png);
- background-repeat: no-repeat;
- background-size: auto 120%;
- background-position: -20px;
- font-family: 'Kaushan Script', cursive;
- }
- ::-webkit-scrollbar-track {
- -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
- border-radius: 10px;
- background: #370C00;
- }
- ::-webkit-scrollbar {
- width: 4px;
- background-color: #370C00;
- }
- ::-webkit-scrollbar-thumb {
- border-radius: 10px;
- -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
- background-color: black;
- }
- #separation {
- position: absolute;
- left: 0px;
- right: 0px;
- top: 20%;
- bottom: 0px;
- height: 0px;
- background: white;
- margin: auto;
- overflow: hidden;
- transition: all 1s;
- -webkit-transition: all 1s;
- }
- #whole:hover #separation,
- #separation:hover {
- height: 250px;
- }
- #containerleft {
- position: absolute;
- left: 0px;
- top: 0px;
- bottom: 0px;
- width: 200px;
- border: 0px solid black;
- overflow: hidden;
- }
- #leftbox {
- position: absolute;
- border-right: 1px solid black;
- border-radius: 0px 360px 360px 0px;
- left: 0px;
- top: -10px;
- bottom: -10px;
- width: 99%;
- box-sizing: border-box;
- text-align: left;
- font-weight: 800;
- background: #2A2A2A;
- color: black;
- background-image: url(http://i61.tinypic.com/f22cd4.jpg);
- background-size: 20%;
- font-family: 'EB Garamond', serif;
- font-size: 12pt;
- letter-spacing: -1px;
- overflow: hidden;
- }
- #containerright {
- position: absolute;
- right: 0px;
- top: 0px;
- bottom: 0px;
- width: 200px;
- border: 0px solid black;
- overflow: hidden;
- }
- #rightbox {
- position: absolute;
- border-left: 1px solid black;
- border-radius: 360px 0px 0px 360px;
- right: 0px;
- top: -10px;
- bottom: -10px;
- width: 99%;
- background: #2A2A2A;
- box-sizing: border-box;
- text-align: right;
- line-height: 45px;
- background-image: url(http://i61.tinypic.com/f22cd4.jpg);
- background-size: 20%;
- font-weight: 600;
- font-family: 'EB Garamond', serif;
- font-size: 12pt;
- letter-spacing: -1px;
- overflow: hidden;
- z-index: 20;
- }
- #rightlinks {
- position: absolute;
- right: 0px;
- top: 0px;
- height: 228px;
- width: 198px;
- border: 0px solid red;
- overflow: hidden;
- }
- .rightside {
- position: inherent;
- height: 228px;
- width: 198px;
- border: 0px solid black;
- text-align: center;
- padding-top: 40px;
- box-sizing: border-box;
- font-family: 'Kaushan Script', cursive;
- }
- #linkspace {
- box-sizing: border-box;
- padding-left: 30px;
- width: 200px;
- height: 58px;
- border: 1px solid black;
- transition: all 1s;
- background: transparent;
- overflow: hidden;
- position: absolute;
- z-index: 1;
- }
- #linkspace:hover {
- letter-spacing: 4px;
- }
- a.linkersleft {
- color: black;
- }
- #fillerspace {
- position: absolute;
- height: 100px;
- margin-left: -100px;
- position: relative;
- background: transparent;
- opacity: .4;
- transition: all 1s;
- -webkit-transition: all 1s;
- }
- #linkspace:hover #fillerspace {
- background: #670D0F;
- }
- #middlecontainer {
- position: absolute;
- top: 0px;
- bottom: 0px;
- left: 100px;
- right: 100px;
- border: 0px solid black;
- }
- .middlebox {
- position: absolute;
- top: 10px;
- bottom: 10px;
- left: 100px;
- right: 100px;
- border: 0px solid black;
- overflow: auto;
- text-align: left;
- box-sizing: border-box;
- padding-top: 5px;
- padding-bottom: 10px;
- font-weight: 500;
- font-size: 11pt;
- color: grey;
- padding-right: 20px;
- padding-left: 5px;
- opacity: 0;
- transition: all 1s;
- -webkit-transition: all 1s;
- }
- .middlebox:target {opacity: 1;
- transition: all 1s .5s;
- -webkit-transition: all 1s .5s;}
- #bgstuff {
- position: absolute;
- height: 100%;
- width: 100%;
- z-index: 0;
- background-image: url(http://i58.tinypic.com/e1axxk.jpg);
- background-size: 20%;
- opacity: 1;
- }
- #bordertop {
- position: absolute;
- height: 10px;
- width: 100%;
- top: 0px;
- z-index: 10;
- background: #1A1B1F;
- background-image: url(http://i61.tinypic.com/f22cd4.jpg);
- background-size: 20%;
- }
- #borderbottom {
- position: absolute;
- height: 10px;
- width: 100%;
- bottom: 0px;
- background: #1A1B1F;
- z-index: 10;
- background-image: url(http://i61.tinypic.com/f22cd4.jpg);
- background-size: 20%;
- }
- #namepart {
- position: fixed;
- margin-top: -47px;
- margin-left: 100px;
- height: 40px;
- width: 120px;
- font-size: 30pt;
- color: #82605C;
- z-index: 20;
- opacity: 0;
- transition: all .7s;
- -webkit-transition: all .7s;
- }
- #whole:hover #namepart {
- opacity: 1;
- transition: all 1s, .5s;
- -webkit-transition: all 1s .5s;
- }
- </style>
- <div id="whole">
- <div id="separation">
- <div id="bordertop">
- </div>
- <div id="borderbottom">
- </div>
- <div id="bgstuff">
- </div>
- <div id="namepart">
- <div style="position: absolute; font-size: 29pt; color: black;">
- Raguel</div>
- Raguel</div>
- <div id="bgstuff" style="background: black; opacity: .6;">
- </div>
- <div id="containerleft">
- <div id="leftbox">
- <a href=#partone class="linkersleft">
- <div id="linkspace" style="top: 20px; ">
- <div id="fillerspace"></div>
- <font style="position: absolute; top: 15px;">● Option 1</font></div>
- </a>
- <a href=#parttwo class="linkersleft">
- <div id="linkspace" style="top: 77px;">
- <div id="fillerspace"></div>
- <font style="position: absolute; top: 15px;">● Option 2</font></div>
- </a>
- <a href=#partthree class="linkersleft">
- <div id="linkspace" style="top:134px;">
- <div id="fillerspace"></div>
- <font style="position: absolute; top: 15px;">● Option 3</font></div>
- </a>
- <a href=#partfour class="linkersleft">
- <div id="linkspace" style="top:191px;">
- <div id="fillerspace"></div>
- <font style="position: absolute; top: 15px;">● Option 4</font></div>
- </a>
- </div>
- </div>
- <div id="containerright">
- <div id="rightbox">
- <div id="rightlinks">
- <div class="rightside">
- </div>
- <div id="partone" class="rightside">
- <a href=#mid1>Option 1</a>
- <br> <a href=#mid2>Option 2</a>
- <br> Option 3
- <br> Option 4
- <br>
- </div>
- <div id="parttwo" class="rightside">
- 2Option 1
- <br> 2Option 2
- <br> 2Option 3
- <br> 2Option 4
- <br>
- </div>
- <div id="partthree" class="rightside">
- 3Option 1
- <br> 3Option 2
- <br> 3Option 3
- <br> 3Option 4
- <br>
- </div>
- <div id="partfour" class="rightside">
- 4Option 1
- <br> 4Option 2
- <br> 4Option 3
- <br> 4Option 4
- <br>
- </div>
- </div>
- </div>
- </div>
- <div id="middlecontainer">
- <div id="mid1" class="middlebox">
- Middlestuff.
- </div>
- <div id="mid2" class="middlebox">
- 2Middlestuff.
- </div>
- </div>
- </div>
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement