API tools faq
paste
Possibbly

Lunchbox

Possibbly
Mar 21st, 2022
1,849
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 18.50 KB | None | 0 0
raw download clone embed print report
  1. <!----
  2.  
  3.  
  4. -- Button 1: #FFBAD2
  5. -- Button 2: #FFC0BA
  6. -- Button 3: #FFD4BA
  7. -- Button 4: #FFE3BA
  8.  
  9. -- Main Color: #EBEBEB
  10. -- "Faded" Color: #DCDCDC
  11. -- <hr> Color: #F1F1F1
  12.  
  13. -- Text Color: #2D2A2F
  14. ---->
  15.  
  16.  
  17. <div class="container">
  18.    <div class="row">
  19.       <div class="container py-3 col-lg-4 col-md-sm-12 rounded mb-sm-2 mb-xs-2" style="border: 6px solid #EBEBEB;">
  20.          
  21.           <!------------------------- SIDE IMAGE ------------------------>
  22.          
  23.          <div class="container" style="background:#EBEBEB;height:516px;
  24.            background-image:url('https://via.placeholder.com/300x450');
  25.            background-size:cover; background-position: top center;repeat:no-repeat;">
  26.          </div>
  27.  
  28.          <!------------------------- SIDE IMAGE END --------------------->
  29.         </div>
  30.        
  31.        
  32.        
  33.         <!---
  34.        Like I've stated previously I am very much so still a beginner when it comes to HTML
  35.        and I, for the life of me, cannot figure out how to get these buttons organized and functional
  36.        on both mobile AND desktop. So there are two sets. This is the main reason that this
  37.        code has taken so so so so long to be released. :/
  38.        
  39.        You shouldn't need to do ANYTHING to these buttons besides changing the titles and font-awesome icons.
  40.        -->
  41.        
  42.        
  43.       <!------------------------- DESKTOP BUTTONS --------------------->
  44.       <div class="container col-lg-8 col-md-12 col-sm-12 mt-md-2 mt-sm-2 mt-lg-0 mt-xl-0">
  45.  
  46.          <ul class="nav row no-gutters hidden-md-down">
  47.             <li class="nav-item col-md col-auto mr-1 mb-2 col-sm-12" style="background:#FFBAD2;border-top-left-radius:10px;"><a class="btn border-0 text-white nav-link active" data-toggle="tab" href="#one">
  48.                <i class="fas fa-stars" style="font-size:28px;"></i></a>
  49.             </li>
  50.             <li class="nav-item col-md col-auto mx-1 mb-2 col-sm-12" style="background:#FFC0BA"><a class="btn border-0 text-white nav-link" data-toggle="tab" href="#two">
  51.                <i class="fas fa-books" style="font-size:28px;"></i></a>
  52.             </li>
  53.             <li class="nav-item col-md col-auto mx-1 mb-2 col-sm-12" style="background:#FFD4BA"><a class="btn border-0 text-white nav-link" data-toggle="tab" href="#three">
  54.                <i class="fas fa-users" style="font-size:28px;"></i></a>
  55.             </li>
  56.             <li class="nav-item col-auto ml-1 mb-2" style="background:#FFE3BA;border-top-right-radius:10px;"><a class="btn border-0 text-white nav-link" href="#">
  57.                <iframe src="https://www.youtube.com/embed/ID_HERE?modestbranding=1" style="position:absolute; top: 0; bottom:0; left:0; right:0; opacity:.001" class="h-100 w-100" frameborder="0"></iframe>
  58.                <i class="fas fa-music fa-fw" style="font-size:28px;"/></a>
  59.             </li>
  60.          </ul>
  61.          
  62.          
  63.          <!------------------------- MOBILE BUTTONS --------------------->
  64.          <ul class="nav row no-gutters hidden-sm-up mr-2 mt-2">
  65.             <li class="nav-item mx-1 mb-2 col-12" style="background:#FFBAD2;"><a class="btn border-0 text-white nav-link active" data-toggle="tab" href="#one">
  66.                <i class="fas fa-stars" style="font-size:28px;"></i></a>
  67.             </li>
  68.             <li class="nav-item mx-1 mb-2 col-12" style="background:#FFC0BA"><a class="btn border-0 text-white nav-link" data-toggle="tab" href="#two">
  69.                <i class="fas fa-books" style="font-size:28px;"></i></a>
  70.             </li>
  71.             <li class="nav-item mx-1 mb-2 col-12" style="background:#FFD4BA"><a class="btn border-0 text-white nav-link" data-toggle="tab" href="#three">
  72.                <i class="fas fa-users" style="font-size:28px;"></i></a>
  73.             </li>
  74.  
  75.          </ul>
  76.          
  77.                      
  78.             <!------------------------------------------------------ TAB ONE -------------------------------------------------------->
  79.          <div class="tab-content">
  80.             <div class="tab-pane fade active show" id="one">
  81.                <div class="card border-0 p-lg-3 col-lg col-md col-sm-12" style="background:#EBEBEB;max-height:700px;border-bottom-right-radius:10px;
  82.                  border-bottom-left-radius:10px;">
  83.                   <div class="row">
  84.  
  85.                      
  86.                      <div class="card col-5 border-0 px-2 mx-auto mt-3" style="background-color:#DCDCDC;color:#2D2A2F;">
  87.    <div>
  88.                            <span class="text-uppercase">
  89.                            <i class="fas fa-user mr-2 ml-1 my-2 mt-3 hidden-sm-down"></i>
  90.                            name</span>
  91.                            <span class="pull-right mr-2 mt-2">Content</span>
  92.                            <hr class="my-2" style="border-color: #F1F1F1;">
  93.                         </div>
  94.                         <div>
  95.                            <span class="text-uppercase">
  96.                            <i class="far fa-calendar-alt mr-2 ml-1 my-2 hidden-sm-down"></i>
  97.                            age</span>
  98.                            <span class="pull-right mr-2">Content</span>
  99.                            <hr class="my-2" style="border-color: #F1F1F1;">
  100.                         </div>
  101.                         <div>
  102.                            <span class="text-uppercase">
  103.                            <i class="fas fa-venus-mars mr-2 ml-1 my-2 hidden-sm-down"></i>
  104.                            gender</span>
  105.                            <span class="pull-right mr-2">Content</span>
  106.                            <hr class="my-2" style="border-color: #F1F1F1;">
  107.                         </div>
  108.                         <div>
  109.                            <span class="text-uppercase">
  110.                            <i class="fal fa-dna mr-2 ml-1 my-2 hidden-sm-down"></i>
  111.                            race</span>
  112.                            <span class="pull-right mr-2">Content</span>
  113.                            <hr class="my-2" style="border-color: #F1F1F1;">
  114.                         </div>
  115.                         <div>
  116.                            <span class="text-uppercase" >
  117.                            <i class="fas fa-cog mr-2 ml-1 my-2 hidden-sm-down"></i>
  118.                            role</span>
  119.                            <span class="pull-right mr-2">Content</span>
  120.                            <hr class="my-2" style="border-color: #F1F1F1;">
  121.                         </div>
  122.                      </div>
  123.                      <div class="card col-5 border-0 px-2 mx-auto mt-3" style="background-color:#DCDCDC;color:#2D2A2F">
  124.                         <div class="col-lg-6 col-md-6 col-sm-12 mt-2">
  125.                            <p class="mb-2" style="font-weight:600;"><i class="ml-2 fas fa-heart fa-fw"/> Likes</p>
  126.                            <ul class="mb-0 list-unstyled pl-2">
  127.                               <li class="lg-mb-1"><i class="fal fa-plus fa-fw " /> Content</li>
  128.                               <li class="lg-mb-1"><i class="fal fa-plus fa-fw " /> Content</li>
  129.                               <li class="lg-mb-1"><i class="fal fa-plus fa-fw " /> Content</li>
  130.                            </ul>
  131.                         </div>
  132.                         <div class="col-lg-6 col-md-6 col-sm-12">
  133.                            <p class="mb-2" style="font-weight:600;"><i class="ml-2 fas fa-times fa-fw"/> Dislikes</p>
  134.                            <ul class="mb-0 list-unstyled pl-2">
  135.                               <li class="lg-mb-1"><i class="fal fa-minus fa-fw " /> Content</li>
  136.                               <li class="lg-mb-1"><i class="fal fa-minus fa-fw " /> Content</li>
  137.                               <li class="lg-mb-1"><i class="fal fa-minus fa-fw " /> Content</li>
  138.                            </ul>
  139.                         </div>
  140.                      </div>
  141.                   </div>
  142.                   <div class="container col-12 mx-auto border-0 px-3 mt-3 py-3" style="background-color:#DCDCDC;overflow:auto;max-height:200px;border-bottom-right-radius:10px; border-bottom-left-radius:10px;scrollbar-width:thin;">
  143.                      <p style="color:#2D2A2F;font-size:14px">
  144.                         This box scrolls but I use Firefox and scrollbars look bad on firefox so its thin lol. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices rhoncus metus in venenatis. Mauris ex elit, pulvinar eget justo vitae, vestibulum iaculis ex. Vestibulum non tortor a erat malesuada venenatis eu non erat. Phasellus lacinia odio vel arcu tempor suscipit. Fusce a semper lectus, ut vestibulum ante. Sed ullamcorper a lacus id suscipit. Nullam posuere sodales ex eu facilisis. Nullam aliquam, ex vitae condimentum vulputate, ligula ex tempus dui, id tristique risus magna gravida mi. Sed id sem urna.
  145.                      </p>
  146.                      <p style="color:#2D2A2F;font-size:14px">Aliquam suscipit malesuada facilisis. Mauris egestas nulla eget odio tincidunt ullamcorper. Nunc vehicula nec neque quis aliquet. Cras consequat aliquet tortor eget tincidunt. Sed eu imperdiet mauris, semper faucibus nibh. Nam tincidunt finibus tortor, elementum rutrum justo posuere ac. Sed rutrum diam eu lacus sodales porttitor. Vestibulum turpis libero, feugiat sed massa vel, vulputate fermentum leo. Morbi vel metus pellentesque, imperdiet risus eu, iaculis nunc. Morbi id tincidunt lectus. </p>
  147.                   </div>
  148.                </div>
  149.             </div>
  150.            
  151.             <!------------------------------------------------------ TAB TWO -------------------------------------------------------->
  152.            
  153.             <div class="tab-pane fade" id="two">
  154.                <div class="card border-0 p-3" style="background:#EBEBEB;max-height:490px;overflow:auto;border-bottom-right-radius:10px;border-bottom-left-radius:10px;">
  155.            
  156. <div class="container col-12 mx-auto border-0 px-3 mt-3 py-3" style="background-color:#DCDCDC;overflow:auto;max-height:450px;border-bottom-right-radius:10px; border-bottom-left-radius:10px;border-top-left-radius:10px;border-top-right-radius:10px;scrollbar-width:thin;">
  157.    
  158.     <h4 class="text-uppercase " style="font-weight: 300; letter-spacing:1px;"><b style="letter-spacing: 1px;color:#2D2A2F;"><i class="fal fa-angle-double-right"></i> Subheader</b></h4>
  159.     <p class="px-2" style="color:#2D2A2F;">
  160. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dignissim lobortis pretium. Nunc vel neque gravida, blandit dui eget, aliquet nisi. Fusce mauris ex, lacinia efficitur placerat nec, auctor sed metus. Mauris et pulvinar diam, sed mattis nisl. Nunc eget erat eget magna euismod commodo et vitae enim. Aliquam dictum mi eu augue dignissim, vel sollicitudin eros gravida. Nullam pretium suscipit ex, vitae tincidunt diam feugiat vitae.</p>
  161.  
  162.     <p class="px-2" style="color:#2D2A2F;">
  163. Praesent molestie viverra elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam finibus enim at tellus scelerisque porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed quis ipsum id libero malesuada scelerisque a non neque. Ut quis magna a est mollis porta a sed augue. Sed eget laoreet nibh. Aliquam erat volutpat. Donec a dictum felis, accumsan mollis ligula. Vivamus aliquet gravida nisi. </p>
  164.  
  165.  
  166.  
  167.     <h4 class="text-uppercase " style="font-weight: 300; letter-spacing:1px;"><b style="letter-spacing: 1px;color:#2D2A2F;"><i class="fal fa-angle-double-right"></i> Subheader</b></h4>
  168.     <p class="px-2" style="color:#2D2A2F;">
  169. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dignissim lobortis pretium. Nunc vel neque gravida, blandit dui eget, aliquet nisi. Fusce mauris ex, lacinia efficitur placerat nec, auctor sed metus. Mauris et pulvinar diam, sed mattis nisl. Nunc eget erat eget magna euismod commodo et vitae enim. Aliquam dictum mi eu augue dignissim, vel sollicitudin eros gravida. Nullam pretium suscipit ex, vitae tincidunt diam feugiat vitae. Suspendisse imperdiet in augue sit amet sodales. Suspendisse quis lobortis ipsum. Donec viverra turpis non nisl aliquam iaculis sed eget nunc. Quisque suscipit egestas mi, et commodo neque consectetur ut. Aliquam est diam, pulvinar et ante ac, pharetra dignissim nisi. Ut eget mi sit amet dolor rutrum auctor eget quis mi. Aliquam erat volutpat. Phasellus in faucibus dui, a finibus tortor. </p>
  170.    
  171. </div>
  172.  
  173.  
  174.            
  175.  
  176.                </div>
  177.             </div>
  178.            
  179.            
  180.            
  181.            
  182.  
  183.             <!------------------------------------------------------ TAB THREE ------------------------------------------------------>  
  184.             <div class="tab-pane fade" id="three">
  185.                <div class="card border-0 p-3" style="background:#EBEBEB;max-height:490px;overflow:auto;border-bottom-right-radius:10px;border-bottom-left-radius:10px;">
  186.                    
  187. <!-----
  188.  
  189. For these, the top relationship is supposed to have
  190. "border-top-right-radius:15px;border-top-left-radius:15px;" in the style
  191.  
  192. the bottom one will have "border-bottom-right-radius:15px;border-bottom-left-radius:15px;"
  193.  
  194. all other relationships should be completely sharp on all corners, insert them in the middle..  (They have no border radius in the style.)
  195. it doesn't affect anything, just makes things look nicer.
  196. I recommend copying the middle relationship if adding more.
  197.  
  198. -------->
  199.          
  200.             <!------------------------------------------------------ CHARACTER ONE ------------------------------------------------------>
  201.            
  202.            
  203.                   <div class="container col-12 mx-auto border-0 px-3 mt-3 py-3" style="max-height:200px;overflow:auto;scroll-bar-width:none; border-top-right-radius:15px;border-top-left-radius:15px;background-color:#DCDCDC;">
  204.                      <div>
  205.                         <a href="LINK_HERE" target="_BLANK">
  206.                         <img src="https://via.placeholder.com/150"
  207.                           style="max-height: 150px;" class="float-lg-left mb-sm-2 mt-2 mx-3 rounded-circle hidden-sm-down">
  208.                         </a>
  209.                         <p class="text-md-left text-center mb-1 font-weight-bold" style="letter-spacing: 1px; color:#2D2A2F;">
  210.                            Name <i class="fal fa-angle-double-right"></i> Relationship
  211.                         </p>
  212.                         <p class="text-md-left text-center small faded mb-1" style="color:#2D2A2F;">
  213.                            <i class="fas fa-star fa-fw"/>
  214.                            <i class="fas fa-star fa-fw"/>
  215.                            <i class="fas fa-star-half-alt fa-fw"/>
  216.                            <i class="far fa-star fa-fw"/>
  217.                            <i class="far fa-star fa-fw"/>
  218.                         </p>
  219.                         <p class="px-2" style="color:#2D2A2F;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tempus condimentum leo, vitae tristique quam rhoncus sit amet. Phasellus volutpat risus dolor, in molestie lorem suscipit eu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin a mi ut nisi maximus scelerisque.</p>
  220.                      </div>
  221.                   </div>
  222.                  
  223. <!------------------------------------------------------ CHARACTER TWO ------------------------------------------------------>
  224.  
  225.  
  226.                   <div class="container col-12 mx-auto border-0 px-3 mt-3 py-3" style="max-height:200px;overflow:auto;scroll-bar-width:none;background-color:#DCDCDC;">
  227.                      <div>
  228.                         <a href="LINK_HERE" target="_BLANK">
  229.                         <img src="https://via.placeholder.com/150"
  230.                           style="max-height: 150px;" class="float-lg-left mb-sm-2 mt-2 mx-3 rounded-circle hidden-sm-down">
  231.                         </a>
  232.                         <p class="text-md-left text-center mb-1 font-weight-bold" style="letter-spacing: 1px; color:#2D2A2F;">
  233.                            Name <i class="fal fa-angle-double-right"></i> Relationship
  234.                         </p>
  235.                         <p class="text-md-left text-center small faded mb-1" style="color:#2D2A2F;">
  236.                            <i class="fas fa-star fa-fw"/>
  237.                            <i class="fas fa-star fa-fw"/>
  238.                            <i class="fas fa-star-half-alt fa-fw"/>
  239.                            <i class="far fa-star fa-fw"/>
  240.                            <i class="far fa-star fa-fw"/>
  241.                         </p>
  242.                         <p class="px-2" style="color:#2D2A2F;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tempus condimentum leo, vitae tristique quam rhoncus sit amet. Phasellus volutpat risus dolor, in molestie lorem suscipit eu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin a mi ut nisi maximus scelerisque.</p>
  243.                      </div>
  244.                   </div>
  245.                  
  246. <!------------------------------------------------------ CHARACTER THREE ---------------------------------------------------->
  247.  
  248.  
  249.                   <div class="container col-12 mx-auto border-0 px-3 mt-3 py-3" style="max-height:200px;overflow:auto;scroll-bar-width:none; border-bottom-right-radius:15px;border-bottom-left-radius:15px;background-color:#DCDCDC;">
  250.                      <div>
  251.                         <a href="LINK_HERE" target="_BLANK">
  252.                         <img src="https://via.placeholder.com/150"
  253.                           style="max-height: 150px;" class="float-lg-left mb-sm-2 mt-2 mx-3 rounded-circle hidden-sm-down">
  254.                         </a>
  255.                         <p class="text-md-left text-center mb-1 font-weight-bold" style="letter-spacing: 1px; color:#2D2A2F;">
  256.                            Name <i class="fal fa-angle-double-right"></i> Relationship
  257.                         </p>
  258.                         <p class="text-md-left text-center small faded mb-1" style="color:#2D2A2F;">
  259.                            <i class="fas fa-star fa-fw"/>
  260.                            <i class="fas fa-star fa-fw"/>
  261.                            <i class="fas fa-star-half-alt fa-fw"/>
  262.                            <i class="far fa-star fa-fw"/>
  263.                            <i class="far fa-star fa-fw"/>
  264.                         </p>
  265.                         <p class="px-2" style="color:#2D2A2F;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tempus condimentum leo, vitae tristique quam rhoncus sit amet. Phasellus volutpat risus dolor, in molestie lorem suscipit eu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin a mi ut nisi maximus scelerisque.</p>
  266.                      </div>
  267.                   </div>
  268.                </div>
  269.             </div>
  270.          </div>
  271.       </div>
  272.    </div>
  273. </div>
Advertisement
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!