Advertisement
circlejourney

Super Special Double Deluxe

Mar 25th, 2020 (edited)
2,923
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 12.76 KB | None | 0 0
  1. <!-- Super Special Double Deluxe theme created by Circlejourney for Reinapepiada. Editing is allowed. Just remember to credit me! -->
  2. <div class="container">
  3.     <div class="row mx-0 my-4" style="font-size: 10pt;">
  4.         <div class="col-12 col-md-4 bg-faded py-4 rounded">
  5.             <div class="text-center">
  6.                 <h1 class="display-2 text-center mb-2 text-break">My Name</h1>
  7.                 <img class="rounded-circle img-thumbnail" style="max-height: 250px;" src="https://i.imgur.com/HDynMtU.png">
  8.             </div>
  9.             <h2 class="text-center text-muted display-4 my-4">Basics</h2>
  10.            
  11.             <div class="row">
  12.                 <div class="col-4 text-muted">Name</div>
  13.                 <div class="col-8 text-right">My name</div>
  14.             </div>
  15.        
  16.             <hr class="my-2">
  17.            
  18.             <div class="row">
  19.                 <div class="col-4 text-muted">Aliases</div>
  20.                 <div class="col-8 text-right">My aliases</div>
  21.             </div>
  22.            
  23.             <hr class="my-2">
  24.            
  25.             <div class="row">
  26.                 <div class="col-4 text-muted">Age</div>
  27.                 <div class="col-8 text-right">My age</div>
  28.             </div>
  29.            
  30.             <hr class="my-2">
  31.            
  32.             <div class="row">
  33.                 <div class="col-4 text-muted">Species</div>
  34.                 <div class="col-8 text-right">My species</div>
  35.             </div>
  36.            
  37.             <hr class="my-2">
  38.            
  39.             <div class="row">
  40.                 <div class="col-4 text-muted">Pronouns</div>
  41.                 <div class="col-8 text-right">My pronouns</div>
  42.             </div>
  43.            
  44.             <hr class="my-2">
  45.            
  46.             <div class="row">
  47.                 <div class="col-4 text-muted">Lives in</div>
  48.                 <div class="col-8 text-right">My location</div>
  49.             </div>
  50.            
  51.             <hr class="my-2">
  52.            
  53.             <div class="row">
  54.                 <div class="col-4 text-muted">Birthday</div>
  55.                 <div class="col-8 text-right">My birthday</div>
  56.             </div>
  57.            
  58.             <!-- Copy this bit to add new rows to the Basics section -->
  59.             <hr class="my-2">
  60.            
  61.             <div class="row">
  62.                 <div class="col-4 text-muted">Info</div>
  63.                 <div class="col-8 text-right">My info</div>
  64.             </div>
  65.             <!-- End of part to copy -->
  66.            
  67.             <h2 class="text-center text-muted display-4 my-4">Stats</h2>
  68.            
  69.             <div class="row my-2">
  70.                 <div class="col-12 col-lg-4 text-lg-right text-muted">
  71.                     STATISTIC 1
  72.                 </div>
  73.                 <div class="col-12 col-lg-8 flex-column justify-content-center">
  74.                     <div class="progress mr-3">
  75.                         <div class="progress-bar" style="width: 10%" role="progressbar" ></div>
  76.                     </div>
  77.                 </div>
  78.             </div>
  79.            
  80.             <div class="row my-2">
  81.                 <div class="col-12 col-lg-4 text-lg-right text-muted">
  82.                     STATISTIC 2
  83.                 </div>
  84.                 <div class="col-12 col-lg-8 flex-column justify-content-center">
  85.                     <div class="progress mr-3">
  86.                         <div class="progress-bar" style="width: 20%" role="progressbar" ></div>
  87.                     </div>
  88.                 </div>
  89.             </div>
  90.            
  91.             <div class="row my-2">
  92.                 <div class="col-12 col-lg-4 text-lg-right text-muted">
  93.                     STATISTIC 3
  94.                 </div>
  95.                 <div class="col-12 col-lg-8 flex-column justify-content-center">
  96.                     <div class="progress mr-3">
  97.                         <div class="progress-bar" style="width: 80%" role="progressbar" ></div>
  98.                     </div>
  99.                 </div>
  100.             </div>
  101.            
  102.             <div class="row my-2">
  103.                 <div class="col-12 col-lg-4 text-lg-right text-muted">
  104.                     STATISTIC 4
  105.                 </div>
  106.                 <div class="col-12 col-lg-8 flex-column justify-content-center flex-column justify-content-center">
  107.                     <div class="progress mr-3">
  108.                         <div class="progress-bar" style="width: 100%" role="progressbar" ></div>
  109.                     </div>
  110.                 </div>
  111.             </div>
  112.            
  113.             <!-- Copy this part to add new STATISTICs -->
  114.             <div class="row my-2">
  115.                 <div class="col-12 col-lg-4 text-lg-right text-muted">
  116.                     STATISTIC 5
  117.                 </div>
  118.                 <div class="col-12 col-lg-8 flex-column justify-content-center">
  119.                     <div class="progress mr-3">
  120.                         <div class="progress-bar" style="width: 0%" role="progressbar" ></div> <!-- Set STATISTIC percentage with the width property -->
  121.                     </div>
  122.                 </div>
  123.             </div>
  124.             <!-- End of part to copy -->
  125.            
  126.            
  127.             <h2 class="text-center text-muted display-4 my-4">Theme</h2>
  128.             <p class="text-center">
  129.                 <a class="btn btn-primary" href="LINK" target="_blank"><i class="fa fa-music"></i> Title</a>
  130.                 <a class="btn btn-primary" href="LINK" target="_blank"><i class="fa fa-music"></i> Title</a>
  131.             </p>
  132.            
  133.    
  134.             <p class="text-center m-0" style="font-size: 9pt; align-self: flex-end;">
  135.                 <a href="https://toyhou.se/~forums/16.htmlcss-graphics/75580.circlejourney-s-code-creations-free-">Theme by Circlejourney</a>
  136.             </p>
  137.         </div>
  138.        
  139.         <div class="col col-md-8 pb-3">
  140.            
  141.             <p class="font-weight-light text-muted text-right p-4" style="font-size: 18pt;">
  142.                 <i class="fa fa-quote-left"></i>
  143.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit,  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  144.                
  145.                 <i class="fa fa-quote-right"></i>
  146.             </p>
  147.            
  148.             <br>
  149.            
  150.             <h2 class="text-secondary">Summary</h2>
  151.             <hr class="my-2">
  152.            
  153.             <div class="ml-2">
  154.                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  155.             </div>
  156.            
  157.             <br>
  158.            
  159.             <h2 class="text-secondary">Appearance</h2>
  160.             <hr class="my-2">
  161.            
  162.             <div class="ml-2">
  163.                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  164.             </div>
  165.            
  166.             <br>
  167.            
  168.             <h2 class="text-secondary">Personality</h2>
  169.             <hr class="my-2">
  170.            
  171.             <div class="ml-2">
  172.                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  173.             </div>
  174.            
  175.             <br>
  176.            
  177.             <div class="row">
  178.                 <div class="col-12 col-md-6">
  179.                     <h2 class="text-secondary"><i class="fa fa-check"></i> Likes</h2>
  180.                 <hr class="my-2">
  181.                     <ul class="mb-0">
  182.                         <li>Like 1</li>
  183.                         <li>Like 2</li>
  184.                         <li>Like 3</li>
  185.                     </ul>
  186.                 </div>
  187.                
  188.                 <div class="col-12 col-md-6">
  189.                     <h2 class="text-secondary"><i class="fa fa-times"></i> Dislikes</h2>
  190.                 <hr class="my-2">
  191.                     <ul class="mb-0">
  192.                         <li>Dislike 1</li>
  193.                         <li>Dislike 2</li>
  194.                         <li>Dislike 3</li>
  195.                     </ul>
  196.                 </div>
  197.             </div>
  198.            
  199.             <br>
  200.            
  201.             <h2 class="text-secondary">Story</h2>
  202.             <hr class="my-2">
  203.             <div class="ml-2">
  204.                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  205.             </div>
  206.            
  207.             <br>
  208.            
  209.             <h2 class="text-secondary">Relationships</h2>
  210.             <hr class="my-2">
  211.            
  212.             <div class="row no-gutters mt-2">
  213.                 <div class="col-3 pr-2 flex-column justify-content-center">
  214.                     <a href="LINK">
  215.                         <img class="rounded-circle" src="https://i.imgur.com/A0iOr3J.png">
  216.                     </a>
  217.                 </div>
  218.                 <div class="col-9 flex-column justify-content-center">
  219.                     <h5>
  220.                         <a href="LINK">Name</a>
  221.                     </h5>
  222.                     <p>Relationship information here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  223.                 </div>
  224.             </div>
  225.            
  226.             <!-- Copy this part to add new relationships -->
  227.             <div class="row no-gutters mt-2">
  228.                 <div class="col-3 pr-2 flex-column justify-content-center">
  229.                     <a href="LINK">
  230.                         <img class="rounded-circle" src="https://i.imgur.com/D5GFuse.png">
  231.                     </a>
  232.                 </div>
  233.                 <div class="col-9 flex-column justify-content-center">
  234.                     <h5>
  235.                         <a href="LINK">Name</a>
  236.                     </h5>
  237.                     <p>Relationship information here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  238.                 </div>
  239.             </div>
  240.             <!-- End of part to copy -->
  241.            
  242.             <br>
  243.            
  244.             <!-- Copy this part to add new sections -->
  245.             <h2 class="text-secondary">Extra</h2>
  246.             <hr class="my-2">
  247.             <div class="ml-2">
  248.                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  249.             </div>
  250.            
  251.             <br>
  252.             <!-- End of part to copy -->
  253.            
  254.             <div class="row no-gutters w-100 m-auto"> <!-- Moodboard -->
  255.                 <div class="col-6 col-lg-3"><img src="https://i.imgur.com/L0RhGpr.png"></div>
  256.                 <div class="col-6 col-lg-3"><img src="https://i.imgur.com/9kjgmZa.png"></div>
  257.                 <div class="col-6 col-lg-3"><img src="https://i.imgur.com/X9q9TiJ.png"></div>
  258.                 <div class="col-6 col-lg-3"><img src="https://i.imgur.com/0GPIF2e.png"></div>
  259.             </div>
  260.         </div>
  261.     </div>
  262. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement