From Outer Space

Followers 0

From Outer Space
(0 reviews)
- Template Preview
- Template Code
Hey yall, this is for the 'Your File' coding challenge - based on, as you can tell, files from The X-Files!

Actual Template Not Responsive
X

U.S. DEPARTMENT OF JUSTICE
FEDERAL BUREAU
OF
INVESTIGATION

Bureau File Number

X-487820

Character Name Here

FIELD OFFICE CRIMINAL INVESTIGATIVE
AND ADMINISTRATIVE FILES

X-FILE
See also Nos.

Other character names here, this will scroll

Overview

D.O.B:

mm/dd/yyyy

BORN:

City, ST

EYES:

Color

HAIR:

Color

HEIGHT:

00'00"

WEIGHT:

000lbs

MEMBERGROUP:

Here, site-specific

ALIASES:

What they're known as here

CONNECTIONS:

List here
and here
details can be done by doing - this (blah blah blah)
It scrolls!
Yay!

MODUS OPERANDI:

Here's where you can detail why people should be scared of them, or at least interested. What are their goals, if they are known? What sets them apart from a normal human case? Like the last one, this scrolls - you have a lot of ground to cover, technically!

Bio

'Episode' Title Here
Here's where you put your bio! Freeform, or Personality and History detailed seperately. You could even take advantage of the X Files tone and make it a script format! You have a ton of room to work with, but it still scrolls just in case. This is bold. This is bold italic. This is just italic.

Add. Info

TRIGGERS:

List your player triggers here!

Player Name

Pronouns Here

Timezone

Contact Info Here
Template code
<link href="https://fonts.googleapis.com/css?family=Anton|Courier+New" rel="stylesheet"> <style> .xfilesapp {height: 700px; width: 500px; position: relative; overflow: hidden; color: #000;} .xtab {float: left;} .xtab label {display: block; padding: 5px; height: 20px; width: 125px; background: #F7F3EB; transform: rotate(90deg); -webkit- transform: rotate(90deg); -moz- transform: rotate(90deg); -o- transform: rotate(90deg); -ms- transform: rotate(90deg); position: absolute; left: 390px; z-index: 20; font-family: 'Courier New', serif; font-size: 23px; box-shadow: 0px -1px 3px gray; font-weight: bold; transition-duration: .8s; -webkit-transition-duration: .8s; -moz-transition-duration: .8s; -o-transition-duration: .8s;} .xtab [type=radio] {display: none;} .xcontent {transition-duration: .8s; -webkit-transition-duration: .8s; -moz-transition-duration: .8s; -o-transition-duration: .8s; overflow: hidden; position: absolute; top: 0px; left: 700px; height: 700px; width: 500px;} [type=radio]:checked ~ label {box-shadow: 0px -1px 3px silver; transition-duration: .8s; -webkit-transition-duration: .8s; -moz-transition-duration: .8s; -o-transition-duration: .8s;} [type=radio]:checked ~ label ~ .xcontent {z-index: 4; left: 0px; transition-duration: .8s; -webkit-transition-duration: .8s; -moz-transition-duration: .8s; -o-transition-duration: .8s;} .xfilemain {height: 680px; width: 465px; background: #BF2121; top:10px; position: absolute; left: 10px;} .xfilemain2 {position: absolute; width: 425px; height: 640px; background: #F7F3EB; top: 20px; left: 20px;} .xfilename {position: absolute; font-family: 'Anton', sans-serif; font-size: 30px; width: 400px; text-align: center; left: 12px; top: 230px;} .xfilename a {color: black; text-decoration: none;} .xfilesfbi {color: #bf2121; font-family: sans-serif; font-weight: bold; font-size: 22px; text-align: center; width: 425px;position: absolute; top: 25px;} .xfilesfbi h1 {font-size: 16px;} .xline {background-color: #b42121; height: 2px; width: 245px; position: absolute; top: 55px; left: 90px;} .xoverviewbg {height: 640px; width: 450px; top: 30px; position: absolute; left: 15px; background-image: url(http://www.calibreforhome.com/wp-content/uploads/2016/08/peach-colored-paper-texture-with-flecks.jpg); background-size: 100%;} .xpic {z-index: 10; position: absolute; top: 35px; left: 20px; border-top: 3px solid white; border-left: 3px solid white; border-right: 3px solid white; border-bottom: 20px solid white; height: 200px; width: 200px;} .xclip {background-image: url(http://www.clker.com/cliparts/8/b/f/0/11949981431500831576attach.svg.med.png); background-size: 100%; height: 50px; width: 48px; position: absolute; left: 10px; top: 25px; z-index: 18;} .xstatsheader {font-family: 'Courier New', serif; font-weight: bold; font-size: 18px; position: absolute; text-decoration: underline;} .xstatsinfo {font-family: 'Courier New', serif; font-size: 16px; position: absolute;} .xbio {padding: 20px; width: 425px; background: black; position: absolute; height: 605px; top: 25px; left: 25px; overflow: auto; color: silver; font-family: 'Courier New', serif; text-align: left; text-indent: 25px;} .xbio b {color: #4BBF52} .xbio h1 {font-family: 'Anton', sans-serif; text-align: center; font-weight: normal; text-shadow: 1px 2px 3px #4bbf52} .xtab4 {padding: 20px; width: 425px; background: #f7f3eb; position: absolute; top: 25px; left: 25px; height: 605px;} </style> <center><div class="xfilesapp"> <div class="xtab"> <input type="radio" id="tab-1" name="tab-group-1" checked> <label for="tab-1" style="top: 100px;">X</label> <div class="xcontent"> <div class="xfilemain"> <div class="xfilemain2"><div class="xfilesfbi"><h1>U.S. DEPARTMENT OF JUSTICE</h1>FEDERAL BUREAU<br>OF<br>INVESTIGATION</div><div class="xline"></div> <div class="xfilesfbi" style="top: 178px; left: 0px; width: 250px; font-size: 15px; font-weight: normal;">Bureau File Number</div><div class="xline" style="top: 195px; left: 50px; height: 1px; width: 300px;"></div> <div class="xfilename" style="top: 165px; font-size: 30px; font-family: 'Courier New', serif; font-weight: bold; width: 175px; left: 200px; z-index: 8; letter-spacing: 3px;">X-487820</div> <div class="xfilename" style="text-shadow: 1px 2px 3px #49E344;">Character Name Here</div> <div class="xfilesfbi" style="top:315px; font-size: 12px; font-weight: normal; letter-spacing: 2px;">FIELD OFFICE CRIMINAL INVESTIGATIVE<br>AND ADMINISTRATIVE FILES</div> <div class="xfilename" style="font-size: 85px; font-style: italic; top: 425px; left: 0px; width: 425px; opacity: .9"><a href="https://rpginitiative.com/profile/2592-penny/">X-FILE</a></div><div class="xfilesfbi" style="top: 540px; text-align: left; font-size: 14px; left: 23px;">See also Nos.</div> <div class="xline" style="top: 505px; height: 1px; left: 150px;"></div><div class="xline" style="height: 1px; top: 615px; left: 150px;"></div> <div class="xfilename" style="top: 510px; width: 224px; font-family: 'courier New', serif; font-size: 17px; text-align: left; left: 175px; overflow: auto; height: 102px;"><br>Other character names here, this will scroll</div> </div></div> </div> </div> <div class="xtab"> <input type="radio" id="tab-2" name="tab-group-1"> <label for="tab-2" style="top: 250px;">Overview</label> <div class="xcontent"> <div class="xoverviewbg"></div><div class="xclip"></div> <div class="xpic"><img src="https://placehold.it/250" style="height: 100%; width: 100%;"></div> <div class="xstatsheader" style="left: 240px; top: 50px;">D.O.B:</div> <div class="xstatsinfo" style="left: 315px; top: 52px;">mm/dd/yyyy</div> <div class="xstatsheader" style="left: 240px; top: 75px;">BORN:</div> <div class="xstatsinfo" style="left: 300px; top: 77px;">City, ST</div> <div class="xstatsheader" style="left: 240px; top: 100px;">EYES:</div> <div class="xstatsinfo" style="left: 300px; top: 102px;">Color</div> <div class="xstatsheader" style="left: 240px; top: 125px;">HAIR:</div> <div class="xstatsinfo" style="left: 300px; top: 127px;"> Color</div> <div class="xstatsheader" style="left: 240px; top: 150px;">HEIGHT:</div> <div class="xstatsinfo" style="left: 320px; top: 152px;">00'00"</div> <div class="xstatsheader" style="left: 240px; top: 175px;">WEIGHT:</div> <div class="xstatsinfo" style="left: 320px; top: 177px;">000lbs</div> <div class="xstatsheader" style="left: 240px; top: 200px;">MEMBERGROUP:</div> <div class="xstatsinfo" style="left: 255px; top: 225px;">Here, site-specific</div> <div class="xstatsheader" style="left: 50px; top: 265px;">ALIASES:</div> <div class="xstatsinfo" style="top: 290px; text-align: left; left: 65px;">What they're known as here</div> <div class="xstatsheader" style="top: 315px; left: 50px;">CONNECTIONS:</div> <div class="xstatsinfo" style="overflow: auto; width: 390px; height: 140px; top: 335px; left: 45px; text-align: left;"><ul><li>List here</li><li>and here</li><li>details can be done by doing - this (blah blah blah)</li><li>It scrolls!</li><li>Yay!</li></ul></div> <div class="xstatsheader" style="top: 475px; left: 50px;">MODUS OPERANDI:</div> <div class="xstatsinfo" style="top: 500px; overflow: auto; width: 390px; height: 140px; left: 45px; text-align: left;">Here's where you can detail why people should be scared of them, or at least interested. What are their goals, if they are known? What sets them apart from a normal human case? Like the last one, this scrolls - you have a lot of ground to cover, technically!</div> </div> </div> <div class="xtab"> <input type="radio" id="tab-3" name="tab-group-1"> <label for="tab-3" style="top: 400px;">Bio</label> <div class="xcontent"> <div class="xbio"> <h1>'Episode' Title Here</h1> Here's where you put your bio! Freeform, or Personality and History detailed seperately. You could even take advantage of the X Files tone and make it a script format! You have a ton of room to work with, but it still scrolls just in case. <b>This is bold. <i>This is bold italic.</b> This is just italic.</i></div> </div> </div> <div class="xtab"> <input type="radio" id="tab-4" name="tab-group-1"> <label for="tab-4" style="top: 550px;">Add. Info</label> <div class="xcontent"> <div class="xtab4"> <div class="xstatsheader" style="top: 100px; left: 50px;">TRIGGERS:</div> <div class="xstatsinfo" style="top: 125px; left: 60px; height: 150px; text-align: left;">List your player triggers here!</div> <div class="xstatsheader" style="top: 425px; left: 50px; text-decoration: none; font-size: 20px;">Player Name</div> <div class="xstatsheader" style="top: 450px; left: 50px; text-decoration: none; font-weight: normal;">Pronouns Here</div> <div class="xstatsheader" style="top: 475px; left: 50px; text-decoration: none; font-weight: normal;">Timezone</div> <div class="xstatsheader" style="top: 500px; left: 50px; text-decoration: none; font-weight: normal;">Contact Info Here</div> </div> </div> </div> </div></center>
```
<link href="https://fonts.googleapis.com/css?family=Anton|Courier+New" rel="stylesheet">
<style>
  .xfilesapp {height: 700px; width: 500px; position: relative; overflow: hidden; color: #000;}
  .xtab {float: left;}
  .xtab label {display: block; padding: 5px; height: 20px; width: 125px; background: #F7F3EB; transform: rotate(90deg); -webkit- transform: rotate(90deg); -moz- transform: rotate(90deg); -o- transform: rotate(90deg); -ms- transform: rotate(90deg); position: absolute; left: 390px; z-index: 20; font-family: 'Courier New', serif; font-size: 23px; box-shadow: 0px -1px 3px gray; font-weight: bold; transition-duration: .8s; -webkit-transition-duration: .8s; -moz-transition-duration: .8s; -o-transition-duration: .8s;}
  .xtab [type=radio] {display: none;}
  .xcontent {transition-duration: .8s; -webkit-transition-duration: .8s; -moz-transition-duration: .8s; -o-transition-duration: .8s; overflow: hidden; position: absolute; top: 0px; left: 700px; height: 700px; width: 500px;}
  [type=radio]:checked ~ label {box-shadow: 0px -1px 3px silver; transition-duration: .8s; -webkit-transition-duration: .8s; -moz-transition-duration: .8s; -o-transition-duration: .8s;}
  [type=radio]:checked ~ label ~ .xcontent {z-index: 4; left: 0px; transition-duration: .8s; -webkit-transition-duration: .8s; -moz-transition-duration: .8s; -o-transition-duration: .8s;}
  .xfilemain {height: 680px; width: 465px; background: #BF2121; top:10px; position: absolute; left: 10px;}
  .xfilemain2 {position: absolute; width: 425px; height: 640px; background: #F7F3EB; top: 20px; left: 20px;}
  .xfilename {position: absolute; font-family: 'Anton', sans-serif; font-size: 30px; width: 400px; text-align: center; left: 12px; top: 230px;}
  .xfilename a {color: black; text-decoration: none;}
  .xfilesfbi {color: #bf2121; font-family: sans-serif; font-weight: bold; font-size: 22px;  text-align: center; width: 425px;position: absolute; top: 25px;}
  .xfilesfbi h1 {font-size: 16px;}
  .xline {background-color: #b42121; height: 2px; width: 245px; position: absolute; top: 55px; left: 90px;}
  .xoverviewbg {height: 640px; width: 450px; top: 30px; position: absolute; left: 15px; background-image: url(http://www.calibreforhome.com/wp-content/uploads/2016/08/peach-colored-paper-texture-with-flecks.jpg); background-size: 100%;}
  .xpic {z-index: 10; position: absolute; top: 35px; left: 20px; border-top: 3px solid white; border-left: 3px solid white; border-right: 3px solid white; border-bottom: 20px solid white; height: 200px; width: 200px;}
  .xclip {background-image: url(http://www.clker.com/cliparts/8/b/f/0/11949981431500831576attach.svg.med.png); background-size: 100%; height: 50px; width: 48px; position: absolute; left: 10px; top: 25px; z-index: 18;}
  .xstatsheader {font-family: 'Courier New', serif; font-weight: bold; font-size: 18px; position: absolute; text-decoration: underline;}
  .xstatsinfo {font-family: 'Courier New', serif; font-size: 16px; position: absolute;}
  .xbio {padding: 20px; width: 425px; background: black; position: absolute; height: 605px; top: 25px; left: 25px; overflow: auto; color: silver; font-family: 'Courier New', serif; text-align: left; text-indent: 25px;}
  .xbio b {color: #4BBF52}
  .xbio h1 {font-family: 'Anton', sans-serif; text-align: center; font-weight: normal; text-shadow: 1px 2px 3px #4bbf52}
  .xtab4 {padding: 20px; width: 425px; background: #f7f3eb; position: absolute; top: 25px; left: 25px; height: 605px;}
</style>
<center><div class="xfilesapp">
<div class="xtab">
  <input type="radio" id="tab-1" name="tab-group-1" checked>
  <label for="tab-1" style="top: 100px;">X</label>
  <div class="xcontent">
  <div class="xfilemain">
    <div class="xfilemain2"><div class="xfilesfbi"><h1>U.S. DEPARTMENT OF JUSTICE</h1>FEDERAL BUREAU<br>OF<br>INVESTIGATION</div><div class="xline"></div>
    <div class="xfilesfbi" style="top: 178px; left: 0px; width: 250px; font-size: 15px; font-weight: normal;">Bureau File Number</div><div class="xline" style="top: 195px; left: 50px; height: 1px; width: 300px;"></div>
    <div class="xfilename" style="top: 165px; font-size: 30px; font-family: 'Courier New', serif; font-weight: bold; width: 175px; left: 200px; z-index: 8; letter-spacing: 3px;">X-487820</div>
      <div class="xfilename" style="text-shadow: 1px 2px 3px #49E344;">Character Name Here</div>
    <div class="xfilesfbi" style="top:315px; font-size: 12px; font-weight: normal; letter-spacing: 2px;">FIELD OFFICE CRIMINAL INVESTIGATIVE<br>AND ADMINISTRATIVE FILES</div>
    <div class="xfilename" style="font-size: 85px; font-style: italic; top: 425px; left: 0px; width: 425px; opacity: .9"><a href="https://rpginitiative.com/profile/2592-penny/">X-FILE</a></div><div class="xfilesfbi" style="top: 540px; text-align: left; font-size: 14px; left: 23px;">See also Nos.</div>
    <div class="xline" style="top: 505px; height: 1px; left: 150px;"></div><div class="xline" style="height: 1px; top: 615px; left: 150px;"></div>
    <div class="xfilename" style="top: 510px; width: 224px; font-family: 'courier New', serif; font-size: 17px; text-align: left; left: 175px; overflow: auto; height: 102px;"><br>Other character names here, this will scroll</div>
    </div></div>
  </div>
</div>
<div class="xtab">
  <input type="radio" id="tab-2" name="tab-group-1">
  <label for="tab-2" style="top: 250px;">Overview</label>
  <div class="xcontent">
  <div class="xoverviewbg"></div><div class="xclip"></div>
    <div class="xpic"><img src="https://placehold.it/250" style="height: 100%; width: 100%;"></div>
    <div class="xstatsheader" style="left: 240px; top: 50px;">D.O.B:</div>
    <div class="xstatsinfo" style="left: 315px; top: 52px;">mm/dd/yyyy</div>
    <div class="xstatsheader" style="left: 240px; top: 75px;">BORN:</div>
    <div class="xstatsinfo" style="left: 300px; top: 77px;">City, ST</div>
    <div class="xstatsheader" style="left: 240px; top: 100px;">EYES:</div>
    <div class="xstatsinfo" style="left: 300px; top: 102px;">Color</div>
    <div class="xstatsheader" style="left: 240px; top: 125px;">HAIR:</div>
    <div class="xstatsinfo" style="left: 300px; top: 127px;"> Color</div>
    <div class="xstatsheader" style="left: 240px; top: 150px;">HEIGHT:</div>
    <div class="xstatsinfo" style="left: 320px; top: 152px;">00'00"</div>
    <div class="xstatsheader" style="left: 240px; top: 175px;">WEIGHT:</div>
    <div class="xstatsinfo" style="left: 320px; top: 177px;">000lbs</div>
    <div class="xstatsheader" style="left: 240px; top: 200px;">MEMBERGROUP:</div>
    <div class="xstatsinfo" style="left: 255px; top: 225px;">Here, site-specific</div>
    <div class="xstatsheader" style="left: 50px; top: 265px;">ALIASES:</div>
    <div class="xstatsinfo" style="top: 290px; text-align: left; left: 65px;">What they're known as here</div>
    <div class="xstatsheader" style="top: 315px; left: 50px;">CONNECTIONS:</div>
    <div class="xstatsinfo" style="overflow: auto; width: 390px; height: 140px; top: 335px; left: 45px; text-align: left;"><ul><li>List here</li><li>and here</li><li>details can be done by doing - this (blah blah blah)</li><li>It scrolls!</li><li>Yay!</li></ul></div>
    <div class="xstatsheader" style="top: 475px; left: 50px;">MODUS OPERANDI:</div>
    <div class="xstatsinfo" style="top: 500px; overflow: auto; width: 390px; height: 140px; left: 45px; text-align: left;">Here's where you can detail why people should be scared of them, or at least interested. What are their goals, if they are known? What sets them apart from a normal human case? Like the last one, this scrolls - you have a lot of ground to cover, technically!</div>
  </div>
</div>
<div class="xtab">
  <input type="radio" id="tab-3" name="tab-group-1">
  <label for="tab-3" style="top: 400px;">Bio</label>
  <div class="xcontent">
    <div class="xbio">
    <h1>'Episode' Title Here</h1>
    Here's where you put your bio! Freeform, or Personality and History detailed seperately. You could even take advantage of the X Files tone and make it a script format! You have a ton of room to work with, but it still scrolls just in case. <b>This is bold. <i>This is bold italic.</b> This is just italic.</i></div>
  </div>
</div>
<div class="xtab">
  <input type="radio" id="tab-4" name="tab-group-1">
  <label for="tab-4" style="top: 550px;">Add. Info</label>
  <div class="xcontent">
    <div class="xtab4">
      <div class="xstatsheader" style="top: 100px; left: 50px;">TRIGGERS:</div>
      <div class="xstatsinfo" style="top: 125px; left: 60px; height: 150px; text-align: left;">List your player triggers here!</div>
      <div class="xstatsheader" style="top: 425px; left: 50px; text-decoration: none; font-size: 20px;">Player Name</div>
      <div class="xstatsheader" style="top: 450px; left: 50px; text-decoration: none; font-weight: normal;">Pronouns Here</div>
      <div class="xstatsheader" style="top: 475px; left: 50px; text-decoration: none; font-weight: normal;">Timezone</div>
      <div class="xstatsheader" style="top: 500px; left: 50px; text-decoration: none; font-weight: normal;">Contact Info Here</div>
    </div>
  </div>
</div>
</div></center>
```
By Penny
Followers 0

Go to codes Application Templates
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