Jump to content
  • Taste of Magic

       (0 reviews)

    Tabbed shipper application template! Please leave a review ❤️


    Actual Template Not Responsive

    Character Name

    B a s i c s


    Name

    List Here

    Age

    List Here

    Face Claim

    List Here

    Sexuality

    List Here

    Pronouns

    List Here

    M a g i c a


    Aura

    List Here

    Talent

    List Here

    Race

    List Here

    S e l f


    Occupation

    List Here

    Fears

    List Here

    Dreams

    List Here

    P l a y e r


    Name

    What do we call you?

    Pronouns

    List here

    Contact

    How can we contact you?

    Timezone

    List Here

    Other Characters

    List Here
    Fandom here

    Personality


    List here


    History


    List here


    C o n n e c t i o n s


    List here


    Shipper


    List Here


    F r i e n d s


    List Here


    L o v e r s


    List Here


    E n e m i e s


    List Here


    O t h e r


    List Here

    Template code

    <link href="https://fonts.googleapis.com/css?family=Lobster|Cabin|Bree+Serif|Space+Mono" rel="stylesheet">  
    <style>
    .fireapp { overflow: hidden; border:2px solid #969696; height: 535px; width: 525px; background-image: url(https://images.rpginitiative.com/uploads/monthly_2018_07/large.tmIkCbw.png.726cdbe3fa6bb953278592d96a52c849.png); padding: 25px; position: relative;}
    .firename { display: block; line-height: 8px; height: 10px; width: 260px; background-color: #969696; background: linear-gradient(to right, RGBA(156,156,156,.25),#969696); background: -webkit-background: linear-gradient(to right, RGBA(156,156,156,.25),#969696); background: -o-background: linear-gradient(to right, RGBA(156,156,156,.25),#969696); background: -moz-background: linear-gradient(to right, RGBA(156,156,156,.25),#969696); color: white; padding: 10px; font-family: 'lobster', cursive; font-size: 20px; text-align: right; text-decoration: underline; position: absolute; left: 0px; top: 30px; text-shadow: 2px 1px black}
    .firebasics1 { background-color: black; height: 481px; width: 250px; border: 1px solid #969696; position: absolute; top: 75px; left: 15;}
    .firebasics2 { line-height: 1.25; height: 451px; width: 225px; background-color: black; padding: 10px; overflow: auto; text-align: justify; background color: black; color: white; font-family: 'cabin', sans-serif; font-size: 12px; position: absolute;}
    .firebasics2 h1 { font-size: 16; line-height: 1; text-align: center; font-family: 'cabin', sans-serif; font-weight: normal; letter-spacing: 1.3;}
    .firebasics2 h2 { font-size: 14; line-height: .5; text-align: left; color: #969696; font-family: 'Bree Serif', serif; font-weight: normal; letter-spacing: 1.3;}
    .firebasics2 hr { color: #969696;}
    .firebasics2 a { color: #969696;}
    .firebasics2 b { color: #969696; font-weight: bold;}
    .fireface1 { height: 526px; width: 276px; background-color: black; border: 1px solid #969696; position: absolute; top: 30px; left: 280px;}
    .fireface2 { height: 500px; width: 250px; background-color: black; border: 1px solid #969696; position: absolute; top: 12px; left: 12px}
    .tab { float: left;}
    .tab label { display: block; line-height: 1.5; width: 10px; height: 20px; background-color: #000; padding: 2px; position: relative; font-family: 'bree serif', serif; color: white; font-size: 12; text-align: center; position: absolute; top: 45px; right: 2px;}
    .tab [type=radio] {display: none;}
    .firecontent { -webkit-transition-duration: .8s; -moz-transition-duration: .8s; -o-transition-duration: .8s; overflow: hidden; position: absolute; top: 0px; bottom: 0px; left: 700px; right: 0px; background-image: url(https://images.rpginitiative.com/uploads/monthly_2018_07/large.tmIkCbw.png.726cdbe3fa6bb953278592d96a52c849.png); padding: 25px;}
    [type=radio]:checked ~ label { background-color: #969696; width: 12px; right: 2px; color: black; border-bottom: 0px; z-index: 6; }
    [type=radio]:checked ~ label ~ .firecontent {z-index: 4; left: 0px;}
    .firefreeform1 { background-color: black; height: 481px; width: 250px; border: 1px solid #969696; position: absolute; top: 75px; left: 15;}
    .firefreeform2 { line-height: 1.25; height: 451px; width: 225px; background-color: black; padding: 10px; overflow: auto; text-align: justify; background color: black; color: white; font-family: 'cabin', sans-serif; font-size: 12px; position: absolute;}
    .firefreeform2 h1 { font-size: 16; line-height: 1; text-align: center; font-family: 'cabin', sans-serif; font-weight: normal; letter-spacing: 1.3;}
    .firefreeform2 h2 { font-size: 14; line-height: 1; text-align: left; color: #969696; font-family: 'Bree Serif', serif; font-weight: normal; letter-spacing: 1.3;}
    .firefreeform2 hr { color: #969696;}
    .firefreeform2 a { color: #969696;}
    .firefreeform2 b { color: #969696; font-weight: bold;}
    .firecanon1 { height: 526px; width: 276px; background-color: black; border: 1px solid #969696; position: absolute; top: 30px; left: 280px;}
    .firecanon2 { height: 500px; width: 250px; background-color: black; border: 1px solid #969696; position: absolute; top: 12px; left: 12px}
    .firefandom { display: block; line-height: 8px; height: 10px; width: 260px; background-color: #969696; background: linear-gradient(to right, RGBA(156,156,156,.25),#969696); background: -webkit-background: linear-gradient(to right, RGBA(156,156,156,.25),#969696); background: -o-background: linear-gradient(to right, RGBA(156,156,156,.25),#969696); background: -moz-background: linear-gradient(to right, RGBA(156,156,156,.25),#969696); color: white; padding: 10px; font-family: 'lobster', cursive; font-size: 20px; text-align: right; text-decoration: underline; position: absolute; left: 0px; top: 30px; text-shadow: 2px 1px black}
    .fireline { height:2px; width: 533px; background-color: #969696; opacity: .4; position: absolute; top: 570px; left: 15;}  
    .firegif1 { height: 125px; width: 125px; background-color: black; border: 1px solid #969696; position: absolute;}
    .firegif2 { height: 100px; width: 100px; background-color: black; border: 1px solid #969696; position: absolute; top: 12px; left: 12px;}
    .fireship1 { height: 533px; width: 388px; background-color: black; border: 1px solid #969696; position: absolute; left: 168px;}
    .fireship2 { height: 488px; width: 350px; background-color: black; border: 1px solid #969696; position: absolute; top: 12px; left: 12px; color: white; font-family: 'cabin', sans-serif; font-size: 12px; padding: 10px; text-align: justify; overflow: auto;}
    .fireship2 h1 { font-family: 'lobster', cursive; font-size: 20px; font-weight: normal; text-align: center;}
    .fireship2 h2 { font-size: 16; line-height: 1; text-align: center; font-family: 'cabin', sans-serif; font-weight: normal; letter-spacing: 1.3;}
    .fireship2 hr { color: #969696;}
    .fireship2 a { color: #969696;}
    .fireship  b { color: #969696; font-weight: bold;}
    .credit2b {font-family: 'space mono', monospace; color: silver; font-size: 8px;}
    .credit2b a {font-family: 'space mono', monospace; text-decoration: none; color: silver; font-size: 8px;}
    </style>
    
    <center>
    <div class="fireapp">
    <div class="tab">
        <input type="radio" id="tab-1" name="tab-group-1" checked>
        <label for="tab-1" style="z-index:7">I.</label>
        <div class="firecontent">
        <div class="fireline" style="position: absolute; top: 14px;"></div>
      <div class="firename">
        Character Name
      </div>
      <div class="firebasics1"><div class="firebasics2">
      <hr>
        <h1>B a s i c s</h1><hr>
        <h2>Name</h2>
        List Here
        <h2>Age</h2>
        List Here
        <h2>Face Claim</h2>
        List Here
        <h2>Sexuality</h2>
        List Here
        <h2>Pronouns</h2>
        List Here
        <hr>
        <h1>M a g i c a</h1><hr>
        <h2>Aura</h2>
        List Here
        <h2>Talent</h2>
        List Here
        <h2>Race</h2>
        List Here
        <hr>
        <h1>S e l f</h1>
        <hr>
        <h2>Occupation</h2>
        List Here
        <h2>Fears</h2>
        List Here
        <h2>Dreams</h2>
        List Here
        <hr>
        <h1>P l a y e r</h1><hr>
        <h2>Name</h2>
        What do we call you?
        <h2>Pronouns</h2>
        List here
        <h2>Contact</h2>
        How can we contact you?
        <h2>Timezone</h2>
        List Here
        <h2>Other Characters</h2>
        List Here
      </div></div>
      <div class="fireface1">
      <div class="fireface2">
        <img src="https://placehold.it/250x500" style="width:100%">
      </div>
      </div>
      <div class="fireline"></div>
      </div>
      </div>
      <div class="tab">
    <input type="radio" id="tab-2" name="tab-group-1">
    <label for="tab-2" style="margin-top: 24px; z-index: 7;">II.</label>
    <div class="firecontent">
    <div class="fireline" style="position: absolute; top: 14px;"></div>
    <div class="firefandom">
    Fandom here
    </div>
    <div class="firefreeform1"><div class="firefreeform2">
    <hr>
    <h1>Personality</h1>
    <hr>
    <p>
    List here
    <p>
    <hr>
    <h1>History</h1>
    <hr>
    <p>
    List here
    <p>
      <hr>
    <h1>C o n n e c t i o n s</h1>
    <hr>
    <p>
    List here
    </div></div>
    <div class="firecanon1"><div class="firecanon2">
      <img src="https://placehold.it/250x500" style="width:100%">
    </div></div>
    <div class="fireline"></div>
    </div>
    </div>
    <div class="tab">
      <input type="radio" id="tab-3" name="tab-group-1">
      <label for="tab-3" style="margin-top:48px; z-index: 7;">III.</label>
      <div class="firecontent">
        <div class="fireline" style="position: absolute; top: 14px;"></div>
        <div class="firegif1"><div class="firegif2">
          <img src="https://placehold.it/100x100" style="width:100%">
        </div></div>
        <div class="firegif1" style="margin-top: 136px;"><div class="firegif2">
          <img src="https://placehold.it/100x100" style="width:100%">
        </div></div>
        <div class="firegif1" style ="margin-top: 272px;"><div class="firegif2">
          <img src="https://placehold.it/100x100" style="width:100%">
        </div></div>
        <div class="firegif1" style ="margin-top: 408px;"><div class="firegif2">
          <img src="https://placehold.it/100x100" style="width:100%">
        </div></div>
        <div class="fireship1"><div class="fireship2">
          <hr>
          <h1>Shipper</h1>
          <hr>
          <p>
           List Here
          <p>
          <hr>
          <h2>F r i e n d s</h2>
          <hr>
          <p>
           List Here
          <p>
          <hr>
          <h2>L o v e r s</h2>
           <hr>
          <p>
           List Here
          <p>
          <hr>
          <h2>E n e m i e s</h2>
           <hr>
          <p>
           List Here
          <p>
          <hr>
          <h2>O t h e r</h2>
           <hr>
           <p>
            List Here
        </div></div>
        <div class="fireline"></div>
      </div>
    </div>
    </div>
      <div class="credit2b"><center><a href="https://rpginitiative.com/profile/2592-penny/">♔</a></center></div>
    </center>



    User Feedback

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.

    Guest

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.