Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- ABOUT ME START
- <div class="container">
- <div class="leftbox">
- <img src="https://i.imgur.com/S1VeI3E.png" class="leftimg">
- </div>
- <div class="textbox1">
- <h1>NAVIGATION</h1>
- <h2>FIND YOUR WAY AROUND</h2><br><br><br>
- <center>
- <a href="#" class="toggleone" title="home">LEAVE</a>
- <a href="#" class="toggletwo" title="message">MESSAGE</a>
- <a href="#" class="toggleone" title="comment">COMMENT</a>
- <a href="#" class="toggletwo" title="photo">PHOTOS</a>
- </center>
- </div>
- <ul class="tabs">
- <li><input type="radio" checked name="tabs" id="tab1">
- <label for="tab1">SHOTO</label>
- <div id="tab-content1" class="tab-content animated fadeInDown">
- <div class="box">
- <h1>D E F R O S T</h1>
- <h2>SHOTO TODOROKI</h2>
- put whatever you want here. your storyline or w/e from wiki would probably work!
- </div>
- <div class="box">
- I DUNNO WHAT TO PUT HERE EITHER. SO GOOD LUCK WITH THAT SOO MANY BOXES.
- </div>
- </div>
- </li>
- <li><input type="radio" name="tabs" id="tab2">
- <label for="tab2">QUIRK</label>
- <div id="tab-content2" class="tab-content animated fadeInDown">
- <div class="box">
- <h2>FIRE N' ICE</h2> You can write about your quirk here! If you want something in bold
- put it in this code. <b>BOLD</b>
- </div>
- </div>
- </li>
- <li><input type="radio" name="tabs" id="tab3">
- <label for="tab3">OTHER</label>
- <div id="tab-content3" class="tab-content animated fadeInDown">
- <div class="box">
- <h2>WHATEVER YOU WANT</h2> You can put whatever you want <b>here.</b> Maybe something about your
- lovely <i>girlfriend.</i>
- </div>
- <div class="box">
- you can add something in this box too.
- </div>
- </div>
- </li>
- </ul>
- </div>
- </div>
- </div>
- LIKE TO MEET START
- <BODY oncontextmenu="return false" onselectstart="return false" ondragstart="return false">
- <style>
- .clearfix {
- margin-top: -125px;
- }
- br {
- line-height: 0px;
- }
- td td td br {
- line-height: auto;
- }
- table,
- tr,
- td {
- background-color: transparent !important;
- }
- table table {
- visibility: hidden;
- }
- table table table,
- table.blurbs td.text,
- span.orangetext15,
- #footerWarpper {
- display: none;
- }
- div table,
- table.blurbs,
- table.blurbs table {
- visibility: visible;
- display: table;
- _display: inline;
- }
- div div table div,
- div.clearfix a,
- input {
- display: none;
- }
- div.clearfix table div div,
- #footerWarpper {
- display: block;
- }
- body {
- background-color: #181818;
- font-family: calibri;
- font-size: 8px;
- color: #7c7c7c;
- }
- .container {
- background-color: #transparent;
- width: 560px;
- height: 500px;
- margin: auto;
- position: absolute;
- top: 0px;
- left: 0px;
- bottom: 0px;
- right: 0px;
- }
- .leftbox {
- position: fixed;
- background-color: #222222;
- width: 240px;
- height: 300px;
- padding: 5px;
- }
- .leftimg {
- opacity: 0.8;
- }
- .textbox1 {
- position: fixed;
- background-color: #222222;
- width: 240px;
- height: 100px;
- padding: 5px;
- margin-top: 330px;
- overflow: hidden;
- }
- .textbox1 a {
- font-family: calibri;
- font-size: 8px;
- text-transform: uppercase;
- color: #ffffff;
- letter-spacing: 0px;
- text-decoration: none;
- -webkit-transition: all 0.5s ease-in-out;
- }
- .textbox1 a:hover {
- color: #ffffff;
- }
- .box a {
- font-family: calibri;
- font-size: 8px;
- text-transform: uppercase;
- color: #44839a;
- letter-spacing: 0px;
- text-decoration: none;
- -webkit-transition: all 0.5s ease-in-out;
- }
- .box a:hover {
- color: #ffffff;
- }
- i {
- font-style: italic;
- font-size: 9px;
- font-family: georgia;
- text-transform: lowercase;
- font-weight: bold italics;
- letter-spacing: 1px;
- color: #920000;
- }
- b {
- color: #920000;
- font-family: calibri;
- font-size: 8px;
- line-height: 10px;
- text-transform: uppercase;
- }
- u {
- color: #920000;
- font-family: lucida console;
- font-size: 8px;
- text-transform: uppercase;
- letter-spacing: 0px;
- text-decoration: none;
- border-bottom: dashed 1px #44839a;
- }
- h1 {
- font-family: arial;
- font-size: 23px;
- letter-spacing: -2px;
- color: #ca0000;
- margin: 0px 0px -5px 0px;
- text-align: center;
- font-weight: lighter;
- }
- h2 {
- background-color: #920000;
- text-align: center;
- font-family: calibri;
- font-size: 8px;
- color: #ffffff;
- line-height: 8px;
- padding: 4px;
- margin: 0px 0px 5px 0px;
- text-transform: uppercase;
- letter-spacing: 2px;
- }
- .tabs input[type="radio"] {
- position: absolute;
- top: -9999px;
- left: -9999px;
- }
- .tabs {
- width: 185px;
- float: none;
- list-style: none;
- position: relative;
- padding: 0px;
- margin-top: 0px;
- margin-left: 440px;
- background-color: #transparent;
- }
- .tabs li {
- float: left;
- }
- .tabs label {
- text-align: center;
- display: inline-block;
- padding: 0px;
- background-color: #920000;
- color: #ffffff;
- font-size: 8px;
- line-height: 24px;
- letter-spacing: 0px;
- width: 53px;
- height: 25px;
- left: -400px;
- margin-right: 3px;
- top: 380px;
- text-transform: uppercase;
- font-family: calibri;
- position: relative;
- -webkit-transition: all 0.4s ease-in-out;
- -moz-transition: all 0.4s ease-in-out;
- -o-transition: all 0.4s ease-in-out;
- transition: all 0.4s ease-in-out;
- }
- .tabs label:hover {
- background-color: #920000;
- color: #ffffff;
- }
- [id^="tab"]:checked + label {
- background-color: #920000;
- color: #ffffff;
- letter-spacing: 2px;
- }
- [id^="tab"]:checked ~ [id^="tab-content"] {
- display: block;
- }
- .tab-content {
- z-index: 2;
- display: none;
- color: #7c7c7c;
- font-family: arial;
- font-size: 9px;
- letter-spacing: 0.6px;
- word-spacing: 3px;
- padding: 5px;
- width: 355px;
- height: auto;
- background-color: #transparent;
- position: absolute;
- left: -185px;
- top: 55px;
- overflow: auto;
- -webkit-animation-duration: 1.5s;
- -moz-animation-duration: 1.5s;
- -o-animation-duration: 1.5s;
- aniation-duration: 1.5s;
- }
- @keyframes fadeInDown {
- from {
- opacity: 0;
- transform: translate3d(0, -100%, 0);
- }
- to {
- opacity: 1;
- transform: none;
- }
- }
- .fadeInDown {
- animation-name: fadeInDown;
- }
- @-webkit-keyframes fadeInRight {
- 0% {
- opacity: 0;
- -webkit-transform: translation3d(100%, 0, 0);
- transform: translate3d(100%, 0, 0);
- }
- 100% {
- opacity: 1;
- -wenkit-transform: none;
- transform: none;
- }
- }
- @keyframes fadeInRight {
- 0% {
- opacity: 0;
- -webkit-transform: translation3d(100%, 0, 0);
- transform: translate3d(100%, 0, 0);
- }
- 100% {
- opacity: 1;
- -wenkit-transform: none;
- transform: none;
- }
- }
- .box {
- background-color: #222222;
- width: 250px;
- padding: 10px;
- height: autopx;
- margin-left: 8px;
- margin-bottom: 25px;
- text-align: justify;
- color: #7c7c7c;
- font-family: arial;
- font-size: 8.5px;
- letter-spacing: 0.6px;
- word-spacing: 3px;
- }
- .box h1 {
- font-family: arial;
- font-size: 23px;
- letter-spacing: -2px;
- color: #920000;
- margin: 0px 0px -5px 0px;
- text-align: center;
- font-weight: lighter;
- }
- .box h2 {
- background-color: #920000;
- text-align: center;
- font-family: calibri;
- font-size: 8px;
- color: #ffffff;
- line-height: 8px;
- padding: 4px;
- margin: 0px 0px 5px 0px;
- text-transform: uppercase;
- letter-spacing: 2px;
- }
- .toggleone {
- color: #ffffff;
- display: inline-block;
- background-color: #920000;
- margin-right: 3px;
- margin-bottom: 3px;
- width: 50px;
- height: 20px;
- text-align: center;
- font-size: 8px;
- font-family: calibri;
- text-transform: uppercase;
- line-height: 20px;
- text-decoration: none;
- -webkit-transition: all 0.5s ease-in-out;
- }
- .toggleone:hover {
- background-color: #920000;
- color: #fff;
- }
- .toggletwo {
- display: inline-block;
- background-color: #920000;
- color: #ffffff;
- margin-right: 3px;
- margin-bottom: 3px;
- width: 50px;
- height: 20px;
- text-align: center;
- font-size: 8px;
- font-family: calibri;
- text-transform: uppercase;
- line-height: 20px;
- text-decoration: none;
- -webkit-transition: all 0.5s ease-in-out;
- }
- .toggletwo:hover {
- background-color: #920000;
- color: #fff;
- }
- </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement