Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <style>
- /* Container and background*/
- #profile-container {
- background: none;
- }
- body {
- background: white;
- }
- body,
- a:hover {
- cursor: url(http://i.imgur.com/cd7ZHDh.png), progress !important;
- }
- /* Fonts*/
- @font-face {
- font-family: text;
- src: url(https://dl.dropbox.com/s/jx36uge536l9tlz/OpenSans-Regular.ttf?dl=0);
- }
- @font-face {
- font-family: title;
- src: url(https://dl.dropbox.com/s/sd1femfb66exm0k/ReenieBeanie.ttf?dl=0);
- }
- /* Image*/
- .pic {
- z-index: 1;
- position: absolute;
- background: url(https://s1.zerochan.net/Bakugou.Katsuki.600.2288781.jpg) center;
- background-size: auto 110%;
- width: 280px;
- height: 380px;
- left: 224px;
- top: 43px;
- -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
- clip-path: polygon(0% 0%, 115% 0%, 115% 80%, 65% 115%, 0% 115%, 0% 0%);
- }
- /* Name*/
- .name {
- z-index: 5;
- position: absolute;
- width: 263px;
- color: #0A1E1B;
- font-family: title;
- top: 440px;
- left: 235px;
- text-align: center;
- font-size: 40px;
- }
- /* Info*/
- .tri1 {
- z-index: 2;
- position: absolute;
- width: 185px;
- height: 145px;
- padding: 5px;
- left: 223px;
- top: 43px;
- background: black;
- -webkit-clip-path: polygon(50% 0%, 0 50%, 0 0);
- clip-path: polygon(50% 0%, 0 50%, 0 0);
- -webkit-transition: all 0.2s linear;
- color: rgba(0, 0, 0, 0);
- overflow: hidden;
- font-family: text;
- font-size: 13px;
- }
- .tri1:hover {
- z-index: 3;
- overflow: auto;
- -webkit-transition: all 0.2s linear;
- color: white;
- width: 270px;
- height: 370px;
- -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
- clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
- border: 2px solid white;
- }
- .tri2 {
- z-index: 2;
- position: absolute;
- width: 185px;
- height: 145px;
- padding: 5px;
- left: 309px;
- top: 43px;
- background: black;
- -webkit-clip-path: polygon(50% 0%, 100% 50%, 100% 0);
- clip-path: polygon(50% 0%, 100% 50%, 100% 0);
- -webkit-transition: all 0.2s linear;
- color: rgba(0, 0, 0, 0);
- overflow: hidden;
- font-family: text;
- font-size: 13px;
- }
- .tri2:hover {
- z-index: 3;
- overflow: auto;
- -webkit-transition: all 0.2s linear;
- color: white;
- left: 223px;
- width: 270px;
- height: 370px;
- -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
- clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
- border: 2px solid white;
- }
- .tri3 {
- z-index: 2;
- position: absolute;
- width: 185px;
- height: 145px;
- padding: 5px;
- left: 223px;
- top: 268px;
- background: black;
- -webkit-clip-path: polygon(0 50%, 50% 100%, 0 100%);
- clip-path: polygon(0 50%, 50% 100%, 0 100%);
- -webkit-transition: all 0.2s linear;
- color: rgba(0, 0, 0, 0);
- overflow: hidden;
- font-family: text;
- font-size: 13px;
- }
- .tri3:hover {
- z-index: 3;
- overflow: auto;
- -webkit-transition: all 0.2s linear;
- color: white;
- top: 43px;
- width: 270px;
- height: 370px;
- -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
- clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
- border: 2px solid white;
- }
- .tri4 {
- z-index: 2;
- position: absolute;
- width: 185px;
- height: 145px;
- padding: 5px;
- left: 309px;
- top: 268px;
- background: black;
- -webkit-clip-path: polygon(50% 100%, 100% 50%, 100% 100%);
- clip-path: polygon(50% 100%, 100% 50%, 100% 100%);
- -webkit-transition: all 0.2s linear;
- color: rgba(0, 0, 0, 0);
- overflow: hidden;
- font-family: text;
- font-size: 13px;
- }
- .tri4:hover {
- z-index: 3;
- overflow: auto;
- -webkit-transition: all 0.2s linear;
- color: white;
- left: 223px;
- top: 43px;
- width: 270px;
- height: 370px;
- -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
- clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
- border: 2px solid white;
- }
- /* Backer*/
- .back {
- z-index: 0;
- position: absolute;
- border: 3px solid white;
- background: black;
- top: 30px;
- left: 217px;
- width: 290px;
- height: 400px;
- }
- /* Table*/
- table,
- th,
- td {
- font-size: 13px;
- padding: 3px;
- font-family: text;
- }
- td:nth-child(odd) {
- color: white;
- text-align: left;
- }
- td:nth-child(even) {
- color: red;
- text-align: right;
- }
- /*hr*/
- hr {
- height: 2px;
- border: none;
- background: #0A1E1B;
- width: 140px;
- }
- /* Scrollbar*/
- ::-webkit-scrollbar {
- width: 5px;
- height: 5px;
- }
- ::-webkit-scrollbar-thumb {
- background: #0A1E1B;
- border: 2px solid #85938A;
- }
- ::-webkit-scrollbar-track {
- background: white;
- }
- /*Link*/
- a:link,
- a:visited,
- a:active {
- text-decoration: none;
- color: #0A1E1B;
- -webkit-transition: all .5s ease;
- }
- a:hover {
- color: #3B5B56;
- text-shadow: -2px 0 #0A1E1B, 0 1px #0A1E1B, 2px 0 #0A1E1B, 0 -1px #0A1E1B;
- -webkit-transition: all .5s ease;
- cursor: url(https://i.imgur.com/SAa1psh.gif), progress !important;
- }
- </style>
- <div class="pic">
- </div>
- <div class="name">
- <p>Eiichiro Oda</p>
- </div>
- <div class="tri1">
- <p> </p><p> </p>
- <table border="0" cellspacing="0" width="227">
- <tbody>
- <tr>
- <td>Gender</td>
- <td>Here</td>
- </tr>
- <tr>
- <td>Occ.</td>
- <td>Here</td>
- </tr>
- <tr>
- <td>Race</td>
- <td>Here</td>
- </tr>
- <tr>
- <td>Height</td>
- <td>Here</td>
- </tr>
- <tr>
- <td>Weight</td>
- <td>Here</td>
- </tr>
- <tr>
- <td>Playby</td>
- <td>Here</td>
- </tr>
- </tbody>
- </table>
- </div>
- <div class="tri2">
- <p> </p><p> </p><p><img src="https://i.pinimg.com/originals/c1/8e/c4/c18ec414c1ecd10caca6ac1c0e2d8b79.gif" width="100%" height="150px"></p>
- <p> </p>
- <p>???</p>
- </div>
- <div class="tri3">
- <p>???</p>
- </div>
- <div class="tri4">
- <p>???</p>
- </div>
- <div class="back">
- <p> </p>
- </div>
- <div class="infoback">
- <p> </p>
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement