Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <style>
- /* Last Update: 07/23/19 */
- /* PAGE BACKGROUND AND FONT */
- body {
- background:#000 url('https://images.sharefaith.com/images/3/1481653750119_84/img_mouseover3.jpg') fixed;
- background-size:cover;
- font-family:serif;
- font-size:12px;
- }
- /* MAIN DISPLAY COLORS */
- .inner {
- background:rgba(0,0,0,0.4) url('https://i1.wp.com/www.nintendo-insider.com/wp-content/uploads/2018/06/battle_chasers_nightwar_review_header.jpg?fit=1280%2C720&ssl=1');
- border:9px double #750c07;
- color:#fff;
- }
- h1, .nav label,
- h1::before, .nav label::before {
- background-color:#020121;
- }
- h1, .nav label,
- .id, .id h3 {
- border:3px solid #b8860b;
- color:#fff;
- }
- .tab > p::first-letter {
- background-color:#111;
- border:2px solid #b8860b;
- }
- .id, .id h3 {
- background-color:rgba(17,17,17,0.4);
- }
- .id .image {
- border-right:3px solid #b8860b;
- }
- a {
- color:#b8860b;
- }
- a:hover {
- text-shadow:0 0 1px #b8860b;
- }
- /* GOOGLE CHROME SCROLLBARS */
- ::-webkit-scrollbar {
- height:3px;
- width:3px;
- background-color:transparent;
- }
- ::-webkit-scrollbar-thumb {
- background-color:#b8860b;
- }
- #mobile-scroll::-webkit-scrollbar {
- height:6px;
- width:6px;
- }
- /* TRANSITION SPEED */
- #gallery img, .tab, .inner h1 {
- transition:opacity 1s;
- -o-transition:opacity 1s;
- -moz-transition:opacity 1s;
- -webkit-transition:opacity 1s;
- }
- /* CSS MEAT */
- #insignia {
- position:fixed;
- height:50%;
- right:3%;
- bottom:-5%;
- }
- #mobile-scroll {
- position:fixed;
- top:0;
- left:0;
- height:100%;
- width:100%;
- overflow-y:auto;
- }
- #profile {
- position:absolute;
- top:0;
- left:23vw;
- height:160vh;
- width:50vw;
- margin:5px 0;
- }
- .container {
- position:relative;
- }
- .nav, h1 {
- z-index:2;
- position:absolute;
- text-align:center;
- }
- .nav, .nav label {
- height:2.7vw;
- font-size:1.5vw;
- line-height:2.3vw;
- }
- .nav {
- top:99.25%;
- padding:3px 0 11px 0;
- white-space:nowrap;
- overflow-x:auto;
- overflow-y:hidden;
- }
- .nav label, h1 {
- border-radius:0 0 1.8vw 1.8vw;
- border-top:none;
- }
- .nav label {
- display:inline-block;
- position:relative;
- margin:3px 0.2vh;
- padding:0 0.6vw;
- cursor:pointer;
- }
- input {
- display:none;
- }
- h1, #gallery img, .image img {
- left:50%;
- transform:translateX(-50%);
- -o-transform:translateX(-50%);
- -moz-transform:translateX(-50%);
- -webkit-transform:translateX(-50%);
- }
- h1 {
- font-size:3.8vh;
- margin:0;
- padding:0.5vh 2vw;
- }
- h1::before,
- .nav label::before {
- content:"";
- position:absolute;
- top:-3px;
- height:4px;
- left:0;
- right:0;
- }
- #gallery {
- width:100%;
- height:55vh;
- }
- #gallery h1 {
- top:11px;
- font-size:4.8vh;
- }
- #gallery .nav,
- #gallery .nav label {
- height:3.2vw;
- font-size:1.9vw;
- line-height:2.8vw;
- }
- #gallery .nav {
- width:55vh;
- }
- #gallery .nav label {
- margin:3px 0.8vh;
- }
- #gallery img, .image img {
- position:absolute;
- top:0;
- height:100%;
- }
- #statbox {
- height:45vh;
- }
- #statbox .nav {
- width:45vh;
- }
- #box {
- height:55vh;
- }
- #box .nav {
- width:55vh;
- }
- #obox {
- height:59vh;
- }
- #obox .nav {
- width:59vh;
- }
- #fbox {
- height:49vh;
- }
- #fbox .nav {
- width:49vh;
- }
- .left {
- float:left;
- width:42%;
- }
- .right {
- float:right;
- width:58%;
- }
- .left h1 {
- margin:-3px 18px;
- }
- .right h1 {
- margin:-3px -18px;
- }
- .inner {
- z-index:1;
- position:absolute;
- top:0;
- bottom:0;
- left:0;
- right:0;
- margin-top:5px;
- border-radius:2px;
- }
- #gallery .inner {
- overflow:hidden;
- }
- .right .inner {
- margin-left:5px;
- }
- .tab {
- positon:absolute;
- top:5vh;
- bottom:0;
- padding:6px;
- overflow-y:auto;
- }
- .left .tab {
- left:2.7vw;
- margin-left:18px;
- right:10px;
- }
- .right .tab {
- right:2.7vw;
- margin-right:18px;
- left:10px;
- }
- #gallery img, .tab {
- z-index:1;
- position:absolute;
- opacity:0;
- }
- #gallery input:checked + img,
- input:checked + h1 + .tab {
- z-index:2;
- opacity:1;
- }
- .inner h1 {
- z-index:2;
- opacity:0;
- }
- input:checked + h1 {
- z-index:3;
- opacity:1;
- }
- .id {
- display:block;
- position:relative;
- height:18vh;
- margin:4px 0;
- overflow:auto;
- }
- .id .image {
- position:absolute;
- top:0;
- left:0;
- right:60%;
- height:100%;
- overflow:hidden;
- }
- .id h3, .id p {
- position:absolute;
- top:3%;
- left:40%;
- right:0;
- }
- .id h3 {
- margin:0 4px;
- padding:3px;
- }
- .id p {
- bottom:0;
- margin:35px 10px 10px;
- }
- .tab > p::first-letter {
- padding:2px;
- margin:0 2px;
- font-size:16px;
- line-height:26px;
- }
- .tab img {
- max-width:100%;
- }
- h2 {
- text-decoration:underline;
- }
- p {
- text-indent:5%;
- }
- @media only screen and (orientation:portrait) {
- #profile {
- left:2vw;
- width:95vw;
- font-size:1.4em;
- }
- .nav, .nav label,
- #gallery .nav,
- #gallery .nav label {
- height:4.7vw;
- font-size:3.5vw;
- line-height:4.3vw;
- }
- #gallery h1 {
- font-size:3.8vh;
- }
- h1 {
- font-size:2.8vh;
- }
- }
- #credit {
- position:fixed;
- right:0;
- bottom:0;
- border-radius:50% 50% 0;
- }
- #music-bg{
- position:fixed;
- left: 0px;
- top: 0px;
- width: 35px;
- height: 35px;
- background-color: black;
- border: solid 3px #750c07;
- border-radius: 50%;
- z-index: 3; }
- .sheetmusic {
- position: fixed;
- top: 7px;
- left: 14px;
- opacity:1;
- -webkit-transition: all .7s ease-out;
- transition: all .5s ease-out;
- transition-delay: 0.4s;
- color: #b8860b;
- overflow: hidden;
- z-index: 1000000; }
- .sheetmusic:hover {color: #65366a;}
- .song {
- margin-top: -20px;
- margin-left: 0px;
- height: 20px;
- width: 20px;
- overflow: hidden;
- opacity: 0; }
- </style>
- <body>
- <link href="https://dl.dropbox.com/s/916nu7kq0libugm/rotation.css" rel="stylesheet" type="text/css">
- <img src="https://cdn4.iconfinder.com/data/icons/vectortown-endangered-species/32/Tiger-512.png"ay. alt="" id="insignia"/>
- <div id="mobile-scroll">
- <div id="profile">
- <div class="container" id="gallery">
- <h1>Gallery</h1>
- <div class="nav ccw">
- <label for="g-one">One</label>
- <label for="g-two">Two</label>
- </div>
- <div class="nav cw">
- <label for="g-three">Three</label>
- <label for="g-four">Four</label>
- </div>
- <div class="inner">
- <!-- GALLERY IMAGES BELOW -->
- <input name="image" type="radio" checked="checked" id="g-one"/>
- <img src="https://vignette.wikia.nocookie.net/battle-chasers/images/d/d4/Battle_Chasers_Garrison.png/revision/latest/top-crop/width/360/height/450?cb=20150910003251" alt=""/>
- <input name="image" type="radio" id="g-two"/>
- <img src="https://66.media.tumblr.com/62799b8b7a764b4603e1479a36cbed0a/tumblr_p8t849Z0kF1qzxbz1o1_1280.jpg" alt=""/>
- <input name="image" type="radio" id="g-three"/>
- <img src="https://nerdist.com/wp-content/uploads/2015/09/Battle-Chasers-Garrison.jpg" alt=""/>
- <input name="image" type="radio" id="g-four"/>
- <img src="https://pictures.hentai-foundry.com/d/Darkra/525744/Darkra-525744-Battle_Chasers_-_Red_monika_and_Garrison.jpg" alt=""/>
- </div></div>
- <div class="container left" id="statbox">
- <div class="nav ccw">
- <label for="01-01">Stats</label>
- <label for="01-02">Abilities</label>
- <label for="01-03">Three</label>
- </div>
- <div class="inner">
- <!-- TOP LEFT BOX FIRST TAB BELOW -->
- <input name="01" id="01-01" type="radio" checked="checked"/>
- <h1>Stats</h1>
- <div class="tab">
- <b>Name:</b> Ryoudo
- <br/>
- <b>Species:</b> Human?
- <br/>
- <b>Gender:</b> Male all the way
- <br/>
- <b>Age:</b> unknown
- <br/>
- <b>Hair:</b> Black
- <br/>
- <b>Eyes:</b> Blue
- <br/>
- <b>Height:</b> 6'9"
- <br/>
- <b>Weight:</b> Look at all that muscle. Heavy!
- <br/>
- <b>Build:</b> Brute
- <br/>
- <b>Orientation:</b> Hetro (Mostly, ain't mad at femboi's)
- <br>
- <b>Status:</b> Single
- <br/>
- </div>
- <!-- TOP LEFT BOX SECOND TAB BELOW -->
- <input name="01" id="01-02" type="radio"/>
- <h1>Abilities</h1>
- <div class="tab">
- <h2>Ability -</h2>
- <p>
- Description here.
- </p>
- <h2>Ability -</h2>
- <p>
- Description here.
- </p>
- <h2>Ability -</h2>
- <p>
- Description here.
- </p>
- </div>
- <!-- TOP LEFT BOX THIRD TAB BELOW -->
- <input name="01" id="01-03" type="radio"/>
- <h1>Three</h1>
- <div class="tab">
- <p>
- Text
- </p>
- </div>
- </div></div>
- <div class="container right" id="box">
- <div class="nav cw">
- <label for="02-01">Personality</label>
- <label for="02-02">History</label>
- <label for="02-03">Fun Facts</label>
- </div>
- <div class="inner">
- <!-- TOP RIGHT BOX FIRST TAB BELOW -->
- <input name="02" id="02-01" type="radio" checked="checked"/>
- <h1>Personality</h1>
- <div class="tab">
- <p>
- Information and stuffity stuff stuff stufff. More stuuuufff. AND. MORE STUFF! Bippity boop bop biddly beep squap. Anyways, what do I usually do for examples when I need to fill space? OH YEAH! *ahem* Hello, people of Earth, I have come to devour you. Do not fear for it shall be a quick and painless death as I intake your entire planet. The sudden loss of atmospheric pressure and its protections will either freeze you in a millisecond or cause all of your blood to boil out of your body in a single instant. Hmm. I suppose that last one doesn't quite sound painless, but nonetheless it should be instantaneous.
- </p>
- <a href="https://s-media-cache-ak0.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg" target="_blank">Link</a>
- </div>
- <!-- TOP RIGHT BOX SECOND TAB BELOW -->
- <input name="02" id="02-02" type="radio"/>
- <h1>Backstory</h1>
- <div class="tab">
- <p>
- Information and stuffity stuff stuff stufff. More stuuuufff. AND. MORE STUFF! Bippity boop bop biddly beep squap. Anyways, what do I usually do for examples when I need to fill space? OH YEAH! *ahem* Hello, people of Earth, I have come to devour you. Do not fear for it shall be a quick and painless death as I intake your entire planet. The sudden loss of atmospheric pressure and its protections will either freeze you in a millisecond or cause all of your blood to boil out of your body in a single instant. Hmm. I suppose that last one doesn't quite sound painless, but nonetheless it should be instantaneous.
- </p>
- </div>
- <!-- TOP RIGHT BOX THIRD TAB BELOW -->
- <input name="02" id="02-03" type="radio"/>
- <h1>Fun Facts</h1>
- <div class="tab">
- <ul>
- <li>Bullet one</li>
- <li>Bullet two</li>
- <li>Bullet three</li>
- <li>Bullet four</li>
- <li>Bullet five</li>
- <li>Bullet six</li>
- <li>Bullet seven</li>
- <li>Bullet eight</li>
- </ul>
- </div>
- </div></div>
- <div class="container left" id="obox">
- <div class="nav ccw">
- <label for="03-01">OOC</label>
- <label for="03-02">Preferences</label>
- <label for="03-03">Journal</label>
- </div>
- <div class="inner">
- <!-- BOTTOM LEFT BOX FIRST TAB BELOW -->
- <input name="03" id="03-01" type="radio" checked="checked"/>
- <h1>OOC</h1>
- <div class="tab">
- <ul>
- <li>Bullet one</li>
- <li>Bullet two</li>
- <li>Bullet three</li>
- <li>Bullet four</li>
- <li>Bullet five</li>
- <li>Bullet six</li>
- <li>Bullet seven</li>
- <li>Bullet eight</li>
- </ul>
- </div>
- <!-- BOTTOM LEFT BOX SECOND TAB BELOW -->
- <input name="03" id="03-02" type="radio"/>
- <h1>Preferences</h1>
- <div class="tab">
- <ul>
- <li>Bullet one</li>
- <li>Bullet two</li>
- <li>Bullet three</li>
- <li>Bullet four</li>
- <li>Bullet five</li>
- <li>Bullet six</li>
- <li>Bullet seven</li>
- <li>Bullet eight</li>
- </ul>
- </div>
- <!-- BOTTOM LEFT BOX THIRD TAB BELOW -->
- <input name="03" id="03-03" type="radio"/>
- <h1>Journal</h1>
- <div class="tab">
- <h2>Date</h2>
- <p>
- Paragraph.
- </p>
- </div>
- </div></div>
- <div class="container right" id="fbox">
- <div class="nav cw">
- <label for="04-01">Family</label>
- <label for="04-02">Friends</label>
- <label for="04-03">Enemies</label>
- </div>
- <div class="inner">
- <!-- BOTTOM RIGHT BOX FIRST TAB BELOW -->
- <input name="04" id="04-01" type="radio"/>
- <h1>Family</h1>
- <div class="tab">
- <div class="id">
- <div class="image"><img src="IMAGE URL"/></div>
- <a href="" target="_blank"><h3>NAME</h3></a>
- <p>
- Short description.
- </p>
- </div>
- </div>
- <!-- BOTTOM RIGHT BOX SECOND TAB BELOW -->
- <input name="04" id="04-02" type="radio" checked="checked"/>
- <h1>Friends</h1>
- <div class="tab">
- <div class="id">
- <div class="image"><img src="https://i.imgur.com/Nh2E8Gp.jpg"/></div>
- <a href="https://roleplay.chat/profile.php?user=Jaeldra+Sinclair" target="_blank"><h3>Jae-Bird</h3></a>
- <p>
- Short description.
- </p>
- </div>
- <div class="id">
- <div class="image"><img src="IMAGE URL"/></div>
- <a href="" target="_blank"><h3>NAME</h3></a>
- <p>
- Short description.
- </p>
- </div>
- </div>
- <!-- BOTTOM RIGHT BOX THIRD TAB BELOW -->
- <input name="04" id="04-03" type="radio"/>
- <h1>Enemies</h1>
- <div class="tab">
- <div class="id">
- <div class="image"><img src="IMAGE URL"/></div>
- <a href="" target="_blank"><h3>NAME</h3></a>
- <p>
- Short description.
- </p>
- </div>
- </div>
- </div></div>
- </div></div>
- <div id="music-bg"></div>
- <div class="sheetmusic"><font size="5">▶</font>
- <div class="song">
- <audio controls>
- <source src="https://soundcloud.com/mouse-917907387/queen-princes-of-the-universe-official-video"></audio>
- <a href="https://tinyurl.com/fukase" target="_blank" title="CC#46">
- <img src="INSERT LINK FOR MP3 HERE" id="credit"/>
- </a>
- </body>
Add Comment
Please, Sign In to add comment