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=Italianno);
- @import url(https://fonts.googleapis.com/css?family=IM+Fell+English+SC);
- @import url(https://fonts.googleapis.com/css?family=Cinzel+Decorative);
- body{
- background-size: 100% 100%;
- background-color:#000;
- background-position:center;
- background-repeat:no-repeat;
- background-attachment:fixed;
- background-image:url(http://i.imgur.com/6WSccB0.png);}
- ::-webkit-scrollbar { width: 2px; }
- ::-webkit-scrollbar-track { border-radius: 2px; background-color: transparent; }
- ::-webkit-scrollbar-thumb { border-radius: 2px; background-color: #transparent; }
- #image {
- position:fixed;
- left:0;
- bottom:0;
- opacity:.0;
- -webkit-animation: fade 3s 1s;
- animation: fade 3s 1s;
- -webkit-animation-fill-mode: forwards;
- animation-fill-mode: forwards;
- }
- @-webkit-keyframes fade{
- from{
- opacity:.0;
- }
- to{
- opacity:1.0;
- }}
- #image img{
- height: 100%;
- }
- .boxie {
- background-color: #;
- border: 1px solid #;
- color: #771196;
- text-shadow: 0 0 0.9em #;
- font-size: 16px;
- font-weight:bold;
- font-family: IM Fell English SC;
- height: 320px;
- left: 43%;
- opacity: 0;
- overflow: auto;
- padding: 5px;
- position: fixed;
- text-align: left;
- top: 305px;
- width: 461px;
- -webkit-transition: all 2s ease-in-out;
- transition: all 2.5s ease-in-out;
- }
- .boxie:target {
- background-color: #;
- border: 1px solid #;
- height: 450px;
- left: 43%;
- opacity: 1;
- overflow: auto;
- padding: 5px;
- position: fixed;
- top: 20%;
- width: 400px;
- z-index: 40;
- -webkit-transition: all 1s ease-in-out;
- transition: all 1s ease-in-out;
- -webkit-transform: rotateY(-360deg);
- transform: rotateY-360deg);
- }
- #nav a, #nav a:link, #nav a:visited {
- display:block;
- background: #;
- background-size: 100% 100%;
- background-color:#;
- background-image:url(http://i.imgur.com/Lja16aY.gif);
- background-position: center;
- background-repeat:no-repeat;
- color: #000;
- height: 80px;
- width:55px;
- margin-left:0px;
- margin-top:0px;
- padding:0px;
- opacity:0;
- -webkit-animation: fade 3s 1s;
- animation: fade 3s 1s;
- -webkit-animation-fill-mode: forwards;
- animation-fill-mode: forwards;
- -webkit-transition: all 1.5s ease-in-out;
- transition: all 1.5s ease-in-out;}
- @keyframes buttonfade{
- from{opacity:0;}
- to{opacity:1;}
- }
- #nav a:active, #nav a:hover {
- display:block;
- height: 80px;
- width:55px;
- padding:0px;
- text-decoration:none;
- background: #;
- background-size: 100% 100%;
- background-color:#;
- background-image:url(http://i.imgur.com/Lja16aY.gif);
- background-position: center;
- background-repeat:no-repeat;
- color: #fff;
- margin-left:0px;
- margin-top:0px;
- -webkit-transition-duration: 0.25s;
- -moz-transition-duration: 0.25s;
- -webkit-transition: all 1s ease-in-out;
- transition: all 1s ease-in-out;
- -webkit-transform: rotateX(-360deg);
- transform: rotateX(-360deg);
- }
- .button{
- position:absolute;
- width:80px;
- background:;
- height:80px;
- overflow:hidden;
- }
- h1{
- color: #ccc;
- text-shadow: -0.2vw 0.2vw 0.2vw #;
- font-family: Italianno;
- font-size: 25px;
- letter-spacing: 0.5vw;
- text-align: center;}
- b {
- font-family:'Cinzel Decorative';
- color:#fff;
- font-size: 15px;
- }
- a {
- color: #D798BD;
- font-family: IM Fell English SC;
- font-size: 16px;
- text-decoration: none;
- transition: all 0.8s ease-in-out;
- -moz-transition: all 0.8s ease-in-out;
- -webkit-transition: all 0.8s ease-in-out;}
- a:hover {
- color: #fff;
- text-decoration: none;
- transition: all 0.4s ease-in-out;
- -moz-transition: all 0.4s ease-in-out;
- -webkit-transition: all 0.4s ease-in-out;}
- #credit{ position: fixed; right: 10px; bottom: 0px; font-family: Arail; font-variant: normal; font-weight: normal; font-size: 15px; color: #ccc;z-index:1;}
- </style>
- <div id="credit">
- Layout © <a href="profile.php?user=Pachi" target="_blank">Pachi</a>
- </div>
- <div id="image">
- <img src="http://i.imgur.com/zuO3s9f.png">
- </div>
- <div id="nav">
- <div class="button" style="top:67%; left:20%;"> <a href="#1"></a> </div>
- <div class="button" style="top:60%; left:24%;"> <a href="#2"></a> </div>
- <div class="button" style="top:55%; left:28%;"> <a href="#3"></a> </div>
- <div class="button" style="top:60%; left:32%;"> <a href="#4"></a> </div>
- <div class="button" style="top:67%; left:36%;"> <a href="#reset"></a> </div>
- </div>
- <div id="1" class="boxie">
- <h1>Header</h1>
- <b>Bold</b> <i>Italics</i> <a href="profile.php?user=" target="_blank">Link</a>. Words
- </div>
- <div id="2" class="boxie">
- words
- </div>
- <div id="3" class="boxie">
- words
- </div>
- <div id="4" class="boxie">
- words
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement