Taste of Magic

Saying Goodbye to Community

Followers 0

Taste of Magic
(0 reviews)
- Template Preview
- Template Code
Tabbed shipper application template! Please leave a review ❤️

Actual Template Not Responsive

I.

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

II.

Fandom here

Personality

List here

History

List here

C o n n e c t i o n s

List here

III.

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>
```
<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>
```
By Penny
Followers 0

Go to codes Plotters
User Feedback
- 0 Reviews
Join the conversation

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

Your name

Your rating Required

1 2 3 4 5

Your review Required

Add a review...

× Pasted as rich text.   Paste as plain text instead

Only 75 emoji are allowed.

× Your link has been automatically embedded.   Display as a link instead

× Your previous content has been restored.   Clear editor

× You cannot paste images directly. Upload or insert images from URL.

Insert image from URL

×

Desktop

Tablet

Phone

Sign In

Taste of Magic

Actual Template Not Responsive

B a s i c s

Name

Age

Face Claim

Sexuality

Pronouns

M a g i c a

Aura

Talent

Race

S e l f

Occupation

Fears

Dreams

P l a y e r

Name

Pronouns

Contact

Timezone

Other Characters

Personality

History

C o n n e c t i o n s

Shipper

F r i e n d s

L o v e r s

E n e m i e s

O t h e r

Template code

User Feedback

Join the conversation

What is the Codex?

Remember to review your code!

Categories

Recent Codes

RPG Resources

Activity

My Activity Streams

Important Information