API tools faq
paste
Advertisement
circlejourney

Identity

circlejourney
Apr 17th, 2019
2,613
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 10.23 KB | None | 0 0
raw download clone embed print report
  1. <!-- Identity theme by Circlejourney. Editing is allowed. Just remember to credit me! -->
  2. <div class="container-fluid" style="font-family: sans-serif">
  3.   <div class="card-side collapse show" id="side-1">
  4.     <div class="card border-0" style="overflow: hidden; color: #333; background: #EFEFEF;">
  5.      
  6.       <div id="background-elements" style="position:absolute; top:0; width: 100%">
  7.         <div style="font-size:10pt;display: block;position:absolute; height:  0; width:  0; top: 0; border-top:  520px solid white; border-right: 730px solid transparent;"></div>
  8.         <div style="font-size:10pt;display: block;position:absolute; height:  0; width:  0; border-top:  500px solid #CCEEFF; border-right: 700px solid transparent;"></div>
  9.         <div id="symbol" style="position: absolute; right: -10%; top: 40%; font-size: 300pt; color: white;">
  10.           <i class="fas fa-umbrella"></i> <!--replace with preferred Font Awesome icon-->
  11.         </div>
  12.       </div>
  13.      
  14.       <h1 class="card-header text-center mb-1 display-3 text-break" style="z-index: 2; text-transform: uppercase; padding: 30px; background-color: #225588; color: white;">
  15.             <i class="fas fa-globe"></i> Identification Card
  16.       </h1>
  17.      
  18.       <div class="w-100" style="border-bottom: 2px double #225588; z-index: 2;"></div>
  19.      
  20.       <div class="card-block my-3 table-responsive" style="z-index: 2; height: 540px;"> <!-- Replace 540px with other height if you wish to fit more info-->
  21.         <div class="row">
  22.           <div class="col-12 col-md-4 text-center" style="text-transform: uppercase">
  23.             <div class="px-4">
  24.               <img class="border w-75 border-primary rounded my-4" src="https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/13339140_LGT_1781167.png?1585015109" style="border: 5px solid white" /> <!-- Icon image -->
  25.               <h1 class="display-4 w-100 text-break">Character's Name Here</h1>
  26.               <img class="w-75 mb-4" src="https://i.imgur.com/IBtuZsS.png"> <!-- Signature: transparent PNG -->
  27.             </div>
  28.           </div>
  29.           <div class="col-12 col-md-8">
  30.             <div class="px-4">
  31.              
  32.               <p class="mb-0 font-weight-bold" style="text-transform: uppercase; font-size: 13pt;">My Birthplace</p>
  33.               <p class="mb-3" style="font-size: 10pt; line-height: 0.9em">Birthplace</p>
  34.              
  35.               <p class="mb-0 font-weight-bold" style="text-transform: uppercase; font-size: 13pt;">My Place of Residence</p>
  36.               <p class="mb-3" style="font-size: 10pt; line-height: 0.9em">Residence</p>
  37.              
  38.               <p class="mb-0 font-weight-bold" style="text-transform: uppercase; font-size: 13pt;">My parents, siblings, spouses, etc.</p>
  39.               <p class="mb-3" style="font-size: 10pt; line-height: 0.9em">Family</p>
  40.              
  41.               <div class="row">
  42.                 <div class="col-5">
  43.                   <p class="mb-0 font-weight-bold" style="text-transform: uppercase; font-size: 13pt;">16</p>
  44.                   <p class="mb-3" style="font-size: 10pt; line-height: 0.9em">Age</p>
  45.                 </div>
  46.                
  47.                 <div class="col-7">
  48.                   <p class="mb-0 font-weight-bold" style="text-transform: uppercase; font-size: 13pt;">1 January 1900</p>
  49.                   <p class="mb-3" style="font-size: 10pt; line-height: 0.9em">Date of Birth</p>
  50.                 </div>
  51.               </div>
  52.              
  53.               <div class="row">
  54.                 <div class="col-5">
  55.                   <p class="mb-0 font-weight-bold" style="text-transform: uppercase; font-size: 13pt;">My pronouns</p>
  56.                   <p class="mb-3" style="font-size: 10pt; line-height: 0.9em">Pronouns</p>
  57.                 </div>
  58.                 <div class="col-7">
  59.                   <p class="mb-0 font-weight-bold" style="text-transform: uppercase; font-size: 13pt;">My height</p>
  60.                   <p class="mb-3" style="font-size: 10pt; line-height: 0.9em">Height</p>
  61.                 </div>
  62.               </div>
  63.              
  64.               <div class="row">
  65.                 <div class="col-5">
  66.                   <p class="mb-0 font-weight-bold" style="text-transform: uppercase; font-size: 13pt;">My ethnicity or background</p>
  67.                   <p class="mb-3" style="font-size: 10pt; line-height: 0.9em">Background</p>
  68.                 </div>
  69.                 <div class="col-7">
  70.                   <p class="mb-0 font-weight-bold" style="text-transform: uppercase; font-size: 13pt;">My blood type</p>
  71.                   <p class="mb-3" style="font-size: 10pt; line-height: 0.9em">Blood type</p>
  72.                 </div>
  73.               </div>
  74.              
  75.               <div class="row">
  76.                 <div class="col-5">
  77.                   <p class="mb-0 font-weight-bold" style="text-transform: uppercase; font-size: 13pt;">My eye colour</p>
  78.                   <p class="mb-3" style="font-size: 10pt; line-height: 0.9em">Eyes</p>
  79.                 </div>
  80.                 <div class="col-7">
  81.                   <p class="mb-0 font-weight-bold" style="text-transform: uppercase; font-size: 13pt;">My hair colour</p>
  82.                   <p class="mb-3" style="font-size: 10pt; line-height: 0.9em">Hair</p>
  83.                 </div>
  84.               </div>
  85.              
  86.               <p class="mb-0 font-weight-bold" style="text-transform: uppercase; font-size: 13pt;"><a href="MUSIC LINK">Music theme</a></p>
  87.               <p style="font-size: 10pt; line-height: 0.9em">Theme</p>
  88.              
  89.             </div>
  90.           </div>
  91.         </div>
  92.       </div>
  93.     </div>
  94.    
  95.     <div class="card-footer p-4 text-right" style="background-color: #225588;">
  96.       <a class="text-white" style="font-size: 14pt; float: left;" href="https://toyhou.se/~forums/16.htmlcss-graphics/75580.circlejourney-s-code-creations-free-"><i class="fas fa-code"></i></a>
  97.  
  98.       <a class="text-white" style="font-size: 14pt;" data-toggle="collapse" href=".card-side">
  99.         <i class="fal fa-sync-alt"></i> Tap to flip card
  100.       </a>
  101.     </div>
  102.   </div>
  103.    
  104.    
  105.   <div class="card-side collapse" id="side-2">
  106.     <div class="card border-0" style="overflow: hidden; color: #333; background: #EFEFEF;">
  107.       <div id="background-elements" style="position:absolute; top:0; width: 100%">
  108.         <div style="font-size:10pt;display: block;position:absolute; height:  0; width:  0; top: 0; border-top:  520px solid white; border-right: 730px solid transparent;"></div>
  109.         <div style="font-size:10pt;display: block;position:absolute; height:  0; width:  0; border-top:  500px solid #CCEEFF; border-right: 700px solid transparent;"></div>
  110.         <div id="symbol" style="position: absolute; right: -10%; top: 40%; font-size: 300pt; color: white;">
  111.           <i class="fas fa-umbrella"></i><!--replace with preferred font awesome icon-->
  112.         </div>
  113.       </div>
  114.      
  115.       <h1 class="card-header text-center mb-1 display-3" style="z-index: 2; text-transform: uppercase; padding: 30px; background-color: #225588; color: white;"><!--insert preferred color-->
  116.             <i class="fas fa-globe"></i> Identification Card
  117.       </h1>
  118.      
  119.       <div class="w-100" style="border-bottom: 2px double #225588; z-index: 2;"></div>
  120.      
  121.       <div class="card-block my-3 table-responsive" style="height: 540px; z-index: 2;"> <!-- Replace 540px with other height if you wish to fit more info--><div class="row">
  122.           <div class="col col-md-7">
  123.             <div class="px-4 mb-4">
  124.              
  125.               <h1 class="font-weight-bold pb-2" style="text-transform: uppercase;">
  126.                 Summary
  127.               </h1>
  128.              
  129.               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt tellus ante, sit amet suscipit odio fringilla vitae. Cras vel mi lectus. Pellentesque ullamcorper augue lectus. Nam consectetur turpis sit amet odio tincidunt, eu cursus orci tristique. Quisque rhoncus mollis lacus, a maximus neque suscipit porttitor. Quisque scelerisque mattis nisi, nec facilisis leo euismod a. Nam vitae urna in tortor vestibulum fringilla. Nam dolor tortor, pellentesque sit amet diam nec, vulputate tristique nibh. Cras pellentesque id sem sed efficitur. Maecenas nec gravida enim, nec ullamcorper ex. Sed justo metus, suscipit in ligula et, elementum elementum metus.</p>
  130.  
  131.               <p>Ut at neque tortor. Praesent maximus tempor odio sed pellentesque. Maecenas ornare odio nec ligula egestas viverra. Nulla nibh erat, lobortis eu eros et, interdum facilisis purus. Phasellus at nunc id lacus venenatis vehicula non at nisi. Morbi et eros at mauris mollis faucibus. Nullam sem odio, vestibulum eu aliquet in, bibendum ac diam. Morbi id neque elementum, ultricies enim sit amet, vehicula sapien. Vivamus tincidunt tempor libero, vitae posuere dolor eleifend ac.</p>
  132.             </div>
  133.           </div>
  134.          
  135.           <div class="col col-md-5">
  136.             <div class="px-4">
  137.               <h1 class="font-weight-bold pb-2" style="text-transform: uppercase;">
  138.                 Skills
  139.               </h1>
  140.              
  141.               <p class="mb-0 font-weight-bold" style="text-transform: uppercase;">Skill 1</p>
  142.               <p class="mb-2">Skill 1 description.</p>
  143.              
  144.               <p class="mb-0 font-weight-bold" style="text-transform: uppercase;">Skill 2</p>
  145.               <p class="mb-2">Skill 2 description.</p>
  146.              
  147.              
  148.               <h1 class="font-weight-bold mt-4 pb-2" style="text-transform: uppercase;">
  149.                 Relationships
  150.               </h1>
  151.              
  152.               <p class="mb-0 font-weight-bold" style="text-transform: uppercase;">Person 1</p>
  153.               <p class="mb-2">Describe relationship here.</p>
  154.              
  155.               <p class="mb-0 font-weight-bold" style="text-transform: uppercase;">Person 2</p>
  156.               <p class="mb-2">Describe relationship here.</p>
  157.             </div>
  158.           </div>
  159.          
  160.         </div>
  161.       </div>
  162.     </div>
  163.    
  164.     <div class="card-footer p-4 text-right" style="background-color: #225588;">
  165.       <a class="text-white" style="font-size: 14pt; float: left;" href="https://toyhou.se/~forums/16.htmlcss-graphics/75580.circlejourney-s-code-creations-free-"><i class="fas fa-code"></i></a>
  166.  
  167.       <a class="text-white" style="font-size: 14pt;" data-toggle="collapse" href=".card-side">
  168.         <i class="fal fa-sync-alt"></i> Tap to flip card
  169.     </div>
  170.   </div>
  171. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!