API tools faq
paste
Advertisement
SparklyLightus

Air Bubble

SparklyLightus
Mar 21st, 2022
3,085
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 21.29 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.    #90d5f5 >> LIGHT BLUE
  3.    #617eae >> DARK BLUE
  4.    #111115 >> BLACK
  5. -->
  6. <div class="mx-auto container" style="max-width: 950px;">
  7.     <div class="m-3 row no-gutters text-white">
  8.         <!-- ............................... BANNER -->
  9.         <div class="p-1 order-1 col-12">
  10.             <div class="p-1" style="border: 3px solid #617eae; background: #111115; border-radius: 15px">
  11.                 <div style="border: 3px solid #90d5f5; border-radius: 10px">
  12.                    
  13.                     <!-- IMAGE -->
  14.                     <div style="background: url('IMG_LINK');
  15.                    background-position: center; background-size: cover; height: 150px; border-radius: 10px" class="p-3 align-items-end">
  16.                        
  17.                         <h1 class="mb-0 display-4 text-uppercase" style="color: #90d5f5; text-shadow: 3px -3px 2px #617eae">Name</h1>
  18.                        
  19.                     </div>
  20.                    
  21.                 </div>
  22.             </div>
  23.         </div>
  24.        
  25.         <!-- ............................... SIDE IMAGE -->
  26.         <div class="p-1 order-3 order-lg-2 col-lg-4">
  27.             <div class="p-1" style="border: 3px solid #617eae; background: #111115; border-radius: 15px">
  28.                 <div style="border: 3px solid #90d5f5; border-radius: 10px">
  29.                    
  30.                     <!-- IMAGE -->
  31.                     <div style="background: url('IMG_LINK');
  32.                    background-position: center; background-size: cover; height: 300px; border-radius: 10px">
  33.                     </div>
  34.                    
  35.                 </div>
  36.             </div>
  37.         </div>
  38.        
  39.         <!-- ............................... BASICS -->
  40.         <div class="p-1 order-2 order-lg-3 col-lg-8">
  41.             <div class="p-1" style="border: 3px solid #617eae; background: #111115; border-radius: 15px">
  42.                 <div style="border: 3px solid #90d5f5; border-radius: 10px; overflow: hidden"> <div class="p-3 overflow-auto d-flex flex-column" style="height: 300px">
  43.                    
  44.                     <div class="row no-gutters text-right">
  45.                         <p class="mb-2 px-1 col-sm-6"> <b class="px-1 float-left rounded" style="background: #617eae;"><i class="fa-fw fa-solid fa-pencil"></i> Name</b>
  46.                             Information</p>
  47.                         <p class="mb-2 px-1 col-sm-6"> <b class="px-1 float-left rounded" style="background: #617eae;"><i class="fa-fw fa-solid fa-comment"></i> Alias</b>
  48.                             Information</p>
  49.                         <p class="mb-2 px-1 col-sm-6"> <b class="px-1 float-left rounded" style="background: #617eae;"><i class="fa-fw fa-solid fa-venus-mars"></i> Gender</b>
  50.                             Information</p>
  51.                         <p class="mb-2 px-1 col-sm-6"> <b class="px-1 float-left rounded" style="background: #617eae;"><i class="fa-fw fa-solid fa-thought-bubble"></i> Pronouns</b>
  52.                             Information</p>
  53.                         <p class="mb-2 px-1 col-sm-6"> <b class="px-1 float-left rounded" style="background: #617eae;"><i class="fa-fw fa-solid fa-birthday-cake"></i> Age</b>
  54.                             Information</p>
  55.                         <p class="mb-2 px-1 col-sm-6"> <b class="px-1 float-left rounded" style="background: #617eae;"><i class="fa-fw fa-solid fa-calendar-day"></i> Birthday</b>
  56.                             Information</p>
  57.                         <p class="mb-2 px-1 col-sm-6"> <b class="px-1 float-left rounded" style="background: #617eae;"><i class="fa-fw fa-solid fa-dna"></i> Race</b>
  58.                             Information</p>
  59.                         <p class="mb-2 px-1 col-sm-6"> <b class="px-1 float-left rounded" style="background: #617eae;"><i class="fa-fw fa-solid fa-heartbeat"></i> Orientation</b>
  60.                             Information</p>
  61.                         <p class="mb-2 px-1 col-sm-6"> <b class="px-1 float-left rounded" style="background: #617eae;"><i class="fa-fw fa-solid fa-globe"></i> Origin</b>
  62.                             Information</p>
  63.                         <p class="mb-2 px-1 col-sm-6"> <b class="px-1 float-left rounded" style="background: #617eae;"><i class="fa-fw fa-solid fa-brain"></i> MBTI</b>
  64.                             Information</p>
  65.                         <p class="mb-2 px-1 col-sm-6"> <b class="px-1 float-left rounded" style="background: #617eae;"><i class="fa-fw fa-solid fa-dollar-sign"></i> Worth</b>
  66.                             Information</p>
  67.                         <!-- CREDITS -->
  68.                         <p class="mb-2 px-1 col-sm-6"> <b class="px-1 float-left rounded" style="background: #617eae;"><i class="fa-fw fa-solid fa-code"></i> Code</b>
  69.                             <a href="/SparklyCodes">SparklyCodes</a></p>
  70.                     </div>
  71.                    
  72.                     <div class="flex-fill align-items-center justify-content-center">
  73.                         <h1 class="mt-2 text-center"><i class="fa-solid fa-quote-left" style="color: #90d5f5"></i>
  74.                             Quote goes here. Lorem ipsum, sit dolor amet...
  75.                         <i class="fa-solid fa-quote-right" style="color: #90d5f5"></i> </h1>
  76.                     </div>
  77.                    
  78.                 </div> </div>
  79.             </div>
  80.         </div>
  81.        
  82.         <!-- ............................... NAVIGATION -->
  83.         <div class="p-1 order-4 col-12">
  84.             <div class="p-1" style="border: 3px solid #617eae; background: #111115; border-radius: 15px">
  85.                 <div style="border: 3px solid #90d5f5; border-radius: 10px; overflow: hidden">
  86.                     <!-- NAV BUTTONS -->
  87.                     <ul class="p-1 nav nav-pills text-center justify-content-around">
  88.                         <li class="p-1 nav-item"><a style="color: #90d5f5" data-toggle="tab" href="#A" class="active"> <i class="fa-lg fa-solid fa-user-astronaut"></i> </a></li>
  89.                         <li class="p-1 nav-item"><a style="color: #90d5f5" data-toggle="tab" href="#B"> <i class="fa-lg fa-solid fa-moon"></i> </a></li>
  90.                         <li class="p-1 nav-item"><a style="color: #90d5f5" data-toggle="tab" href="#C">
  91.                             <i class="fa-lg fa-solid fa-planet-ringed"></i> </a></li>
  92.                         <li class="p-1 nav-item"><a style="color: #90d5f5" data-toggle="tab" href="#D">
  93.                             <i class="fa-lg fa-solid fa-star-shooting"></i> </a></li>
  94.                         <li class="p-1 nav-item"><a style="color: #90d5f5" data-toggle="tab" href="#E">
  95.                             <i class="fa-lg fa-solid fa-telescope"></i> </a></li>
  96.                     </ul>
  97.                 </div>
  98.             </div>
  99.         </div>
  100.        
  101.         <!-- ............................... BIO -->
  102.         <div class="p-1 order-5 col-lg-6">
  103.             <div class="p-1" style="border: 3px solid #617eae; background: #111115; border-radius: 15px">
  104.                 <div style="border: 3px solid #90d5f5; border-radius: 10px; overflow: hidden"> <div class="p-3 tab-content" style="height: 400px; overflow: auto;">
  105.                    
  106.                     <!-- ............................ ONE -->
  107.                     <div class="tab-pane fade show active" id="A">
  108.                         <h1 class="font-weight-bold"><span style="color: #617eae"><i class="fa-solid fa-user-astronaut"></i> P</span>ERSONALITY</h1>
  109.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat lacus ut sollicitudin aliquet. Cras rutrum dapibus lorem suscipit cursus. Phasellus vel rhoncus ligula. Aenean magna tortor, pellentesque sit amet massa quis, hendrerit imperdiet ex. Donec nisl sem, vulputate eu ultrices at, mollis sed tortor. Donec luctus aliquet eros convallis suscipit. Ut ut erat dapibus, tincidunt libero vel, gravida risus.</p>
  110.                         <p>Nam varius, risus nec volutpat consectetur, sapien enim tristique odio, ac tincidunt nisi ante quis ligula. Morbi vitae mollis nisl, quis interdum nulla. Morbi sagittis sed orci luctus lacinia. Sed eu lectus libero. Sed auctor massa nisl, a vulputate lacus rutrum non. Vivamus lacinia lobortis suscipit. Vestibulum ante est, euismod et turpis at, efficitur pulvinar leo.</p>
  111.                        
  112.                         <h4 class="mb-1" style="color: #90d5f5">Tastes</h4>
  113.                         <div class="row no-gutters">
  114.                             <!-- LIKES -->
  115.                             <div class="p-1 col-sm">
  116.                                 <ul class="m-0 pl-4 list-unstyled">
  117.                                     <li><i style="color: #617eae" class="fa-solid fa-check"></i> Information</li>
  118.                                     <li><i style="color: #617eae" class="fa-solid fa-check"></i> Information</li>
  119.                                     <li><i style="color: #617eae" class="fa-solid fa-check"></i> Information</li>
  120.                                     <li><i style="color: #617eae" class="fa-solid fa-check"></i> Information</li>
  121.                                 </ul>
  122.                             </div>
  123.                             <!-- DISLIKES -->
  124.                             <div class="p-1 col-sm">
  125.                                 <ul class="m-0 pl-4 list-unstyled">
  126.                                     <li><i style="color: #617eae" class="fa-solid fa-times"></i> Information</li>
  127.                                     <li><i style="color: #617eae" class="fa-solid fa-times"></i> Information</li>
  128.                                     <li><i style="color: #617eae" class="fa-solid fa-times"></i> Information</li>
  129.                                     <li><i style="color: #617eae" class="fa-solid fa-times"></i> Information</li>
  130.                                 </ul>
  131.                             </div>
  132.                         </div>
  133.                     </div>
  134.                     <!-- ............................ TWO -->
  135.                     <div class="tab-pane fade" id="B">
  136.                         <h1 class="font-weight-bold"><span style="color: #617eae"><i class="fa-solid fa-moon"></i> S</span>TORY</h1>
  137.                        
  138.                         <h4 class="mb-1" style="color: #90d5f5">Subtitle</h4>
  139.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat lacus ut sollicitudin aliquet. Cras rutrum dapibus lorem suscipit cursus. Phasellus vel rhoncus ligula. Aenean magna tortor, pellentesque sit amet massa quis, hendrerit imperdiet ex. Donec nisl sem, vulputate eu ultrices at, mollis sed tortor. Donec luctus aliquet eros convallis suscipit. Ut ut erat dapibus, tincidunt libero vel, gravida risus.</p>
  140.                         <p>Nam varius, risus nec volutpat consectetur, sapien enim tristique odio, ac tincidunt nisi ante quis ligula. Morbi vitae mollis nisl, quis interdum nulla. Morbi sagittis sed orci luctus lacinia. Sed eu lectus libero. Sed auctor massa nisl, a vulputate lacus rutrum non. Vivamus lacinia lobortis suscipit. Vestibulum ante est, euismod et turpis at, efficitur pulvinar leo.</p>
  141.                        
  142.                         <h4 class="mb-1" style="color: #90d5f5">Subtitle</h4>
  143.                         <p>Vivamus hendrerit orci eget urna fermentum posuere. Sed lobortis felis ullamcorper, dignissim est nec, facilisis quam. Mauris tristique facilisis est suscipit bibendum. Quisque nec nibh suscipit, hendrerit felis et, pretium velit. Etiam et sodales nunc, et ultricies dui. Donec et scelerisque lorem. Ut tristique sapien vitae aliquet rutrum. Sed vel odio diam. Suspendisse vitae velit lectus. Suspendisse felis sem, venenatis ac lobortis ut, commodo eget orci.</p>
  144.                        
  145.                         <h4 class="mb-1" style="color: #90d5f5">Subtitle</h4>
  146.                         <p>Sed tincidunt felis eu tincidunt auctor. Sed pellentesque arcu mi, sed tincidunt felis aliquam vitae. Aenean faucibus faucibus ex quis consectetur. Vestibulum sapien sapien, consectetur sed nibh vel, consequat commodo leo. Proin lorem odio, maximus tincidunt metus ac, efficitur rhoncus mauris. Fusce ut commodo justo. Curabitur tristique lacus ut arcu tempor facilisis. Morbi vel dictum magna. Mauris placerat viverra nibh, sed efficitur nisi consectetur sed. Phasellus bibendum diam sapien, vel pharetra risus vehicula sed. Nunc dui augue, laoreet eget sagittis ac, eleifend ac lorem. Vivamus odio diam, elementum at dolor interdum, blandit condimentum purus.</p>
  147.                     </div>
  148.                     <!-- ............................ THREE -->
  149.                     <div class="tab-pane fade" id="C">
  150.                         <h1 class="font-weight-bold"><span style="color: #617eae"><i class="fa-solid fa-planet-ringed"></i> D</span>ESIGN</h1>
  151.                        
  152.                         <h4 class="mb-1" style="color: #90d5f5">Palette</h4>
  153.                         <ul class="m-0 mb-1 pl-0 list-unstyled row no-gutters">
  154.                             <!-- change 'color: #[hex]' to the color you need -->
  155.                             <li class="col-sm-6"><i style="color: #333333" class="fa-solid fa-planet-ringed"></i> #333333</li>
  156.                             <li class="col-sm-6"><i style="color: #555555" class="fa-solid fa-planet-ringed"></i> #555555</li>
  157.                             <li class="col-sm-6"><i style="color: #777777" class="fa-solid fa-planet-ringed"></i> #777777</li>
  158.                             <li class="col-sm-6"><i style="color: #999999" class="fa-solid fa-planet-ringed"></i> #999999</li>
  159.                             <!-- add more above here -->
  160.                         </ul>
  161.                        
  162.                         <h4 class="mb-1" style="color: #90d5f5">Notes</h4>
  163.                         <ul class="m-0 pl-0 list-unstyled">
  164.                             <li><i style="color: #617eae" class="fa-solid fa-planet-ringed"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  165.                             <li><i style="color: #617eae" class="fa-solid fa-planet-ringed"></i> Morbi congue, sem quis tincidunt commodo, mi erat sagittis tortor, porta maximus nisl ipsum a turpis.</li>
  166.                             <li><i style="color: #617eae" class="fa-solid fa-planet-ringed"></i> Fusce ligula nibh, sagittis a sem at, pharetra tristique orci.</li>
  167.                             <li><i style="color: #617eae" class="fa-solid fa-planet-ringed"></i> Cras non justo dictum nulla feugiat lacinia. Integer orci nisi, pretium ac luctus eget, porttitor sed risus.</li>
  168.                         </ul>
  169.                     </div>
  170.                     <!-- ............................ FOUR -->
  171.                     <div class="tab-pane fade" id="D">
  172.                         <h1 class="font-weight-bold"><span style="color: #617eae"><i class="fa-solid fa-star-shooting"></i> T</span>RIVIA</h1>
  173.                        
  174.                         <!-- MUSIC PLAYER - change out 'dQw4w9WgXcQ' to the id of the video you want!
  175.                                ID >> everything after 'watch?v=' in the youtube URL -->
  176.                         <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  177.                            frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
  178.                            style="height: 200px;" class="m-1 w-100"></iframe>
  179.                        
  180.                         <ul class="m-0 pl-0 list-unstyled">
  181.                             <li><i style="color: #617eae" class="fa-solid fa-star-shooting"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  182.                             <li><i style="color: #617eae" class="fa-solid fa-star-shooting"></i> Morbi congue, sem quis tincidunt commodo, mi erat sagittis tortor, porta maximus nisl ipsum a turpis.</li>
  183.                             <li><i style="color: #617eae" class="fa-solid fa-star-shooting"></i> Fusce ligula nibh, sagittis a sem at, pharetra tristique orci.</li>
  184.                             <li><i style="color: #617eae" class="fa-solid fa-star-shooting"></i> Cras non justo dictum nulla feugiat lacinia. Integer orci nisi, pretium ac luctus eget, porttitor sed risus.</li>
  185.                         </ul>
  186.                     </div>
  187.                     <!-- ............................ FIVE -->
  188.                     <div class="tab-pane fade" id="E">
  189.                         <h1 class="font-weight-bold"><span style="color: #617eae"><i class="fa-solid fa-telescope"></i> R</span>ELATIONSHIPS</h1>
  190.                        
  191.                         <div class="row no-gutters text-center">
  192.                             <!-- PERSON -->
  193.                             <div class="p-1 col-sm-6">
  194.                                 <a href="LINK">
  195.                                     <img src="IMG_LINK" class="m-1 p-1" style="height: 100px; border: 3px solid #617eae; background: #111115; border-radius: 15px"> </a>
  196.                                 <div class="p-2" style="border: 3px solid #90d5f5; border-radius: 10px; overflow: hidden">
  197.                                     <h4 class="mb-0" style="color: #90d5f5">NAME
  198.                                     <br><small style="color: #617eae">relationship</small></h4>
  199.                                     <p>Donec sem turpis, fringilla auctor risus quis, tempor tristique tortor. Aliquam tincidunt accumsan ligula eu gravida.</p>
  200.                                 </div>
  201.                             </div>
  202.                             <!-- PERSON -->
  203.                             <div class="p-1 col-sm-6">
  204.                                 <a href="LINK">
  205.                                     <img src="IMG_LINK" class="m-1 p-1" style="height: 100px; border: 3px solid #617eae; background: #111115; border-radius: 15px"> </a>
  206.                                 <div class="p-2" style="border: 3px solid #90d5f5; border-radius: 10px; overflow: hidden">
  207.                                     <h4 class="mb-0" style="color: #90d5f5">NAME
  208.                                     <br><small style="color: #617eae">relationship</small></h4>
  209.                                     <p>Donec sem turpis, fringilla auctor risus quis, tempor tristique tortor. Aliquam tincidunt accumsan ligula eu gravida.</p>
  210.                                 </div>
  211.                             </div>
  212.                             <!-- PERSON -->
  213.                             <div class="p-1 col-sm-6">
  214.                                 <a href="LINK">
  215.                                     <img src="IMG_LINK" class="m-1 p-1" style="height: 100px; border: 3px solid #617eae; background: #111115; border-radius: 15px"> </a>
  216.                                 <div class="p-2" style="border: 3px solid #90d5f5; border-radius: 10px; overflow: hidden">
  217.                                     <h4 class="mb-0" style="color: #90d5f5">NAME
  218.                                     <br><small style="color: #617eae">relationship</small></h4>
  219.                                     <p>Donec sem turpis, fringilla auctor risus quis, tempor tristique tortor. Aliquam tincidunt accumsan ligula eu gravida.</p>
  220.                                 </div>
  221.                             </div>
  222.                             <!-- PERSON -->
  223.                             <div class="p-1 col-sm-6">
  224.                                 <a href="LINK">
  225.                                     <img src="IMG_LINK" class="m-1 p-1" style="height: 100px; border: 3px solid #617eae; background: #111115; border-radius: 15px"> </a>
  226.                                 <div class="p-2" style="border: 3px solid #90d5f5; border-radius: 10px; overflow: hidden">
  227.                                     <h4 class="mb-0" style="color: #90d5f5">NAME
  228.                                     <br><small style="color: #617eae">relationship</small></h4>
  229.                                     <p>Donec sem turpis, fringilla auctor risus quis, tempor tristique tortor. Aliquam tincidunt accumsan ligula eu gravida.</p>
  230.                                 </div>
  231.                             </div>
  232.                             <!-- add more above here -->
  233.                         </div>
  234.                     </div>
  235.                    
  236.                 </div> </div>
  237.             </div>
  238.         </div>
  239.        
  240.         <!-- ............................... IMAGES -->
  241.         <div class="order-6 col-lg-6"> <div class="h-100 justify-content-center align-items-center row no-gutters">
  242.             <div class="p-1 mt-n2 col-6" style="border: 3px solid #617eae; background: #111115; border-radius: 15px; height: 370px">
  243.                 <div style="border: 3px solid #90d5f5; border-radius: 10px" class="h-100">
  244.                    
  245.                     <!-- IMAGE -->
  246.                     <div style="background: url('IMG_LINK');
  247.                    background-position: center; background-size: cover; border-radius: 10px" class="h-100">
  248.                     </div>
  249.                    
  250.                 </div>
  251.             </div>
  252.             <div class="p-1 mt-4 ml-n5 col-6" style="border: 3px solid #90d5f5; background: #111115; border-radius: 15px; height: 370px">
  253.                 <div style="border: 3px solid #617eae; border-radius: 10px" class="h-100">
  254.                    
  255.                     <!-- IMAGE -->
  256.                     <div style="background: url('IMG_LINK');
  257.                    background-position: center; background-size: cover; border-radius: 10px" class="h-100">
  258.                     </div>
  259.                    
  260.                 </div>
  261.             </div>
  262.         </div></div>
  263.        
  264.     </div>
  265. </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!