Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <link href="https://fonts.googleapis.com/css?family=Open+Sans|Press+Start+2P" rel="stylesheet">
- <link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
- <style>
- #kelliesigcode{
- width: 500px;
- height: 200px;
- margin: 0px auto;
- position: relative;
- border: 4px solid #fff;
- outline: 1px solid #bbb;
- overflow: hidden;
- }
- #kelliesigcode ::-webkit-scrollbar {
- width: 3.5px;
- }
- #kelliesigcode ::-webkit-scrollbar-track {
- background: #bbb;
- border: 1px solid #fff;
- }
- #kelliesigcode ::-webkit-scrollbar-thumb {
- background: #e0d088;
- }
- #kelliesigcode .leftsig{
- width: 250px;
- height: 200px;
- position: absolute;
- top: 0px;
- left: 0px;
- background: url(https://i.imgur.com/ro9Hsya.png);
- background-position: left;
- transition: 0.5s ease-in 0.5s;
- -webkit-transition: 0.5s ease-in 0.5s;
- }
- #kelliesigcode:hover .leftsig{
- top: -200px;
- transition: 0.5s ease-in 0s;
- -webkit-transition: 0.5s ease-in 0s;
- }
- #kelliesigcode .rightsig{
- width: 250px;
- height: 200px;
- position: absolute;
- bottom: 0px;
- right: 0px;
- background: url(https://i.imgur.com/ro9Hsya.png);
- background-position: right;
- transition: 0.5s ease-in 0.5s;
- -webkit-transition: 0.5s ease-in 0.5s;
- }
- #kelliesigcode:hover .rightsig{
- bottom: -200px;
- transition: 0.5s ease-in 0s;
- -webkit-transition: 0.5s ease-in 0s;
- }
- #kelliesigcode .base{
- width: 500px;
- height: 200px;
- position: absolute;
- top: 0px;
- left: 0px;
- background: #ddd;
- overflow: hidden;
- }
- #kelliesigcode .left{
- width: 220px;
- height: 200px;
- position: absolute;
- top: 0px;
- left: -220px;
- background: #f3e8b2;
- overflow: hidden;
- border: 1px solid #fff;
- border-radius: 0px 50px 0px 0px;
- z-index: 2;
- transition: 0.5s ease-in 0s;
- -webkit-transition: 0.5s ease-in 0s;
- opacity: 0;
- }
- #kelliesigcode:hover .left{
- left: 0px;
- transition: 0.5s ease-in 0.7s;
- -webkit-transition: 0.5s ease-in 0.7s;
- opacity: 1;
- }
- #kelliesigcode .right{
- width: 280px;
- height: 200px;
- position: absolute;
- top: 0px;
- right: -280px;
- background: transparent;
- overflow: hidden;
- z-index: 1;
- transition: 0.5s ease-in 0s;
- -webkit-transition: 0.5s ease-in 0s;
- opacity: 0;
- }
- #kelliesigcode:hover .right{
- right: 0px;
- transition: 0.5s ease-in 0.7s;
- -webkit-transition: 0.5s ease-in 0.7s;
- opacity: 1;
- }
- #kelliesigcode .bottomright{
- width: 280px;
- height: 70px;
- position: absolute;
- bottom: 0px;
- right: 0px;
- background: #d70d33;
- overflow: hidden;
- border-top: 1px solid #fff;
- }
- #kelliesigcode .title{
- width: 135px;
- height: 15px;
- position: absolute;
- top: 24px;
- left: 40px;
- background: #fff;
- text-align: center;
- line-height: 11.5px;
- letter-spacing: 1px;
- font-family: 'Press Start 2P', cursive;
- padding: 8px 0px 3px 0px;
- font-size: 9px;
- text-transform: uppercase;
- color: #333;
- border-bottom: 0.5px solid #d70d33;
- border-left: 0.5px solid #d70d33;
- border-radius: 0px 20px 0px 0px;
- font-style: italic;
- }
- #kelliesigcode .title .sf{
- font-size: 10px;
- color: #d70d33;
- margin-left: 5px;
- }
- #kelliesigcode .icon{
- width: 115px;
- height: 115px;
- position: absolute;
- bottom: 22px;
- left: 52px;
- background-size: 120px;
- border-radius: 100px;
- }
- #kelliesigcode .icon img{
- width: 115px;
- height: 115px;
- border-radius: 100px;
- }
- #kelliesigcode .iconborder{
- width: 100px;
- height: 100px;
- border: 0.5px solid #fff;
- position: absolute;
- top: 7.5px;
- left: 7.5px;
- border-radius: 100px;
- }
- #kelliesigcode .textbase{
- width: 215px;
- height: 70px;
- position: absolute;
- top: 30px;
- right: 30px;
- background: #fff;
- overflow: hidden;
- border: 0.5px solid #dac66d;
- outline: 7px solid #fff;
- transition: 0.5s ease-in 0s;
- -webkit-transition: 0.5s ease-in 0s;
- opacity: 0;
- }
- #kelliesigcode:hover .textbase{
- opacity: 1;
- transition: 0.3s ease-in 1.4s;
- -webkit-transition: 0.3s ease-in 1.4s;
- }
- #kelliesigcode .textbox{
- width: 185px;
- height: 50px;
- position: absolute;
- top: 13px;
- right: 10px;
- background: #fff;
- overflow: auto;
- outline: 7px solid #fff;
- text-align: justify;
- line-height: 11.5px;
- letter-spacing: 0px;
- font-family: 'Open Sans', sans-serif;
- font-size: 8.5px;
- color: #000;
- padding-right: 7px;
- }
- #kelliesigcode .textbox i{
- text-transform: uppercase;
- font-size: 10.5px;
- font-family: 'Courier';
- border-right: 0.5px solid #d70d33;
- padding: 4px;
- padding-right: 9px;
- float: left;
- margin-right: 10px;
- color: #d70d33;
- letter-spacing: 1px;
- font-weight: bold
- }
- #kelliesigcode .textbox c{
- color: #000;
- }
- #kelliesigcode .lyrics{
- width: 220px;
- position: absolute;
- top: 20px;
- right: 25px;
- background: transparent;
- border-bottom: 0.5px solid #e7dba1;
- text-align: right;
- line-height: 11.5px;
- letter-spacing: 0px;
- font-family: 'Courier', sans-serif;
- font-size: 9px;
- color: #fff;
- padding-right: 7px;
- padding-bottom: 5px;
- }
- #kelliesigcode .lyrics .sf{
- font-size: 20px;
- float: right;
- margin-left: 10px;
- border-left: 0.5px solid #e7dba1;
- padding-left: 9px;
- padding-bottom: 2px;
- color: #e7dba1;
- }
- </style>
- <center>
- <div id='kelliesigcode'>
- <div class='base'>
- <div class='left'>
- <div class='title'><b>Kellie</b><span class="sf sf-heart"></span></div>
- <div class='icon'>
- <img src="http://via.placeholder.com/115x115">
- <a href="https://shadowplayers.jcink.net/index.php?showuser=95" title="hanie ©">
- <div class='iconborder'></div></a>
- </div>
- </div>
- <div class='right'>
- <div class='textbase'>
- <div class='textbox'>
- <i><c>may</c> 03</i>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rhoncus sit amet diam eu dictum. In eget mollis metus.<p>
- <hr><p>
- <i><c>june</c> 17</i>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rhoncus sit amet diam eu dictum. In eget mollis metus.<p>
- </div>
- </div>
- <div class='bottomright'>
- <div class='lyrics'>
- <span class="sf sf-pyramids"></span>
- "short lyric goes here. make sure it doesn't exceed two lines"</div>
- </div>
- </div>
- </div>
- <div class='leftsig'></div>
- <div class='rightsig'></div>
- </div>
- </center>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement