
By Penny
Hey yall, this is for the 'Your File' coding challenge - based on, as you can tell, files from The X-Files!
<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
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.