API tools faq
paste
Advertisement
SparklyLightus

Cherry

SparklyLightus
Sep 12th, 2021
2,521
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 19.25 KB | None | 0 0
raw download clone embed print report
  1. <div class="row no-gutters">
  2.    
  3.     <!-- HEADER -->
  4.     <h1 class="col-12 name display-3 text-right">
  5.         <strong>C</strong>haracter
  6.         <strong>N</strong>ame
  7.     </h1>
  8.    
  9.     <!-- IMAGE -->
  10.     <div class="p-1 mx-auto col-md-4 col-7">
  11.         <div style="background-image: url('IMG_LINK'); min-height: 250px; max-width: 500px;" class="h-100 w-100 first-image"></div>
  12.     </div>
  13.     <!-- INFO CAROUSEL1 -->
  14.     <div class="p-1 col-md-8">
  15.         <div class="carousel slide w-100" id="carousel1" data-ride="false" data-pause="true">
  16.             <!-- NAVS -->
  17.             <div class="row no-gutters">
  18.                 <a class="mr-1 p-1 col btn btn-primary rounded" data-target="#carousel1" data-slide-to="0" role="button">
  19.                     Basics</a>
  20.                 <a class="mr-1 p-1 col btn btn-primary rounded" data-target="#carousel1" data-slide-to="1" role="button">
  21.                     Summary</a>
  22.                 <a class="p-1 col btn btn-primary rounded" data-target="#carousel1" data-slide-to="2" role="button">
  23.                     Stats</a>
  24.             </div><!-- end navs -->
  25.             <!-- CONTENT -->
  26.             <div class="my-1 carousel-inner">
  27.                 <!-- ................................. BASICS -->
  28.                 <div class="carousel-item active"> <div class="row no-gutters basics overflow-auto" style="height: 260px">
  29.                     <div class="p-2 col-6 col-sm-4 col-md-6 col-lg-4">
  30.                         <strong><i class="fas fa-chevron-right"></i> Name</strong>
  31.                         <br> <span>Information</span>
  32.                     </div>
  33.                     <div class="p-2 col-6 col-sm-4 col-md-6 col-lg-4">
  34.                         <strong><i class="fas fa-chevron-right"></i> Alias</strong>
  35.                         <br> <span>Information</span>
  36.                     </div>
  37.                     <div class="p-2 col-6 col-sm-4 col-md-6 col-lg-4">
  38.                         <strong><i class="fas fa-chevron-right"></i> Gender</strong>
  39.                         <br> <span>Information</span>
  40.                     </div>
  41.                     <div class="p-2 col-6 col-sm-4 col-md-6 col-lg-4">
  42.                         <strong><i class="fas fa-chevron-right"></i> Age</strong>
  43.                         <br> <span>Information</span>
  44.                     </div>
  45.                     <div class="p-2 col-6 col-sm-4 col-md-6 col-lg-4">
  46.                         <strong><i class="fas fa-chevron-right"></i> Birthday</strong>
  47.                         <br> <span>Information</span>
  48.                     </div>
  49.                     <div class="p-2 col-6 col-sm-4 col-md-6 col-lg-4">
  50.                         <strong><i class="fas fa-chevron-right"></i> Race</strong>
  51.                         <br> <span>Information</span>
  52.                     </div>
  53.                     <div class="p-2 col-6 col-sm-4 col-md-6 col-lg-4">
  54.                         <strong><i class="fas fa-chevron-right"></i> Orientation</strong>
  55.                         <br> <span>Information</span>
  56.                     </div>
  57.                     <div class="p-2 col-6 col-sm-4 col-md-6 col-lg-4">
  58.                         <strong><i class="fas fa-chevron-right"></i> Occupation</strong>
  59.                         <br> <span>Information</span>
  60.                     </div>
  61.                     <div class="p-2 col-6 col-sm-4 col-md-6 col-lg-4">
  62.                         <strong><i class="fas fa-chevron-right"></i> Relationship</strong>
  63.                         <br> <span>Information</span>
  64.                     </div>
  65.                     <div class="p-2 col-6 col-sm-4 col-md-6 col-lg-4">
  66.                         <strong><i class="fas fa-chevron-right"></i> Residence</strong>
  67.                         <br> <span>Information</span>
  68.                     </div>
  69.                     <div class="p-2 col-6 col-sm-4 col-md-6 col-lg-4">
  70.                         <strong><i class="fas fa-chevron-right"></i> MBTI</strong>
  71.                         <br> <span>Information</span>
  72.                     </div>
  73.                     <div class="p-2 col-6 col-sm-4 col-md-6 col-lg-4">
  74.                         <strong><i class="fas fa-chevron-right"></i> Owner</strong>
  75.                         <br> <span>Information</span>
  76.                     </div>
  77.                 </div> </div>
  78.                 <!-- ................................. SUMMARY -->
  79.                 <div class="carousel-item"> <div class="bio overflow-auto" style="height: 260px">
  80.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in faucibus nulla, quis luctus augue. Nunc scelerisque laoreet orci nec condimentum. Vestibulum laoreet erat et nunc posuere, vel luctus ex accumsan. Pellentesque ut turpis pretium sapien tincidunt porta. Maecenas odio nisi, suscipit id euismod et, porttitor ut nunc. Nulla facilisi. Sed efficitur vitae lectus quis cursus. Maecenas viverra arcu id viverra fermentum.</p>
  81.                     <p>Duis venenatis interdum mauris et bibendum. Sed euismod metus nec metus aliquet dictum. Aliquam porta ultrices est, et dapibus nisl cursus a. Nullam in lorem aliquet, scelerisque nunc a, luctus ante. Phasellus aliquam ut est finibus molestie. Sed molestie nisl non auctor fermentum. Duis fermentum imperdiet mollis.</p>
  82.                     <p>Etiam ut interdum sem. Pellentesque nec nunc ac lacus vulputate hendrerit sed et nisl. Aliquam aliquam mauris porta, consequat libero at, consequat massa. Curabitur erat purus, accumsan ut feugiat ut, posuere ac ligula. Donec venenatis consequat leo. Suspendisse eget commodo eros, ac vehicula nulla. Suspendisse ut tempus diam. Nunc mollis id dui eget accumsan. Sed elit mauris, ullamcorper a euismod eu, finibus at lectus. Curabitur sit amet nulla id ex condimentum vestibulum. Ut nec porttitor ex. Donec ut erat ullamcorper, tincidunt ipsum vel, aliquet nibh. Praesent malesuada, erat ut aliquam interdum, mauris urna accumsan est, ac auctor sem leo vel tellus. Aliquam aliquet turpis a vulputate interdum. Vestibulum ut metus vel purus tincidunt sodales in quis nulla.</p>
  83.                 </div> </div>
  84.                 <!-- ................................. STATS -->
  85.                 <div class="carousel-item"> <div class="row no-gutters basics overflow-auto" style="height: 260px">
  86.                     <div class="p-2 col-6">
  87.                         <strong><i class="fas fa-chevron-right"></i> Charisma</strong> <br>
  88.                         <div class="my-1 progress"> <div class="progress-bar bg-primary" style="width: 10%"></div> </div>
  89.                     </div>
  90.                     <div class="p-2 col-6">
  91.                         <strong><i class="fas fa-chevron-right"></i> Intelligence</strong> <br>
  92.                         <div class="my-1 progress"> <div class="progress-bar bg-primary" style="width: 20%"></div> </div>
  93.                     </div>
  94.                     <div class="p-2 col-6">
  95.                         <strong><i class="fas fa-chevron-right"></i> Luck</strong> <br>
  96.                         <div class="my-1 progress"> <div class="progress-bar bg-primary" style="width: 30%"></div> </div>
  97.                     </div>
  98.                     <div class="p-2 col-6">
  99.                         <strong><i class="fas fa-chevron-right"></i> Perception</strong> <br>
  100.                         <div class="my-1 progress"> <div class="progress-bar bg-primary" style="width: 40%"></div> </div>
  101.                     </div>
  102.                     <div class="p-2 col-6">
  103.                         <strong><i class="fas fa-chevron-right"></i> Strength</strong> <br>
  104.                         <div class="my-1 progress"> <div class="progress-bar bg-primary" style="width: 50%"></div> </div>
  105.                     </div>
  106.                     <div class="p-2 col-6">
  107.                         <strong><i class="fas fa-chevron-right"></i> Wisdom</strong> <br>
  108.                         <div class="my-1 progress"> <div class="progress-bar bg-primary" style="width: 60%"></div> </div>
  109.                     </div>
  110.                     <div class="p-2 col-6">
  111.                         <strong><i class="fas fa-chevron-right"></i> Offensive</strong> <br>
  112.                         <div class="my-1 progress"> <div class="progress-bar bg-primary" style="width: 70%"></div> </div>
  113.                     </div>
  114.                     <div class="p-2 col-6">
  115.                         <strong><i class="fas fa-chevron-right"></i> Defensive</strong> <br>
  116.                         <div class="my-1 progress"> <div class="progress-bar bg-primary" style="width: 80%"></div> </div>
  117.                     </div>
  118.                 </div> </div>
  119.                 <!-- ................................. end carousel content -->
  120.             </div>
  121.         </div><!-- END CAROUSEL -->
  122.     </div>
  123.    
  124.     <!-- QUOTE -->
  125.     <h1 class="my-2 col-12 display-4 text-center font-italic">
  126.         <i class="fas fa-quote-left text-primary"></i> Quote here... <i class="fas fa-quote-right text-primary"></i>
  127.     </h1>
  128.    
  129.     <!-- INFO CAROUSEL2 -->
  130.     <div class="p-1 col-md-9">
  131.         <div class="carousel slide w-100" id="carousel2" data-ride="false" data-pause="true">
  132.             <!-- NAVS -->
  133.             <div class="row no-gutters">
  134.                 <a class="mr-1 p-1 col btn btn-primary rounded" data-target="#carousel2" data-slide-to="0" role="button">
  135.                     Personality</a>
  136.                 <a class="mr-1 p-1 col btn btn-primary rounded" data-target="#carousel2" data-slide-to="1" role="button">
  137.                     Story</a>
  138.             </div><!-- end navs -->
  139.             <!-- CONTENT -->
  140.             <div class="my-1 carousel-inner">
  141.                 <!-- ................................. SUMMARY -->
  142.                 <div class="carousel-item active"> <div class="bio overflow-auto" style="height: 350px">
  143.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in faucibus nulla, quis luctus augue. Nunc scelerisque laoreet orci nec condimentum. Vestibulum laoreet erat et nunc posuere, vel luctus ex accumsan. Pellentesque ut turpis pretium sapien tincidunt porta. Maecenas odio nisi, suscipit id euismod et, porttitor ut nunc. Nulla facilisi. Sed efficitur vitae lectus quis cursus. Maecenas viverra arcu id viverra fermentum.</p>
  144.                     <p>Duis venenatis interdum mauris et bibendum. Sed euismod metus nec metus aliquet dictum. Aliquam porta ultrices est, et dapibus nisl cursus a. Nullam in lorem aliquet, scelerisque nunc a, luctus ante. Phasellus aliquam ut est finibus molestie. Sed molestie nisl non auctor fermentum. Duis fermentum imperdiet mollis.</p>
  145.                     <p>Etiam ut interdum sem. Pellentesque nec nunc ac lacus vulputate hendrerit sed et nisl. Aliquam aliquam mauris porta, consequat libero at, consequat massa. Curabitur erat purus, accumsan ut feugiat ut, posuere ac ligula. Donec venenatis consequat leo. Suspendisse eget commodo eros, ac vehicula nulla. Suspendisse ut tempus diam. Nunc mollis id dui eget accumsan. Sed elit mauris, ullamcorper a euismod eu, finibus at lectus. Curabitur sit amet nulla id ex condimentum vestibulum. Ut nec porttitor ex. Donec ut erat ullamcorper, tincidunt ipsum vel, aliquet nibh. Praesent malesuada, erat ut aliquam interdum, mauris urna accumsan est, ac auctor sem leo vel tellus. Aliquam aliquet turpis a vulputate interdum. Vestibulum ut metus vel purus tincidunt sodales in quis nulla.</p>
  146.                 </div> </div>
  147.                 <!-- ................................. STORY -->
  148.                 <div class="carousel-item"> <div class="bio overflow-auto" style="height: 350px">
  149.                    
  150.                     <h1 class="m-0 display-4 text-secondary">Header</h1>
  151.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis faucibus ipsum quis dapibus. Mauris quis maximus erat, non porttitor lectus. Phasellus facilisis condimentum aliquam. Nunc magna quam, ullamcorper eu interdum quis, facilisis a eros. Nulla vestibulum urna imperdiet est aliquet condimentum. Etiam tempus nec ligula eget sodales. Maecenas vitae urna augue. Cras volutpat eu ligula quis volutpat. Cras eget leo ac urna porttitor porta.</p>
  152.                     <p>Fusce tincidunt eros vitae tellus hendrerit iaculis. Morbi scelerisque ex quis tellus accumsan, id gravida lectus sollicitudin. Pellentesque viverra tristique augue at luctus. Quisque ac ligula ac leo luctus pulvinar. Phasellus porta elit at leo gravida pretium. Suspendisse at tincidunt magna. Fusce at velit justo.</p>
  153.                    
  154.                     <h1 class="m-0 display-4 text-secondary">Header</h1>
  155.                     <p>Ut gravida nulla nunc, a tristique leo accumsan non. Integer eget lacus malesuada nisl efficitur fermentum eleifend a orci. Vestibulum non orci hendrerit, vehicula est feugiat, lacinia neque. Nulla eu eleifend velit, a aliquet sapien. Fusce libero justo, molestie et hendrerit nec, tincidunt in lectus. Aenean luctus ipsum dictum libero sagittis, vel hendrerit dolor vehicula.</p>
  156.                     <p>Curabitur blandit orci urna, eu interdum mi suscipit eget. Integer a tellus id lorem iaculis imperdiet ut nec mi. In risus ligula, tempus gravida erat a, commodo ornarercu. Donec sed dolor in justo cursus faucibus. Fusce nisi leo, auctor convallis lectus nec, volutpat posuere lorem.</p>
  157.                    
  158.                     <h1 class="m-0 display-4 text-secondary">Header</h1>
  159.                     <p>Duis sed ex et elit rutrum auctor non elementum purus. Donec at ultrices metus. Vestibulum efficitur, purus quis posuere lobortis, metus magna consequat nunc, id rutrum purus justo eget lacus. Quisque dictum leo in mauris ultrices, ut lobortis nibh facilisis. Quisque quis feugiat ligula. Aliquam rutrum ullamcorper sapien sit amet maximus. Nullam vel vehicula lorem, dictum lobortis tortor. Aliquam sed elementum lacus, at pellentesque sem. Donec elit orci, bibendum quis enim non, mattis dignissim elit. Aenean sit amet porta sem. Duis varius neque sit amet augue bibendum auctor. Morbi ut tristique sem. Cras egestas justo ac orci varius maximus. Sed quis velit ligula. Nullam augue risus, vulputate et imperdiet ut, gravida sit amet eros.</p>
  160.                    
  161.                 </div> </div>
  162.                 <!-- ................................. end carousel content -->
  163.             </div>
  164.         </div><!-- END CAROUSEL -->
  165.     </div>
  166.     <!-- MOODBOARD -->
  167.     <div class="p-1 col-md-3"> <div class="row no-gutters">
  168.         <div class="pb-1 pr-1 pr-md-0 col-4 col-md-12">
  169.             <div style="background-image: url('IMG_LINK');" class="moodboard"></div> </div>
  170.         <div class="pb-1 pr-1 pr-md-0 col-4 col-md-12">
  171.             <div style="background-image: url('IMG_LINK');" class="moodboard"></div> </div>
  172.         <div class="pb-1 col-4 col-md-12">
  173.             <div style="background-image: url('IMG_LINK');" class="moodboard"></div> </div>
  174.     </div> </div>
  175.    
  176.     <!-- LIKES -->
  177.     <div class="p-1 col-md-4">
  178.         <h1 class="m-0 display-4 text-secondary">Likes</h1>
  179.         <ul class="m-0 pl-4">
  180.             <li>Info</li>
  181.             <li>Info</li>
  182.             <li>Info</li>
  183.             <li>Info</li>
  184.         </ul>
  185.     </div>
  186.     <!-- DISLIKES -->
  187.     <div class="p-1 col-md-4">
  188.         <h1 class="m-0 display-4 text-secondary">Dislikes</h1>
  189.         <ul class="m-0 pl-4">
  190.             <li>Info</li>
  191.             <li>Info</li>
  192.             <li>Info</li>
  193.             <li>Info</li>
  194.         </ul>
  195.     </div>
  196.     <!-- SKILLS -->
  197.     <div class="p-1 col-md-4">
  198.         <h1 class="m-0 display-4 text-secondary">Skills</h1>
  199.         <ul class="m-0 pl-4">
  200.             <li>Info</li>
  201.             <li>Info</li>
  202.             <li>Info</li>
  203.             <li>Info</li>
  204.         </ul>
  205.     </div>
  206.    
  207.     <!-- TRIVIA -->
  208.     <div class="p-1 col-12">
  209.         <h1 class="m-0 display-4 text-secondary">Trivia</h1>
  210.         <ul class="m-0 pl-4">
  211.             <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere sollicitudin ligula, vulputate euismod ligula scelerisque ut.</li>
  212.             <li>Sed in lacus scelerisque, sagittis mi nec, lacinia purus. Maecenas urna magna, luctus ut est eget, aliquam gravida sem.</li>
  213.             <li>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</li>
  214.             <li>Praesent imperdiet vel neque sed tincidunt. Sed in egestas nibh, et facilisis risus. Mauris vestibulum blandit urna et hendrerit.</li>
  215.             <li>Donec non pellentesque dui. Maecenas magna felis, bibendum quis volutpat sed, venenatis sit amet risus. Sed id ex velit.</li>
  216.         </ul>
  217.     </div>
  218.    
  219.     <!-- RELATIONSHIPS -->
  220.     <div class="p-1 col-12">
  221.         <h1 class="m-0 display-4 text-secondary">Relationships</h1>
  222.         <div class="row no-gutters relationship">
  223.             <!-- PERSON -->
  224.             <div class="p-1 col-md-6">
  225.                 <img src="IMG_LINK" class="m-1 mr-md-2">
  226.                
  227.                 <h2 class="m-0"><a href="LINK">Name - <span>relationship</span></a></h2>
  228.                 <p>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.</p>
  229.             </div>
  230.             <!-- PERSON -->
  231.             <div class="p-1 col-md-6">
  232.                 <img src="IMG_LINK" class="m-1 mr-md-2">
  233.                
  234.                 <h2 class="m-0"><a href="LINK">Name - <span>relationship</span></a></h2>
  235.                 <p>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.</p>
  236.             </div>
  237.             <!-- PERSON -->
  238.             <div class="p-1 col-md-6">
  239.                 <img src="IMG_LINK" class="m-1 mr-md-2">
  240.                
  241.                 <h2 class="m-0"><a href="LINK">Name - <span>relationship</span></a></h2>
  242.                 <p>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.</p>
  243.             </div>
  244.             <!-- PERSON -->
  245.             <div class="p-1 col-md-6">
  246.                 <img src="IMG_LINK" class="m-1 mr-md-2">
  247.                
  248.                 <h2 class="m-0"><a href="LINK">Name - <span>relationship</span></a></h2>
  249.                 <p>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.</p>
  250.             </div>
  251.         </div>
  252.     </div>
  253.    
  254.     <!-- GALLERY TITLE -->
  255.     <div class="p-1 col-12">
  256.         <h1 class="m-0 display-4 text-secondary">Gallery</h1>
  257.     </div>
  258.    
  259.     <!-- END PROFILE .................................................. -->
  260. </div>
  261.  
  262. <a href="/SparklyCodes" data-toggle="tooltip" title="CSS + HTML by SparklyCodes" class="credit"><i class="fas fa-code"></i></a>
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!