Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <link href="https://fonts.googleapis.com/css?family=Montseratt:400,800|Muli:600,700|Abril+Fatface" rel="stylesheet">
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
- <style>
- #nirvana-profile{
- width: 250px;
- height: 450px;
- outline: 1px solid #222;
- margin: 0px auto;
- position: relative;
- overflow: hidden;
- background: #fff;
- }
- #nirvana-profile .header{
- letter-spacing: 0px;
- position: absolute;
- line-height: 46px;
- top: 32px;
- left: 0px;
- font-family: 'Abril Fatface', cursive;
- font-size: 45px;
- width: 250px;
- height: 80px;
- color: #000;
- transition: all 0.7s ease-in-out 1s;
- }
- #nirvana-profile:hover .header{
- top: 5px;
- font-size: 35px;
- left: 0px;
- transition: all 0.7s ease-in-out 0s;
- }
- #nirvana-profile .quote{
- font-family: 'Muli', sans-serif;
- font-size: 9px;
- font-weight: 600;
- letter-spacing: 0px;
- line-height: 10px;
- position: relative;
- top: 50px;
- left: 0px;
- width: 200px;
- height: 80px;
- color: #000;
- border-top: 0.5px solid #555;
- padding-top: 4px;
- opacity: 0;
- transition: all 1s ease-in-out 0s;
- }
- #nirvana-profile:hover .quote{
- opacity: 1;
- transition: all 1s ease-in-out 1s;
- }
- #nirvana-profile .base{
- position: absolute;
- top: 60px;
- right: -37px;
- width: 250px;
- height: 400px;
- background: #F4D03F;
- transition: all 1s ease-in-out 1s;
- }
- #nirvana-profile:hover .base{
- right: 0px;
- top: 80px;
- transition: all 1s ease-in-out 0s;
- }
- #nirvana-profile .container{
- position: absolute;
- top: 110px;
- right: 25px;
- width: 195px;
- height: 265px;
- background: #fff;
- border-top: 1px solid #000;
- transform: scale(0);
- transition: all 1s ease-in-out 0s;
- }
- #nirvana-profile:hover .container{
- transform: scale(1);
- transition: all 1s ease-in-out 1.2s;
- }
- #nirvana-profile .icon{
- position: absolute;
- bottom: -90px;
- right: 92.5px;
- width: 60px;
- height: 60px;
- border: 0.5px solid #000;
- outline: 6px solid #fff;
- transform: rotate(-45deg);
- transition: all 1s ease-in-out 0s;
- }
- #nirvana-profile:hover .icon{
- bottom: 44px;
- transition: all 1s ease-in-out 1.2s;
- }
- #nirvana-profile img{
- width: 60px;
- }
- #nirvana-profile .post{
- position: relative;
- top: 15px;
- left: -52px;
- width: 40px;
- height: 30px;
- background: #000;
- border-top: 1px solid #000;
- padding: 9px 10px;
- line-height: 15px;
- }
- #nirvana-profile n{
- font-family: 'Montseratt', sans-serif;
- font-size: 15px;
- font-weight: 800;
- color: #fff;
- letter-spacing: 0px;
- }
- #nirvana-profile c{
- font-family: 'Muli', sans-serif;
- font-size: 9px;
- font-weight: 600;
- color: #fff;
- text-transform: uppercase;
- margin-top: -10px;
- letter-spacing: 0px;
- }
- #nirvana-profile .personal{
- font-family: 'Muli', sans-serif;
- font-size: 10px;
- font-weight: 600;
- color: #000;
- letter-spacing: 0px;
- position: relative;
- top: -34px;
- left: 36px;
- width: 70px;
- height: 5px;
- padding: 9px 10px;
- line-height: 5px;
- border-bottom: 0.5px solid #555;
- }
- #nirvana-profile .infos{
- letter-spacing: 0px;
- position: relative;
- top: -22px;
- left: 0px;
- width: 165px;
- height: 137px;
- line-height: 5px;
- background: transparent;
- }
- #nirvana-profile .black{
- letter-spacing: 0px;
- position: relative;
- width: 22px;
- height: 30px;
- line-height: 5px;
- background: #000;
- color: #F4D03F;
- padding-left: 10px;
- padding-top: 3px;
- font-size: 13px;
- }
- #nirvana-profile .white{
- font-family: 'Muli', sans-serif;
- font-size: 10px;
- font-weight: 600;
- text-align: center;
- letter-spacing: 0px;
- position: relative;
- width: 127px;
- height: 30px;
- line-height: 5px;
- background: #eee;
- }
- #nirvana-profile .black2 {
- letter-spacing: 0px;
- position: relative;
- width: 50px;
- height: 30px;
- line-height: 5px;
- background: #fff;
- border: 0.5px solid #111;
- color: #000;
- padding-left: 21px;
- padding-top: 3px;
- font-size: 15px;
- text-shadow: 2px 2px #F4D03F;
- }
- #nirvana-profile a {
- color: #000;
- }
- #nirvana-profile .avatar{
- position: relative;
- top: 17px;
- left: 22px;
- width: 150px;
- height: 300px;
- background-position: center;
- border-right: 5px solid #fff;
- border-top: 5px solid #fff;
- outline: 1px solid #222;
- transition: all 1s ease-in-out 1s;
- transform: scale(1);
- }
- #nirvana-profile:hover .avatar{
- transition: all 1s ease-in-out 0s;
- transform: scale(0);
- }
- </style>
- <center>
- <div id="nirvana-profile">
- <div class="base"></div>
- <div class="container">
- <div class="post">
- <n>234</n>
- <c>posts</c>
- </div>
- <div class="personal">Kurt Cobain</div>
- <div class="personal">GMT-7</div>
- <div class="infos">
- <table>
- <tr>
- <td class="black"><i class="fa fa-home"></i></td> <td class="white">Washington</td>
- </tr>
- </table>
- <table>
- <tr>
- <td class="white">Singer/Song writer</td> <td class="black"><i class="fa fa-briefcase"></i></td>
- </tr>
- </table>
- <table>
- <tr>
- <td class="black"><i class="fa fa-fort-awesome"></i></td> <td class="white">Legendary</td>
- </tr>
- </table>
- <table>
- <tr>
- <td class="black2"><a href="/LINKHERE"><i class="fa fa-user" title="profile"></i></a></td>
- <td class="black2"><a href="/LINKHERE"><i class="fa fa-heartbeat" title="shipper"></i></a></td>
- <td class="black2"><a href="/LINKHERE"><i class="fa fa-shield" title="development"></i></a></td>
- </tr>
- </table>
- </div>
- </div>
- <div class="icon"><a href="http://candyland-couture.com/index.php?showuser=7400">
- <img src="https://i.imgur.com/9ZfbttR.gif" title="hanie ©"></a></div>
- <div class="header">teen spirit</div>
- <div class="quote">It's fun to lose and to pretend</div>
- <div class="avatar" style="background:url(https://i.imgur.com/jMdTRaj.png);"></div>
- </div>
- </center>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement