API tools faq
paste
SparklyLightus

Atmosphere

SparklyLightus
Apr 10th, 2021 (edited)
739
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 19.33 KB | None | 0 0
raw download clone embed print report
  1. <div class="mx-3 mt-3 p-0 card mx-auto col-lg-11"><div class="m-1 row no-gutters">
  2.     <!-- HEADER -->
  3.     <div class="col-12">
  4.         <!-- IMAGE FOCUS ON CENTER -->
  5.         <div class="m-1 p-2 card border-0 d-flex justify-content-center" style="background: url('//via.placeholder.com/1000') center; background-size: cover; height: 200px;">
  6.             <!-- replace text-white for text-dark if your banner is of a light color! -->
  7.             <div><h1 class="text-center display-4 font-italic text-white">
  8.                 "Lorem ipsum dolor sit amet, consectetur adipiscing elit." <!-- QUOTE HERE -->
  9.             </h1></div>
  10.         </div>
  11.     </div>
  12.    
  13.     <!-- SIDEBAR -->
  14.     <div class="col-lg-2">
  15.         <!-- IMAGE FOCUS ON CENTER -->
  16.         <div class="m-1 p-2 card border-0" style="background: url('//via.placeholder.com/1000') center;
  17.            background-size: cover; height: 398px;">
  18.             <!-- replace text-white for text-dark if your banner is of a light color! -->
  19.             <div style="transform: rotate(90deg); position: absolute; top: 170px; left: -170px; width: 400px"><h1 class="display-1 text-left text-white">
  20.                 NAMEHERE <!-- NAME OR NICKNAME -->
  21.             </h1></div>
  22.         </div>
  23.     </div>
  24.     <!-- BASICS -->
  25.     <div class="col-lg-4">
  26.         <div class="m-1 card bg-faded border-0"><div class="m-1 p-2 card border-0" style="height: 390px; overflow: auto;">
  27.             <div class="text-right"> <strong class="pull-left text-secondary">NAME</strong>
  28.                 information</div> <hr class="m-0 my-1">
  29.             <div class="text-right"> <strong class="pull-left text-secondary">NICKNAME</strong>
  30.                 information</div> <hr class="m-0 my-1">
  31.             <div class="text-right"> <strong class="pull-left text-secondary">AGE</strong>
  32.                 information</div> <hr class="m-0 my-1">
  33.             <div class="text-right"> <strong class="pull-left text-secondary">BIRTHDAY</strong>
  34.                 information</div> <hr class="m-0 my-1">
  35.             <div class="text-right"> <strong class="pull-left text-secondary">GENDER</strong>
  36.                 information</div> <hr class="m-0 my-1">
  37.             <div class="text-right"> <strong class="pull-left text-secondary">PRONOUNS</strong>
  38.                 information</div> <hr class="m-0 my-1">
  39.             <div class="text-right"> <strong class="pull-left text-secondary">ORIENTATION</strong>
  40.                 information</div> <hr class="m-0 my-1">
  41.             <div class="text-right"> <strong class="pull-left text-secondary">STATUS</strong>
  42.                 information</div> <hr class="m-0 my-1">
  43.             <div class="text-right"> <strong class="pull-left text-secondary">RELATIONSHIP</strong>
  44.                 information</div> <hr class="m-0 my-1">
  45.             <div class="text-right"> <strong class="pull-left text-secondary">MBTI</strong>
  46.                 information</div> <hr class="m-0 my-1">
  47.             <div class="text-right"> <strong class="pull-left text-secondary">HEIGHT</strong>
  48.                 information</div> <hr class="m-0 my-1">
  49.             <div class="text-right"> <strong class="pull-left text-secondary">WEIGHT</strong>
  50.                 information</div> <hr class="m-0 my-1">
  51.             <div class="text-right"> <strong class="pull-left text-secondary">ORIGIN</strong>
  52.                 information</div> <hr class="m-0 my-1">
  53.             <div class="text-right"> <strong class="pull-left text-secondary">RESIDENCE </strong>
  54.                 information</div> <hr class="m-0 my-1">
  55.         </div></div>
  56.     </div>
  57.     <!-- PROFILE -->
  58.     <div class="col-lg-6">
  59.         <div class="m-1 card bg-faded border-0"><div class="m-1 p-2 card border-0" style="height: 390px; overflow: auto;">
  60.             <!-- SUMMARY -->
  61.             <h1 class="m-0 text-primary"><i class="fal fa-star"></i> Summary</h1>
  62.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et enim nisi. Sed commodo mi sit amet mi vehicula laoreet. Pellentesque hendrerit lectus magna, eget consectetur orci fringilla eu. Donec eu facilisis ex. Nam ut scelerisque nisi. Duis a velit a odio consectetur interdum. Donec massa augue, egestas non aliquam vel, semper at dui. In massa velit, iaculis eu lacinia in, malesuada sed quam. Sed tempus ligula vitae pharetra fermentum. Maecenas convallis velit nunc.</p>
  63.            
  64.             <!-- PERSONALITY -->
  65.             <h1 class="m-0 text-primary"><i class="fal fa-star"></i> Personality</h1>
  66.             <p>Nam tempus dapibus sodales. Sed facilisis iaculis malesuada. Fusce semper, urna eu hendrerit ullamcorper, ipsum odio scelerisque ipsum, vel scelerisque est leo id ligula. Proin rhoncus ut nisi ut semper. Phasellus scelerisque massa diam, sed blandit odio viverra non. Sed sagittis vulputate pretium. </p>
  67.             <p>Integer faucibus augue in faucibus facilisis. Praesent semper fringilla est, ornare viverra dui gravida nec. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec dignissim lobortis neque, nec aliquet nisl consectetur tincidunt. Aenean tincidunt varius sollicitudin. Cras sed nisl tortor. Suspendisse potenti.</p>
  68.             <p>Proin vestibulum tempus fermentum. Ut pretium libero at sapien eleifend, id lacinia eros venenatis. Nunc nibh sem, consequat a ipsum vel, congue ullamcorper nulla. Suspendisse in interdum ante. Aliquam erat volutpat. Proin tempor, leo sed sodales hendrerit, neque magna facilisis lacus, et ornare diam elit sit amet enim.</p>
  69.         </div></div>
  70.     </div>
  71.    
  72.     <!-- TASTES -->
  73.     <div class="col-lg-3">
  74.         <div class="m-1 card bg-faded border-0"><div class="m-1 p-2 card border-0" style="height: 350px; overflow: auto;">
  75.             <h1 class="m-0 text-primary"><i class="fal fa-star"></i> Tastes</h1>
  76.            
  77.             <!-- LIKES -->
  78.             <h3 class="m-0 text-secondary"><i class="fal fa-check"></i> Likes</h3>
  79.             <ul class="m-0 pl-2 list-unstyled">
  80.                 <li><b>INFO:</b> Lorem ipsum dolor sit amet</li>
  81.                 <li><b>INFO:</b> Lorem ipsum dolor sit amet</li>
  82.                 <li><b>INFO:</b> Lorem ipsum dolor sit amet</li>
  83.                 <li><b>INFO:</b> Lorem ipsum dolor sit amet</li>
  84.             </ul>
  85.            
  86.             <!-- DISLIKES -->
  87.             <h3 class="m-0 text-secondary"><i class="fal fa-times"></i> Dislikes</h3>
  88.             <ul class="m-0 pl-2 list-unstyled">
  89.                 <li><b>INFO:</b> Lorem ipsum dolor sit amet</li>
  90.                 <li><b>INFO:</b> Lorem ipsum dolor sit amet</li>
  91.                 <li><b>INFO:</b> Lorem ipsum dolor sit amet</li>
  92.                 <li><b>INFO:</b> Lorem ipsum dolor sit amet</li>
  93.             </ul>
  94.            
  95.             <!-- FAVORTIES -->
  96.             <h3 class="m-0 text-secondary"><i class="fal fa-heart"></i> Favorites</h3>
  97.             <ul class="m-0 pl-2 list-unstyled">
  98.                 <li><b>INFO:</b> Favorite food, color, etc etc</li>
  99.                 <li><b>INFO:</b> Lorem ipsum dolor sit amet</li>
  100.                 <li><b>INFO:</b> Lorem ipsum dolor sit amet</li>
  101.                 <li><b>INFO:</b> Lorem ipsum dolor sit amet</li>
  102.             </ul>
  103.         </div></div>
  104.     </div>
  105.     <!-- STORY -->
  106.     <div class="col-lg-6">
  107.         <div class="m-1 card bg-faded border-0"><div class="m-1 p-2 card border-0" style="height: 350px; overflow: auto;">
  108.             <h1 class="m-0 text-primary"><i class="fal fa-star"></i> Story</h1>
  109.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et enim nisi. Sed commodo mi sit amet mi vehicula laoreet. Pellentesque hendrerit lectus magna, eget consectetur orci fringilla eu. Donec eu facilisis ex. Nam ut scelerisque nisi. Duis a velit a odio consectetur interdum. Donec massa augue, egestas non aliquam vel, semper at dui. In massa velit, iaculis eu lacinia in, malesuada sed quam. Sed tempus ligula vitae pharetra fermentum. Maecenas convallis velit nunc.</p>
  110.            
  111.             <h3 class="m-0 text-secondary"><i class="fal fa-bookmark"></i> Header</h3>
  112.             <p>Nam tempus dapibus sodales. Sed facilisis iaculis malesuada. Fusce semper, urna eu hendrerit ullamcorper, ipsum odio scelerisque ipsum, vel scelerisque est leo id ligula. Proin rhoncus ut nisi ut semper. Phasellus scelerisque massa diam, sed blandit odio viverra non. Sed sagittis vulputate pretium. </p>
  113.             <p>Integer faucibus augue in faucibus facilisis. Praesent semper fringilla est, ornare viverra dui gravida nec. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec dignissim lobortis neque, nec aliquet nisl consectetur tincidunt. Aenean tincidunt varius sollicitudin. Cras sed nisl tortor. Suspendisse potenti.</p>
  114.            
  115.             <h3 class="m-0 text-secondary"><i class="fal fa-bookmark"></i> Header</h3>
  116.             <p>Proin vestibulum tempus fermentum. Ut pretium libero at sapien eleifend, id lacinia eros venenatis. Nunc nibh sem, consequat a ipsum vel, congue ullamcorper nulla. Suspendisse in interdum ante. Aliquam erat volutpat. Proin tempor, leo sed sodales hendrerit, neque magna facilisis lacus, et ornare diam elit sit amet enim.</p>
  117.         </div></div>
  118.     </div>
  119.     <!-- MOODBOARD -->
  120.     <div class="col-lg-3">
  121.         <div class="m-0 row no-gutters">
  122.             <!-- IMAGES - FOCUS ON CENTER, CHANGE URLS -->
  123.             <div class="p-1 col-6"> <div class="rounded" style="background: url('//via.placeholder.com/1000')
  124.                center; background-size: cover; height: 175px;"></div></div>
  125.             <div class="p-1 col-6"> <div class="rounded" style="background: url('//via.placeholder.com/1000')
  126.                center; background-size: cover; height: 175px;"></div></div>
  127.             <div class="p-1 col-6"> <div class="rounded" style="background: url('//via.placeholder.com/1000')
  128.                center; background-size: cover; height: 175px;"></div></div>
  129.             <div class="p-1 col-6"> <div class="rounded" style="background: url('//via.placeholder.com/1000')
  130.                center; background-size: cover; height: 175px;"></div></div>
  131.         </div>
  132.     </div>
  133.    
  134.     <!-- TRIVIA -->
  135.     <div class="col-lg-4">
  136.         <div class="m-1 card bg-faded border-0"><div class="m-1 p-2 card border-0" style="height: 250px; overflow: auto;">
  137.             <h1 class="m-0 text-primary"><i class="fal fa-star"></i> Trivia</h1>
  138.             <ul class="m-0 pl-2 list-unstyled">
  139.                 <li><i class="fas fa-star"></i> Vivamus sed est pretium, pretium ipsum et, pellentesque nulla. Sed id lacus dolor.</li>
  140.                 <li><i class="fas fa-star"></i> Donec accumsan ex nec erat viverra interdum. Aliquam aliquam turpis at ex aliquet, quis porta quam iaculis.</li>
  141.                 <li><i class="fas fa-star"></i> Duis ut tempus sapien. In eu mollis arcu, sit amet tempus velit. Suspendisse vitae condimentum sapien.</li>
  142.                 <li><i class="fas fa-star"></i> Donec pharetra convallis dolor congue tincidunt. Nullam ornare cursus arcu non ultrices.</li>
  143.             </ul>
  144.         </div></div>
  145.     </div>
  146.     <!-- IMAGE -->
  147.     <div class="col-lg-4">
  148.         <!-- IMAGE FOCUS ON CENTER -->
  149.         <div class="m-1 p-2 card border-0" style="background: url('//via.placeholder.com/1000') center;
  150.            background-size: cover; height: 258px;">
  151.         </div>
  152.     </div>
  153.     <!-- SKILLS -->
  154.     <div class="col-lg-4">
  155.         <div class="m-1 card bg-faded border-0"><div class="m-1 p-2 card border-0" style="height: 250px; overflow: auto;">
  156.             <h1 class="m-0 text-primary"><i class="fal fa-star"></i> Skills</h1>
  157.             <ul class="m-0 pl-2 list-unstyled">
  158.                 <li><i class="fas fa-star"></i> Vivamus sed est pretium, pretium ipsum et, pellentesque nulla. Sed id lacus dolor.</li>
  159.                 <li><i class="fas fa-star"></i> Donec accumsan ex nec erat viverra interdum. Aliquam aliquam turpis at ex aliquet, quis porta quam iaculis.</li>
  160.                 <li><i class="fas fa-star"></i> Duis ut tempus sapien. In eu mollis arcu, sit amet tempus velit. Suspendisse vitae condimentum sapien.</li>
  161.                 <li><i class="fas fa-star"></i> Donec pharetra convallis dolor congue tincidunt. Nullam ornare cursus arcu non ultrices.</li>
  162.             </ul>
  163.         </div></div>
  164.     </div>
  165.    
  166.     <!-- DESIGN NOTES -->
  167.     <div class="col-lg-7">
  168.         <div class="m-1 card bg-faded border-0"><div class="m-1 p-2 card border-0" style="height: 200px; overflow: auto;">
  169.             <h1 class="m-0 text-primary"><i class="fal fa-star"></i> Design Notes</h1>
  170.             <ul class="m-0 pl-2 list-unstyled">
  171.                 <li><i class="fas fa-star"></i> Vivamus sed est pretium, pretium ipsum et, pellentesque nulla. Sed id lacus dolor.</li>
  172.                 <li><i class="fas fa-star"></i> Donec accumsan ex nec erat viverra interdum. Aliquam aliquam turpis at ex aliquet, quis porta quam iaculis.</li>
  173.                 <li><i class="fas fa-star"></i> Duis ut tempus sapien. In eu mollis arcu, sit amet tempus velit. Suspendisse vitae condimentum sapien.</li>
  174.                 <li><i class="fas fa-star"></i> Donec pharetra convallis dolor congue tincidunt. Nullam ornare cursus arcu non ultrices.</li>
  175.             </ul>
  176.         </div></div>
  177.     </div>
  178.     <!-- PALETTE -->
  179.     <div class="col-lg-5">
  180.         <div class="m-1 card bg-faded border-0"><div class="m-1 p-2 card border-0" style="height: 200px; overflow: auto;">
  181.             <h1 class="m-0 text-primary"><i class="fal fa-star"></i> Palette</h1>
  182.             <div class="text-center my-auto" style="font-size: 50px;">
  183.                 <!-- CHANGE HEX CODE -->
  184.                 <span style="color: #848484;" data-toggle="tooltip" title="Skin"><i class="fas fa-square"></i></span>
  185.                 <span style="color: #848484;" data-toggle="tooltip" title="Eyes"><i class="fas fa-square"></i></span>
  186.                 <span style="color: #848484;" data-toggle="tooltip" title="Hair"><i class="fas fa-square"></i></span>
  187.                 <span style="color: #848484;" data-toggle="tooltip" title="Custom"><i class="fas fa-square"></i></span>
  188.                 <span style="color: #848484;" data-toggle="tooltip" title="Custom 2"><i class="fas fa-square"></i></span>
  189.             </div>
  190.         </div></div>
  191.     </div>
  192.    
  193.     <!-- PLAYLIST -->
  194.     <div class="col-lg-4">
  195.         <div class="m-1 card bg-faded border-0"><div class="m-1 p-2 card border-0" style="height: 370px; overflow: auto;">
  196.             <h1 class="m-0 text-primary"><i class="fal fa-star"></i> Playlist
  197.                 <a href="LINK" data-toggle="tooltip" title="Full Playlist"><i class="fal fa-link"></i></a></h1>
  198.            
  199.             <!-- CHANGE VIDEO ID ONLY - dQw4w9WgXcQ -->
  200.             <div class="m-1 mt-2">
  201.                 <div class="p-1"><iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" style="width: 100%; height: 150px; border-radius: 5px;" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
  202.                 <div class="p-1"><iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" style="width: 100%; height: 150px; border-radius: 5px;" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
  203.             </div>
  204.         </div></div>
  205.     </div>
  206.     <!-- RELATIONSHIPS -->
  207.     <div class="col-lg-8">
  208.         <div class="m-1 card bg-faded border-0"><div class="m-1 p-2 card border-0" style="height: 370px; overflow: auto;">
  209.             <h1 class="m-0 text-primary"><i class="fal fa-star"></i> Relationships</h1>
  210.            
  211.             <div class="m-1 row no-gutters text-justify">
  212.                 <!-- CHARACTER -->
  213.                 <div class="p-1 col-lg-6">
  214.                     <!-- image --><div class="text-center">
  215.                     <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/5264450?" style="height: 120px; width: 120px" class="m-1 img-thumbnail rounded-circle"></div>
  216.                    
  217.                     <!-- name --><h1 class="m-0"><a href="LINK" class="my-1 p-1 col-12 btn btn-primary">Name</a></h1>
  218.                     <p><strong class="font-italic text-secondary">[relationship]</strong>
  219.                     In mattis mi nec massa aliquam, et pellentesque arcu auctor. Nulla mauris dui, egestas non porta sed, porta vel odio. Suspendisse tincidunt massa eu erat imperdiet euismod. Proin vehicula nisi eu ipsum cursus dapibus et eget tortor. Quisque at leo sem. Nunc laoreet odio sit amet semper convallis.</p>
  220.                 </div>
  221.                 <!-- CHARACTER -->
  222.                 <div class="p-1 col-lg-6">
  223.                     <!-- image --><div class="text-center">
  224.                     <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/5264450?" style="height: 120px; width: 120px" class="m-1 img-thumbnail rounded-circle"></div>
  225.                    
  226.                     <!-- name --><h1 class="m-0"><a href="LINK" class="my-1 p-1 col-12 btn btn-primary">Name</a></h1>
  227.                     <p><strong class="font-italic text-secondary">[relationship]</strong>
  228.                     In mattis mi nec massa aliquam, et pellentesque arcu auctor. Nulla mauris dui, egestas non porta sed, porta vel odio. Suspendisse tincidunt massa eu erat imperdiet euismod. Proin vehicula nisi eu ipsum cursus dapibus et eget tortor. Quisque at leo sem. Nunc laoreet odio sit amet semper convallis.</p>
  229.                 </div>
  230.                 <!-- CHARACTER -->
  231.                 <div class="p-1 col-lg-6">
  232.                     <!-- image --><div class="text-center">
  233.                     <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/5264450?" style="height: 120px; width: 120px" class="m-1 img-thumbnail rounded-circle"></div>
  234.                    
  235.                     <!-- name --><h1 class="m-0"><a href="LINK" class="my-1 p-1 col-12 btn btn-primary">Name</a></h1>
  236.                     <p><strong class="font-italic text-secondary">[relationship]</strong>
  237.                     In mattis mi nec massa aliquam, et pellentesque arcu auctor. Nulla mauris dui, egestas non porta sed, porta vel odio. Suspendisse tincidunt massa eu erat imperdiet euismod. Proin vehicula nisi eu ipsum cursus dapibus et eget tortor. Quisque at leo sem. Nunc laoreet odio sit amet semper convallis.</p>
  238.                 </div>
  239.                 <!-- CHARACTER -->
  240.                 <div class="p-1 col-lg-6">
  241.                     <!-- image --><div class="text-center">
  242.                     <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/5264450?" style="height: 120px; width: 120px" class="m-1 img-thumbnail rounded-circle"></div>
  243.                    
  244.                     <!-- name --><h1 class="m-0"><a href="LINK" class="my-1 p-1 col-12 btn btn-primary">Name</a></h1>
  245.                     <p><strong class="font-italic text-secondary">[relationship]</strong>
  246.                     In mattis mi nec massa aliquam, et pellentesque arcu auctor. Nulla mauris dui, egestas non porta sed, porta vel odio. Suspendisse tincidunt massa eu erat imperdiet euismod. Proin vehicula nisi eu ipsum cursus dapibus et eget tortor. Quisque at leo sem. Nunc laoreet odio sit amet semper convallis.</p>
  247.                 </div>
  248.                
  249.                 <!-- ADD MORE ABOVE HERE -->
  250.             </div>
  251.         </div></div>
  252.     </div>
  253. </div></div>
  254. <!-- ===================== CREDIT -->
  255. <div class="text-center">
  256.     <p><a data-toggle="tooltip" title="Code by SparklyCodes" href="/SparklyCodes"><i class="far fa-code"></i></a>
  257. </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!