Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
- <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto:900|Raleway:900" rel="stylesheet">
- <style>
- #harry-mp{
- width: 250px;
- height: 500px;
- position: relative;
- margin: 0px auto;
- background: #eee;
- overflow: hidden;
- }
- #harry-mp .title{
- width: 250px;
- height: 100px;
- background: #60A830 ;
- position: relative;
- top: 0px;
- }
- #harry-mp .title n{
- color: #fff;
- font-family: 'Raleway', sans-serif;
- font-size: 21px;
- text-transform: uppercase;
- font-weight: 900;
- letter-spacing: 0px;
- line-height: 80px;
- border-bottom: 2px solid #D9DF1D;
- padding-bottom: 3px;
- }
- #harry-mp .title a{
- color: #fff;
- text-decoration: none;
- }
- #harry-mp .status{
- width: 250px;
- height: 20px;
- position: absolute;
- bottom: 15px;
- color: #fff;
- font-family: 'Courier';
- font-size: 9px;
- text-transform: uppercase;
- letter-spacing: 1px;
- line-height: 8px;
- }
- #harry-mp .avatar{
- width: 250px;
- height: 400px;
- position: relative;
- top: 0px;
- left: 0px;
- overflow: hidden;
- }
- #harry-mp .avatar img{
- width: 250px;
- height: 400px;
- }
- #harry-mp .base{
- width: 250px;
- height: 400px;
- position: absolute;
- bottom: -400px;
- left: 0px;
- background: #000;
- opacity: 0.8;
- -webkit-transition: 0.6s ease-in 0s;
- transition: 0.6s ease-in 0s;
- }
- #harry-mp:hover .base{
- bottom: 0px;
- }
- #harry-mp .container{
- width: 170px;
- height: 300px;
- position: absolute;
- top: -310px;
- left: 33px;
- background: #fff;
- border-bottom: 3px solid #D9DF1D;
- -webkit-transition: 0.6s ease-in 0s;
- transition: 0.6s ease-in 0s;
- }
- #harry-mp:hover .container{
- top: 50px;
- }
- #harry-mp .banner{
- width: 170px;
- height: 70px;
- position: relative;
- top: 60px;
- left: 0px;
- background: #60A830;
- }
- #harry-mp .icon{
- width: 90px;
- height: 90px;
- position: absolute;
- bottom: 0px;
- right: 0px;
- z-index: 2;
- }
- #harry-mp .icon img{
- border-radius: 100px;
- border: 8px solid #60A830;
- width: 90px;
- height: 90px;
- background: #D9DF1D;
- padding: 2px;
- }
- #harry-mp .post{
- width: 90px;
- height: 55px;
- position: absolute;
- top: 18px;
- left: 0px;
- color: #fff;
- }
- #harry-mp .post b{
- font-family: 'Roboto', sans-serif;
- font-size: 19px;
- text-transform: uppercase;
- font-weight: 900;
- letter-spacing: 0px;
- line-height: 20px;
- }
- #harry-mp .post c{
- font-family: 'Courier';
- font-size: 10.5px;
- text-transform: uppercase;
- letter-spacing: 2px;
- line-height: 12px;
- }
- #harry-mp .box{
- height: 34px;
- position: relative;
- top: 61px;
- left: 0px;
- border-bottom: 0.5px solid #D9DF1D;
- text-align: right;
- padding-right: 12px;
- padding-top: 8px;
- line-height: 10px;
- }
- #harry-mp .box b{
- font-family: 'Courier';
- font-size: 10px;
- text-transform: uppercase;
- letter-spacing: 0px;
- color: #099441;
- }
- #harry-mp .box c{
- font-family: 'Open Sans', sans-serif;
- font-size: 9px;
- letter-spacing: 0px;
- color: #222;
- }
- #harry-mp .box2{
- height: 34px;
- position: relative;
- top: 61px;
- left: 0px;
- border-bottom: 0.5px solid #D9DF1D;
- text-align: left;
- padding-left: 12px;
- padding-top: 8px;
- line-height: 10px;
- }
- #harry-mp .box2 b{
- font-family: 'Courier';
- font-size: 10px;
- text-transform: uppercase;
- letter-spacing: 0px;
- color: #099441;
- }
- #harry-mp .box2 c{
- font-family: 'Open Sans', sans-serif;
- font-size: 9px;
- letter-spacing: 0px;
- color: #222;
- }
- #harry-mp .links{
- width: 170px;
- position: absolute;
- top: 3px;
- left: 2px;
- }
- #harry-mp .links .fa{
- color: #60A830;
- font-size: 18px;
- padding: 8px;
- -webkit-transform:transition: 0.5s;
- transition: 0.5s;
- }
- #harry-mp .links .fa:hover{
- -webkit-transform: rotate(180deg);
- transform: rotate(180deg);
- }
- #harry-mp .alias{
- width: 90px;
- position: absolute;
- top: 38px;
- left: 2px;
- color: #000;
- font-family: 'Courier';
- font-size: 11px;
- text-transform: uppercase;
- line-height: 12px;
- color: #D9DF1D;
- font-weight: bold;
- }
- #harry-mp .alias i{
- color: #222;
- font-weight: normal;
- font-size: 7.5px;
- letter-spacing: 0.5px;
- }
- </style>
- <center>
- <div id="harry-mp">
- <div class="title">
- <n><a href="#">Harry Villiers</a></n>
- <div class="status">He/Him is <i>online</i></div>
- </div>
- <div class="avatar">
- <img src="https://i.imgur.com/zfQ4i6n.png">
- <div class="base"></div>
- <div class="container">
- <div class="banner">
- <div class="post"><b>1234</b> <br> <c>posts</c></div>
- <div class="icon">
- <a href="http://shadowplayers.jcink.net/index.php?showuser=95" title="hanie ©">
- <img src="https://i.imgur.com/8IIABSM.gif"></a>
- </div>
- </div>
- <div class="box2">
- <b>Face Claim</b><br> <c>Douglas Booth</c>
- </div>
- <div class="box">
- <b>Membergroup</b><br> <c>The Riot Club</c>
- </div>
- <div class="box2">
- <b>Occupation</b><br> <c>Student</c>
- </div>
- <div class="box">
- <b>Sexuality</b><br> <c>Pansexual</c>
- </div>
- <div class="links">
- <a href="#" title="wanted"><i class="fa fa-warning"></i></a>
- <a href="#" title="application"><i class="fa fa-plug"></i></a>
- <a href="#" title="shipper"><i class="fa fa-heartbeat"></i></a>
- <a href="#" title="tracker"><i class="fa fa-bars"></i></a>
- </div>
- <div class="alias">< <i>@alias</i> ></div>
- </div>
- </div>
- </div>
- </center>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement