API tools faq
paste
Advertisement
Guest User

19. gift

a guest
Dec 1st, 2022
382
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 19.80 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3.    primary color   : #ec7dd7
  4.    secondary color : #fff0bb
  5.    text            : #aaa
  6.    background      : #fff
  7.  
  8. -->
  9.  
  10. <div class="mx-auto" style="width:400px;font-family:'Courier New';color:#aaa;font-size:0.7rem;">
  11.    
  12.     <!-- outside // dont touch unless you know what your doing -->
  13.     <div class="collapse show open fade">
  14.         <div class="flex-column" style="height:400px;background:#ec7dd7;border-radius:50px;overflow:hidden;">
  15.            
  16.             <div class="row no-gutters h-100">
  17.                 <div class="col h-100"></div>
  18.                 <div class="col-1 h-100" style="background:#fff0bb;"></div>
  19.                 <div class="col h-100"></div>
  20.             </div>
  21.            
  22.             <div class="row no-gutters" style="z-index:1;">
  23.                 <div class="col-12 align-items-center justify-content-center" style="background:#fff0bb;height:35px;">
  24.                    
  25.                     <a data-target=".open" data-toggle="collapse" style="color:#fff0bb;"  class="fa-stack fa-6x">
  26.                         <i class="fa-solid fa-flower fa-stack-2x "></i>
  27.                         <i class="fa-solid fa-circle fa-stack-1x fa-inverse" style="font-size:4rem;cursor:pointer"></i>
  28.                     </a>
  29.                    
  30.                 </div>
  31.             </div>
  32.            
  33.             <div class="row no-gutters h-100">
  34.                 <div class="col h-100"></div>
  35.                 <div class="col-1 h-100" style="background:#fff0bb;"></div>
  36.                 <div class="col h-100"></div>
  37.             </div>
  38.            
  39.         </div>
  40.     </div>
  41.    
  42.     <!-- inside -->
  43.     <div class="collapse open fade">
  44.         <div class="p-3" style="height:400px;background:#ec7dd7;border-radius:50px;">
  45.             <div class="h-100 w-100 p-3" style="background:#fff;border-radius:40px;overflow:hidden;">
  46.                 <div class="row no-gutters h-100">
  47.                    
  48.                     <!-- image // replace url with your own -->
  49.                     <div class="col-6 p-1 h-50">
  50.                        
  51.                         <div style="background:url(
  52.                        
  53.                            https://64.media.tumblr.com/b23d0f27b9afac1ebad121f446399fc8/ec00db0a49038185-38/s540x810/448e84a06a4909aaa04d77ee06280d090b993dd2.pnj
  54.                    
  55.                        ) center no-repeat;background-size:cover;border-radius:30px 0px 0px 0px;" class="h-100"></div>
  56.                    
  57.                     </div>
  58.                    
  59.                     <!-- basic info -->
  60.                     <div class="col-6 h-50 p-1 text-justify flex-column">
  61.                        
  62.                         <!-- name -->
  63.                         <h2 class="m-0 text-uppercase text-center font-weight-bold" style="color:#ec7dd7;font-size:1.2rem;">
  64.                             Name Surname
  65.                         </h2>
  66.                        
  67.                         <!-- basic info // will scroll -->
  68.                         <div class="h-100 flex-column overflow-auto">
  69.                            
  70.                             <!-- item -->
  71.                             <div class="justify-content-between h-100 align-items-center">
  72.                                 <span style="color:#ec7dd7;">
  73.                                     <i class="fa-light fa-user fa-fw"></i>
  74.                                 </span>
  75.                                 <span>
  76.                                     Name
  77.                                 </span>
  78.                             </div>
  79.                            
  80.                             <!-- item -->
  81.                             <div class="justify-content-between h-100 align-items-center">
  82.                                 <span style="color:#ec7dd7;">
  83.                                     <i class="fa-light fa-clock fa-fw"></i>
  84.                                 </span>
  85.                                 <span>
  86.                                     Age
  87.                                 </span>
  88.                             </div>
  89.                            
  90.                             <!-- item -->
  91.                             <div class="justify-content-between h-100 align-items-center">
  92.                                 <span style="color:#ec7dd7;">
  93.                                     <i class="fa-light fa-comment fa-fw"></i>
  94.                                 </span>
  95.                                 <span>
  96.                                     Pronouns
  97.                                 </span>
  98.                             </div>
  99.                            
  100.                             <!-- item -->
  101.                             <div class="justify-content-between h-100 align-items-center">
  102.                                 <span style="color:#ec7dd7;">
  103.                                     <i class="fa-light fa-heart fa-fw"></i>
  104.                                 </span>
  105.                                 <span>
  106.                                     Sexuality
  107.                                 </span>
  108.                             </div>
  109.                            
  110.                             <!-- item -->
  111.                             <div class="justify-content-between h-100 align-items-center">
  112.                                 <span style="color:#ec7dd7;">
  113.                                     <i class="fa-light fa-ring-diamond fa-fw"></i>
  114.                                 </span>
  115.                                 <span>
  116.                                     Status
  117.                                 </span>
  118.                             </div>
  119.                            
  120.                             <!-- item -->
  121.                             <div class="justify-content-between h-100 align-items-center">
  122.                                 <span style="color:#ec7dd7;">
  123.                                     <i class="fa-light fa-suitcase fa-fw"></i>
  124.                                 </span>
  125.                                 <span>
  126.                                     Occupation
  127.                                 </span>
  128.                             </div>
  129.                            
  130.                             <!-- add more above here -->
  131.                            
  132.                         </div>
  133.                        
  134.                        
  135.                     </div>
  136.                    
  137.                     <!-- tabs -->
  138.                     <div class="col-5 p-1 h-50">
  139.                         <div class="tab-content h-100">
  140.                            
  141.                             <!-- page one -->
  142.                             <div id="one" class="tab-pane fade active show h-100 overflow-auto">
  143.                                
  144.                                 <!-- title -->
  145.                                 <h2 class="m-0 text-uppercase text-center font-weight-bold" style="color:#ec7dd7;font-size:1.1rem;">
  146.                                     Trivia
  147.                                 </h2>
  148.                                
  149.                                 <!-- divider -->
  150.                                 <hr class="my-2" style="border-top:1px solid #aaa;opacity:0.2">
  151.                                
  152.                                 <!-- likes -->
  153.                                 <div>
  154.                                    
  155.                                     <p class="m-0">
  156.                                         <i class="fa-light fa-check fa-fw mr-1" style="color:#ec7dd7;"></i>
  157.                                         One
  158.                                     </p>
  159.                                    
  160.                                     <p class="m-0">
  161.                                         <i class="fa-light fa-check fa-fw mr-1" style="color:#ec7dd7;"></i>
  162.                                         Two
  163.                                     </p>
  164.                                    
  165.                                     <p class="m-0">
  166.                                         <i class="fa-light fa-check fa-fw mr-1" style="color:#ec7dd7;"></i>
  167.                                         Three
  168.                                     </p>
  169.                                    
  170.                                     <!-- add more above here -->
  171.                                 </div>
  172.                                
  173.                                 <!-- divider -->
  174.                                 <hr class="my-2 w-50" style="border-top:1px solid #aaa;opacity:0.2">
  175.                                
  176.                                 <!-- dislikes -->
  177.                                 <div>
  178.                                    
  179.                                     <p class="m-0">
  180.                                         <i class="fa-light fa-times fa-fw mr-1" style="color:#ec7dd7;"></i>
  181.                                         One
  182.                                     </p>
  183.                                    
  184.                                     <p class="m-0">
  185.                                         <i class="fa-light fa-times fa-fw mr-1" style="color:#ec7dd7;"></i>
  186.                                         Two
  187.                                     </p>
  188.                                    
  189.                                     <p class="m-0">
  190.                                         <i class="fa-light fa-times fa-fw mr-1" style="color:#ec7dd7;"></i>
  191.                                         Three
  192.                                     </p>
  193.                                    
  194.                                     <!-- add more above here -->
  195.                                 </div>
  196.                                
  197.                             </div>
  198.                            
  199.                             <!-- page two -->
  200.                             <div id="two" class="tab-pane fade h-100 overflow-auto">
  201.                                
  202.                                 <!-- title -->
  203.                                 <h2 class="m-0 text-uppercase text-center font-weight-bold" style="color:#ec7dd7;font-size:1.1rem;">
  204.                                     Story
  205.                                 </h2>
  206.                                
  207.                                 <!-- divider -->
  208.                                 <hr class="my-2" style="border-top:1px solid #aaa;opacity:0.2">
  209.                                
  210.                                 <div class="text-justify pr-2" style="line-height:0.75rem;">
  211.                                    
  212.                                     <!-- content -->
  213.                                    
  214.                                     <p>
  215.                                         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.
  216.                                     </p>
  217.                                    
  218.                                     <!-- add more above here -->
  219.                                    
  220.                                 </div>
  221.                                
  222.                             </div>
  223.                            
  224.                             <!-- page three -->
  225.                             <div id="three" class="tab-pane fade h-100 overflow-auto">
  226.                                
  227.                                 <!-- title -->
  228.                                 <h2 class="m-0 text-uppercase text-center font-weight-bold" style="color:#ec7dd7;font-size:1.1rem;">
  229.                                     Relations
  230.                                 </h2>
  231.                                
  232.                                 <!-- divider -->
  233.                                 <hr class="my-2" style="border-top:1px solid #aaa;opacity:0.2">
  234.                                
  235.                                 <!-- char one -->
  236.                                 <div class="row no-gutters">
  237.                                    
  238.                                     <div class="col-6">
  239.                                     <!-- image link // replace url with your own // replace CHAR_LINK with link to character -->
  240.                                     <a href="CHAR_LINK">
  241.                                         <img src="
  242.                                        https://pbs.twimg.com/media/EaCf1omVcAAMHWG.png
  243.                                        " style="height:50px;width:50px;object-fit:cover;border-radius:50%;">
  244.                                     </a>
  245.                                     </div>
  246.                                    
  247.                                     <div class="col-6 my-auto">
  248.                                     <p class="my-auto">
  249.                                         <!-- char name -->
  250.                                         <span class="font-weight-bold text-uppercase" style="color:#ec7dd7;">
  251.                                             Name Surname
  252.                                         </span>
  253.                                        
  254.                                         <!-- relation -->
  255.                                         <span class="small faded font-italic">
  256.                                             (relation)
  257.                                         </span>
  258.                                     </p>
  259.                                     </div>
  260.                                    
  261.                                 </div>
  262.                                
  263.                                 <!-- divider -->
  264.                                 <hr class="my-2 w-50" style="border-top:1px solid #aaa;opacity:0.2">
  265.                                
  266.                                 <!-- char two -->
  267.                                 <div class="row no-gutters">
  268.                                    
  269.                                     <div class="col-6">
  270.                                     <!-- image link // replace url with your own // replace CHAR_LINK with link to character -->
  271.                                     <a href="CHAR_LINK">
  272.                                         <img src="
  273.                                        https://pbs.twimg.com/media/EaCf1omVcAAMHWG.png
  274.                                        " style="height:50px;width:50px;object-fit:cover;border-radius:50%;">
  275.                                     </a>
  276.                                     </div>
  277.                                    
  278.                                     <div class="col-6 my-auto">
  279.                                     <p class="my-auto">
  280.                                         <!-- char name -->
  281.                                         <span class="font-weight-bold text-uppercase" style="color:#ec7dd7;">
  282.                                             Name Surname
  283.                                         </span>
  284.                                        
  285.                                         <!-- relation -->
  286.                                         <span class="small faded font-italic">
  287.                                             (relation)
  288.                                         </span>
  289.                                     </p>
  290.                                     </div>
  291.                                    
  292.                                 </div>
  293.                                
  294.                                 <!-- divider -->
  295.                                 <hr class="my-2 w-50" style="border-top:1px solid #aaa;opacity:0.2">
  296.                                
  297.                                 <!-- char three -->
  298.                                 <div class="row no-gutters">
  299.                                    
  300.                                     <div class="col-6">
  301.                                     <!-- image link // replace url with your own // replace CHAR_LINK with link to character -->
  302.                                     <a href="CHAR_LINK">
  303.                                         <img src="
  304.                                        https://pbs.twimg.com/media/EaCf1omVcAAMHWG.png
  305.                                        " style="height:50px;width:50px;object-fit:cover;border-radius:50%;">
  306.                                     </a>
  307.                                     </div>
  308.                                    
  309.                                     <div class="col-6 my-auto">
  310.                                     <p class="my-auto">
  311.                                         <!-- char name -->
  312.                                         <span class="font-weight-bold text-uppercase" style="color:#ec7dd7;">
  313.                                             Name Surname
  314.                                         </span>
  315.                                        
  316.                                         <!-- relation -->
  317.                                         <span class="small faded font-italic">
  318.                                             (relation)
  319.                                         </span>
  320.                                     </p>
  321.                                     </div>
  322.                                    
  323.                                 </div>
  324.                                
  325.                                 <!-- add more above here -->
  326.                                
  327.                             </div>
  328.                            
  329.                         </div>
  330.                     </div>
  331.                    
  332.                     <!-- nav -->
  333.                     <div class="col-2 p-1 h-50">
  334.                         <ul class="nav nav-pills flex-column h-100">
  335.                            
  336.                             <li class="nav-item h-100" style="background:#ec7dd7;">
  337.                                 <a href="#one" class="nav-link active bg-transparent border-0 w-100 h-100 align-items-center justify-content-center" data-toggle="tab" style="color:#fff;">
  338.                                     <!-- icon -->
  339.                                     <i class="fa-solid fa-star"></i>
  340.                                 </a>
  341.                             </li>
  342.                            
  343.                             <li class="nav-item h-100" style="background:#fff0bb;">
  344.                                 <a href="#two" class="nav-link bg-transparent border-0 h-100 w-100 align-items-center justify-content-center" data-toggle="tab" style="color:#fff;">
  345.                                     <!-- icon -->
  346.                                     <i class="fa-solid fa-book-open"></i>
  347.                                 </a>
  348.                             </li>
  349.                            
  350.                             <li class="nav-item h-100" style="background:#ec7dd7;">
  351.                                 <a href="#three" class="nav-link bg-transparent border-0 h-100 w-100 align-items-center justify-content-center" data-toggle="tab" style="color:#fff;">
  352.                                     <!-- icon -->
  353.                                     <i class="fa-solid fa-heart"></i>
  354.                                 </a>
  355.                             </li>
  356.                            
  357.                         </ul>
  358.                     </div>
  359.                    
  360.                     <!-- image 2 // replace url with your own -->
  361.                     <div class="col-5 p-1 h-50">
  362.                        
  363.                         <div style="background:url(
  364.                        
  365.                            https://64.media.tumblr.com/1f8e6bf7576a0864b13c0a5193d452a9/ec00db0a49038185-4a/s500x750/ec4bf7c0095dad2dad7ef2f6bebaebcc584bf2fa.pnj
  366.                    
  367.                        ) center no-repeat;background-size:cover;border-radius:0px 0px 30px 0px;" class="h-100"></div>
  368.                    
  369.                     </div>
  370.                    
  371.                 </div>
  372.             </div>
  373.         </div>
  374.     </div>
  375.    
  376.     <!-- credit // DO NOT REMOVE -->
  377.     <div class="text-center mt-2">
  378.         <a href="/peachybonnie" class="tooltipster" style="color:#ec7dd7;" title="code by venus">
  379.             <i class="fa-regular fa-heart"></i>
  380.         </a>
  381.     </div>
  382.    
  383. </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!