Jump to content
  • "Your File" Challenge Application Template

       (1 review)

    This is a character application template for the "Your File" coding challenge.  This template could be used for a character application.  It provides basic information about a character as well as a section for the character's history.  The items are all editable, but should be kept brief except for the history which will scroll accordingly.  The only image that needs to be added is the character image.  Just replace the placeholder url.  This image will re-size automatically, but due to the particular proportions, it'd be best to either keep your image close if not exactly to 204x198.   This will work on any background.

     

    NOTE:  The code may look out of alignment here, but has been tested on boards that allow html and will work like in the example image (which was a direct screencap) on jcink/invisionfree/other html-allowed sites.


    Actual Template Not Responsive

    ALIAS c Alias
    D.O.B c DOB
    Birthplace birthplace
    Sex c sex
    Height cheight
    Weight cweight
    Hair c hair
    Char Name Eyes c eyes
    Scars/Marks c scars
    history:
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et turpis sed ante tincidunt congue sit amet vitae nisi. Nunc sed urna et nisi semper varius. Sed ligula risus, commodo non efficitur id, consequat vel neque. Aenean varius nunc eu tristique finibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur luctus auctor felis, vel interdum massa malesuada a. Praesent vel orci sapien. Vestibulum non vestibulum urna, at fermentum nisl. Vestibulum rhoncus ante risus, sit amet gravida dolor viverra vehicula. Sed commodo vitae orci at cursus. Nunc lacinia tellus eget consectetur elementum. Quisque vel volutpat lectus, vel efficitur est.

    Nullam sed rhoncus orci, vitae accumsan eros. Praesent id lacinia elit. Aliquam dignissim neque in nunc facilisis, pretium mattis eros tristique. Curabitur magna nibh, malesuada sit amet arcu commodo, mattis euismod enim. Phasellus rhoncus ligula quis lobortis ullamcorper. Quisque tincidunt et magna a efficitur. Sed ante arcu, aliquam sit amet odio sed, consectetur finibus felis. Suspendisse posuere a nisl ut eleifend. Duis purus nibh, convallis sed eleifend in, iaculis facilisis nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum neque sapien, semper vel tincidunt vel, congue ut tellus.

    Nullam facilisis diam ut sollicitudin ullamcorper. Proin eu quam odio. Etiam rutrum tempus ultricies. Suspendisse potenti. Cras tempor pharetra sem, ornare facilisis metus egestas nec. Etiam libero odio, imperdiet quis libero sit amet, pulvinar dapibus justo. Pellentesque elementum bibendum blandit.

    Template code

    <style> @import url('https://fonts/googleapis.com/css?family=Inconsolata');
       /**this keeps the clip from overlapping with the above post**/
       .outerbox {
       width: 450px;
       height: 650px 
       padding-top: 100px;
       position: relative;
         color: #000;
      }
      .outerbox * {
         box-sizing: initial;
       }
      
       /**this is the clipboard background. if you wish to use a different paper texture, replace the url with the url of the texture you want to use**/
       .envelope {
       background-image: url(https://images.rpginitiative.com/uploads/monthly_2018_08/large.file1.jpg.4055bc56b50c78d938454af3f8370688.jpg);
       width: 450px;
       height: 580px;
       margin-top: 50px;
       padding: 30px 30px 10px 10px;
       border-radius: 10px 10px 10px 10px;
       font-family: 'Inconsolata', monospace;
       -moz-box-shadow: 2px 2px 3px 2px #5c5c5c;
       -webkit-box-shadow: 2px 2px 3px 2px #5c5c5c;
       box-shadow: 2px 2px 3px 2px #5c5c5c;
       }
      
       /**this is for the document. keep the paper texture the same or else the polaroid background will not match**/
       .paper {
       width: 450px;
       height: 550px;
       background-image: url(https://images.rpginitiative.com/uploads/monthly_2018_07/filepapertexture.jpg.937903016c0e1ee464dc230159b27442.jpg);
       position: relative;
       padding: 10px;
       -moz-box-shadow: 2px 2px 3px 2px #5c5c5c;
       -webkit-box-shadow: 2px 2px 3px 2px #5c5c5c;
       box-shadow: 2px 2px 3px 2px #5c5c5c;
       font-family: 'Inconsolata', monospace;
       }
      
       /**the following relate to the table with the character info**/
       .cliptable {
       margin-left: auto;
       margin-right: auto;
       caption-side: top;
       border-collapse: collapse;
       background-image: url(https://images.rpginitiative.com/uploads/monthly_2018_07/filepapertexture.jpg.937903016c0e1ee464dc230159b27442.jpg);
       font-family: 'Inconsolata', monospace;
       text-transform: uppercase;
       }
      
       /**Adjust font size here.**/
       .cliptable td,
       th {
       padding: 5px;
       width: 100px;
       height: 40px;
       font-family: 'Inconsolata', monospace;
       font-size: 80%;  
       }
      
       .bold {
       font-weight: bold;
       font-family: 'Inconsolata', monospace;
       text-transform: uppercase;
       }
      
       div.autoscrollcell {
       max-height: 140px;
       width: 100%;
       margin: 0px;
       padding: 0px;
       overflow: scroll;
       font-family: 'Inconsolata', monospace;
       text-align: justify;
       }
      
       div.autoscrollcell::-webkit-scrollbar {
       background-image: url(https://images.rpginitiative.com/uploads/monthly_2018_07/filepapertexture.jpg.937903016c0e1ee464dc230159b27442.jpg);
       }
      
       div.autoscrollcell::-webkit-scrollbar-corner {
       background-image: url(https://images.rpginitiative.com/uploads/monthly_2018_07/filepapertexture.jpg.937903016c0e1ee464dc230159b27442.jpg);
       }
      
       .headingcell {
       color: #c6c6c6;
       text-align: center;
       font-family: 'Inconsolata', monospace;
       text-transform: uppercase;
       border: 0px;
       }
      
       .tabletext {
       text-align: left;
       font-family: 'Inconsolata', monospace;
       text-transform: uppercase;
       border: 1px dashed #959595;
       }
      
       .cliptable th {
       text-align: left;
       font-family: 'Inconsolata', monospace;
       text-transform: uppercase;
       }
      
       /**this is the background image to make the picture framed by the polaroid.**/
       .polaroid {
       background-image: url(https://images.rpginitiative.com/uploads/monthly_2018_07/polaroidpaperbackground.png.7c3c7466cbf9d56906eb9167241359c8.png);
       }
      
      /**this controls the dimensions of the polaroid image, places it correctly, and turns the image black and white.**/
       .polaroid img {
       padding-left: 7px;
       padding-right: 10px;
       margin-top: -30px;
       -webkit-filter: grayscale(100%);
       filter: grayscale(100%);
       width: 204px;
       height: 198px;
       }
      
       /**this adds the confidential stamp**/
       .confidential {
       position: absolute;
       top: 250px;
       left: 50px;
       z-index: 100;
       width: 200px;
       opacity: .95;
       }
      
       /**this controls the clip overlay on the clipboard**/
       .clipboard {
       position: absolute;
       top: -80px;
       left: 140px;
       z-index: 100;
       width: 200px;
       opacity: .95;
       }
      
    </style>
    <div class="outerbox">
      
       <div class="envelope">
         
          <div class="paper">
            
             <img class="clipboard" src="https://images.rpginitiative.com/uploads/monthly_2019_06/clipboard1.png.a0512234c5d4ddc4ee929eaa164118b7.png"> 
             <table class="cliptable">
                <tr class="headingcell"> </tr>
               
                <tr class="tabletext">
                   <td rowspan="7" class="polaroid"><img src="https://via.placeholder.com/204x198"></td>
                   <td class="bold">ALIAS</td>
                   <td>c Alias</td>
                </tr>
               
                <tr class="tabletext">
                   <td class="bold">D.O.B</td>
                   <td>c DOB</td>
                </tr>
               
                <tr class="tabletext">
                   <td class="bold">Birthplace</td>
                   <td>birthplace</td>
                </tr>
               
                <tr class="tabletext">
                   <td class="bold">Sex</td>
                   <td>c sex</td>
                </tr>
               
                <tr class="tabletext">
                   <td class="bold">Height</td>
                   <td> cheight</td>
                </tr>
               
                <tr class="tabletext">
                   <td class="bold">Weight</td>
                   <td> cweight</td>
                </tr>
               
                <tr class="tabletext">
                   <td class="bold">Hair</td>
                   <td>c hair </td>
                </tr>
               
                <tr class="tabletext">
                   <td class="bold">Char Name</td>
                   <td class="bold">Eyes</td>
                   <td>c eyes</td>
                </tr>
               
                <tr class="tabletext">
                   <td></td>
                   <td class="bold">Scars/Marks</td>
                   <td>c scars</td>
                </tr>
               
                <tr class="tabletext">
                   <td class="bold"> history:</td>
                   <td colspan=2></td>
                </tr>
               
                <tr class="tabletext">
                   <td colspan="3">
                      <div class="autoscrollcell">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et turpis sed ante tincidunt congue sit amet vitae nisi. Nunc sed urna et nisi semper 	                      varius. Sed ligula risus, commodo non efficitur id, consequat vel neque. Aenean varius nunc eu tristique finibus. Orci varius natoque penatibus et magnis dis                        parturient montes, nascetur ridiculus mus. Curabitur luctus auctor felis, vel interdum massa malesuada a. Praesent vel orci sapien. Vestibulum non vestibulum                        urna, at fermentum nisl. Vestibulum rhoncus ante risus, sit amet gravida dolor viverra vehicula. Sed commodo vitae orci at cursus. Nunc lacinia tellus eget                          consectetur elementum. Quisque vel volutpat lectus, vel efficitur est.
                         <p>
                         Nullam sed rhoncus orci, vitae accumsan eros. Praesent id lacinia elit. Aliquam dignissim neque in nunc facilisis, pretium mattis eros tristique. Curabitur                          magna nibh, malesuada sit amet arcu commodo, mattis euismod enim. Phasellus rhoncus ligula quis lobortis ullamcorper. Quisque tincidunt et magna a efficitur.                        Sed ante arcu, aliquam sit amet odio sed, consectetur finibus felis. Suspendisse posuere a nisl ut eleifend. Duis purus nibh, convallis sed eleifend in, iaculis                      facilisis nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum neque sapien, semper vel tincidunt vel, congue ut tellus.
                        <p>
                        Nullam facilisis diam ut sollicitudin ullamcorper. Proin eu quam odio. Etiam rutrum tempus ultricies. Suspendisse potenti. Cras tempor pharetra sem, ornare                           facilisis metus egestas nec. Etiam libero odio, imperdiet quis libero sit amet, pulvinar dapibus justo. Pellentesque elementum bibendum blandit.
                      </div>
                   </td>
                </tr>
               
            </table>
            <img class="confidential" src="https://images.rpginitiative.com/uploads/monthly_2018_07/confidentialstamp.png.a3fcbd512f26d5dea153fb6ffb3d04f5.png">
          </div>
       </div>
    </div>



    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

    Arasnia

      

    Woah this looks nice! 
    I just think the Template Preview have an issue with the scrolling part of the History part.

    This could be a nice way for school RPGs for example to make there application to school cooler 😄
    Amazing Job!

    Share this review


    Link to review

×
×
  • 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.