Jump to content
Saying Goodbye to Community

  • From Outer Space

       (0 reviews)

    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

    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
    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!

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

    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.