API tools faq
paste
Advertisement
circlejourney

Identity: Mod 1

circlejourney
May 10th, 2019
394
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.40 KB | None | 0 0
raw download clone embed print report
  1. <div class="container-fluid" style="font-family: sans-serif">
  2. <div class="card-side collapse show" id="side-1">
  3. <div class="card border-0" style="overflow: hidden; color: #333; background: #EFEFEF;">
  4.  
  5. <div id="background-elements" style="position:absolute; top:0; width: 100%">
  6. <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>
  7. <div style="font-size:10pt;display: block;position:absolute; height: 0; width: 0; border-top: 500px solid #CCEEFF; border-right: 700px solid transparent;"></div>
  8. <div id="symbol" style="position: absolute; right: -10%; top: 40%; font-size: 300pt; color: white;">
  9. <i class="fas fa-umbrella"></i> <!--replace with preferred Font Awesome icon-->
  10. </div>
  11. </div>
  12.  
  13. <h1 class="card-header text-center mb-1 display-3" style="z-index: 2; text-transform: uppercase; padding: 30px; background-color: #225588; color: white;">
  14. <i class="fas fa-globe"></i> Identification Card
  15. </h1>
  16.  
  17. <div class="w-100" style="border-bottom: 2px double #225588; z-index: 2;"></div>
  18.  
  19. <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-->
  20. <div class="row">
  21. <div class="col-12 col-md-4 text-center" style="text-transform: uppercase">
  22. <div class="px-4">
  23. <img class="border w-75 border-primary rounded my-4" src="https://file.toyhou.se/characters/3921250?1555421822" style="border: 5px solid white" /> <!-- Icon image -->
  24. <h1 class="display-4">Character's Name Here</h1>
  25. <img class="w-75 mb-4" src="https://i.imgur.com/IBtuZsS.png"> <!-- Signature: transparent PNG -->
  26. </div>
  27. </div>
  28. <div class="col-12 col-md-8">
  29. <div class="px-4">
  30.  
  31. <div class="row">
  32. <div class="col-5">
  33. <p class="mb-0 font-weight-bold" style="text-transform: uppercase; font-size: 13pt;">My Birthplace</p>
  34. <p class="mb-3" style="font-size: 10pt; line-height: 0.9em">Birthplace</p>
  35. </div>
  36. <div class="col-7">
  37. <p class="mb-0 font-weight-bold" style="text-transform: uppercase; font-size: 13pt;">Insert detail 1 here</p>
  38. <p class="mb-3" style="font-size: 10pt; line-height: 0.9em">Detail 1</p>
  39. </div>
  40. </div>
  41.  
  42. <div class="row">
  43. <div class="col-5">
  44. <p class="mb-0 font-weight-bold" style="text-transform: uppercase; font-size: 13pt;">My Place of Residence</p>
  45. <p class="mb-3" style="font-size: 10pt; line-height: 0.9em">Residence</p>
  46. </div>
  47. <div class="col-7">
  48. <p class="mb-0 font-weight-bold" style="text-transform: uppercase; font-size: 13pt;">Insert detail 2 here</p>
  49. <p class="mb-3" style="font-size: 10pt; line-height: 0.9em">Detail 2</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 parents, siblings, spouses, etc.</p>
  56. <p class="mb-3" style="font-size: 10pt; line-height: 0.9em">Family</p>
  57. </div>
  58. <div class="col-7">
  59. <p class="mb-0 font-weight-bold" style="text-transform: uppercase; font-size: 13pt;">Insert detail 3 here</p>
  60. <p class="mb-3" style="font-size: 10pt; line-height: 0.9em">Detail 3</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;">16</p>
  67. <p class="mb-3" style="font-size: 10pt; line-height: 0.9em">Age</p>
  68. </div>
  69.  
  70. <div class="col-7">
  71. <p class="mb-0 font-weight-bold" style="text-transform: uppercase; font-size: 13pt;">1 January 1900</p>
  72. <p class="mb-3" style="font-size: 10pt; line-height: 0.9em">Date of Birth</p>
  73. </div>
  74. </div>
  75.  
  76. <div class="row">
  77. <div class="col-5">
  78. <p class="mb-0 font-weight-bold" style="text-transform: uppercase; font-size: 13pt;">My pronouns</p>
  79. <p class="mb-3" style="font-size: 10pt; line-height: 0.9em">Pronouns</p>
  80. </div>
  81. <div class="col-7">
  82. <p class="mb-0 font-weight-bold" style="text-transform: uppercase; font-size: 13pt;">My height</p>
  83. <p class="mb-3" style="font-size: 10pt; line-height: 0.9em">Height</p>
  84. </div>
  85. </div>
  86.  
  87. <div class="row">
  88. <div class="col-5">
  89. <p class="mb-0 font-weight-bold" style="text-transform: uppercase; font-size: 13pt;">My ethnicity or background</p>
  90. <p class="mb-3" style="font-size: 10pt; line-height: 0.9em">Background</p>
  91. </div>
  92. <div class="col-7">
  93. <p class="mb-0 font-weight-bold" style="text-transform: uppercase; font-size: 13pt;">My blood type</p>
  94. <p class="mb-3" style="font-size: 10pt; line-height: 0.9em">Blood type</p>
  95. </div>
  96. </div>
  97.  
  98. <div class="row">
  99. <div class="col-5">
  100. <p class="mb-0 font-weight-bold" style="text-transform: uppercase; font-size: 13pt;">My eye colour</p>
  101. <p class="mb-3" style="font-size: 10pt; line-height: 0.9em">Eyes</p>
  102. </div>
  103. <div class="col-7">
  104. <p class="mb-0 font-weight-bold" style="text-transform: uppercase; font-size: 13pt;">My hair colour</p>
  105. <p class="mb-3" style="font-size: 10pt; line-height: 0.9em">Hair</p>
  106. </div>
  107. </div>
  108.  
  109.  
  110. <!-- copy/paste this part --><div class="row">
  111. <div class="col-5">
  112. <p class="mb-0 font-weight-bold" style="text-transform: uppercase; font-size: 13pt;">Insert detail here</p>
  113. <p class="mb-3" style="font-size: 10pt; line-height: 0.9em">Detail</p>
  114. </div>
  115. <div class="col-7">
  116. <p class="mb-0 font-weight-bold" style="text-transform: uppercase; font-size: 13pt;">Insert detail here</p>
  117. <p class="mb-3" style="font-size: 10pt; line-height: 0.9em">Detail</p>
  118. </div>
  119. </div><!-- end part to copy -->
  120.  
  121.  
  122. <p class="mb-0 font-weight-bold" style="text-transform: uppercase; font-size: 13pt;"><a href="MUSIC LINK">Music theme</a></p>
  123. <p style="font-size: 10pt; line-height: 0.9em">Theme</p>
  124.  
  125. </div>
  126. </div>
  127. </div>
  128. </div>
  129. </div>
  130.  
  131. <div class="card-footer p-4 text-right" style="background-color: #225588;">
  132. <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>
  133.  
  134. <a class="text-white" style="font-size: 14pt;" data-toggle="collapse" href=".card-side">
  135. <i class="fal fa-sync-alt"></i> Tap to flip card
  136. </a>
  137. </div>
  138. </div>
  139.  
  140.  
  141. <div class="card-side collapse" id="side-2">
  142. <div class="card border-0" style="overflow: hidden; color: #333; background: #EFEFEF;">
  143. <div id="background-elements" style="position:absolute; top:0; width: 100%">
  144. <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>
  145. <div style="font-size:10pt;display: block;position:absolute; height: 0; width: 0; border-top: 500px solid #CCEEFF; border-right: 700px solid transparent;"></div>
  146. <div id="symbol" style="position: absolute; right: -10%; top: 40%; font-size: 300pt; color: white;">
  147. <i class="fas fa-umbrella"></i><!--replace with preferred font awesome icon-->
  148. </div>
  149. </div>
  150.  
  151. <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-->
  152. <i class="fas fa-globe"></i> Identification Card
  153. </h1>
  154.  
  155. <div class="w-100" style="border-bottom: 2px double #225588; z-index: 2;"></div>
  156.  
  157. <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-->
  158. <div class="row justify-content-center">
  159. <div class="col col-md-7 mb-4">
  160. <h1 class="font-weight-bold pb-2" style="text-transform: uppercase;">
  161. Summary
  162. </h1>
  163.  
  164. <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>
  165.  
  166. <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>
  167.  
  168. </div>
  169. </div>
  170.  
  171.  
  172. <!-- copy/paste this part --><div class="row justify-content-center">
  173. <div class="col col-md-7 mb-4">
  174. <h1 class="font-weight-bold pb-2" style="text-transform: uppercase;">
  175. New section
  176. </h1>
  177.  
  178. <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>
  179.  
  180. <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>
  181.  
  182. </div>
  183. </div><!-- end part to copy -->
  184.  
  185. </div>
  186.  
  187. <div class="card-footer p-4 text-right" style="background-color: #225588;">
  188. <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>
  189.  
  190. <a class="text-white" style="font-size: 14pt;" data-toggle="collapse" href=".card-side">
  191. <i class="fal fa-sync-alt"></i> Tap to flip card
  192. </div>
  193. </div>
  194. </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!