Advertisement
meromerc

(Eat That Up) It's Good For You

Apr 16th, 2024
628
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 19.77 KB | None | 0 0
  1. <!--
  2.  
  3.    EAT THAT UP, IT'S GOOD FOR YOU
  4.    
  5.    a code by meromercury
  6.    
  7.    created: 05/26/20 // updated: 2/25/23 // made free: 4/16/24
  8.    
  9.    Accent color: #5FBBFB
  10.    CTRL+F to change
  11.  
  12.  
  13. -->
  14.  
  15. <div class="container">
  16. <div class="mx-auto" style="font-size:14px;max-width:950px;">
  17.  
  18. <div class="row no-gutters">
  19.  
  20. <!-- LEFT IMAGE -->
  21.   <div class="col-md-4 no-gutters">
  22.     <div class="col-lg-12 p-1">
  23.      <div style="position:absolute;background: url(https://images.pexels.com/photos/753266/pexels-photo-753266.jpeg) center;border-radius:10px;background-size:cover;min-height:610px;width:100%;z-index:-1;">
  24.      </div>
  25.     </div>
  26.   </div>
  27.  
  28.  
  29. <div class="col-lg-8 no-gutters">
  30. <div class="col-lg-12 p-1 pl-3">
  31.  
  32. <!----- TAB BUTTONS ----->
  33.  
  34. <ul class="nav nav-tabs card-header-tabs row mb-1">
  35.     <li class="col-3 mb-1 pr-1"><a class="btn bg-faded btn-block text-white active" style="background-color:#5FBBFB;" data-toggle="tab" href="#tab1"> <i class="fas fa-user fa-2x"></i>  </a></li>
  36.     <li class="col-3 mb-1 pl-1 pr-1"><a class="btn bg-faded btn-block text-white" style="background-color:#5FBBFB;" data-toggle="tab" href="#tab2"> <i class="fad fa-stars fa-2x"></i>  </a></li>  
  37.     <li class="col-3 mb-1 pl-1 pr-1"><a class="btn bg-faded btn-block text-white" style="background-color:#5FBBFB;" data-toggle="tab" href="#tab3"> <i class="fad fa-books fa-2x"></i>  </a></li>
  38.     <li class="col-3 mb-1 pl-1"><a class="btn bg-faded btn-block text-white" style="background-color:#5FBBFB;" data-toggle="tab" href="#tab4">  <i class="fad fa-user-friends fa-2x"></i>  </a></li>
  39. </ul>
  40.  
  41. <div class="bg-faded p-3 mb-2 h-100" style="border-radius:10px;min-height:556px">
  42.   <div class="tab-content">
  43.  
  44. <!----------- TAB 1 ----------->
  45.  
  46. <div class="tab-pane fade active show" id="tab1">
  47. <div class="row no-gutters container-fluid p-0" style="height:520px">
  48. <div id="accordion">
  49.  
  50.   <div class="col-lg-12 container-fluid overflow-hidden p-0 mb-2 mx-0">
  51.     <div role="tab">
  52.       <a class="btn btn-secondary btn-block border-0 mb-2 p-2" data-toggle="collapse" data-target="#accordion1" style="color:#5FBBFB; font-size:1.6rem; height:48px">
  53.         About
  54.       </a>
  55.     </div>
  56.  
  57.     <div id="accordion1" class="collapse show" data-parent="#accordion">
  58.     <div class="card card-block border-0">
  59.     <div class="col-12 h-100 p-2 table-responsive container-fluid" style="max-height:300px;min-height:300px">
  60.     <p>Artwork by a deactivated user. These sections scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus vehicula eros a rhoncus. Aenean auctor pallentesque elit, ut feugiat nibh molestie eu. Nunc sit amet lacus accumsan, tempus leo eu, condimentum mi. Morbi vitae ultrices sem. Aliquam euismod justo in nibh consectetur, id posuere eros viverra. In eu arcu semper, efficitur erat efficitur, faucibus mi. Duis varius rutrum arcu, eget blandit tortor convallis at. Etiam diam elit, mattis non leo eu, pharetra mattis urna.</p>
  61.    
  62.     <p>Nunc posuere lacus eget nisl faucibus venenatis. Donec lorem sapien, scelerisque in quam ac, condimentum mollis nisl. Donec pharetra tincidunt sem a dapibus. Mauris auctor, turpis id tristique rhoncus, metus diam vulputate ligula, eget elementum tellus neque ac metus. Donec ornare tellus interdum diam venenatis porta. Donec convallis ex in est luctus ornare. </p>
  63.     </div></div>
  64.     </div>
  65.   </div>
  66.  
  67.   <div class="col-lg-12 container-fluid overflow-hidden p-0 mb-2 mx-0">
  68.     <div role="tab">
  69.       <a class="btn btn-secondary btn-block border-0 mb-2 p-2" data-toggle="collapse" data-target="#accordion2" style="color:#5FBBFB; font-size:1.6rem; height:48px">
  70.         Appearance
  71.       </a>
  72.     </div>
  73.  
  74.     <div id="accordion2" class="collapse" data-parent="#accordion">
  75.     <div class="card card-block border-0">
  76.     <div class="col-12 h-100 p-2 table-responsive container-fluid" style="max-height:300px;min-height:300px">
  77.     <p>Maecenas sit amet enim convallis, congue quam non, dapibus ante. Maecenas eleifend sapien at eros efficitur, et laoreet dolor mollis. Praesent aliquam, massa vitae posuere mattis, quam ligula pulvinar leo, vel porttitor ex leo sed erat. Aliquam nec purus vel enim tristique pharetra cursus nec ligula. Fusce ex erat, consequat at imperdiet sit amet, convallis eget quam. Ut finibus dolor dui, non condimentum quam tempor et.</p>
  78.    
  79.     <p>Proin dapibus, ligula id condimentum consequat, arcu lectus ultrices enim, nec ultricies felis augue quis orci. Ut eu neque a dolor posuere rhoncus. Donec nec ex nec risus tincidunt fringilla in vel nunc. Vivamus fermentum pharetra suscipit. Morbi sodales tortor sit amet convallis auctor. Aenean turpis metus, commodo vitae congue eget, rutrum vitae ipsum. Nam augue dolor, sollicitudin commodo tempor vel, tincidunt ut erat.</p>
  80.  
  81.     <p>Phasellus aliquam quam imperdiet, tempor erat in, pretium nisl. Praesent non magna et nisi dictum ultrices ac id ipsum. Pellentesque id eros sed enim dignissim maximus at non justo. Donec nec maximus mi, eu tincidunt sem. Aliquam turpis sem, efficitur hendrerit sem id, lacinia tempor dolor. Nunc convallis arcu odio, id rutrum leo pharetra a. Morbi dapibus ultrices dolor sed consequat. </p>
  82.     </div></div>
  83.     </div>
  84.   </div>
  85.  
  86.   <div class="col-lg-12 container-fluid overflow-hidden p-0 mb-2 mx-0">
  87.     <div role="tab">
  88.       <a class="btn btn-secondary btn-block border-0 mb-2 p-2" data-toggle="collapse" data-target="#accordion3" style="color:#5FBBFB; font-size:1.6rem; height:48px">
  89.         Quirk
  90.       </a>
  91.     </div>
  92.  
  93.     <div id="accordion3" class="collapse" data-parent="#accordion">
  94.     <div class="card card-block border-0">
  95.     <div class="col-12 h-100 p-2 table-responsive container-fluid" style="max-height:300px;min-height:300px">
  96.     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus vehicula eros a rhoncus. Aenean auctor pellentesque elit, ut feugiat nibh molestie eu. Nunc sit amet lacus accumsan, tempus leo eu, condimentum mi. Morbi vitae ultrices sem. Aliquam euismod justo in nibh consectetur, id posuere eros viverra.</p>
  97.    
  98.     <p>Examples:</p>
  99.    
  100.     <ul>
  101.       <li style="list-style-type: circle">And so you're drinking in your room (To make it all go)</li>
  102.       <li style="list-style-type: circle">It didn't end too soon (You've got the next one)</li>
  103.       <li style="list-style-type: circle">You're holding on too long (You've gotta let go)</li>
  104.       <li style="list-style-type: circle">Your other love is gone, and you know</li>
  105.     </ul>
  106.     </div></div>
  107.     </div>
  108.   </div>
  109.  
  110. </div>
  111.  
  112. </div>
  113. </div>
  114. <!--------- END TAB 1 --------->
  115.  
  116.  
  117. <!----------- TAB 2 ----------->
  118. <div class="tab-pane fade" id="tab2">
  119. <div class="no-gutters container-fluid table-responsive p-2" style="height:520px">
  120.  
  121. <div class="card card-block border-0 p-2 mb-3">
  122.   <div class="row no-gutters">
  123.   <div class="col-sm">
  124.     <ul class="list-group list-group-flush">
  125.         <li class="list-group-item d-flex justify-content-between">
  126.           <i class="fas fa-user"></i>
  127.           Name</li>
  128.         <li class="list-group-item d-flex justify-content-between">
  129.           <i class="fad fa-id-card"></i>
  130.           Pronunciation</li>
  131.         <li class="list-group-item d-flex justify-content-between">
  132.           <i class="far fa-transgender"></i>
  133.           Gender</li>
  134.         <li class="list-group-item d-flex justify-content-between">
  135.           <i class="far fa-signature"></i>
  136.           Pronouns</li>
  137.         <li class="list-group-item d-flex justify-content-between">
  138.           <i class="fad fa-heart"></i>
  139.           Sexuality</li>
  140.       </ul>
  141.   </div>
  142.  
  143.   <div class="col-auto p-2 hidden-xs-down">
  144.     <div class="card h-100" style="border-width:1px"></div>
  145.   </div>
  146.  
  147.   <div class="col-sm">
  148.     <ul class="list-group list-group-flush">
  149.         <li class="list-group-item d-flex justify-content-between">
  150.           <i class="fad fa-clock"></i>
  151.           Age</li>
  152.         <li class="list-group-item d-flex justify-content-between">
  153.           <i class="fad fa-ruler"></i>
  154.           Height</li>
  155.         <li class="list-group-item d-flex justify-content-between">
  156.           <i class="far fa-moon"></i>
  157.           Dream Moon / Zodiac</li>
  158.         <li class="list-group-item d-flex justify-content-between">
  159.           <i class="fad fa-tint"></i>
  160.           Bloodcolor / Species</li>
  161.         <li class="list-group-item d-flex justify-content-between">
  162.           <i class="far fa-male"></i>
  163.           Class of Aspect</li>
  164.       </ul>
  165.   </div>
  166.   </div>
  167. </div>
  168.  
  169.   <div class="card card-block border-0 p-3 mb-3">
  170.     <div class="col-lg-12 mb-1">
  171.       <span>Introvert</span>
  172.       <span class="pull-right">Extrovert</span>
  173.     </div>
  174.   <div class="progress mb-3"><div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="background-color:#5FBBFB;width:50%;height:16px"></div></div>
  175.  
  176.     <div class="col-lg-12 mb-1">
  177.       <span>Observant</span>
  178.       <span class="pull-right">Intuitive</span>
  179.     </div>
  180.   <div class="progress mb-3"><div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="background-color:#5FBBFB;width:50%;height:16px"></div></div>
  181.  
  182.     <div class="col-lg-12 mb-1">
  183.       <span>Thinking</span>
  184.       <span class="pull-right">Feeling</span>
  185.     </div>
  186.   <div class="progress mb-3"><div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="background-color:#5FBBFB;width:50%;height:16px"></div></div>
  187.  
  188.     <div class="col-lg-12 mb-1">
  189.       <span>Judging</span>
  190.       <span class="pull-right">Prospecting</span>
  191.     </div>
  192.   <div class="progress"><div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="background-color:#5FBBFB;width:50%;height:16px"></div></div>
  193.   </div>
  194.  
  195.  
  196. <div class="row m-0 mb-3">
  197.  
  198.   <div class="col-6 p-0 pr-1">
  199.     <div class="card border-0 p-3">
  200.       <ul class="list-group list-group-flush table-responsive" style="max-height:276px">
  201.           <li class="list-group-item d-flex justify-content-around p-2">
  202.             <h2 style="color:#5FBBFB">Likes</h2></li>
  203.           <li class="list-group-item d-flex justify-content-between">
  204.             <i class="fas fa-check fa-lg"></i>
  205.             Yes</li>
  206.           <li class="list-group-item d-flex justify-content-between">
  207.             <i class="fas fa-check fa-lg"></i>
  208.             Yes</li>
  209.           <li class="list-group-item d-flex justify-content-between">
  210.             <i class="fas fa-check fa-lg"></i>
  211.             Yes</li>
  212.           <li class="list-group-item d-flex justify-content-between">
  213.             <i class="fas fa-check fa-lg"></i>
  214.             Yes</li>
  215.           <li class="list-group-item d-flex justify-content-between">
  216.             <i class="fas fa-check fa-lg"></i>
  217.             Yes</li>
  218.       </ul>
  219.     </div>
  220.   </div>
  221.  
  222.   <div class="col-6 p-0 pl-1">
  223.     <div class="card border-0 p-3">
  224.       <ul class="list-group list-group-flush table-responsive" style="max-height:276px">
  225.           <li class="list-group-item d-flex justify-content-around p-2">
  226.             <h2 style="color:#5FBBFB">Dislikes</h2></li>
  227.           <li class="list-group-item d-flex justify-content-between">
  228.             <i class="fas fa-times fa-lg"></i>
  229.             No</li>
  230.           <li class="list-group-item d-flex justify-content-between">
  231.             <i class="fas fa-times fa-lg"></i>
  232.             No</li>
  233.           <li class="list-group-item d-flex justify-content-between">
  234.             <i class="fas fa-times fa-lg"></i>
  235.             No</li>
  236.           <li class="list-group-item d-flex justify-content-between">
  237.             <i class="fas fa-times fa-lg"></i>
  238.             No</li>
  239.           <li class="list-group-item d-flex justify-content-between">
  240.             <i class="fas fa-times fa-lg"></i>
  241.             No</li>
  242.       </ul>
  243.     </div>
  244.   </div>
  245. </div>
  246.  
  247. <div class="card card-block border-0 p-3">
  248.   <iframe width="520" height="240" src="https://www.youtube.com/embed/gcmlshqyQ_s" frameborder="0" class="m-auto"></iframe>
  249. </div>
  250.  
  251.   <!--
  252.  for playlists, copy everything after ?list= and paste at the end:
  253.  https://www.youtube.com/embed/videoseries?
  254.  ^^ then add to src=
  255.  
  256.  for songs, right click -> embed code and add to src
  257.  -->
  258.  
  259. </div>
  260. </div>
  261. <!--------- END TAB 2 --------->
  262.  
  263.  
  264. <!----------- TAB 3 ----------->
  265. <div class="tab-pane fade" id="tab3">
  266.  
  267. <div class="row no-gutters container-fluid table-responsive p-2" style="height:520px">
  268.  
  269.   <div class="row card card-block border-0 container-fluid table-responsive m-0 p-3 mb-3">
  270.       <div class="col-12 m-0 p-0 container-fluid mh-100">
  271.         <span class="pull-left"><i class="fas fa-quote-left fa-lg"></i></span>
  272.         <span class="pull-right"><i class="fas fa-quote-right fa-lg"></i></span>
  273.         <h2 style="color:#5FBBFB" class="text-center p-0 my-0 mx-2">It's too late, it's too late / You've got another one coming and it's gonna be the same</h2>
  274.         </div>
  275.   </div>
  276.  
  277.  
  278.   <div class="col-lg-12 card card-block border-0 container-fluid table-responsive m-0 p-3 mb-3">
  279.       <h2 style="color:#5FBBFB" class="text-center px-1 pt-1">Biography</h2>
  280.  
  281.     <hr class="w-75 my-1">
  282.     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus vehicula eros a rhoncus. Aenean auctor pallentesque elit, ut feugiat nibh molestie eu. Nunc sit amet lacus accumsan, tempus leo eu, condimentum mi. Morbi vitae ultrices sem. Aliquam euismod justo in nibh consectetur, id posuere eros viverra. In eu arcu semper, efficitur erat efficitur, faucibus mi. Duis varius rutrum arcu, eget blandit tortor convallis at. Etiam diam elit, mattis non leo eu, pharetra mattis urna.</p>
  283.    
  284.     <p>Nunc posuere lacus eget nisl faucibus venenatis. Donec lorem sapien, scelerisque in quam ac, condimentum mollis nisl. Donec pharetra tincidunt sem a dapibus. Mauris auctor, turpis id tristique rhoncus, metus diam vulputate ligula, eget elementum tellus neque ac metus. Donec ornare tellus interdum diam venenatis porta. Donec convallis ex in est luctus ornare. </p>
  285.   </div>
  286.  
  287.  
  288.   <div class="col-lg-12 card card-block border-0 container-fluid table-responsive m-0 p-3 mb-3">
  289.       <h2 style="color:#5FBBFB" class="text-center px-1 pt-1">Personality</h2>
  290.  
  291.     <hr class="w-75 my-1">
  292.     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus vehicula eros a rhoncus. Aenean auctor pallentesque elit, ut feugiat nibh molestie eu. Nunc sit amet lacus accumsan, tempus leo eu, condimentum mi. Morbi vitae ultrices sem. Aliquam euismod justo in nibh consectetur, id posuere eros viverra. In eu arcu semper, efficitur erat efficitur, faucibus mi. Duis varius rutrum arcu, eget blandit tortor convallis at. Etiam diam elit, mattis non leo eu, pharetra mattis urna.</p>
  293.    
  294.     <p>Nunc posuere lacus eget nisl faucibus venenatis. Donec lorem sapien, scelerisque in quam ac, condimentum mollis nisl. Donec pharetra tincidunt sem a dapibus. Mauris auctor, turpis id tristique rhoncus, metus diam vulputate ligula, eget elementum tellus neque ac metus. Donec ornare tellus interdum diam venenatis porta. Donec convallis ex in est luctus ornare. </p>
  295.   </div>
  296.  
  297.   <div class="col-lg-12 card card-block border-0 container-fluid table-responsive m-0 p-3">
  298.       <h2 style="color:#5FBBFB" class="text-center px-1 pt-1">Trivia</h2>
  299.     <hr class="w-75 my-1">
  300.  
  301.     <ul>
  302.       <li style="list-style-type: circle">I tried to find a quiet place that we could go</li>
  303.       <li style="list-style-type: circle">To help you make decisions</li>
  304.       <li style="list-style-type: circle">But I didn't find it easy to tell them apart</li>
  305.       <li style="list-style-type: circle">With double vision</li>
  306.     </ul>
  307.   </div>
  308.  
  309.  
  310. </div>
  311. </div>
  312. <!--------- END TAB 3 --------->
  313.  
  314.  
  315. <!----------- TAB 4 ----------->
  316. <div class="tab-pane fade" id="tab4">
  317.  
  318. <div class="row no-gutters container-fluid table-responsive" style="height:520px">
  319.  
  320. <div class="row">
  321. <div class="col-md-3 text-center mb-3 h-100 p-1">
  322.      <img src="https://i.imgur.com/XNO9z5Q.png" class="rounded-circle" style="max-width:130px;max-height:130px">
  323.  </div>
  324.  
  325. <div class="col-md-9">
  326.     <div class="col-md-12 p-1" style="min-height:167px;font-size:13px;">
  327.      
  328.       <span class="pull-right" style="font-size:19px">
  329.         <i class="fas fa-heart"></i>
  330.         <i class="fas fa-heart"></i>
  331.         <i class="fas fa-heart"></i>
  332.         <i class="far fa-heart"></i>
  333.         <i class="far fa-heart"></i>
  334.       </span>
  335.      
  336.         <h2 class="text-left mb-0"><a href="CHARACTER LINK" style="color:#5FBBFB">Name</a></h2>
  337.         <p class="text-muted mb-1" style="font-size:14px">Relationship</p>
  338.        
  339.         <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nibh dolor, pellentesque placerat faucibus eget, pretium non augue. Maecenas enim justo, gravida eget luctus sed, dictum et ex. Proin ut nisi eget libero condimentum mollis. Morbi maximus sapien ut ex malesuada mollis. Pellentesque rutrum velit id risus accumsan, vitae consequat risus eleifend.</p>
  340.     </div>
  341. </div>
  342. </div>
  343.  
  344.     <hr class="w-100 my-3 mx-1">
  345.  
  346. <div class="row">
  347. <div class="col-md-3 text-center mb-3 h-100 p-1">
  348.      <img src="https://i.imgur.com/XNO9z5Q.png" class="rounded-circle" style="max-width:130px;max-height:130px">
  349.  </div>
  350.  
  351. <div class="col-md-9">
  352.     <div class="col-md-12 p-1" style="min-height:167px;font-size:13px;">
  353.      
  354.       <span class="pull-right" style="font-size:19px">
  355.         <i class="fas fa-heart"></i>
  356.         <i class="fas fa-heart"></i>
  357.         <i class="fas fa-heart"></i>
  358.         <i class="far fa-heart"></i>
  359.         <i class="far fa-heart"></i>
  360.       </span>
  361.      
  362.         <h2 class="text-left mb-0"><a href="CHARACTER LINK" style="color:#5FBBFB">Name</a></h2>
  363.         <p class="text-muted mb-1" style="font-size:14px">Relationship</p>
  364.         <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nibh dolor, pellentesque placerat faucibus eget, pretium non augue. Maecenas enim justo, gravida eget luctus sed, dictum et ex. Proin ut nisi eget libero condimentum mollis. Morbi maximus sapien ut ex malesuada mollis. Pellentesque rutrum velit id risus accumsan, vitae consequat risus eleifend.</p>
  365.     </div>
  366. </div>
  367. </div>
  368.  
  369.     <hr class="w-100 my-3 mx-1">
  370.  
  371. <div class="row">
  372. <div class="col-md-3 text-center mb-3 h-100 p-1">
  373.      <img src="https://i.imgur.com/XNO9z5Q.png" class="rounded-circle" style="max-width:130px;max-height:130px">
  374.  </div>
  375.  
  376. <div class="col-md-9">
  377.     <div class="col-md-12 p-1" style="min-height:167px;font-size:13px;">
  378.      
  379.       <span class="pull-right" style="font-size:19px">
  380.         <i class="fas fa-heart-broken"></i>
  381.         <i class="fas fa-heart-broken"></i>
  382.         <i class="fas fa-heart-broken"></i>
  383.         <i class="far fa-heart"></i>
  384.         <i class="far fa-heart"></i>
  385.       </span>
  386.      
  387.         <h2 class="text-left mb-0"><a href="CHARACTER LINK" style="color:#5FBBFB">Name</a></h2>
  388.         <p class="text-muted mb-1" style="font-size:14px">Relationship</p>
  389.         <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nibh dolor, pellentesque placerat faucibus eget, pretium non augue. Maecenas enim justo, gravida eget luctus sed, dictum et ex. Proin ut nisi eget libero condimentum mollis. Morbi maximus sapien ut ex malesuada mollis. Pellentesque rutrum velit id risus accumsan, vitae consequat risus eleifend.</p>
  390.     </div>
  391. </div>
  392. </div>
  393.  
  394. </div>
  395. </div>
  396. <!--------- END TAB 4 --------->
  397.  
  398. </div>
  399. </div>
  400.  
  401. </div>
  402. </div>
  403. </div>
  404.  
  405. </div>
  406. </div>
  407.  
  408. <!----- my credit! please don't touch this ----->
  409. <div class="m-1 text-center text-primary" style="font-size:14px">
  410. <a target="_blank" href="https://toyhou.se/meromercury" data-toggle="tooltip" title="made by cass" style="color:#A4A4A4;font-weight:600"><i class="fal fa-code"></i></a></div>
  411.  
  412. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement