Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <style>
- .pfor {display: none;
- }
- #profile {background: transparent; border: 0px;}
- body { color: black; font-size: 12pt; }
- #whole{position: fixed;
- top: 0px;
- left: 0px;
- right: 0px;
- bottom: 0px;
- background: #cccccc;
- background-image:
- url(http://i.picpar.com/ovvb.png);
- background-repeat: no-repeat;
- background-position: bottom -25px right;
- background-size: 500px auto;
- }
- #smallbox {position: absolute;
- right: 501px;
- top: 201px;
- height: 301px;
- width: 200px;
- border-radius: 30px 30px 30px 30px;
- z-index: 3;
- background: #727272;
- border: 2px dashed black;
- box-sizing: border-box;
- overflow: hidden;
- background-image: url(http://i62.tinypic.com/2zg81w9.png);
- background-size: 100%;
- background-repeat: no-repeat;
- background-position: bottom center;
- transition: all 1s;
- -webkit-transition: all 1s;
- }
- #overbox{ position: absolute;
- height: 314px;
- width: 212px;
- top: 195px;
- right: 495px;
- border: 0px solid black;
- border-radius: 30px 30px 30px 30px;
- z-index: 1;
- background: transparent;}
- #selections{height: 50%;
- width: 50%;
- position: absolute;
- border: 1px solid black;
- background: #090817;;
- transition: all .5s;
- -webkit-transition: all .5s;
- -webkit-animation: shadowloop 1s infinite;
- animation: shadowloop 1s infinite;}
- #selections.a {top: -1px;
- left: -1px;
- border-radius: 30px 0px 0px 0px;}
- #selections.b {top: -1px;
- right: -1px;
- border-radius: 0px 30px 0px 0px;}
- #selections.c {bottom: -1px;
- left: -1px;
- border-radius: 0px 0px 0px 30px;}
- #selections.d {bottom: -1px;
- right: -1px;
- border-radius: 0px 0px 30px 0px;}
- #selections:hover{
- background: #cccccc ;
- border: 1px solid yellow;}
- #selections:active{
- background: yellow;
- opacity: .3;}
- #blockervert { position: absolute;
- height: 370px;
- width: 120px;
- right: 540px;
- top: 170px;
- border: 0px solid black;
- z-index: 2;
- background: #cccccc;
- }
- #blockerhorz {position:absolute;
- height: 205px;
- width: 280px;
- top: 250px;
- right: 460px;
- border: 0px solid black;
- z-index: 2;
- background: #cccccc;
- }
- @-webkit-keyframes shadowloop {
- 0% {box-shadow: 0px 0px 3px yellow;}
- 50% {box-shadow: 0px 0px 25px yellow;}
- 60% {box-shadow: 0px 0px 25px yellow;}
- 100% {box-shadow: 0px 0px 3px yellow;}
- }
- @keyframes shadowloop {
- 0% {box-shadow: 0px 0px 3px yellow;}
- 50% {box-shadow: 0px 0px 15px yellow;}
- 60% {box-shadow: 0px 0px 15px yellow;}
- 100% {box-shadow: 0px 0px 3px yellow;}
- }
- .pages{position: absolute;
- top: 1px;
- left: 1px;
- text-align: center;
- width: 193px;
- border-radius: 30px 30px 30px 30px;
- height: 295px;
- border: 1px solid black;
- background: transparent;
- opacity: 0;
- transition: all 1s;
- -webkit-transition: all 1s;
- overflow: hidden;
- }
- .pages:target {
- left: 1px;
- opacity: 1;}
- #backgroundfiller{position: absolute;
- left: 0px;
- top: 0px;
- background: #cccccc;
- opacity: .8;
- height: 100%;
- width: 100%;
- }
- #textstuff{position: absolute;
- left: 0px;
- top: 0px;
- height: 100%;
- width: 100%;
- box-sizing: border-box;
- padding: 10px;
- opacity: 1;
- background: transparent;
- }
- #titlehover{ position: absolute;
- height: 20px;
- width: 170px;
- text-align: center;
- z-index: 10;
- right: 409px;
- top: 342px;
- transform: rotate(90deg);
- border: 0px solid black;
- overflow: hidden;
- letter-spacing: 5px;
- text-transform: uppercase;
- transition: all 1s;
- -webkit-transition: all 1s;
- font-size: 12pt;
- }
- #titlehover.b{
- right: 623px;
- top: 340px;
- transform: rotate(-90deg);}
- #titlehover:hover{
- font-size: 14pt;
- margin-right: -3px;
- }
- #titlehover.b:hover{
- margin-right: 3px;
- }
- #backgroundcover{position: absolute;
- height:297px;
- width: 196px;
- background: white;
- border-radius: 30px 30px 30px 30px;
- right: 503px;
- top: 203px;
- background-image:
- url(http://i59.tinypic.com/1xx8vo.gif);
- background-size: 100%;
- background-color: #48261A;
- background-repeat: no-repeat;
- background-position: center;
- opacity: 0;
- z-index: 0;
- transition: all 1s;
- -webkit-transition: all 1s;}
- #titlehover:hover + #backgroundcover{
- opacity: 1;
- z-index: 10;}
- }
- </style>
- <div id="whole">
- <div id="titlehover">
- Title Here
- </div>
- <div id="titlehover" class="b">
- Title Here
- </div>
- <div id="backgroundcover">
- </div>
- <div id="smallbox">
- <div class="pages" id="page1">
- <div id="backgroundfiller"></div>
- <div id="textstuff">1</div>
- </div>
- <div class="pages" id="page2">
- <div id="backgroundfiller"></div>
- <div id="textstuff">2</div>
- </div>
- <div class="pages" id="page3">
- <div id="backgroundfiller"></div>
- <div id="textstuff">3</div>
- </div>
- </div>
- <div id="overbox">
- <a href=#page1><div id="selections" class="a">
- </div></a>
- <a href=#page2><div id="selections" class="b">
- </div></a>
- <a href=#page3><div id="selections" class="c">
- </div></a>
- <a href=#blank><div id="selections" class="d">
- </div></a>
- </div>
- <div id="blockervert">
- </div>
- <div id="blockerhorz">
- </div>
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement