Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <style>#profile-container {
- background: none;
- }
- body {
- background: url(https://media.giphy.com/media/RHpf4nRzaZrmE/giphy.gifs);
- }
- body,
- a:hover {
- cursor: url(http://i.imgur.com/cd7ZHDh.png), progress !important;
- }
- @font-face {
- font-family: text;
- src: url(https://dl.dropbox.com/s/e66og7xmtaxtacm/SourceCodePro-Regular.ttf?dl=0);
- }
- @font-face {
- font-family: name;
- src: url(https://dl.dropbox.com/s/4rgugoflu9yic2f/Inversionz.otf?dl=0);
- }
- .pic {
- z-index: 3;
- position: absolute;
- border: 3px solid #c9c9c9;
- top: 65px;
- left: 215px;
- width: 324px;
- height: 424px;
- background: url(https://i.imgur.com/Etr3hmQ.jpg) center;
- background-size: 100%;
- }
- .namebox {
- z-index: 3;
- position: absolute;
- border: 1px solid #c9c9c9;
- padding: 5px;
- background: #222;
- width: 250px;
- text-align: center;
- height: 20px;
- font-size: 27px;
- font-family: name;
- text-transform: uppercase;
- left: 250px;
- top: 13px;
- font-color:#c9c9c9;
- }
- .back {
- z-index: 2;
- position: absolute;
- border: 5px solid #999;
- background: #222;
- width: 350px;
- left: 200px;
- top: 50px;
- height: 450px;
- }
- .square {
- z-index: 1;
- position: absolute;
- border: 2px solid #c9c9c9;
- width: 398px;
- left: 180px;
- top: 30px;
- height: 498px;
- }
- .tabs {
- position: absolute;
- margin: 25px 0px;
- top:-380px;
- left: -80px;
- }
- .tab label {
- top: 490px;
- left: 236px;
- height: 20px;
- float: left;
- margin-left: 14px;
- background: #222;
- width: 20px;
- padding: 5px;
- position: relative;
- z-index: 400;
- color: #000;
- border: 1px solid #c9c9c9;
- font-size: 12;
- text-align: center;
- font-family: comic sans serif;
- cursor: url(https://i.imgur.com/SAa1psh.gif), progress !important;
- -webkit-transition: all .5s ease;
- }
- .tab label:hover {
- background: #111;
- -webkit-transition: all .5s ease;
- }
- .content {
- position: absolute;
- top: 420px;
- left: 290px;
- width: 314px;
- height: 414px;
- background: #111;
- padding: 5px;
- color: #cfcfcf;
- border: 3px solid #c9c9c9;
- font-family: text;
- font-size: 13px;
- overflow: auto;
- z-index: 20;
- opacity: 0;
- text-align: justify;
- -webkit-transition: all .5s ease;
- }
- [type=radio]:checked ~ label {
- -webkit-transition: all .5s ease;
- }
- [type=radio]:checked ~ label ~ .content {
- z-index: 30;
- opacity: 1;
- -webkit-transition: all .5s ease;
- }
- .tab [type=radio] {
- display: none;
- }
- table,
- th,
- td {
- font-family: text;
- font-size: 13px;
- padding: 3px;
- padding-bottom: 9px;
- padding-top: 9px;
- }
- td:nth-child(odd) {
- color: #999;
- }
- td:nth-child(even) {
- color: #cfcfcf;
- }
- hr {
- height: 1px;
- border: none;
- background: #fff;
- width: 240px;
- }
- a:link,
- a:visited,
- a:active {
- text-decoration: none;
- color: #999;
- -webkit-transition: all .5s ease;
- }
- a:hover {
- cursor: url(https://i.imgur.com/SAa1psh.gif), progress !important;
- color: #cfcfcf;
- text-shadow: 0 0 2px #000, 0 0 5px #fff;
- -webkit-transition: all .5s ease;
- cursor: url(https://i.imgur.com/SAa1psh.gif), progress !important;
- }
- ::-webkit-scrollbar {
- width: 9px;
- height: 5px;
- }
- ::-webkit-scrollbar-thumb {
- background: #fff;
- border: 3px solid #111;
- }
- ::-webkit-scrollbar-track {
- background: #transparent;
- }</style>
- <div class="pic">
- <p> </p>
- </div>
- <div class="namebox">
- <p style="position:absolute; left:50px; top:-23px; color:white;" align="center">name Here</p>
- </div>
- <div class="back">
- <p> </p>
- </div>
- <div class="square">
- <p> </p>
- </div>
- <div class="tabs">
- <div class="tab">
- <div class="tab">
- <input id="tab-6" name="tab-group-2" type="radio" />
- <label for="tab-6"><font size="+2" color="white" face="name">S</font></label>
- <div class="content">
- <p style="text-align: center;">Stats</p>
- <hr />
- <table border="0" cellspacing="0" width="313" height="231">
- <tbody>
- <tr>
- <td style="text-align: left;">Name</td>
- <td style="text-align: right;">Here</td>
- </tr>
- <tr>
- <td style="text-align: left;">Age</td>
- <td style="text-align: right;">Here</td>
- </tr>
- <tr>
- <td style="text-align: left;">Gender</td>
- <td style="text-align: right;">Here</td>
- </tr>
- <tr>
- <td style="text-align: left;">Height</td>
- <td style="text-align: right;">Here</td>
- </tr>
- <tr>
- <td style="text-align: left;">Weight</td>
- <td style="text-align: right;">Here</td>
- </tr>
- <tr>
- <td style="text-align: left;">Status</td>
- <td style="text-align: right;">Here</td>
- </tr>
- <tr>
- <td style="text-align: left;">Theme</td>
- <td style="text-align: right;"><a href="https://www.youtube.com/watch?v=n8exrz9_lwE">Click Me!</a></td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- <div class="tab">
- <input id="tab-5" name="tab-group-2" type="radio" />
- <label for="tab-5"><font size="+2" color="white" face="name">P</font></label>
- <div class="content">
- <p style="text-align: center;">Powers</p>
- <hr />
- <p>Lorem ipsum dolor sit amet, natum accusam has ne. Inani summo mei cu, aliquip inermis principes ea qui. Pro at meliore evertitur. Ex est munere aperiam, gloriatur instructior cu ius, quo nonumes accusata definiebas ea. Ius id aperiri cotidieque
- reprehendunt, pri option corrumpit dignissim cu. Te ius inani munere doctus, brute velit ne vix.</p>
- <p> </p>
- <p>Eu quidam dolorum apeirian quo, an has aperiam eligendi, an eam aeterno ullamcorper. Populo virtute explicari eu pro. Eu his cibo mundi. In usu pertinax voluptaria. Tempor molestiae vix ad.</p>
- <p> </p>
- <p>Dico accusata at pro. Putent argumentum persequeris at has, an mel putent omnium integre. In nostro dicunt vim, vocent utamur maiestatis id mea, novum scaevola patrioque id has. Mollis blandit offendit no cum, ea pro dicat deterruisset, ne hinc
- fugit liberavisse per.</p>
- <p> </p>
- <p>Per et natum complectitur. Solet iracundia pertinacia has ea. Ei pro lobortis volutpat interpretaris. Nam liber dolorum ad.</p>
- <p> </p>
- <p>Reque accusamus adversarium usu in, magna semper periculis an duo, pro dicat delicata molestiae cu. Mea eu scripta debitis referrentur, usu solet verterem mediocritatem et, ex ornatus adolescens per. Pro eruditi dolores deterruisset ne, cu vel
- putent facilisis efficiantur. Magna incorrupte scribentur cu nec, cu qui offendit dissentiunt.</p>
- </div>
- </div>
- <div class="tab">
- <input id="tab-4" name="tab-group-2" type="radio" />
- <label for="tab-4"><font size="+2" color="white" face="name">I</font></label>
- <div class="content">
- <p style="text-align: center;">Inventory</p>
- <hr />
- <p>Lorem ipsum dolor sit amet, natum accusam has ne. Inani summo mei cu, aliquip inermis principes ea qui. Pro at meliore evertitur. Ex est munere aperiam, gloriatur instructior cu ius, quo nonumes accusata definiebas ea. Ius id aperiri cotidieque
- reprehendunt, pri option corrumpit dignissim cu. Te ius inani munere doctus, brute velit ne vix.</p>
- <p> </p>
- <p>Eu quidam dolorum apeirian quo, an has aperiam eligendi, an eam aeterno ullamcorper. Populo virtute explicari eu pro. Eu his cibo mundi. In usu pertinax voluptaria. Tempor molestiae vix ad.</p>
- <p> </p>
- <p>Dico accusata at pro. Putent argumentum persequeris at has, an mel putent omnium integre. In nostro dicunt vim, vocent utamur maiestatis id mea, novum scaevola patrioque id has. Mollis blandit offendit no cum, ea pro dicat deterruisset, ne hinc
- fugit liberavisse per.</p>
- <p> </p>
- <p>Per et natum complectitur. Solet iracundia pertinacia has ea. Ei pro lobortis volutpat interpretaris. Nam liber dolorum ad.</p>
- <p> </p>
- <p>Reque accusamus adversarium usu in, magna semper periculis an duo, pro dicat delicata molestiae cu. Mea eu scripta debitis referrentur, usu solet verterem mediocritatem et, ex ornatus adolescens per. Pro eruditi dolores deterruisset ne, cu vel
- putent facilisis efficiantur. Magna incorrupte scribentur cu nec, cu qui offendit dissentiunt.</p>
- </div>
- </div>
- <div class="tab">
- <input id="tab-3" name="tab-group-2" type="radio" />
- <label for="tab-3"><font size="+2" color="white" face="name">R</font></label>
- <div class="content">
- <p style="text-align: center;">Relations</p>
- <hr />
- <p><a href="LINK HERE" target="_blank">Friend Name</a> - <span>Lorem ipsum dolor sit amet, natum accusam has ne. Inani summo mei cu, aliquip inermis principes ea qui.</span></p>
- <p style="text-align: left;"> </p>
- <p><span><span><a href="LINK HERE" target="_blank">Friend Name</a> - </span><span>Lorem ipsum dolor sit amet, natum accusam has ne. Inani summo mei cu, aliquip inermis principes ea qui.</span></span>
- </p>
- </div>
- </div>
- <div class="tab">
- <input id="tab-2" name="tab-group-2" type="radio" />
- <label for="tab-2"><font size="+2" color="white" face="name">E</font></label>
- <div class="content">
- <p style="text-align: center;">ECT.</p>
- <hr />
- <p>Lorem ipsum dolor sit amet, natum accusam has ne. Inani summo mei cu, aliquip inermis principes ea qui. Pro at meliore evertitur. Ex est munere aperiam, gloriatur instructior cu ius, quo nonumes accusata definiebas ea. Ius id aperiri cotidieque
- reprehendunt, pri option corrumpit dignissim cu. Te ius inani munere doctus, brute velit ne vix.</p>
- <p> </p>
- <p>Eu quidam dolorum apeirian quo, an has aperiam eligendi, an eam aeterno ullamcorper. Populo virtute explicari eu pro. Eu his cibo mundi. In usu pertinax voluptaria. Tempor molestiae vix ad.</p>
- <p> </p>
- <p>Dico accusata at pro. Putent argumentum persequeris at has, an mel putent omnium integre. In nostro dicunt vim, vocent utamur maiestatis id mea, novum scaevola patrioque id has. Mollis blandit offendit no cum, ea pro dicat deterruisset, ne hinc
- fugit liberavisse per.</p>
- <p> </p>
- <p>Per et natum complectitur. Solet iracundia pertinacia has ea. Ei pro lobortis volutpat interpretaris. Nam liber dolorum ad.</p>
- <p> </p>
- <p>Reque accusamus adversarium usu in, magna semper periculis an duo, pro dicat delicata molestiae cu. Mea eu scripta debitis referrentur, usu solet verterem mediocritatem et, ex ornatus adolescens per. Pro eruditi dolores deterruisset ne, cu vel
- putent facilisis efficiantur. Magna incorrupte scribentur cu nec, cu qui offendit dissentiunt.</p>
- </div>
- </div>
- <div class="tab">
- <input id="tab-1" checked="checked" name="tab-group-2" type="radio" />
- <label for="tab-1"><font size="+2" color="white" face="name">S</font></label>
- </div>
- <div class="content">
- <p style="text-align: left;"> </p>
- </div>
- </div>
- </div>
- </div>
Advertisement
Add Comment
Please, Sign In to add comment