API tools faq
paste
Advertisement
circlejourney

Piyo custom

circlejourney
Aug 29th, 2023 (edited)
1,252
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 13.07 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.        PLACEHOLDER COLOURS (use Ctrl + F to replace)
  3.        Theme colour: #C5D9F2 (used for main background)
  4.        Accent colour: #9ab6dd (used for Font Awesome flair icons)
  5. -->
  6.  
  7. <div class="container">
  8.     <div class="card border-0" style="background-color: #C5D9F2;">
  9.        
  10.         <!-- Header background image (change the link inside the brackets to change the header background) -->
  11.         <div class="card-header p-3 border-0 justify-content-center"
  12.            style="background-image: url(https://media.discordapp.net/attachments/1145603288885112852/1146047336796143706/image.png?width=662&height=662);">
  13.            
  14.             <div class="card border-0 p-4 text-center">
  15.                 <div class="display-4 text-center d-flex align-items-center">
  16.                    
  17.                     <!-- Header name and icon flair -->
  18.                     <i class="fad fa-bird" style="color: #9ab6dd;"></i>
  19.                     <span class="px-2"> Charactername Lastname </span>
  20.                     <i class="fad fa-bird" style="color: #9ab6dd;"></i>
  21.                    
  22.                 </div>
  23.                
  24.                 <div class="text-muted text-center">
  25.                    
  26.                     <!-- HEADER QUOTE -->
  27.                     &ldquo;
  28.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  29.                     &rdquo;
  30.                    
  31.                 </div>
  32.             </div>
  33.         </div>
  34.        
  35.         <div class="row p-4">
  36.            
  37.             <div class="col-12 col-md-6">
  38.            
  39.                 <!-- "Before" card -->
  40.                 <div class="card border-0 h-100" style="overflow: hidden">
  41.                     <div class="row no-gutters">
  42.                        
  43.                         <!-- "Before" info column -->
  44.                         <div class="col-12 col-lg-6 text-center p-3 flex-column justify-content-around">
  45.                            
  46.                             <!-- "Before" column title -->
  47.                             <div class="text-uppercase text-primary" style="font-size: 20pt;">
  48.                                 <i class="fa fa-undo"></i> Before
  49.                             </div>
  50.                            
  51.                            
  52.                             <!-- "Before" info blocks start -->
  53.                             <div>
  54.                                 <div class="font-weight-bold text-uppercase text-primary">
  55.                                     Name
  56.                                 </div>
  57.                                 <div>
  58.                                     My name
  59.                                 </div>
  60.                             </div>
  61.                            
  62.                             <div>
  63.                                 <div class="font-weight-bold text-uppercase text-primary">
  64.                                     Age
  65.                                 </div>
  66.                                 <div>
  67.                                     My age
  68.                                 </div>
  69.                             </div>
  70.                            
  71.                             <div>
  72.                                 <div class="font-weight-bold text-uppercase text-primary">
  73.                                     Job
  74.                                 </div>
  75.                                 <div>
  76.                                     My job
  77.                                 </div>
  78.                             </div>
  79.                            
  80.                             <div>
  81.                                 <div class="font-weight-bold text-uppercase text-primary">
  82.                                     Partner
  83.                                 </div>
  84.                                 <div>
  85.                                     My partner
  86.                                 </div>
  87.                             </div>
  88.                            
  89.                             <div>
  90.                                 <div class="font-weight-bold text-uppercase text-primary">
  91.                                     Personality
  92.                                 </div>
  93.                                 <div>
  94.                                     My personality
  95.                                 </div>
  96.                             </div>
  97.                             <!-- "Before" info blocks end -->
  98.                            
  99.                         </div>
  100.                        
  101.                        
  102.                         <!-- "Before" image (change the link in the brackets to change the image) -->
  103.                         <div class="col-12 col-lg-6"
  104.                            style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/watermarks/69536099_slIz7OnQa.png);
  105.                                background-size: cover;
  106.                                background-position: top;
  107.                                min-height: 30rem;"
  108.                        >
  109.                         </div>
  110.                        
  111.                     </div>
  112.                 </div>
  113.             </div>
  114.            
  115.            
  116.             <!-- Hourglass divider -->
  117.             <div class="d-none d-md-flex flex-column col-auto p-0 justify-content-center">
  118.                 <div class="rounded-circle d-flex align-items-center justify-content-center bg-faded" style="font-size: 30pt; line-height: 0; margin: -2.5rem; z-index: 2; width: 5rem; height: 5rem; border: 5px solid #C5D9F2; color: #C5D9F2;">
  119.                     <i class="fas fa-hourglass"></i>
  120.                 </div>
  121.             </div>
  122.            
  123.            
  124.             <!-- "After" card -->
  125.             <div class="col-12 col-md-6 mt-2 mt-md-0">
  126.                 <div class="card border-0 h-100" style="overflow: hidden;">
  127.                    
  128.                     <div class="row no-gutters">
  129.                        
  130.                         <!-- "After" image (change the link in the brackets to change the image) -->
  131.                         <div class="col-12 col-lg-6 order-1 order-lg-0"
  132.                            style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/watermarks/69404844_HB1OQ8Yux.jpg);
  133.                                background-size: cover;
  134.                                background-position: top;
  135.                                min-height: 30rem;"
  136.                        >
  137.                         </div>
  138.                        
  139.                        
  140.                         <!-- "After" info column -->
  141.                         <div class="col-12 col-lg-6 text-center p-3 flex-column justify-content-around">
  142.                            
  143.                            
  144.                             <!-- "After" column title -->
  145.                             <div class="text-uppercase text-primary" style="font-size: 20pt;">
  146.                                 After <i class="fa fa-redo"></i>
  147.                             </div>
  148.                            
  149.                            
  150.                             <!-- "After" info blocks start -->
  151.                             <div>
  152.                                 <div class="font-weight-bold text-uppercase text-primary">
  153.                                     Name
  154.                                 </div>
  155.                                 <div>
  156.                                     My name
  157.                                 </div>
  158.                             </div>
  159.                            
  160.                             <div>
  161.                                 <div class="font-weight-bold text-uppercase text-primary">
  162.                                     Age
  163.                                 </div>
  164.                                 <div>
  165.                                     My age
  166.                                 </div>
  167.                             </div>
  168.                            
  169.                             <div>
  170.                                 <div class="font-weight-bold text-uppercase text-primary">
  171.                                     Job
  172.                                 </div>
  173.                                 <div>
  174.                                     My job
  175.                                 </div>
  176.                             </div>
  177.                            
  178.                             <div>
  179.                                 <div class="font-weight-bold text-uppercase text-primary">
  180.                                     Partner
  181.                                 </div>
  182.                                 <div>
  183.                                     My partner
  184.                                 </div>
  185.                             </div>
  186.                            
  187.                             <div>
  188.                                 <div class="font-weight-bold text-uppercase text-primary">
  189.                                     Personality
  190.                                 </div>
  191.                                 <div>
  192.                                     My personality
  193.                                 </div>
  194.                             </div>
  195.                             <!-- "After" info blocks end -->
  196.                            
  197.                         </div>
  198.                        
  199.                     </div>
  200.                    
  201.                 </div>
  202.             </div>
  203.             <!-- "After" card end -->
  204.            
  205.            
  206.             <!-- Tabs begin -->
  207.             <div class="col-12">
  208.                
  209.                 <!-- Tab bar -->
  210.                 <ul class="nav nav-tabs mt-3 flex-wrap text-center" id="tabs"style="font-size: 16pt;">
  211.                    
  212.                     <li class="nav-item flex-grow-1">
  213.                         <a class="nav-link show active border-0" href="#tab-1" data-toggle="tab">Story</a>
  214.                     </li>
  215.                    
  216.                     <li class="nav-item flex-grow-1">
  217.                         <a class="nav-link border-0" href="#tab-2" data-toggle="tab">Info</a>
  218.                     </li>
  219.                    
  220.                     <li class="nav-item flex-grow-1">
  221.                         <a class="nav-link border-0" href="#tab-3" data-toggle="tab">Tab 3</a>
  222.                     </li>
  223.                    
  224.                 </ul>
  225.                
  226.                
  227.                 <!-- Tab panes -->
  228.                 <div class="tab-content card border-0" style="border-top-left-radius: 0; border-top-right-radius: 0; height: 60vh; overflow-y: auto;">
  229.                    
  230.                    
  231.                     <!-- Tab 1 -->
  232.                     <div class="card-block tab-pane fade show active" id="tab-1">
  233.                         <h4 class="text-uppercase text-muted">Heading</h4> <hr class="mt-0">
  234.                         <p>This is tab 1.</p>
  235.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  236.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
  237.                        
  238.                         <h4 class="text-uppercase text-muted">Heading</h4> <hr class="mt-0">
  239.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  240.                     </div>
  241.                    
  242.                    
  243.                     <!-- Tab 2 -->
  244.                     <div class="card-block tab-pane fade" id="tab-2">
  245.                         <h4 class="text-uppercase text-muted">Heading</h4> <hr class="mt-0">
  246.                         This is tab 2.
  247.                     </div>
  248.                    
  249.                    
  250.                     <!-- Tab 3 -->
  251.                     <div class="card-block tab-pane fade" id="tab-3">
  252.                         <h4 class="text-uppercase text-muted">Heading</h4> <hr class="mt-0">
  253.                         This is tab 3.
  254.                     </div>
  255.                    
  256.                 </div>
  257.             </div>
  258.         </div>
  259.        
  260.         <!-- Footer background image (change the link inside the brackets to change the header background) -->
  261.         <div class="card-footer border-0 justify-content-center" style="background-image: url(https://media.discordapp.net/attachments/1145603288885112852/1146047336796143706/image.png?width=662&height=662);">
  262.            
  263.             <div class="card border-0 p-4 text-center bg-faded">
  264.                 <div class="display-4 text-center">
  265.                     <!-- Footer icon flair -->
  266.                     <i class="fad fa-bird" style="color: #9ab6dd;"></i>
  267.                     <i class="fad fa-bird" style="color: #9ab6dd;"></i>
  268.                     <i class="fad fa-bird" style="color: #9ab6dd;"></i>
  269.                    
  270.                 </div>
  271.             </div>
  272.         </div>
  273.        
  274.     </div>
  275. </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!