API tools faq
paste
circlejourney

A Fine Day

circlejourney
Jan 29th, 2021 (edited)
3,872
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 17.43 KB | None | 0 0
raw download clone embed print report
  1. <!-- A Fine Day theme created by Circlejourney for dogstarlite. Editing is allowed. Just remember to credit me!  -->
  2.  
  3. <!-- Theme colour can be set. The colour used in the template is #56789a, you can find and replace it to set a custom theme colour. -->
  4.  
  5. <div class="container row m-auto no-gutters" style="max-width: 950px">
  6.    
  7.     <!-- Tabs -->
  8.     <div class="nav nav-pills nav-fill flex-wrap border-0 text-center col-12 order-2 order-lg-1">
  9.         <a class="nav-item mr-1 mb-1 btn btn-secondary active" data-toggle="tab" href="#tab-1" style="color: #56789a; border: 1px solid;">
  10.             <i class="fal fa-user"></i> Overview
  11.         </a>
  12.         <a class="nav-item mr-1 mb-1 btn btn-secondary" data-toggle="tab" href="#tab-2" style="color: #56789a; border: 1px solid;">
  13.             <i class="fal fa-id-card"></i> Details
  14.         </a>
  15.         <a class="nav-item mr-1 mb-1 btn btn-secondary" data-toggle="tab" href="#tab-3" style="color: #56789a; border: 1px solid;">
  16.             <i class="fal fa-books"></i> Backstory
  17.         </a>
  18.         <a class="nav-item mr-1 mr-lg-0 mb-1 btn btn-secondary" data-toggle="tab" href="#tab-4" style="color: #56789a; border: 1px solid;">
  19.             <i class="fal fa-list-alt"></i> Trivia
  20.         </a>
  21.     </div>
  22.    
  23.    
  24.     <!-- Sidebar -->
  25.     <div class="col-lg-3 col-12 mb-2 d-flex flex-column order-1 order-lg-2 card border-0" style="height: 540px; width: auto;">
  26.         <!--  Sidebar image: change the URL in the brackets below. --> 
  27.         <div class="text-center bg-faded table-responsive flex-grow-1"
  28.            style="overflow-y: auto;
  29.                background-image: url(https://via.placeholder.com/350x600);
  30.                background-position: center;
  31.                background-size: cover;"
  32.        ></div>
  33.         <div class="display-4 p-4 text-center d-flex flex-column justify-content-center" style="font-size: 14pt; line-height: 1.2em; background-color: #56789a; color: white;">
  34.             <div>
  35.                 <i class="fal fa-quote-left"></i>
  36.                
  37.                 Quote here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  38.                
  39.                 <i class="fal fa-quote-right"></i>
  40.             </div>
  41.         </div>
  42.     </div>
  43.    
  44.    
  45.     <div class="col-lg-9 col-12 mb-2 tab-content bg-faded order-3" style="height: 540px;">
  46.        
  47.         <!-- Overview tab -->
  48.         <div class="tab-pane active h-100 p-4" id="tab-1" style="overflow-y: auto;">
  49.            
  50.             <h3 class="font-weight-normal text-uppercase" style="color: #56789a;"><i class="fal fa-user"></i> About</h3>
  51.             <hr class="mt-0" style="border-color: #56789a;">
  52.            
  53.             <p>About the character. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In luctus orci et lectus hendrerit gravida. Fusce at risus at purus dictum venenatis a vel enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis placerat massa nulla, vitae dapibus dui pulvinar quis.</p>
  54.            
  55.             <p>Pellentesque enim purus, maximus vel scelerisque ut, dapibus nec est. Etiam hendrerit posuere interdum. Cras sodales maximus enim et hendrerit. Nam id tempus lacus. Phasellus finibus iaculis magna. Etiam magna nunc, ultricies placerat purus vel, elementum molestie ex. Vivamus in ultricies neque, sit amet aliquam mauris. Pellentesque eu dui augue. Nulla consectetur, nunc vitae aliquet faucibus, ipsum erat lacinia lectus, non porttitor sapien purus nec nisl. Aliquam sodales orci eu dolor lacinia porta.</p>
  56.            
  57.  
  58.             <h3 class="font-weight-normal text-uppercase mt-4" style="color: #56789a;"><i class="fal fa-theater-masks"></i> Personality</h3>
  59.             <hr class="mt-0" style="border-color: #56789a;">
  60.            
  61.             <p>About personality here. Sed enim justo, blandit ac aliquam eu, condimentum ut sapien. Donec libero ante, lacinia pharetra eleifend aliquam, pharetra at arcu. Ut mollis tempus convallis. Quisque suscipit faucibus consequat. Sed mollis tempor mauris ut facilisis. Curabitur ullamcorper lorem vel dui dignissim, eget sodales nulla fermentum. Maecenas leo libero, consectetur ac vulputate eu, commodo in risus. Nam elementum semper leo in volutpat.
  62.                 </p>
  63.                
  64.             <h3 class="font-weight-normal text-uppercase mt-4" style="color: #56789a;"><i class="fal fa-palette"></i> Design notes</h3>
  65.             <hr class="mt-0" style="border-color: #56789a;">
  66.            
  67.                 <p>Design notes here. Integer hendrerit leo ac arcu placerat, eu hendrerit arcu iaculis. Pellentesque et tristique sapien. Vivamus id condimentum magna. Quisque dapibus laoreet massa, a ornare augue lacinia eu. Quisque ullamcorper sagittis elit. Phasellus semper convallis eros pulvinar dignissim. Curabitur ipsum justo, tempor vitae ex id, tristique posuere risus. Etiam augue metus, hendrerit et scelerisque sit amet, varius sit amet enim. Etiam nec magna sit amet odio elementum ullamcorper sit amet eu nulla. Donec sollicitudin tortor iaculis ante interdum tristique. Etiam id fermentum est. Ut in malesuada nibh. In non pretium neque, nec sollicitudin tortor.</p>
  68.         </div>
  69.        
  70.        
  71.         <!-- Details tab -->
  72.         <div class="tab-pane h-100 p-4" id="tab-2" style="overflow-y: auto;">
  73.            
  74.             <h3 class="font-weight-normal text-uppercase" style="color: #56789a;"><i class="fal fa-id-card"></i> Details</h3>
  75.             <hr class="mt-0" style="border-color: #56789a;">
  76.            
  77.             <div class="row p-2" style="font-size: 10pt;">
  78.                 <div class="col-12 col-lg-6 row no-gutters">
  79.                     <div class="col-6 font-weight-bold text-uppercase mb-2" style="color: #56789a;">Name</div>
  80.                     <div class="col-6 text-right">Info here</div>
  81.                
  82.                     <div class="col-6 font-weight-bold text-uppercase mb-2" style="color: #56789a;">Gender</div>
  83.                     <div class="col-6 text-right">Longer info here</div>
  84.                    
  85.                     <div class="col-6 font-weight-bold text-uppercase mb-2" style="color: #56789a;">Background</div>
  86.                     <div class="col-6 text-right">Info here</div>
  87.                    
  88.                     <div class="col-6 font-weight-bold text-uppercase mb-2" style="color: #56789a;">Species</div>
  89.                     <div class="col-6 text-right">Longer info here</div>
  90.                    
  91.                     <div class="col-6 font-weight-bold text-uppercase mb-2" style="color: #56789a;">Age</div>
  92.                     <div class="col-6 text-right">Info here</div>
  93.                
  94.                     <div class="col-6 font-weight-bold text-uppercase mb-2" style="color: #56789a;">Height</div>
  95.                     <div class="col-6 text-right">Info here</div>
  96.                 </div>
  97.                
  98.                 <div class="col-12 col-lg-6 row no-gutters">
  99.                    
  100.                     <div class="col-6 font-weight-bold text-uppercase mb-2" style="color: #56789a;">Handedness</div>
  101.                     <div class="col-6 text-right">Info here</div>
  102.                    
  103.                     <div class="col-6 font-weight-bold text-uppercase mb-2" style="color: #56789a;">Religion</div>
  104.                     <div class="col-6 text-right">Info here</div>
  105.                     <div class="col-6 font-weight-bold text-uppercase mb-2" style="color: #56789a;">Occupation</div>
  106.                     <div class="col-6 text-right">Longer info here</div>
  107.                
  108.                     <div class="col-6 font-weight-bold text-uppercase mb-2" style="color: #56789a;">Sexuality</div>
  109.                     <div class="col-6 text-right">Info here</div>
  110.                    
  111.                     <div class="col-6 font-weight-bold text-uppercase mb-2" style="color: #56789a;">Partner</div>
  112.                     <div class="col-6 text-right">Longer info here</div>
  113.                    
  114.                     <div class="col-6 font-weight-bold text-uppercase mb-2" style="color: #56789a;">Theme</div>
  115.                     <div class="col-6 text-right">Longer info here</div>
  116.                 </div>
  117.                
  118.             </div>
  119.            
  120.             <hr>
  121.            
  122.             <div class="row text-muted">
  123.                 <div class="col-4">
  124.                     <h3 class="font-weight-normal text-uppercase" style="color: #56789a;"><i class="fal fa-laugh-beam"></i> Likes</h3>
  125.                     <hr class="mt-0" style="border-color: #56789a;">
  126.                     <ul class="pl-3">
  127.                         <li>Info</li>
  128.                         <li>Info</li>
  129.                         <li>Info</li>
  130.                     </ul>
  131.                 </div>
  132.                 <div class="col-4">
  133.                     <h3 class="font-weight-normal text-uppercase" style="color: #56789a;"><i class="fal fa-sad-tear"></i> Dislikes</h3>
  134.                     <hr class="mt-0" style="border-color: #56789a;">
  135.                     <ul class="pl-3">
  136.                         <li>Info</li>
  137.                         <li>Info</li>
  138.                         <li>Info</li>
  139.                         <li>Info</li>
  140.                     </ul>
  141.                 </div>
  142.                 <div class="col-4">
  143.                     <h3 class="font-weight-normal text-uppercase" style="color: #56789a;"><i class="fal fa-gamepad"></i> Hobbies</h3>
  144.                     <hr class="mt-0" style="border-color: #56789a;">
  145.                     <ul class="pl-3">
  146.                         <li>Info</li>
  147.                         <li>Info</li>
  148.                         <li>Info</li>
  149.                     </ul>
  150.                 </div>
  151.             </div>
  152.         </div>
  153.        
  154.        
  155.         <!-- Backstory tab -->
  156.         <div class="tab-pane h-100 row no-gutters p-4" id="tab-3" style="overflow-y: auto;">
  157.            
  158.             <!-- Backstory image  -->
  159.             <img class="m-2" src="https://via.placeholder.com/300" style="float: right; max-width: 250px;">
  160.                
  161.             <div>
  162.                 <h3 class="font-weight-normal text-uppercase pb-2 d-inline-block" style="color: #56789a; border-bottom: 1px solid;"><i class="fal fa-books"></i> Backstory</h3>
  163.                 <p>Backstory here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In luctus orci et lectus hendrerit gravida. Fusce at risus at purus dictum venenatis a vel enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis placerat massa nulla, vitae dapibus dui pulvinar quis.</p>
  164.  
  165.                 <p>Pellentesque enim purus, maximus vel scelerisque ut, dapibus nec est. Etiam hendrerit posuere interdum. Cras sodales maximus enim et hendrerit. Nam id tempus lacus. Phasellus finibus iaculis magna. Etiam magna nunc, ultricies placerat purus vel, elementum molestie ex. Vivamus in ultricies neque, sit amet aliquam mauris. Pellentesque eu dui augue.</p>
  166.                 <p>Nulla consectetur, nunc vitae aliquet faucibus, ipsum erat lacinia lectus, non porttitor sapien purus nec nisl. Aliquam sodales orci eu dolor lacinia porta.</p>
  167.                 <p>Sed enim justo, blandit ac aliquam eu, condimentum ut sapien. Donec libero ante, lacinia pharetra eleifend aliquam, pharetra at arcu. Ut mollis tempus convallis. Quisque suscipit faucibus consequat. Sed mollis tempor mauris ut facilisis. Curabitur ullamcorper lorem vel dui dignissim, eget sodales nulla fermentum. Maecenas leo libero, consectetur ac vulputate eu, commodo in risus. Nam elementum semper leo in volutpat.</p>
  168.             </div>
  169.         </div>
  170.        
  171.        
  172.         <!-- Trivia tab -->
  173.         <div class="tab-pane h-100 overflow-auto" id="tab-4">
  174.             <div class="row no-gutters flex-grow-1" style="min-height: 100%;">
  175.                 <div class="col-12 col-lg-7 p-4">
  176.                     <h3 class="font-weight-normal text-uppercase" style="color: #56789a;"><i class="fal fa-list-alt"></i> Trivia</h3>
  177.                     <hr class="mt-0" style="border-color: #56789a;">
  178.                    
  179.                     <ul class="pl-3">
  180.                         <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In luctus orci et lectus hendrerit gravida. Fusce at risus at purus dictum venenatis a vel enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis placerat massa nulla, vitae dapibus dui pulvinar quis.</li>
  181.            
  182.                         <li>Pellentesque enim purus, maximus vel scelerisque ut, dapibus nec est. Etiam hendrerit posuere interdum. Cras sodales maximus enim et hendrerit. Nam id tempus lacus.</li>
  183.                        
  184.                         <li>Phasellus finibus iaculis magna. Etiam magna nunc, ultricies placerat purus vel, elementum molestie ex. Vivamus in ultricies neque, sit amet aliquam mauris. Pellentesque eu dui augue. Nulla consectetur, nunc vitae aliquet faucibus, ipsum erat lacinia lectus, non porttitor sapien purus nec nisl. Aliquam sodales orci eu dolor lacinia porta.</li>
  185.                     </ul>
  186.                    
  187.                 </div>
  188.                
  189.                 <div class="col-12 col-lg-5 p-4" style="background-color: #56789a; color: white; min-height: 100%;">
  190.                     <h3 class="font-weight-normal text-uppercase"><i class="fal fa-list-music"></i> Playlist</h3>
  191.                     <hr class="mt-0" style="border-color: white;">
  192.                    
  193.                     <a class="d-flex justify-content-between mb-3" href="#LINK" target="_blank" style="color: white;">
  194.                         <span class="d-flex flex-column justify-content-center"><i class="fal fa-play"></i></span><span class="flex-grow-1 my-auto mx-2" style="border: 1px solid white; opacity: 0.5;"></span>
  195.                        
  196.                         <span class="text-right" style="max-width: 77%; float: right;">
  197.                             Artist - Lorem ipsum dolor
  198.                         </span>
  199.                     </a>
  200.                    
  201.                     <a class="d-flex justify-content-between mb-3" target="_blank" href="#LINK" style="color: white;">
  202.                         <span class="d-flex flex-column justify-content-center"><i class="fal fa-play"></i></span><span class="flex-grow-1 my-auto mx-2" style="border: 1px solid white; opacity: 0.5;"></span>
  203.                        
  204.                         <span class="text-right" style="max-width: 77%;">
  205.                             Artist - Title
  206.                         </span>
  207.                     </a>
  208.                    
  209.                     <a class="d-flex justify-content-between mb-3" target="_blank" href="#LINK" style="color: white;">
  210.                         <span class="d-flex flex-column justify-content-center"><i class="fal fa-play"></i></span><span class="flex-grow-1 my-auto mx-2" style="border: 1px solid white; opacity: 0.5;"></span>
  211.                        
  212.                         <span class="text-right" style="max-width: 77%;">
  213.                             Artist - Title
  214.                         </span>
  215.                     </a>
  216.                    
  217.                     <a class="d-flex justify-content-between mb-3" target="_blank" href="#LINK" style="color: white;">
  218.                         <span class="d-flex flex-column justify-content-center"><i class="fal fa-play"></i></span><span class="flex-grow-1 my-auto mx-2" style="border: 1px solid white; opacity: 0.5;"></span>
  219.                        
  220.                         <span class="text-right" style="max-width: 77%;">
  221.                             Artist - Title
  222.                         </span>
  223.                     </a>
  224.                    
  225.                     <a class="d-flex justify-content-between mb-3" target="_blank" href="#LINK" style="color: white;">
  226.                         <span class="d-flex flex-column justify-content-center"><i class="fal fa-play"></i></span><span class="flex-grow-1 my-auto mx-2" style="border: 1px solid white; opacity: 0.5;"></span>
  227.                        
  228.                         <span class="text-right" style="max-width: 77%;">
  229.                             Artist - Title
  230.                         </span>
  231.                     </a>
  232.                    
  233.                     <a class="d-flex justify-content-between mb-3" target="_blank" href="#LINK" style="color: white;">
  234.                         <span class="d-flex flex-column justify-content-center"><i class="fal fa-play"></i></span><span class="flex-grow-1 my-auto mx-2" style="border: 1px solid white; opacity: 0.5;"></span>
  235.                        
  236.                         <span class="text-right" style="max-width: 77%;">
  237.                             Artist - Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit
  238.                         </span>
  239.                     </a>
  240.                    
  241.                     <a class="d-flex justify-content-between mb-3" target="_blank" href="#LINK" style="color: white;">
  242.                         <span class="d-flex flex-column justify-content-center"><i class="fal fa-play"></i></span><span class="flex-grow-1 my-auto mx-2" style="border: 1px solid white; opacity: 0.5;"></span>
  243.                        
  244.                         <span class="text-right" style="max-width: 77%;">
  245.                             Artist - Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit
  246.                         </span>
  247.                     </a>
  248.                 </div>
  249.             </div>
  250.         </div>
  251.     </div>
  252. </div>
  253.  
  254. <br>
  255.  
  256. <div style="text-align: right; font-size:9pt;"><a href="https://toyhou.se/~forums/16.htmlcss-graphics/75580.circlejourney-s-code-creations-free-">Theme by Circlejourney</a></div>
Add Comment
Please, Sign In to add comment
Public Pastes
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!