Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- --------- STYLE ----------
- @import url('//fonts.googleapis.com/css?family=Original Surfer');
- @import url('//fonts.googleapis.com/css?family=Ruge Boogie');
- @import url('//fonts.googleapis.com/css?family=Sevillana');
- @import url('//fonts.googleapis.com/css?family=Codystar');
- @import url('//fonts.googleapis.com/css?family=Indie Flower');
- ::-webkit-scrollbar {width: .3vw; height: 1vw; background: #; }
- ::-webkit-scrollbar-thumb { background-color:#; border-radius:5vw;}
- a:link, a:visited, a:active{color: #E2C7FF; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out;}
- a:hover { color: #D189FF; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; }
- h1 {color: #D8973B;text-align: center;font-family:'Indie Flower', sans-serif;font-size: 25px;line-height:20px;}
- i {color:#DE6072;font-style: italic;text-shadow: 2px 0 0 #B43141, -2px 0 0 #B43141, 0 2px 0 #B43141, 0 -2px 0 #B43141, 1px 1px #B43141, -1px -1px 0 #B43141, 1px -1px 0 #B43141, -1px 1px 0 #B43141;}
- b {color:#DE6072;font-style: bold;text-shadow: 2px 0 0 #B43141, -2px 0 0 #B43141, 0 2px 0 #B43141, 0 -2px 0 #B43141, 1px 1px #B43141, -1px -1px 0 #B43141, 1px -1px 0 #B43141, -1px 1px 0 #B43141;}
- body{overflow:hidden;background-image: linear-gradient(#0D1927, #304B68, #8092A6, #E6ABC1, #D09EB2, #DEC3E5);background-position:0% 100%;}
- @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
- @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
- @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
- @-webkit-keyframes action {0% { transform: translateY(0); }100% { transform: translateY(-10px); }}
- @keyframes action {0% { transform: translateY(0); }100% { transform: translateY(-10px); }}
- .tooltip {padding:1px;
- position: relative;
- display: inline-block;
- color:#DBDAFD;
- text-shadow: 2px 0 0 #314151, -2px 0 0 #314151, 0 2px 0 #314151, 0 -2px 0 #314151, 1px 1px #314151, -1px -1px 0 #314151, 1px -1px 0 #314151, -1px 1px 0 #314151;
- transition: all .5s ease-in-out;-moz-transition: all .5s ease-in-out;-ms-transition: all .5s ease-in-out;-o-transition: all .5s ease-in-out;transition: all .5s ease-in-out;}
- .tooltip:hover{
- position: relative;
- display: inline-block;
- color:#fff;
- transition: all .5s ease-in-out;-moz-transition: all .5s ease-in-out;-ms-transition: all .5s ease-in-out;-o-transition: all .5s ease-in-out;transition: all .5s ease-in-out;
- }
- .tooltip .tooltiptext {
- visibility: hidden;
- background-color:#DBDAFD;box-shadow:2px 2px 1px #314151;
- width:80px;
- padding:0px 0px;
- color: #000000;text-shadow:0px 0px 0px #fff;
- font-size:18px;
- text-align: center;
- border-radius: 5px;
- position: absolute;
- z-index: 1;
- top: 95%;
- left: 50%;
- margin-left:-40px;}
- .tooltip .tooltiptext {
- opacity: 0;
- transition: all .5s ease-in-out;-moz-transition: all .5s ease-in-out;-ms-transition: all .5s ease-in-out;-o-transition: all .5s ease-in-out;transition: all .5s ease-in-out;
- }
- .tooltip:hover .tooltiptext {
- opacity: 1;
- transition: all .5s ease-in-out;-moz-transition: all .5s ease-in-out;-ms-transition: all .5s ease-in-out;-o-transition: all .5s ease-in-out;transition: all .5s ease-in-out;
- }
- .tooltip:hover .tooltiptext {
- visibility: visible;
- }
- a.tip {
- text-decoration: none;}
- a.tip:hover {
- cursor: help;
- position: relative;}
- a.tip span {
- display: none;}
- a.tip:hover span {
- border: #334454 2px solid;
- padding: 5px 20px 5px 5px;
- display: block;
- z-index: 100;
- background: #DBDAFD no-repeat 100% 5%;
- left: 70px;
- width: 150px;
- color:#314151;
- font-family:'teko';
- font-size:15px;
- height:50px;
- position: absolute;
- top: -50px;
- text-decoration: none;
- border-radius:10px;
- opacity:1;}
- .celeste{position:absolute;background-image:url(http://i.picpar.com/1pJe.png);background-size:100%;background-repeat:no-repeat;width:400px;height:500px;bottom:0px;left:0px;z-index:2;}
- .overlay{position:absolute;left:0px;bottom:0px;width:100%; height:100%;background-image:url(https://www.transparenttextures.com/patterns/asfalt-light.png);z-index:2;}
- #content {position: fixed;left: 0px;top: 0px; right: 0px; bottom: 0px;}
- #switch{position:absolute;left:-100%;top:-100%;}
- #switch + label {position: absolute;z-index: 4;height:65px;width:65px;left:110px;bottom:387px;background: url(http://i.picpar.com/2pJe.png);background-size: 100%;background-repeat:no-repeat;position: absolute;margin: 0;opacity: 1;transition: all .5s ease-in-out;-moz-transition: all .5s ease-in-out;-ms-transition: all .5s ease-in-out;-o-transition: all .5s ease-in-out;transition: all .5s ease-in-out;cursor: help;}
- #switch + label:hover {position: absolute;z-index: 4;background: url(http://i.picpar.com/2pJe.png);background-size: 100%;background-repeat:no-repeat;position: absolute;margin: 0;transition: all .5s ease-in-out;-moz-transition: all .5s ease-in-out;-ms-transition: all .5s ease-in-out;-o-transition: all .5s ease-in-out;transition: all .5s ease-in-out;-webkit-animation:spin 5s linear infinite;-moz-animation:spin 5s linear infinite;
- animation:spin 5s linear infinite;}
- #switch:checked + label {position:absolute;height:65px;width:65px;left:108px;bottom:389px;background: url(http://i.picpar.com/2pJe.png);background-size: 100%;background-repeat:no-repeat;opacity:1;z-index: 25;transition: all 1.5s ease-in-out;-moz-transition: all 1.5s ease-in-out;-ms-transition: all 1.5s ease-in-out;-o-transition: all 1.5s ease-in-out;transition: all 1.5s ease-in-out;cursor: help;-webkit-animation:spin 5s linear infinite;-moz-animation:spin 5s linear infinite;
- animation:spin 5s linear infinite;}
- .box{position:absolute;width:0px;height:360px;bottom:10px;left:280px;border-left:3px solid #354656;border-radius:10px;color:#334454;background-color:#BFAAC9;opacity:1;z-index:1;background-image:url(https://www.nicepng.com/png/full/408-4083349_report-abuse-space-stars-png-transparent.png);background-size:cover;transition: all 1.5s ease-out;-moz-transition: all 1.5s ease-out;-ms-transition: all 1.5s ease-out;-o-transition: all 1.5s ease-out;transition: all 1.5s ease-out;}
- #switch:checked ~ .box{width:600px;position: absolute;z-index:1;opacity: 1;transition: all 1.5s ease-out;-moz-transition: all 1.5s ease-out;-ms-transition: all 1.5s ease-out;-o-transition: all 1.5s ease-out;transition: all 1.5s ease-out;}
- .banner{position:absolute;background-image:url(https://i.redd.it/atld4xbdnyv41.jpg);width:170px;height:290px;background-size:100%;left:80px;bottom:70px;opacity:0;z-index:1;border-radius:5px;box-shadow:0px 0px 5px #CBE5EE;transition: all 1.5s ease-out;-moz-transition: all 1.5s ease-out;-ms-transition: all 1.5s ease-out;-o-transition: all 1.5s ease-out;transition: all 1.5s ease-out;}
- #switch:checked ~ .banner{left:700px;position: absolute;z-index:4;opacity: .7;transition: all 1.5s ease-out;-moz-transition: all 1.5s ease-out;-ms-transition: all 1.5s ease-out;-o-transition: all 1.5s ease-out;transition: all 1.5s ease-out;}
- .title{position:absolute;z-index:1;left:80px;width:500px;bottom:10px;font-size:60px;line-height:60px;font-family:'Sevillana';text-align:center;background-position:10% 10%;background-image:url(https://thumbs.gfycat.com/AnimatedDeficientAlleycat-size_restricted.gif);-webkit-background-clip: text; -webkit-text-fill-color: transparent;-webkit-transition: all 1s;opacity:0;transition: all 1.5s ease-out;-moz-transition: all 1.5s ease-out;-ms-transition: all 1.5s ease-out;-o-transition: all 1.5s ease-out;transition: all 1.5s ease-out;letter-spacing:3px;}
- #switch:checked ~ .title{left:230px;width:500px;position: absolute;z-index:4;opacity: 1;transition: all 1.5s ease-out;-moz-transition: all 1.5s ease-out;-ms-transition: all 1.5s ease-out;-o-transition: all 1.5s ease-out;transition: all 1.5s ease-out;}
- .titlea{position:absolute;z-index:1;left:80px;width:500px;bottom:10px;font-size:60px;line-height:60px;font-family:'Sevillana';text-align:center;-webkit-transition: all 1s;opacity:1;text-shadow: 2px 0 0 #DBC3E7, -2px 0 0 #DBC3E7, 0 2px 0 #DBC3E7, 0 -2px 0 #DBC3E7, 1px 1px #DBC3E7, -1px -1px 0 #DBC3E7, 1px -1px 0 #DBC3E7, -1px 1px 0 #DBC3E7;opacity:0;transition: all 1.5s ease-out;-moz-transition: all 1.5s ease-out;-ms-transition: all 1.5s ease-out;-o-transition: all 1.5s ease-out;transition: all 1.5s ease-out;letter-spacing:3px;}
- #switch:checked ~ .titlea{left:230px;width:500px;position: absolute;z-index:3;opacity: 1;transition: all 1.5s ease-out;-moz-transition: all 1.5s ease-out;-ms-transition: all 1.5s ease-out;-o-transition: all 1.5s ease-out;transition: all 1.5s ease-out;}
- .titleb{position:absolute;z-index:1;left:80px;width:500px;bottom:10px;font-size:60px;line-height:60px;font-family:'Sevillana';text-align:center;-webkit-transition: all 1s;opacity:1;text-shadow: 0px 0px 10px #fff;opacity:0;letter-spacing:3px;transition: all 1.5s ease-out;-moz-transition: all 1.5s ease-out;-ms-transition: all 1.5s ease-out;-o-transition: all 1.5s ease-out;transition: all 1.5s ease-out;}
- #switch:checked ~ .titleb{left:230px;width:500px;position: absolute;z-index:2;opacity: 1;transition: all 1.5s ease-out;-moz-transition: all 1.5s ease-out;-ms-transition: all 1.5s ease-out;-o-transition: all 1.5s ease-out;transition: all 1.5s ease-out;}
- .title2{position:absolute;z-index:1;left:80px;width:500px;bottom:8px;font-size:60px;line-height:60px;font-family:'Ruge Boogie';text-align:center;-webkit-transition: all 1s;opacity:0;background-position:70% 0%;background-image:url(https://thumbs.gfycat.com/AnimatedDeficientAlleycat-size_restricted.gif);-webkit-background-clip: text; -webkit-text-fill-color: transparent;transition: all 1.5s ease-out;-moz-transition: all 1.5s ease-out;-ms-transition: all 1.5s ease-out;-o-transition: all 1.5s ease-out;transition: all 1.5s ease-out;}
- #switch:checked ~ .title2{left:500px;width:500px;position: absolute;z-index:4;opacity: 1;transition: all 1.5s ease-out;-moz-transition: all 1.5s ease-out;-ms-transition: all 1.5s ease-out;-o-transition: all 1.5s ease-out;transition: all 1.5s ease-out;}
- .title2a{position:absolute;z-index:1;opacity:0;left:80px;width:500px;bottom:8px;font-size:60px;line-height:60px;font-family:'Ruge Boogie';text-align:center;text-shadow: 2px 0 0 #DBC3E7, -2px 0 0 #DBC3E7, 0 2px 0 #DBC3E7, 0 -2px 0 #DBC3E7, 1px 1px #DBC3E7, -1px -1px 0 #DBC3E7, 1px -1px 0 #DBC3E7, -1px 1px 0 #DBC3E7;transition: all 1.5s ease-out;-moz-transition: all 1.5s ease-out;-ms-transition: all 1.5s ease-out;-o-transition: all 1.5s ease-out;transition: all 1.5s ease-out;}
- #switch:checked ~ .title2a{left:500px;width:500px;position: absolute;z-index:3;transition: all 1.5s ease-out;-moz-transition: all 1.5s ease-out;-ms-transition: all 1.5s ease-out;-o-transition: all 1.5s ease-out;transition: all 1.5s ease-out;}
- .title2b{position:absolute;z-index:1;opacity:0;left:80px;width:500px;bottom:8px;font-size:60px;line-height:60px;font-family:'Ruge Boogie';text-align:center;-webkit-transition: all 1s;text-shadow: 0px 0px 10px #fff;transition: all 1.5s ease-out;-moz-transition: all 1.5s ease-out;-ms-transition: all 1.5s ease-out;-o-transition: all 1.5s ease-out;transition: all 1.5s ease-out;}
- #switch:checked ~ .title2b{left:500px;width:500px;position: absolute;z-index:2;opacity: 1;transition: all 1.5s ease-out;-moz-transition: all 1.5s ease-out;-ms-transition: all 1.5s ease-out;-o-transition: all 1.5s ease-out;transition: all 1.5s ease-out;}
- .title3{position:absolute;z-index:1;opacity:1.7;left:85px;width:500px;bottom:390px;font-size:30px;line-height:60px;font-family:'Codystar';text-align:center;-webkit-transition: all 1s;font-style:italic;color:#B8D6F2;text-shadow: 0px 0px 5px #fff;transition: all 1.5s ease-out;-moz-transition: all 1.5s ease-out;-ms-transition: all 1.5s ease-out;-o-transition: all 1.5s ease-out;transition: all 1.5s ease-out;}
- #switch:checked ~ .title3{position: absolute;z-index:2;opacity: 0;transition: all 1.5s ease-out;-moz-transition: all 1.5s ease-out;-ms-transition: all 1.5s ease-out;-o-transition: all 1.5s ease-out;transition: all 1.5s ease-out;}
- #tab1,#tab2,#tab3,#tab4,#tab5{opacity:0;}
- #tabbed1,#tabbed2,#tabbed3,#tabbed4,#tabbed5{opacity: 0;position: absolute;transition: all 1s;-webkit-transition: all 1s;background-color:#;color:#C8CFFF;text-shadow:1px 1px 1px #8991FF;font-family:'Original Surfer', sans-serif;font-size: 15px;line-height: 18px;width:260px;height:190px;overflow-y:scroll;}
- #Tab1:checked ~ #topt #tabbed1,
- #Tab2:checked ~ #topt #tabbed2,
- #Tab3:checked ~ #topt #tabbed3,
- #Tab4:checked ~ #topt #tabbed4,
- #Tab5:checked ~ #topt #tabbed5{width:260px;opacity: 1;z-index:10;}
- #Tab1:checked ~ .textb,#Tab1:checked ~ .textb{
- width:280px;opacity:.4;z-index:5;transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}
- #Tab2:checked ~ .textb2,#Tab2:checked ~ .textb2{
- width:280px;opacity:.4;z-index:5;transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}
- #Tab3:checked ~ .textb3,#Tab3:checked ~ .textb3{
- width:280px;opacity:.4;z-index:5;transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}
- #Tab4:checked ~ .textb4,#Tab4:checked ~ .textb4{
- width:280px;opacity:.4;z-index:5;transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}
- .holder{position:absolute;z-index:4;opacity:0;left:-1000px;bottom:0px;transition: all 1.5s ease-out;-moz-transition: all 1.5s ease-out;-ms-transition: all 1.5s ease-out;-o-transition: all 1.5s ease-out;transition: all 1.5s ease-out;}
- #switch:checked ~ .holder{left:0px;z-index:10;opacity: 1;transition: all 1.5s ease-out;-moz-transition: all 1.5s ease-out;-ms-transition: all 1.5s ease-out;-o-transition: all 1.5s ease-out;transition: all 1.5s ease-out;}
- .button{background:url(http://i.picpar.com/mpJe.gif);background-size:100%;height:70px;
- Width:70px;position:absolute;opacity:1;z-index:10;left:370px;bottom:290px;transition: all .5s ease-in-out;-webkit-animation: action 1.5s infinite alternate;animation: action 1.5s infinite alternate;}
- .button:hover{background-image:url(http://i.picpar.com/npJe.gif);}
- .button2{background:url(http://i.picpar.com/npJe.gif);background-size:100%;height:70px;
- Width:70px;position:absolute;opacity:1;z-index:10;left:450px;bottom:290px;transition: all .5s ease-in-out;-webkit-animation: action 1s infinite alternate;animation: action 1s infinite alternate;}
- .button2:hover{background-image:url(http://i.picpar.com/mpJe.gif);}
- .button3{background:url(http://i.picpar.com/mpJe.gif);background-size:100%;height:70px;
- Width:70px;position:absolute;opacity:1;z-index:10;left:530px;bottom:290px;transition: all .5s ease-in-out;-webkit-animation: action 1.5s infinite alternate;animation: action 1.5s infinite alternate;}
- .button3:hover{background-image:url(http://i.picpar.com/npJe.gif);}
- .button4{background:url(http://i.picpar.com/npJe.gif);background-size:100%;height:70px;
- Width:70px;position:absolute;opacity:1;z-index:10;left:610px;bottom:290px;transition: all .5s ease-in-out;-webkit-animation: action 1s infinite alternate;animation: action 1s infinite alternate;}
- .button4:hover{background-image:url(http://i.picpar.com/mpJe.gif);}
- .button5{background:url(http://i.picpar.com/qpJe.png);background-size:100%;height:70px;
- Width:70px;position:absolute;opacity:1;z-index:10;left:570px;bottom:5px;transition: all .5s ease-in-out;}
- .button5:hover{-webkit-animation:spin 5s linear infinite;-moz-animation:spin 5s linear infinite;
- animation:spin 5s linear infinite;}
- #topt{width:260px;height:190px;left:410px;bottom:90px;position:absolute;border-radius:5px;}
- #topt{opacity: 1; transition: all 1s; -webkit-transition: all 1s;}
- #topt{opacity: 0; transition: all 1s; -webkit-transition: all 1s;}
- #switch:checked ~ #topt{opacity: 1;}
- .textb,.textb2,.textb3,.textb4{position:absolute;width:0px;height:210px;opacity:0;left:400px;bottom:80px;border-radius:5px;z-index:1;transition: all 1.5s ease-out;-moz-transition: all 1.5s ease-out;-ms-transition: all 1.5s ease-out;-o-transition: all 1.5s ease-out;transition: all 1.5s ease-out;}
- #switch:checked ~ .textb,.textb2,.textb3,.textb4{background-color:#C6CEFF;box-shadow:0px 0px 5px #C6CEFF;position: absolute;z-index:2;opacity: .4;transition: all 1.5s ease-out;-moz-transition: all 1.5s ease-out;-ms-transition: all 1.5s ease-out;-o-transition: all 1.5s ease-out;transition: all 1.5s ease-out;}
- .credit{bottom:0vw;left:96vw;width: 5vw;height: 6vw;opacity: 1;overflow: hidden;position: fixed;z-index:100;}
- ------------- END STYLE----------
- ---------- PLACE IN BODY -----------
- <div id="content" >
- <input type="checkbox" name="toggle" id="switch" /><label for="switch"></label>
- <input type="radio" name="HubSwitch" id="Tab1">
- <input type="radio" name="HubSwitch" id="Tab2">
- <input type="radio" name="HubSwitch" id="Tab3">
- <input type="radio" name="HubSwitch" id="Tab4">
- <input type="radio" name="HubSwitch" id="Tab5">
- <div class="celeste"></div>
- <div class="overlay"></div>
- <div class="title">Celeste </div>
- <div class="titlea">Celeste </div>
- <div class="titleb">Celeste </div>
- <div class="title2">hootie hoot!</div><div class="title2a">hootie hoot!</div><div class="title2b">hootie hoot!</div>
- <div class="title3">follow the stars</div>
- <div class="box"></div>
- <div class="banner"></div>
- <div class="textb"></div><div class="textb2"></div><div class="textb3"></div><div class="textb4"></div>
- <div id="topt">
- <div id="tabbed1">
- this is normal text<bR>
- <i>italics</i> - <b>bold</b><br>
- <a href="" target="_blank">link</a><bR>
- star in between the titles below reset the tabs. reclick the spinning star to reset the whole profile.
- </div>
- <div id="tabbed2">
- text goes here help 2
- </div>
- <div id="tabbed3">
- text goes here help 3
- </div>
- <div id="tabbed4">
- Profile coded by <a target="_blank" href="https://roleplay.chat/profile.php?user=ReverieStyles" target="_blank">RStyles</a>. Hit them up if you're interested in a code.
- </div>
- </div>
- <div class="holder">
- <label for="Tab1"><div class="button"></div></label>
- <label for="Tab2"><div class="button2"></div></label>
- <label for="Tab3"><div class="button3"></div></label>
- <label for="Tab4"><div class="button4"></div></label>
- <label for="Tab5"><div class="button5"></div></label>
- </div>
- <div class="credit"><a target="_blank" href="https://roleplay.chat/profile.php?user=ReverieStyles" target="_blank"><img src="https://i.imgur.com/fgKTyd3.png" width="100%"></a>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement