API tools faq
paste
Advertisement
SparklyLightus

Windows - Bootstrap

SparklyLightus
Jun 18th, 2021 (edited)
1,313
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 17.63 KB | None | 0 0
raw download clone embed print report
  1. <!-- CHANGE BACKGROUND HERE -->
  2. <div style="background: url('//media.discordapp.net/attachments/756660972294373467/792444678711541760/nasa-Q1p7bh3SHj8-unsplash.jpg');
  3.    background-size: cover; height: 470px;" class="mt-3 mx-3 p-0 mx-auto col-lg-9">
  4.     <!-- ............................ INFORMATION CONTAINER -->
  5.     <div class="pt-2 justify-content-end" style="height: 450px;">
  6.         <div class="m-4 p-0 card rounded-0 col-lg-9"> <div class="row no-gutters">
  7.             <!-- HEADER -->
  8.             <div class="m-0 p-0 card-header rounded-0 border-0 justify-content-between col-12">
  9.                 <h3 class="m-1 mb-0"> NAME </h3>
  10.                 <h3 class="m-0"> <i class="far fa-window-minimize bg-secondary p-1"></i><i class="far fa-window-restore bg-secondary p-1"></i><i class="far fa-times bg-danger p-1 px-2"></i> </h3>
  11.             </div>
  12.             <!-- HORIZONTAL SPACING -->
  13.             <div class="col-lg-auto" style="width: 20%;"></div>
  14.             <!-- TAB CONTENT -->
  15.             <div class="p-1 col-lg tab-content" style="height: 360px; overflow: auto;">
  16.                 <!-- ......... ONE -->
  17.                 <div class="tab-pane show active" id="I"> <div class="row no-gutters">
  18.                     <!-- TIP -->
  19.                     <div id="tip" class="mb-n1 col-12 collapse show text-secondary text-monospace">
  20.                         <p class="m-0">Tip: Click the <i class="fab fa-windows"></i> button for more!
  21.                         <a href="#tip" data-toggle="collapse" class="text-secondary">[Close]</a></p>
  22.                     </div>
  23.                     <!-- BASICS -->
  24.                     <div class="p-1 col-12 text-center row no-gutters">
  25.                         <p class="m-0 py-1 col-lg-4 col-6 text-center" style="line-height: 15px;"><b class="text-secondary">Name</b><br>
  26.                         Information</p>
  27.                         <p class="m-0 py-1 col-lg-4 col-6 text-center" style="line-height: 15px;"><b class="text-secondary">Alias</b><br>
  28.                         Information</p>
  29.                         <p class="m-0 py-1 col-lg-4 col-6 text-center" style="line-height: 15px;"><b class="text-secondary">Age</b><br>
  30.                         Information</p>
  31.                         <p class="m-0 py-1 col-lg-4 col-6 text-center" style="line-height: 15px;"><b class="text-secondary">Gender</b><br>
  32.                         Information</p>
  33.                         <p class="m-0 py-1 col-lg-4 col-6 text-center" style="line-height: 15px;"><b class="text-secondary">Race</b><br>
  34.                         Information</p>
  35.                         <p class="m-0 py-1 col-lg-4 col-6 text-center" style="line-height: 15px;"><b class="text-secondary">Orientation</b><br>
  36.                         Information</p>
  37.                         <p class="m-0 py-1 col-lg-4 col-6 text-center" style="line-height: 15px;"><b class="text-secondary">Occupation</b><br>
  38.                         Information</p>
  39.                         <p class="m-0 py-1 col-lg-4 col-6 text-center" style="line-height: 15px;"><b class="text-secondary">Height</b><br>
  40.                         Information</p>
  41.                         <p class="m-0 py-1 col-lg-4 col-6 text-center" style="line-height: 15px;"><b class="text-secondary">Theme</b><br>
  42.                         <a href="LINK">Songlink</a></p>
  43.                     </div>
  44.                     <!-- IMAGE FOR MOBILE - optional -->
  45.                     <div class="col-12 justify-content-center hidden-lg-up">
  46.                         <img src="//via.placeholder.com/500" style="max-height: 300px; max-width: 300px;"> </div>
  47.                     <!-- TEXT BLOCK -->
  48.                     <div class="col-lg-12">
  49.                         <h1 class="m-1 pb-1 text-primary" style="border-bottom: 1px solid;">Summary <i class="fas fa-search pull-right"></i></h1>
  50.                         <p class="m-1">This box will scroll, but I'd rather leave it short. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae velit eget nisi ultrices hendrerit bibendum non quam. Praesent egestas lorem sit amet scelerisque dictum. Quisque consequat risus eget metus mattis porttitor. Sed porta porta luctus. Ut at tempor nisl. Quisque semper purus luctus magna tincidunt porta. Quisque nec fringilla quam. Fusce maximus vel arcu in elementum. Nunc fringilla libero et diam malesuada tempus. Integer mollis tempus augue. Nam ultrices convallis ex, at venenatis diam ullamcorper suscipit. Aenean sed tellus id nunc dapibus placerat sed eu nisi. Phasellus quis pharetra arcu. Aliquam erat volutpat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vel fringilla diam.</p>
  51.                     </div>
  52.                 </div></div>
  53.                 <!-- ......... TWO -->
  54.                 <div class="tab-pane" id="II">
  55.                     <!-- PERSONALITY -->
  56.                     <div>
  57.                         <h1 class="m-1 pb-1 text-primary" style="border-bottom: 1px solid;">Personality <i class="fas fa-brain pull-right"></i></h1>
  58.                         <p class="m-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultrices non dui at tristique. Sed sem dui, tristique sed varius nec, ornare vel nisl. Phasellus non nisi eu elit blandit rutrum. Integer egestas, odio ac tempus facilisis, ligula diam tempor ipsum, sed pretium mauris nisl at turpis. Donec fermentum, tellus laoreet rutrum vehicula, justo lacus iaculis enim, eget euismod ligula sapien ut sem.</p>
  59.                         <p class="m-1">Cras sed aliquam nunc. Phasellus tincidunt ante sed rhoncus maximus. Etiam elementum dolor ac ligula sodales maximus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse potenti.</p>
  60.                     </div>
  61.                     <!-- STORY -->
  62.                     <div>
  63.                         <h1 class="m-1 pb-1 text-primary" style="border-bottom: 1px solid;">Story <i class="fas fa-books pull-right"></i></h1>
  64.                        
  65.                         <h4 class="m-1 text-secondary font-italic">Header</h4>
  66.                         <p class="m-1">Mauris non dignissim mauris. Sed tristique dui nec eros convallis tempus in et nisl. Mauris tempus, risus et laoreet laoreet, arcu est lacinia tellus, ac sagittis lectus magna eu eros. Nullam iaculis blandit lorem sit amet ornare. Cras ut libero magna. Sed facilisis, turpis lobortis ultricies ultricies, nibh erat vehicula enim, vitae condimentum arcu turpis sed felis.</p>
  67.                         <p class="m-1">Duis volutpat lectus vitae facilisis molestie. Phasellus at nibh accumsan, interdum odio et, lobortis ex. Donec posuere vel justo in tincidunt.</p>
  68.                        
  69.                         <h4 class="m-1 text-secondary font-italic">Header</h4>
  70.                         <p class="m-1">In quis iaculis augue, id vestibulum quam. Sed ut gravida lorem, vel sodales nunc. Curabitur iaculis, dui ut molestie porta, nibh nisl lobortis libero, id pretium augue nulla id tellus. Suspendisse euismod enim sed quam egestas, non euismod dolor vehicula. Sed sed nibh dui. Pellentesque ultricies, ante ac interdum fringilla, metus purus maximus enim, at vestibulum arcu erat a velit. Pellentesque volutpat, lorem a volutpat ornare, elit massa blandit neque, eu pellentesque turpis nisi sed lorem. Fusce vitae tristique massa. Donec eu enim metus. Fusce vel tincidunt tortor.</p>
  71.                         <p class="m-1">Pellentesque ultricies maximus nisi ut volutpat. Sed aliquet odio vel ipsum cursus sodales. Vestibulum pretium nibh ligula, at fermentum arcu porta ac. Fusce scelerisque venenatis enim, eget porttitor felis faucibus sed.</p>
  72.                     </div>
  73.                 </div>
  74.                 <!-- ......... THREE -->
  75.                 <div class="tab-pane" id="III">
  76.                     <div class="row no-gutters">
  77.                         <!-- LIKES -->
  78.                         <div class="col-sm-6">
  79.                             <h1 class="m-1 pb-1 text-primary" style="border-bottom: 1px solid;">Likes <i class="fas fa-check pull-right"></i></h1>
  80.                             <ul class="m-0 pl-4">
  81.                                 <li>INFO</li>
  82.                                 <li>INFO</li>
  83.                                 <li>INFO</li>
  84.                             </ul>
  85.                         </div>
  86.                         <!-- DISLIKES -->
  87.                         <div class="col-sm-6">
  88.                             <h1 class="m-1 pb-1 text-primary" style="border-bottom: 1px solid;">Dislikes <i class="fas fa-times pull-right"></i></h1>
  89.                             <ul class="m-0 pl-4">
  90.                                 <li>INFO</li>
  91.                                 <li>INFO</li>
  92.                                 <li>INFO</li>
  93.                             </ul>
  94.                         </div>
  95.                     </div>
  96.                     <!-- TRIVIA -->
  97.                     <div>
  98.                         <h1 class="m-1 pb-1 text-primary" style="border-bottom: 1px solid;">Trivia <i class="fas fa-star pull-right"></i></h1>
  99.                         <ul class="m-0 pl-4">
  100.                             <li>Suspendisse potenti. Sed rhoncus, dolor et varius dictum.</li>
  101.                             <li>Justo purus porta elit, eu ultricies lectus orci vitae risus.</li>
  102.                             <li>Fusce id metus ipsum. Quisque sit amet sagittis dui. </li>
  103.                             <li>Phasellus eget purus sit amet nunc lacinia vestibulum vel a nunc.</li>
  104.                             <li>Nunc tristique, erat euismod mattis scelerisque, dolor odio rhoncus est, ut pharetra dolor nisl a lectus.</li>
  105.                         </ul>
  106.                     </div>
  107.                 </div>
  108.                 <!-- ......... FOUR -->
  109.                 <div class="tab-pane" id="IV">
  110.                     <!-- MOODBOARD/IMAGE SET -->
  111.                     <div class="row no-gutters">
  112.                         <div class="p-1 col"> <div style="background: url('//via.placeholder.com/500') center; background-size: cover; height: 150px;"></div> </div>
  113.                         <div class="p-1 col"> <div style="background: url('//via.placeholder.com/500') center; background-size: cover; height: 150px;"></div> </div>
  114.                         <div class="p-1 col"> <div style="background: url('//via.placeholder.com/500') center; background-size: cover; height: 150px;"></div> </div>
  115.                     </div>
  116.                     <!-- PALETTE - you can add more or delete lines, don't go over 12 -->
  117.                     <div class="row no-gutters">
  118.                         <div class="p-1 col"> <div style="background: #FFFFFF; height: 30px;"></div> </div>
  119.                         <div class="p-1 col"> <div style="background: #FFFFFF; height: 30px;"></div> </div>
  120.                         <div class="p-1 col"> <div style="background: #FFFFFF; height: 30px;"></div> </div>
  121.                         <div class="p-1 col"> <div style="background: #FFFFFF; height: 30px;"></div> </div>
  122.                         <div class="p-1 col"> <div style="background: #FFFFFF; height: 30px;"></div> </div>
  123.                         <div class="p-1 col"> <div style="background: #FFFFFF; height: 30px;"></div> </div>
  124.                     </div>
  125.                     <!-- DESIGN NOTES -->
  126.                     <div>
  127.                         <h1 class="m-1 pb-1 text-primary" style="border-bottom: 1px solid;">Design Notes <i class="fas fa-paint-brush pull-right"></i></h1>
  128.                         <ul class="m-0 pl-4">
  129.                             <li>Curabitur ex diam, hendrerit sed molestie non, hendrerit eget ligula. </li>
  130.                             <li>Phasellus porttitor vel mauris vel porttitor. </li>
  131.                             <li>Donec sodales nibh nec erat vulputate, in dictum diam bibendum. </li>
  132.                             <li>Quisque porta dui et tempus egestas.</li>
  133.                         </ul>
  134.                     </div>
  135.                 </div>
  136.                 <!-- ......... FIVE -->
  137.                 <div class="tab-pane" id="V">
  138.                     <!-- PERSON -->
  139.                     <div class="m-1 card rounded-0"><div>
  140.                         <!-- NAME -->
  141.                         <div class="m-0 p-0 card-header rounded-0 border-0 justify-content-between col-12">
  142.                             <h3 class="m-1 mb-0"> NAME: <small>Relationship</small> </h3> <h3 class="m-0"><i class="far fa-times bg-danger p-1 px-2"></i> </h3> </div>
  143.                         <!-- IMAGE LINK HERE -->
  144.                         <div class="m-1 float-sm-left justify-content-center justify-content-lg-start">
  145.                             <img src="//via.placeholder.com/200" style="width: 120px; height: 120px;"> </div>
  146.                         <p>Write about their relationship here. This box will expand, and the text will wrap around the image. Maecenas justo dui, imperdiet vel elit quis, lacinia elementum mauris. Proin pulvinar, ligula vel auctor vulputate, urna diam rhoncus leo, vitae dignissim magna dui sit amet lectus.</p>
  147.                     </div></div>
  148.                     <!-- PERSON -->
  149.                     <div class="m-1 card rounded-0"><div>
  150.                         <!-- NAME -->
  151.                         <div class="m-0 p-0 card-header rounded-0 border-0 justify-content-between col-12">
  152.                             <h3 class="m-1 mb-0"> NAME: <small>Relationship</small> </h3> <h3 class="m-0"><i class="far fa-times bg-danger p-1 px-2"></i> </h3> </div>
  153.                         <!-- IMAGE LINK HERE -->
  154.                         <div class="m-1 float-sm-left justify-content-center justify-content-lg-start">
  155.                             <img src="//via.placeholder.com/200" style="width: 120px; height: 120px;"> </div>
  156.                         <p>Write about their relationship here. This box will expand, and the text will wrap around the image. Maecenas justo dui, imperdiet vel elit quis, lacinia elementum mauris. Proin pulvinar, ligula vel auctor vulputate, urna diam rhoncus leo, vitae dignissim magna dui sit amet lectus.</p>
  157.                     </div></div>
  158.                     <!-- PERSON -->
  159.                     <div class="m-1 card rounded-0"><div>
  160.                         <!-- NAME -->
  161.                         <div class="m-0 p-0 card-header rounded-0 border-0 justify-content-between col-12">
  162.                             <h3 class="m-1 mb-0"> NAME: <small>Relationship</small> </h3> <h3 class="m-0"><i class="far fa-times bg-danger p-1 px-2"></i> </h3> </div>
  163.                         <!-- IMAGE LINK HERE -->
  164.                         <div class="m-1 float-sm-left justify-content-center justify-content-lg-start">
  165.                             <img src="//via.placeholder.com/200" style="width: 120px; height: 120px;"> </div>
  166.                         <p>Write about their relationship here. This box will expand, and the text will wrap around the image. Maecenas justo dui, imperdiet vel elit quis, lacinia elementum mauris. Proin pulvinar, ligula vel auctor vulputate, urna diam rhoncus leo, vitae dignissim magna dui sit amet lectus.</p>
  167.                     </div></div>
  168.                 </div>
  169.             </div> <!-- end tab content -->
  170.         </div> </div>
  171.     </div>
  172.     <!-- ............................ SIDE IMAGE - visible on PC only! -->
  173.     <div class="pt-5 hidden-md-down col-lg-5" style="height: 470px; position: absolute; top: 0px;">
  174.         <div class="m-4 card rounded-0">
  175.             <!-- HEADER -->
  176.             <div class="m-0 p-0 card-header rounded-0 border-0 justify-content-end">
  177.                 <h3 class="m-0"> <i class="far fa-window-minimize bg-secondary p-1"></i><i class="far fa-window-restore bg-secondary p-1"></i><i class="far fa-times bg-danger p-1 px-2"></i> </h3>
  178.             </div>
  179.             <!-- IMAGE LINK HERE - use a vertical image of any size! -->
  180.             <img src="//via.placeholder.com/500x600" class="m-1" style="max-width: 300px; max-height: 300px;">
  181.         </div>
  182.     </div>
  183.     <!-- ............................ NAV -->
  184.     <div class="align-items-end" style="height: 470px; position: absolute; top: 0px;"><div id="nav" class="collapse">
  185.         <ul class="bg-primary nav font-weight-bold text-uppercase flex-column" style="width: 300px;">
  186.             <li class="nav-item"> <a class="p-1 pr-2 btn-primary rounded-0 border-0 text-white text-right nav-link" data-toggle="collapse" href="#nav">
  187.                 Close <i class="fas fa-times"></i> </a> </li>
  188.             <li class="nav-item"> <a class="p-1 btn-primary rounded-0 border-0 text-white nav-link active" data-toggle="tab" href="#I">
  189.                 Basics</a> </li>
  190.             <li class="nav-item"> <a class="p-1 btn-primary rounded-0 border-0 text-white nav-link" data-toggle="tab" href="#II">
  191.                 About</a> </li>
  192.             <li class="nav-item"> <a class="p-1 btn-primary rounded-0 border-0 text-white nav-link" data-toggle="tab" href="#III">
  193.                 Trivia</a> </li>
  194.             <li class="nav-item"> <a class="p-1 btn-primary rounded-0 border-0 text-white nav-link" data-toggle="tab" href="#IV">
  195.                 Aesthetic</a> </li>
  196.             <li class="nav-item"> <a class="p-1 btn-primary rounded-0 border-0 text-white nav-link" data-toggle="tab" href="#V">
  197.                 Relationships</a> </li>
  198.         </ul>
  199.     </div></div>
  200. </div>
  201. <!-- BOTTOM BAR -->
  202. <div class="mx-3 mb-3 p-1 pl-2 bg-primary mx-auto col-lg-9 justify-content-between">
  203.     <h2 class="m-0"> <a href="#nav" data-toggle="collapse" class="text-white"> <i class="fab fa-windows"></i> Start </a> </h2>
  204.     <!-- CREDIT -->
  205.     <h2 class="m-0"> <a class="text-white" data-toggle="tooltip" title="Code by SparklyCodes" href="/SparklyCodes"><i class="far fa-code"></i> </a>
  206.     <a class="text-white" data-toggle="tooltip" title="Layout by Fennemagik" href="/Fennemagik"><i class="far fa-paint-brush"></i> </a></h2>
  207. </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!