Facebook
From toyhou.se/dwadopts, 3 Years ago, written in HTML5.
Embed
Download Paste or View Raw
Hits: 231
  1. <!-- Hello there!!! Thank you for liking this code. I also have a google docs version of this code you can find here: https://tinyurl.com/yd7hotu8 and are completely free to use! This theme's columns are auto fit. So no matter how much you write in one section, the other section will space itself to match. If you like this theme, please favorite / comment && maybe give me a coffee if that's your cup of tea: https://ko-fi.com/dragonesswithin -->       
  2.  
  3. <div class="card-block focal h-100">
  4. <div class="mx-auto w-100 bg-faded" style="max-width:1000px; border-radius:15px; padding:20px">
  5. <div class="row no-gutters" style="margin: -.5rem">
  6. <div class="col-md p-2 flex-column">
  7. <!-- HEADER AND SUBTITLE -->
  8.                         <p class="col-auto my-auto display-4 heading"><strong>HEADER.</strong>
  9.                         <br>
  10.                         <p class="col-auto my-auto display-4 heading" style="font-size:13px; padding:18px;  font-style: italic;">subtitle</p>
  11. <!-- HEADER AND SUBTITLE END -->
  12.         <hr class="w-100 my-auto">
  13.         <div class="row gutters">
  14.   <div class="col-6 row no-gutters">
  15.     <div class="col-12 p-1">
  16.       <div class="p-3 h-100">
  17.        
  18. <!-- STATISTICS-->
  19.               <h2 style="text-align:right;font-style: italic; font-size:24px">Statistics.</h2>
  20.      
  21.       <div class="row no-gutters">
  22.   <div class="col-md-6 col-4 p-1">
  23.     <div class="bg-faded p-2 h-100 bg-dark">
  24.       <p align="right" style="font-style: oblique;">Lifespan</p>
  25.     </div>
  26.   </div>
  27.   <div class="col-md-6 col-8 p-1">
  28.     <div class="bg-faded p-2 h-100 bg-dark">
  29.       <p align="right">tba</p>
  30.     </div>
  31.   </div>
  32.  
  33.     <div class="col-md-6 col-4 p-1">
  34.     <div class="bg-faded p-2 h-100 bg-dark">
  35.       <p align="right" style="font-style: oblique;">Average Height</p>
  36.     </div>
  37.   </div>
  38.   <div class="col-md-6 col-8 p-1">
  39.     <div class="bg-faded p-2 h-100 bg-dark">
  40.       <p align="right">tba</p>
  41.     </div>
  42.   </div>
  43.  
  44.     <div class="col-md-6 col-4 p-1">
  45.     <div class="bg-faded p-2 h-100 bg-dark">
  46.       <p align="right" style="font-style: oblique;">Average Weight</p>
  47.     </div>
  48.   </div>
  49.   <div class="col-md-6 col-8 p-1">
  50.     <div class="bg-faded p-2 h-100 bg-dark">
  51.       <p align="right">tba</p>
  52.     </div>
  53.   </div>
  54.  
  55.     <div class="col-md-6 col-4 p-1">
  56.     <div class="bg-faded p-2 h-100 bg-dark">
  57.       <p align="right" style="font-style: oblique;">Diet</p>
  58.     </div>
  59.   </div>
  60.   <div class="col-md-6 col-8 p-1">
  61.     <div class="bg-faded p-2 h-100 bg-dark">
  62.       <p align="right">tba</p>
  63.     </div>
  64.   </div>
  65.  
  66.     <div class="col-md-6 col-4 p-1">
  67.     <div class="bg-faded p-2 h-100 bg-dark">
  68.       <p align="right" style="font-style: oblique;">Location Found</p>
  69.     </div>
  70.   </div>
  71.   <div class="col-md-6 col-8 p-1">
  72.     <div class="bg-faded p-2 h-100 bg-dark">
  73.       <p align="right">tba</p>
  74.     </div>
  75.   </div>
  76. </div>
  77. <!-- STATISTIC END -->
  78.         <hr>
  79. <!-- DESCRIPTION  -->
  80.               <h2 style="text-align:right;font-style: italic; font-size:24px">Description.</h2>
  81.  
  82. <p>Key description for this section !!! This information can be kept short or you can go as long as you want with. </p>
  83.        
  84.         <h3>Habitat.</h3>
  85.         <p> Explanation of their natural habitat.</p>
  86.        
  87.                 <h3>Behaviorisms.</h3>
  88.         <p> Explanation of their natural behaviors.</p>
  89.        
  90.                 <h3>Group Organization.</h3>
  91.         <p> Explanation of their natural group organization.</p>
  92.        
  93.                 <h3>Hunting && Diet.</h3>
  94.         <p> Explanation of their natural hunting and diet.</p>
  95.        
  96.                 <h3>Reproduction.</h3>
  97.         <p> Explanation of their natural reproduction.</p>
  98.        
  99.                 <h3>Life Cycle.</h3>
  100.         <p> Explanation of their natural life cycle.</p>
  101.        
  102.                 <h3>Health.</h3>
  103.         <p> Explanation of their natural health.</p>
  104.        
  105.                 <h3>Communication.</h3>
  106.         <p> Explanation of their natural communication.</p>
  107. <!-- DESCRIPTION END -->       
  108.         <hr>
  109. <!-- STRENGTHS && WEAKNESSES -->       
  110.                       <h2 style="text-align:right;font-style: italic; font-size:24px">Strengths && Weaknesses.</h2>    
  111.        
  112. <div class="row no-gutters">
  113.  <div class="col-md-6 p-1">
  114.    <div class="bg-faded p-3 bg-dark">
  115.      <p align="center"><strong>Strengths</strong></p>
  116.    </div>
  117.  </div>
  118.  <div class="col-md-6 p-1">
  119.    <div class="bg-faded p-3 bg-dark">
  120.      <p align="center"><strong>Weaknesses</strong></p>
  121.    </div>
  122.  </div>
  123.  
  124.  <div class="col-md-6 p-1">
  125.    <div class="bg-faded p-3 bg-dark">
  126.      <p align="left">
  127.        <i class="fas fa-plus-square"></i>&nbsp;&nbsp;  add strength here.<br style="line-height: 15px;">
  128.         <i class="fas fa-plus-square"></i>&nbsp;&nbsp;  add strength here.<br style="line-height: 15px;">
  129.         <i class="fas fa-plus-square"></i>&nbsp;&nbsp;  add strength here.<br style="line-height: 15px;">
  130.      
  131.       </p>
  132.     </div>
  133.   </div>
  134.   <div class="col-md-6 p-1">
  135.     <div class="bg-faded p-3 bg-dark">
  136.       <p align="left">
  137.         <i class="fas fa-minus-square"></i>&nbsp;&nbsp;  add weakness here.<br style="line-height: 15px;">
  138.         <i class="fas fa-minus-square"></i>&nbsp;&nbsp;  add weakness here.<br style="line-height: 15px;">
  139.         <i class="fas fa-minus-square"></i>&nbsp;&nbsp;  add weakness here.<br style="line-height: 15px;">
  140.     </div>
  141.   </div>
  142. </div>
  143. <!-- STRENGTHS && WEAKNESSES END-->    
  144.                 <hr>
  145. <!-- ABILITIES && SKILLS -->           
  146.                       <h2 style="text-align:right;font-style: italic; font-size:24px">Abilities && Skills.</h2>
  147.                       <p> here you can add flavor text or whatever.</p>
  148.        
  149.         <p> <code>ABILITY / SKILL NAME.</code></p>
  150. <p style="margin-left:35px;"> <b>( MAGIC / PHYSICAL )</b> -  explanation here.
  151.  
  152.         <p> <code>ABILITY / SKILL NAME.</code></p>
  153. <p style="margin-left:35px;"> <b>( MAGIC / PHYSICAL )</b> -  explanation here.
  154. <!-- ABILITIES && SKILLS END-->
  155.       </div>
  156.     </div>
  157.   </div>
  158.   <div class="col-6 row no-gutters">
  159.     <div class="col-12 p-1">
  160.       <div class="p-3 h-100">
  161. <!-- IMAGE;; You can remove this or place one here to fill up some space. I highly rec a png to go here! -->           
  162.                    <img src="https://via.placeholder.com/400" style="padding:20px;">
  163.                    
  164. <!-- IMAGE;; You can remove just this entire section from above ^ if you don't want an image.  -->     
  165.  
  166. <!-- CULTURE -->       
  167.                          <h2 style="text-align:right;font-style: italic; font-size:24px">Culture.</h2> 
  168.                      <p> Feel free to go into depth about the culture of the species. </p>
  169.                      
  170. <!-- CULTURE END-->                          
  171.                      <hr>
  172. <!-- ORIGINS -->                             
  173.                          <h2 style="text-align:right;font-style: italic; font-size:24px">Origins.</h2> 
  174.                      <p> Feel free to go into depth about the origins of the species. </p>
  175.                      
  176. <!-- ORIGINS END -->                         
  177.                      <hr>
  178.  
  179. <!-- HISTORY -->                           
  180.                       <h2 style="text-align:right;font-style: italic; font-size:24px">History.</h2>    
  181.                      <p> Feel free to go into depth about the history of the species. </p>
  182. <!-- HISTORY END -->   
  183.  
  184.       </div>
  185.     </div>
  186.   </div>
  187. </div>
  188.  
  189.  
  190. </div></div></div></div>
  191.  
  192. <!-- DO NOT REMOVE -->
  193.         <p class="col-auto text-muted my-auto text-right"><a class="tooltipster" data-placement="left" href="/dwadopts" title="code by dwadopts / dragonesswithin"><i class="fas fa-file-code" ></i></a></p></div></div></div></div>