API tools faq
paste
Advertisement
Jade-Everstone

small aesthetic (bs)

Jade-Everstone
Feb 26th, 2021 (edited)
553
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 11.08 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2.  
  3. <!--Rules:
  4.  
  5. You may
  6. -frankenstein with other codes (as long as the creator of said code allows it)
  7. -edit/change as much as you need, including moving credits and repurposing (example: making character codes into user codes, vice-versa)
  8.  
  9. You may not
  10. -Redistribute, resell, and/or claim its yours
  11. -Remove credit (you're allowed to move & edit it though, just keep it visible)
  12.  
  13. Misc Notes:
  14. -When editing, remember to turn WYSIWYG off! My codes may break otherwise
  15. -Some basic html knowledge is recommended for editing
  16. -default color: primary (bootstrap)
  17.  
  18. -->
  19.  
  20. <div class="container py-5" style="max-width:700px">
  21.    
  22.     <!--Header-->
  23.    
  24.     <div class="card bg-primary text-white rounded-0 border-0 p-2" style="font-size:20px">
  25.         <div class="card-body px-2">
  26.             <span>Name</span>
  27.             <span class="pull-right">(they/them)</span>
  28.         </div>
  29.     </div>
  30.    
  31.     <!--end header-->
  32.    
  33.     <!--main body-->
  34.    
  35.     <div class="row no-gutters mt-2">
  36.        
  37.         <!--left panel-->
  38.        
  39.         <div class="col-sm-12 col-md-7 order-2 order-md-1">
  40.            
  41.         <div class="card bg-faded rounded-0 border-0">
  42.            
  43.         <div class="tab-content">
  44.            
  45.             <!--info - this section will scroll!-->
  46.            
  47.             <div class="tab-pane active" id="about">
  48.                
  49.                 <div class="card-body table-responsive p-3" style="text-align:center;height:300px">
  50.                    
  51.                     <!--basic info-->
  52.                    
  53.                     <div class="row" style="max-width:400px;margin-left:auto;margin-right:auto">
  54.                        
  55.                         <div class="col-6 pb-3">
  56.                             <span class="text-uppercase px-5">title</span>
  57.                         </div>
  58.                         <div class="col-6 pb-3">
  59.                             <span class="faded px-5" style="text-align:right">text</span>
  60.                         </div>
  61.                        
  62.                         <div class="col-6 pb-3">
  63.                             <span class="text-uppercase px-5">title</span>
  64.                         </div>
  65.                         <div class="col-6 pb-3">
  66.                             <span class="faded px-5" style="text-align:right">text</span>
  67.                         </div>
  68.                        
  69.                         <div class="col-6 pb-3">
  70.                             <span class="text-uppercase px-5">title</span>
  71.                         </div>
  72.                         <div class="col-6 pb-3">
  73.                             <span class="faded px-5" style="text-align:right">text</span>
  74.                         </div>
  75.                        
  76.                     </div>
  77.                    
  78.                     <!--end basic info-->
  79.                    
  80.                     <hr>
  81.                    
  82.                     <p>this section will scroll!</p>
  83.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan nunc ipsum, mattis sollicitudin diam lobortis quis.</p>
  84.                 </div>
  85.                    
  86.             </div>
  87.            
  88.             <!--end info-->
  89.  
  90.             <!--misc facts - this section will scroll!-->
  91.            
  92.             <div class="tab-pane fade" id="misc">
  93.                 <div class="card-body table-responsive p-3" style="height:300px">
  94.                    
  95.                     <p style="font-size:20px;text-align:center">Misc. Facts</p>
  96.                    
  97.                     <ul>
  98.                         <li class="pb-1">Trivia</li>
  99.                         <li class="pb-1">Trivia</li>
  100.                         <li class="pb-1">Trivia</li>
  101.                     </ul>
  102.                    
  103.                     <hr>
  104.                    
  105.                     <p class="px-4">
  106.                         <a class="text-primary" href="#" style="font-size:18px"><i class='fas fa-play'></i> Song title</a>
  107.                     </p>
  108.                    
  109.                     <p class="px-4">
  110.                         <a class="text-primary" href="#" style="font-size:18px"><i class='fas fa-play'></i> Song title</a>
  111.                     </p>
  112.                    
  113.                     <p class="px-4">
  114.                         <a class="text-" href="#" style="font-size:18px"><i class='fas fa-play'></i> Song title</a>
  115.                     </p>
  116.                    
  117.                 </div>
  118.             </div>
  119.            
  120.             <!--end misc facts-->
  121.            
  122.             <!--moodboard-->
  123.            
  124.             <div class="tab-pane fade" id="mood">
  125.                
  126.                 <div class="row no-gutters">
  127.                    
  128.                     <!--top-left image-->
  129.                    
  130.                     <div class="col-6">
  131.                         <div class="card rounded-0 border-0" style="
  132.                            height:150px;
  133.                            background-image:url(https://via.placeholder.com/196x150);
  134.                            background-size:#;
  135.                            background-position:#">
  136.                            
  137.                             <!--img credit-->
  138.                            
  139.                             <p style="font-size:13px;position:absolute;bottom:0;right:0;">
  140.                                 <a class="px-1 text-white" href="#" datatoggle="tooltip" title="img credit"><i class='fas fa-image'></i></a>
  141.                             </p>
  142.                                
  143.                         </div>
  144.                     </div>
  145.                    
  146.                     <!--end top-left image-->
  147.                    
  148.                     <!--top-right image-->
  149.                
  150.                     <div class="col-6">
  151.                         <div class="card rounded-0 border-0" style="
  152.                            height:150px;
  153.                            background-image:url(https://via.placeholder.com/196x150);
  154.                            background-size:#;
  155.                            background-position:#">
  156.                            
  157.                             <!--img credit-->
  158.                            
  159.                             <p style="font-size:13px;position:absolute;bottom:0;right:0;">
  160.                                 <a class="px-1 text-white" href="#" datatoggle="tooltip" title="img credit"><i class='fas fa-image'></i></a>
  161.                             </p>
  162.                                
  163.                         </div>
  164.                     </div>
  165.                    
  166.                     <!--end top-right image-->
  167.                    
  168.                     <!--bottom-left image-->
  169.                
  170.                     <div class="col-6">
  171.                         <div class="card rounded-0 border-0" style="
  172.                            height:150px;
  173.                            background-image:url(https://via.placeholder.com/196x150);
  174.                            background-size:#;
  175.                            background-position:#">
  176.                            
  177.                             <!--img credit-->
  178.                            
  179.                             <p style="font-size:13px;position:absolute;bottom:0;right:0;">
  180.                                 <a class="px-1 text-white" href="#" datatoggle="tooltip" title="img credit"><i class='fas fa-image'></i></a>
  181.                             </p>
  182.                                
  183.                         </div>
  184.                     </div>
  185.                    
  186.                     <!--end bottom-left image-->
  187.                    
  188.                     <!--bottom-right image-->
  189.                
  190.                     <div class="col-6">
  191.                         <div class="card rounded-0 border-0" style="
  192.                            height:150px;
  193.                            background-image:url(https://via.placeholder.com/196x150);
  194.                            background-size:#;
  195.                            background-position:#">
  196.                            
  197.                             <!--img credit-->
  198.                            
  199.                             <p style="font-size:13px;position:absolute;bottom:0;right:0;">
  200.                                 <a class="px-1 text-white" href="#" datatoggle="tooltip" title="img credit"><i class='fas fa-image'></i></a>
  201.                             </p>
  202.                                
  203.                         </div>
  204.                     </div>
  205.                    
  206.                     <!--end bottom-right image-->
  207.                
  208.                 </div>
  209.            
  210.             </div>
  211.            
  212.             <!--end moodboard-->
  213.    
  214.         </div>  
  215.        
  216.         </div>
  217.        
  218.         </div>
  219.        
  220.         <!--end info-->
  221.        
  222.         <!--chara img-->
  223.        
  224.         <div class="col-sm-12 col-md-5 order-1 order-md-2 h-100">
  225.            
  226.             <!--BG or Character img-->
  227.            
  228.             <div class="card bg-faded rounded-0 border-0" style="
  229.                height:300px;
  230.                background-image:url(#);
  231.                background-position:#;
  232.                background-size:#">
  233.                
  234.                 <!--Pagedoll. Feel free to delete if you just want to use the card img above-->
  235.                
  236.                 <img src="https://via.placeholder.com/200x250" style="
  237.                    width:#;
  238.                    display:block;
  239.                    margin-left:auto;
  240.                    margin-right:auto;
  241.                    ">
  242.                    
  243.             </div>
  244.            
  245.                 <!--Credit section. You may move my credit (bottom) but please don't remove it. Remember to credit the other pics as well!-->
  246.                
  247.                 <p class="p-1" style="font-size:11px;position:absolute;bottom:0;right:0;">
  248.                     <a class="px-1" href="#" datatoggle="tooltip" title="pagedoll credit"><i class='fas fa-user-alt'></i></a>
  249.                     <a class="px-1" href="#" datatoggle="tooltip" title="img credit"><i class='fas fa-image'></i></a>
  250.                     <a class="px-1" href="https://toyhou.se/10099058" datatoggle="tooltip" title="HTML by Jade-Everstone"><i class='fas fa-heart'></i></a>
  251.                 </p>
  252.                
  253.         </div>
  254.        
  255.         <!--end chara img-->
  256.        
  257.     </div>
  258.    
  259.     <!--end main body-->
  260.    
  261.     <!--navs-->
  262.    
  263.     <ul class="nav nav-tabs card-header-tabs row">
  264.    
  265.         <li class="col-sm-12 col-md-4 mt-2">
  266.             <a class="btn btn-block btn-primary rounded-0 border-0" data-toggle="tab" href="#about" role="button"><i class='fas fa-user-alt'></i> About</a>
  267.         </li>
  268.        
  269.         <li class="col-sm-12 col-md-4 mt-2">
  270.             <a class="btn btn-block btn-primary rounded-0 border-0" data-toggle="tab" href="#misc" role="button"><i class='fas fa-list'></i> Misc.</a>
  271.         </li>
  272.        
  273.         <li class="col-sm-12 col-md-4 mt-2">
  274.             <a class="btn btn-block btn-primary rounded-0 border-0" data-toggle="tab" href="#mood" role="button"><i class='fas fa-stars'></i> Moodboard</a>
  275.         </li>
  276.        
  277.     </ul>
  278.    
  279.     <!--end navs-->
  280.    
  281. </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!