Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <style type="text/css">
- @import url(http://fonts.googleapis.com/css?family=Overlock+SC);
- @import url(http://fonts.googleapis.com/css?family=Play);
- @import url(http://fonts.googleapis.com/css?family=Play|Arizonia);
- body { background-color: #111; background-image: url(http://i.imgur.com/p7L5X0P.jpg);
- background-attachment: fixed;
- background-position: center;
- background-repeat: no-repeat;
- background-size: 100% 100%;margin: 0; overflow: hidden;}
- #Toggle1 {
- position:absolute;
- cursor: url(http://cur.cursors-4u.net/others/oth-6/oth590.ani), url(http://cur.cursors-4u.net/others/oth-6/oth590.png), progress !important;
- left:-100%;
- top:-100%;
- }
- #Toggle1 + label {
- width: 25%;
- height: 12%;
- position: absolute;
- left: 37.5%;
- top: 0%;
- border-bottom-left-radius: 10px;
- border-bottom-right-radius: 10px;
- background-color: #ccc;
- background-image: url(http://i.imgur.com/8XjoXhH.png);
- background-position: center;
- background-repeat: no-repeat;
- background-size: 100% 100%;
- border: 1px #fff solid;
- border-top: none;
- opacity: 1;
- z-index: 1;
- cursor: url(http://cur.cursors-4u.net/others/oth-6/oth589.cur), progress !important;
- -webkit-transition: all 0.6s ease-out;
- -moz-transition: all 0.6s ease-out;
- -ms-transition: all 0.6s ease-out;
- -o-transition: all 0.6s ease-out;
- transition: all 0.6s ease-out;
- }
- #Toggle1:checked + label {
- opacity: 0;
- z-index: -1;
- -webkit-transition: all 0.6s ease-out;
- -moz-transition: all 0.6s ease-out;
- -ms-transition: all 0.6s ease-out;
- -o-transition: all 0.6s ease-out;
- transition: all 0.6s ease-out;
- }
- #Toggle1:checked ~ #Toggle2 + label {
- position: absolute;
- left: 0;
- -webkit-transition: all 0.6s ease-out;
- -webkit-transition: all 0.6s ease-out;
- -moz-transition: all 0.6s ease-out;
- -ms-transition: all 0.6s ease-out;
- -o-transition: all 0.6s ease-out;
- transition: all 0.6s ease-out;
- }
- #Toggle2 {
- position:absolute;
- cursor: url(http://cur.cursors-4u.net/others/oth-6/oth590.ani), url(http://cur.cursors-4u.net/others/oth-6/oth590.png), progress !important;
- left:-100%;
- top:-100%;
- }
- #Toggle2 + label {
- width: 25%;
- height: 12%;
- position: absolute;
- left: -30%;
- top: 50%;
- border-top-right-radius: 10px;
- border-bottom-right-radius: 10px;
- background-color: #ccc;
- background-image: url(http://i.imgur.com/TrIEkIk.png);
- background-position: center;
- background-repeat: no-repeat;
- background-size: 100% 100%;
- border: 1px #fff solid;
- border-top: none;
- z-index: 1;
- cursor: url(http://cur.cursors-4u.net/others/oth-6/oth589.cur), progress !important;
- -webkit-transition: all 0.6s ease-out;
- -moz-transition: all 0.6s ease-out;
- -ms-transition: all 0.6s ease-out;
- -o-transition: all 0.6s ease-out;
- transition: all 0.6s ease-out;
- }
- #Toggle2:checked + label {
- opacity: 0;
- z-index: -1;
- -webkit-transition: all 0.6s ease-out;
- -moz-transition: all 0.6s ease-out;
- -ms-transition: all 0.6s ease-out;
- -o-transition: all 0.6s ease-out;
- transition: all 0.6s ease-out;
- }
- #Toggle2:checked ~ #Toggle3 + label {
- position: absolute;
- right: 0;
- -webkit-transition: all 0.6s ease-out;
- -webkit-transition: all 0.6s ease-out;
- -moz-transition: all 0.6s ease-out;
- -ms-transition: all 0.6s ease-out;
- -o-transition: all 0.6s ease-out;
- transition: all 0.6s ease-out;
- }
- #Toggle3 {
- position:absolute;
- cursor: url(http://cur.cursors-4u.net/others/oth-6/oth590.ani), url(http://cur.cursors-4u.net/others/oth-6/oth590.png), progress !important;
- left:-100%;
- top:-100%;
- }
- #Toggle3 + label {
- width: 25%;
- height: 12%;
- position: absolute;
- right: -30%;
- top: 50%;
- border-top-left-radius: 10px;
- border-bottom-left-radius: 10px;
- background-color: #ccc;
- background-image: url(http://i.imgur.com/gevkotO.png);
- background-position: center;
- background-repeat: no-repeat;
- background-size: 100% 100%;
- border: 1px #fff solid;
- border-top: none;
- z-index: 1;
- cursor: url(http://cur.cursors-4u.net/others/oth-6/oth589.cur), progress !important;
- -webkit-transition: all 1s ease-out;
- -moz-transition: all 1s ease-out;
- -ms-transition: all 1s ease-out;
- -o-transition: all 1s ease-out;
- transition: all 1s ease-out;
- }
- #Toggle3:checked + label {
- opacity: 0;
- z-index: -1;
- -webkit-transition: all 0.6s ease-out;
- -moz-transition: all 0.6s ease-out;
- -ms-transition: all 0.6s ease-out;
- -o-transition: all 0.6s ease-out;
- transition: all 0.6s ease-out;
- }
- #Toggle3:checked ~ #Toggle4 + label {
- position: absolute;
- bottom: 0;
- -webkit-transition: all 0.6s ease-out;
- -webkit-transition: all 0.6s ease-out;
- -moz-transition: all 0.6s ease-out;
- -ms-transition: all 0.6s ease-out;
- -o-transition: all 0.6s ease-out;
- transition: all 0.6s ease-out;
- }
- #Toggle4 {
- position:absolute;
- cursor: url(http://cur.cursors-4u.net/others/oth-6/oth590.ani), url(http://cur.cursors-4u.net/others/oth-6/oth590.png), progress !important;
- left:-100%;
- top:-100%;
- }
- #Toggle4 + label {
- width: 25%;
- height: 15%;
- position: absolute;
- right: 37.5%;
- bottom: -30%;
- border-top-left-radius: 10px;
- border-top-right-radius: 10px;
- background-color: #ccc;
- background-image: url(http://i.imgur.com/KRvZwtF.png);
- background-position: center;
- background-repeat: no-repeat;
- background-size: 100% 100%;
- border: 1px #fff solid;
- border-bottom: none;
- z-index: 1;
- cursor: url(http://cur.cursors-4u.net/others/oth-6/oth589.cur), progress !important;
- -webkit-transition: all 0.6s ease-out;
- -moz-transition: all 0.6s ease-out;
- -ms-transition: all 0.6s ease-out;
- -o-transition: all 0.6s ease-out;
- transition: all 0.6s ease-out;
- }
- #Toggle4:checked + label {
- opacity: 0;
- z-index: -1;
- -webkit-transition: all 0.6s ease-out;
- -moz-transition: all 0.6s ease-out;
- -ms-transition: all 0.6s ease-out;
- -o-transition: all 0.6s ease-out;
- transition: all 0.6s ease-out;
- }
- #Toggle4:checked ~ .Simba {
- opacity: 1;
- z-index: 12;
- -webkit-transition: all 0.6s ease-out;
- -moz-transition: all 0.6s ease-out;
- -ms-transition: all 0.6s ease-out;
- -o-transition: all 0.6s ease-out;
- transition: all 0.6s ease-out;
- }
- .Simba {height: 100%;width: 100%;overflow: hidden;background-color: #333;background-image: url(http://i.imgur.com/v059vYv.jpg);background-attachment: fixed;background-position: center;background-repeat: no-repeat;background-size: 100% 100%;opacity: 0;z-index: -1;margin: 0;-webkit-transition: all 0.6s ease-out;-moz-transition: all 0.6s ease-out;-ms-transition: all 0.6s ease-out;-o-transition: all 0.6s ease-out;transition: all 0.6s ease-out;}
- #tab1{position:absolute;left:3%;top:5%;z-index:3;}
- #tab2{position:absolute;left:27%;top:18%;z-index:3;}
- #tab3{position:absolute;right:35%;top:28%;z-index:3;}
- #tab4{position:absolute;right:2%;top:3%;z-index:3;}
- #tab5{position:absolute;left:2%;bottom:2%;z-index:3;}
- #tab6{position:absolute;right:2%;bottom:2%;z-index:3;}
- .fly {z-index: -1;position: absolute;border: 1px solid #51B562;background-color: #000;font-family: cambria;font-size: 16px;padding: 4px;color: #DBFDFF;height:35%;bottom:30%;left: 1%;width: 20%;line-height:16px;overflow: auto;opacity: 0;-webkit-transition: all 1s ease-out;-moz-transition: all 1s ease-out;-ms-transition: all 1s ease-out;-o-transition: all 1s ease-out;transition: all 1s ease-out;}
- .fly:target {z-index: 10;opacity: 1;position: absolute;bottom: 25%;-webkit-transition: all 1s ease-out;-moz-transition: all 1s ease-out;-ms-transition: all 1s ease-out;-o-transition: all 1s ease-out;transition: all 1s ease-out;}
- .away {z-index: -1;position: absolute;border: 1px solid #51B562;background-color: #000;font-family: cambria;font-size: 16px;padding: 4px;color: #DBFDFF;overflow: auto;height:35%;bottom:30%;width: 20%;right: 1%;opacity: 0;-webkit-transition: all 1s ease-out;-moz-transition: all 1s ease-out;-ms-transition: all 1s ease-out;-o-transition: all 1s ease-out;transition: all 1s ease-out;}
- .away:target {z-index: 10;opacity: 1;position: absolute;bottom: 25%;-webkit-transition: all 1s ease-out;-moz-transition: all 1s ease-out;-ms-transition: all 1s ease-out;-o-transition: all 1s ease-out;transition: all 1s ease-out;}
- .free {z-index: -1;position: absolute;border: 1px solid #51B562;background-color: #000;font-family: cambria;font-size: 16px;padding: 4px;color: #DBFDFF;overflow: auto;height:25%;bottom:30%;width: 20%;right: 43%;opacity: 0;-webkit-transition: all 1s ease-out;-moz-transition: all 1s ease-out;-ms-transition: all 1s ease-out;-o-transition: all 1s ease-out;transition: all 1s ease-out;}
- .free:target {z-index: 10;opacity: 1;position: absolute;bottom: 25%;-webkit-transition: all 1s ease-out;-moz-transition: all 1s ease-out;-ms-transition: all 1s ease-out;-o-transition: all 1s ease-out;transition: all 1s ease-out;}
- a { color: #4D8ABB;Text-shadow: 3px 4px 4px #333; font-family:cambria; font-size: 16px; letter-spacing: 1px; 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: #4D8ABB; text-decoration: line-through;cursor:help; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out;}
- h1{
- font-size: 16px; width: 100%;color: #51B562;font-family: 'Play', cursive;font-weight: normal; line-height: 12px;text-transform: uppercase;text-align: left;border-bottom: 1px solid #51B562;}
- h1:first-letter{color: #51B562;font-size: 16px;font-weight: bold;text-shadow: 0px 0px 3px silver;}
- b {text-size: 12px;color: #51B562;font-weight:bold; }
- #credit{ position: fixed;
- right: 1px;
- bottom: 0px;
- font-family: Arial;
- font-variant: normal;
- font-weight: normal;
- font-size: 90%;
- color: #ccc;
- z-index:5;}
- </style>
- <input type="checkbox" name="toggle" id="Toggle1" />
- <label for="Toggle1"></label>
- <input type="checkbox" name="toggle" id="Toggle2" />
- <label for="Toggle2"></label>
- <input type="checkbox" name="toggle" id="Toggle3" />
- <label for="Toggle3"></label>
- <input type="checkbox" name="toggle" id="Toggle4" />
- <label for="Toggle4"></label>
- <div class="Simba">
- <img src="http://i.imgur.com/ot6Vsta.png" height="100%" style="position:fixed; bottom:0%; left: 37%;">
- <div id="nav">
- <a href="#1"><div id="tab1"><img src="http://i.imgur.com/J4Uqxet.png" height="60px" width="60px"></a></div>
- <a href="#2"><div id="tab2"><img src="http://i.imgur.com/8LQ3Inq.png" height="50px" width="50px"></a></div>
- <a href="#3"><div id="tab3"><img src="http://i.imgur.com/SQlfIa3.png" height="60px" width="60px"></a></div>
- <a href="#4"><div id="tab4"><img src="http://i.imgur.com/9R58Qfo.png" height="50px" width="50px"></a></div>
- <a href="#5"><div id="tab5"><img src="http://i.imgur.com/Jx0R8Os.png" height="60px" width="60px"></a></div>
- <a href="##"><div id="tab6"><img src="http://i.imgur.com/FsXHbGU.png" height="90px" width="90px"></a></div>
- <div id="1" class="fly">
- <h1>Title</h1>
- <b>Bold</b> <i>italics</i> <a href="link.com" target="_blank">Link</a>
- </div>
- <div id="2" class="fly">
- words2
- </div>
- <div id="3" class="away">
- words 3
- </div>
- <div id="4" class="away">
- Words4
- </div>
- <div id="5" class="free">
- Words5
- </div>
- <div id="credit">
- Layout © <a href="profile.php?user=Pachi" target="_blank">Pachi</a>
- </div>
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement