API tools faq
paste
Advertisement
SparklyLightus

Instagram V1

SparklyLightus
Jul 12th, 2021
1,317
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 36.20 KB | None | 0 0
raw download clone embed print report
  1. <div class="m-3 mx-auto row no-gutters bg-white" style="max-width: 700px;">
  2.     <!-- PROFILE PICTURE -->
  3.     <div class="p-2 col-sm-4 justify-content-center align-items-center h-100">
  4.         <img src="//via.placeholder.com/200" class="m-2 rounded-circle" style="height: 150px; width: 150px;">
  5.     </div>
  6.     <!-- BIO -->
  7.     <div class="p-2 col-sm-8" style="color: #444;">
  8.         <!-- FIRST ROW -->
  9.         <div class="my-1 justify-content-start">
  10.             <h1 class="m-0 font-weight-light">username</h1>
  11.             <p class="pl-3"> <span class="p-1 px-2 rounded" style="background: rgba(200,200,200, 0.5);">Edit profile</span> <i class="pl-1 fas fa-cog"></i> </p>
  12.         </div>
  13.         <!-- NUMBER ROW -->
  14.         <div class="justify-content-start">
  15.             <p class="m-0 pr-5"><b>0</b> Posts</p>
  16.             <p class="m-0 pr-5"><b>0</b> Followers</p>
  17.             <p class="m-0 pr-5"><b>0</b> Following</p>
  18.         </div>
  19.         <!-- BIO -->
  20.         <p class="my-1 font-weight-bold">Title here idk</p>
  21.         <p class="my-1">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>
  22.         <p class="my-1 mt-2">
  23.             <a href="LINK" class="font-weight-bold" style="color: #00377D;">A_link_here</a>
  24.             <!-- CREDIT - DO NOT REMOVE -->
  25.             <a href="/SparklyCodes" class="font-weight-bold pull-right" style="color: #00377D;" data-toggle="tooltip" title="HTML by SparklyCodes"> <i class="fal fa-code"></i> </a>
  26.         </p>
  27.     </div>
  28.    
  29.     <!-- DIVIDER --> <div class="col-12"> <hr class="m-0 my-2" style="background: rgb(200,200,200);"> </div>
  30.    
  31.     <!-- NAV BUTTONS -->
  32.     <div class="col-12 justify-content-center"> <ul class="nav nav-pills text-center">
  33.         <li class="nav-item"><a data-toggle="tab" href="#A" class="p-1 px-3 text-secondary active">
  34.             <i class="fal fa-th"></i> POSTS</a></li>
  35.         <li class="nav-item"><a data-toggle="tab" href="#B" class="p-1 px-3 text-secondary">
  36.             <i class="fal fa-tv-retro"></i> IGTV</a></li>
  37.         <li class="nav-item"><a data-toggle="tab" href="#C" class="p-1 px-3 text-secondary">
  38.             <i class="fal fa-user-circle"></i> TAGGED</a></li>
  39.     </ul> </div>
  40.     <!-- NAV CONTENT -->
  41.     <div class="p-1 col-12 tab-content">
  42.         <!-- A -->
  43.         <div class="tab-pane fade show active" id="A"> <div class="row no-gutters">
  44.             <!-- POST -->
  45.             <div class="p-1 col-sm-4 col-6"> <div style="
  46.                background: url('//via.placeholder.com/500') center; background-size: cover; height: 210px; width: 100%;">
  47.                     <a href="#post1" data-toggle="collapse" class="h-100 w-100 btn btn-outline-secondary rounded-0 border-0" style="opacity: 0.5;"></a>
  48.             </div> </div>
  49.             <!-- POST -->
  50.             <div class="p-1 col-sm-4 col-6"> <div style="
  51.                background: url('//via.placeholder.com/500') center; background-size: cover; height: 210px; width: 100%;">
  52.                     <a href="#post2" data-toggle="collapse" class="h-100 w-100 btn btn-outline-secondary rounded-0 border-0" style="opacity: 0.5;"></a>
  53.             </div> </div>
  54.             <!-- POST -->
  55.             <div class="p-1 col-sm-4 col-6"> <div style="
  56.                background: url('//via.placeholder.com/500') center; background-size: cover; height: 210px; width: 100%;">
  57.                     <a href="#post3" data-toggle="collapse" class="h-100 w-100 btn btn-outline-secondary rounded-0 border-0" style="opacity: 0.5;"></a>
  58.             </div> </div>
  59.             <!-- POST -->
  60.             <div class="p-1 col-sm-4 col-6"> <div style="
  61.                background: url('//via.placeholder.com/500') center; background-size: cover; height: 210px; width: 100%;">
  62.                     <a href="#post4" data-toggle="collapse" class="h-100 w-100 btn btn-outline-secondary rounded-0 border-0" style="opacity: 0.5;"></a>
  63.             </div> </div>
  64.             <!-- POST -->
  65.             <div class="p-1 col-sm-4 col-6"> <div style="
  66.                background: url('//via.placeholder.com/500') center; background-size: cover; height: 210px; width: 100%;">
  67.                     <a href="#post5" data-toggle="collapse" class="h-100 w-100 btn btn-outline-secondary rounded-0 border-0" style="opacity: 0.5;"></a>
  68.             </div> </div>
  69.             <!-- POST -->
  70.             <div class="p-1 col-sm-4 col-6"> <div style="
  71.                background: url('//via.placeholder.com/500') center; background-size: cover; height: 210px; width: 100%;">
  72.                     <a href="#post6" data-toggle="collapse" class="h-100 w-100 btn btn-outline-secondary rounded-0 border-0" style="opacity: 0.5;"></a>
  73.             </div> </div>
  74.         </div> </div>
  75.         <!-- B -->
  76.         <div class="tab-pane fade" id="B"> <div class="row no-gutters">
  77.             <!-- VIDEO -->
  78.             <div class="p-1 col-sm-4 col-6">
  79.                 <!-- CHANGE ID - dQw4w9WgXcQ -->
  80.                 <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  81.                frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
  82.                style="height: 100%; width: 100%;"></iframe>
  83.             </div>
  84.             <!-- IMAGE -->
  85.             <div class="p-1 col-sm-4 col-6">
  86.                 <div style=" background: url('https://media4.giphy.com/media/8F62ttKOw1FlXLn0QC/giphy.gif') center;
  87.                background-size: cover; height: 210px; width: 100%;"> </div>
  88.             </div>
  89.             <!-- IMAGE -->
  90.             <div class="p-1 col-sm-4 col-6">
  91.                 <div style=" background: url('https://media4.giphy.com/media/8F62ttKOw1FlXLn0QC/giphy.gif') center;
  92.                background-size: cover; height: 210px; width: 100%;"> </div>
  93.             </div>
  94.             <!-- IMAGE -->
  95.             <div class="p-1 col-sm-4 col-6">
  96.                 <div style=" background: url('https://media4.giphy.com/media/8F62ttKOw1FlXLn0QC/giphy.gif') center;
  97.                background-size: cover; height: 210px; width: 100%;"> </div>
  98.             </div>
  99.             <!-- IMAGE -->
  100.             <div class="p-1 col-sm-4 col-6">
  101.                 <div style=" background: url('https://media4.giphy.com/media/8F62ttKOw1FlXLn0QC/giphy.gif') center;
  102.                background-size: cover; height: 210px; width: 100%;"> </div>
  103.             </div>
  104.             <!-- IMAGE -->
  105.             <div class="p-1 col-sm-4 col-6">
  106.                 <div style=" background: url('https://media4.giphy.com/media/8F62ttKOw1FlXLn0QC/giphy.gif') center;
  107.                background-size: cover; height: 210px; width: 100%;"> </div>
  108.             </div>
  109.         </div> </div>
  110.         <!-- C -->
  111.         <div class="tab-pane fade" id="C"> <div class="row no-gutters">
  112.             <!-- POST -->
  113.             <div class="p-1 col-sm-4 col-6"> <div style="
  114.                background: url('//via.placeholder.com/500') center; background-size: cover; height: 210px; width: 100%;">
  115.                     <a href="LINK" class="h-100 w-100 btn btn-outline-secondary rounded-0 border-0" style="opacity: 0.5;"></a>
  116.             </div> </div>
  117.             <!-- POST -->
  118.             <div class="p-1 col-sm-4 col-6"> <div style="
  119.                background: url('//via.placeholder.com/500') center; background-size: cover; height: 210px; width: 100%;">
  120.                     <a href="LINK" class="h-100 w-100 btn btn-outline-secondary rounded-0 border-0" style="opacity: 0.5;"></a>
  121.             </div> </div>
  122.             <!-- POST -->
  123.             <div class="p-1 col-sm-4 col-6"> <div style="
  124.                background: url('//via.placeholder.com/500') center; background-size: cover; height: 210px; width: 100%;">
  125.                     <a href="LINK" class="h-100 w-100 btn btn-outline-secondary rounded-0 border-0" style="opacity: 0.5;"></a>
  126.             </div> </div>
  127.             <!-- POST -->
  128.             <div class="p-1 col-sm-4 col-6"> <div style="
  129.                background: url('//via.placeholder.com/500') center; background-size: cover; height: 210px; width: 100%;">
  130.                     <a href="LINK" class="h-100 w-100 btn btn-outline-secondary rounded-0 border-0" style="opacity: 0.5;"></a>
  131.             </div> </div>
  132.             <!-- POST -->
  133.             <div class="p-1 col-sm-4 col-6"> <div style="
  134.                background: url('//via.placeholder.com/500') center; background-size: cover; height: 210px; width: 100%;">
  135.                     <a href="LINK" class="h-100 w-100 btn btn-outline-secondary rounded-0 border-0" style="opacity: 0.5;"></a>
  136.             </div> </div>
  137.             <!-- POST -->
  138.             <div class="p-1 col-sm-4 col-6"> <div style="
  139.                background: url('//via.placeholder.com/500') center; background-size: cover; height: 210px; width: 100%;">
  140.                     <a href="LINK" class="h-100 w-100 btn btn-outline-secondary rounded-0 border-0" style="opacity: 0.5;"></a>
  141.             </div> </div>
  142.         </div> </div>
  143.     </div>
  144.     <!-- end nav content -->
  145. </div>
  146. <!-- ............................ POSTS FROM TAB 1 -->
  147. <div>
  148.  
  149. <!-- POST POPUP -->
  150. <div id="post1" class="collapse fade h-100 w-100" style="background: rgba(0,0,0,0.5); position: absolute; top: 0px; left: 0px; z-index: 10000;">
  151.     <!-- CLOSE BUTTON NO TOUCHY -->
  152.     <div class="sticky-top text-right p-3" style="z-index:10000"> <a href="#post1" data-toggle="collapse" class="m-0 text-white"> <i class="fal fa-times fa-2x"></i> </a> </div>
  153.     <!-- CONTENT -->
  154.     <div class="sticky-top" style="padding-top: 30px;"> <div class="p-0 bg-white row no-gutters mx-auto col-lg-9 col-11">
  155.         <!-- IMAGE -->
  156.         <div class="col-lg-8">
  157.             <div style="background-image: url(//via.placeholder.com/1000); background-position: center;background-size: cover; height: 500px; width: 100%;"> </div>
  158.         </div>
  159.         <!-- TEXT -->
  160.         <div class="col-lg-4">
  161.             <!-- HEADER -->
  162.             <div class="p-2 row no-gutters hidden-md-down" style="color: #444;">
  163.                 <img src="//via.placeholder.com/200" style="height: 45px; width: 45px;" class="col-auto rounded-circle">
  164.                 <p class="my-auto pl-3 font-weight-bold">username</p>
  165.             </div>
  166.             <!-- DIVIDER --> <hr class="m-0 mt-1 hidden-md-down" style="background: rgb(200,200,200);">
  167.             <!-- DESCRIPTION & COMMENTS -->
  168.             <div style="height: 353px; overflow: auto; color: #444;">
  169.                 <!-- DESCRIPTION -->
  170.                 <div class="px-2 py-2 row no-gutters">
  171.                     <img src="//via.placeholder.com/200" style="height: 45px; width: 45px;" class="col-auto rounded-circle">
  172.                     <div class="px-1 col">
  173.                         <p class="m-0"><b>username</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
  174.                         <p class="m-0 faded">5h</p>
  175.                 </div> </div>
  176.                 <!-- COMMENT -->
  177.                 <div class="px-2 pb-2 row no-gutters">
  178.                     <img src="//via.placeholder.com/200" style="height: 45px; width: 45px;" class="col-auto rounded-circle">
  179.                     <div class="px-1 col">
  180.                         <p class="m-0"><b>username</b> This is a comment.</p>
  181.                         <p class="m-0 faded">5h <span class="pl-3">0 likes</span></p>
  182.                 </div> </div>
  183.                 <!-- REPLY -->
  184.                 <div class="px-2 pb-2 pl-5 row no-gutters">
  185.                     <img src="//via.placeholder.com/200" style="height: 45px; width: 45px;" class="col-auto rounded-circle">
  186.                     <div class="px-1 col">
  187.                         <p class="m-0"><b>username</b> This is a reply.</p>
  188.                         <p class="m-0 faded">5h <span class="pl-3">0 likes</span></p>
  189.                 </div> </div>
  190.                 <!-- COMMENT -->
  191.                 <div class="px-2 pb-2 row no-gutters">
  192.                     <img src="//via.placeholder.com/200" style="height: 45px; width: 45px;" class="col-auto rounded-circle">
  193.                     <div class="px-1 col">
  194.                         <p class="m-0"><b>username</b> This is a comment.</p>
  195.                         <p class="m-0 faded">5h <span class="pl-3">0 likes</span></p>
  196.                 </div> </div>
  197.                 <!-- REPLY -->
  198.                 <div class="px-2 pb-2 pl-5 row no-gutters">
  199.                     <img src="//via.placeholder.com/200" style="height: 45px; width: 45px;" class="col-auto rounded-circle">
  200.                     <div class="px-1 col">
  201.                         <p class="m-0"><b>username</b> This is a reply.</p>
  202.                         <p class="m-0 faded">5h <span class="pl-3">0 likes</span></p>
  203.                 </div> </div>
  204.                 <!-- add more comments here -->
  205.             </div>
  206.             <!-- FOOTER -->
  207.             <div class="p-2" style="color: #444;">
  208.                 <h1 class="m-0">
  209.                     <i class="fal fa-heart"></i> <i class="fal fa-comment fa-flip-horizontal"></i> <i class="fal fa-paper-plane"></i>
  210.                     <i class="fal fa-bookmark pull-right"></i>
  211.                 </h1>
  212.                 <div class="mt-2">
  213.                     <img src="//via.placeholder.com/100" class="mr-1 float-left rounded-circle" style="height: 20px; width: 20px;">
  214.                     <p style="line-height: 13px;">Liked by <b>username</b> and <b>00 others</b></p>
  215.                 </div>
  216.                 <p class="mt-1 faded" style="font-size:10px;">5 HOURS AGO</p>
  217.             </div>
  218.         </div> <!-- end text -->
  219.     </div> </div> <!-- END CONTENT -->
  220. </div>
  221. <!-- POST POPUP -->
  222. <div id="post2" class="collapse fade h-100 w-100" style="background: rgba(0,0,0,0.5); position: absolute; top: 0px; left: 0px; z-index: 10000;">
  223.     <!-- CLOSE BUTTON NO TOUCHY -->
  224.     <div class="sticky-top text-right p-3" style="z-index:10000"> <a href="#post2" data-toggle="collapse" class="m-0 text-white"> <i class="fal fa-times fa-2x"></i> </a> </div>
  225.     <!-- CONTENT -->
  226.     <div class="sticky-top" style="padding-top: 30px;"> <div class="p-0 bg-white row no-gutters mx-auto col-lg-9 col-11">
  227.         <!-- IMAGE -->
  228.         <div class="col-lg-8">
  229.             <div style="background-image: url(//via.placeholder.com/1000); background-position: center;background-size: cover; height: 500px; width: 100%;"> </div>
  230.         </div>
  231.         <!-- TEXT -->
  232.         <div class="col-lg-4">
  233.             <!-- HEADER -->
  234.             <div class="p-2 row no-gutters hidden-md-down" style="color: #444;">
  235.                 <img src="//via.placeholder.com/200" style="height: 45px; width: 45px;" class="col-auto rounded-circle">
  236.                 <p class="my-auto pl-3 font-weight-bold">username</p>
  237.             </div>
  238.             <!-- DIVIDER --> <hr class="m-0 mt-1 hidden-md-down" style="background: rgb(200,200,200);">
  239.             <!-- DESCRIPTION & COMMENTS -->
  240.             <div style="height: 353px; overflow: auto; color: #444;">
  241.                 <!-- DESCRIPTION -->
  242.                 <div class="px-2 py-2 row no-gutters">
  243.                     <img src="//via.placeholder.com/200" style="height: 45px; width: 45px;" class="col-auto rounded-circle">
  244.                     <div class="px-1 col">
  245.                         <p class="m-0"><b>username</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
  246.                         <p class="m-0 faded">5h</p>
  247.                 </div> </div>
  248.                 <!-- COMMENT -->
  249.                 <div class="px-2 pb-2 row no-gutters">
  250.                     <img src="//via.placeholder.com/200" style="height: 45px; width: 45px;" class="col-auto rounded-circle">
  251.                     <div class="px-1 col">
  252.                         <p class="m-0"><b>username</b> This is a comment.</p>
  253.                         <p class="m-0 faded">5h <span class="pl-3">0 likes</span></p>
  254.                 </div> </div>
  255.                 <!-- REPLY -->
  256.                 <div class="px-2 pb-2 pl-5 row no-gutters">
  257.                     <img src="//via.placeholder.com/200" style="height: 45px; width: 45px;" class="col-auto rounded-circle">
  258.                     <div class="px-1 col">
  259.                         <p class="m-0"><b>username</b> This is a reply.</p>
  260.                         <p class="m-0 faded">5h <span class="pl-3">0 likes</span></p>
  261.                 </div> </div>
  262.                 <!-- COMMENT -->
  263.                 <div class="px-2 pb-2 row no-gutters">
  264.                     <img src="//via.placeholder.com/200" style="height: 45px; width: 45px;" class="col-auto rounded-circle">
  265.                     <div class="px-1 col">
  266.                         <p class="m-0"><b>username</b> This is a comment.</p>
  267.                         <p class="m-0 faded">5h <span class="pl-3">0 likes</span></p>
  268.                 </div> </div>
  269.                 <!-- REPLY -->
  270.                 <div class="px-2 pb-2 pl-5 row no-gutters">
  271.                     <img src="//via.placeholder.com/200" style="height: 45px; width: 45px;" class="col-auto rounded-circle">
  272.                     <div class="px-1 col">
  273.                         <p class="m-0"><b>username</b> This is a reply.</p>
  274.                         <p class="m-0 faded">5h <span class="pl-3">0 likes</span></p>
  275.                 </div> </div>
  276.                 <!-- add more comments here -->
  277.             </div>
  278.             <!-- FOOTER -->
  279.             <div class="p-2" style="color: #444;">
  280.                 <h1 class="m-0">
  281.                     <i class="fal fa-heart"></i> <i class="fal fa-comment fa-flip-horizontal"></i> <i class="fal fa-paper-plane"></i>
  282.                     <i class="fal fa-bookmark pull-right"></i>
  283.                 </h1>
  284.                 <div class="mt-2">
  285.                     <img src="//via.placeholder.com/100" class="mr-1 float-left rounded-circle" style="height: 20px; width: 20px;">
  286.                     <p style="line-height: 13px;">Liked by <b>username</b> and <b>00 others</b></p>
  287.                 </div>
  288.                 <p class="mt-1 faded" style="font-size:10px;">5 HOURS AGO</p>
  289.             </div>
  290.         </div> <!-- end text -->
  291.     </div> </div> <!-- END CONTENT -->
  292. </div>
  293. <!-- POST POPUP -->
  294. <div id="post3" class="collapse fade h-100 w-100" style="background: rgba(0,0,0,0.5); position: absolute; top: 0px; left: 0px; z-index: 10000;">
  295.     <!-- CLOSE BUTTON NO TOUCHY -->
  296.     <div class="sticky-top text-right p-3" style="z-index:10000"> <a href="#post3" data-toggle="collapse" class="m-0 text-white"> <i class="fal fa-times fa-2x"></i> </a> </div>
  297.     <!-- CONTENT -->
  298.     <div class="sticky-top" style="padding-top: 30px;"> <div class="p-0 bg-white row no-gutters mx-auto col-lg-9 col-11">
  299.         <!-- IMAGE -->
  300.         <div class="col-lg-8">
  301.             <div style="background-image: url(//via.placeholder.com/1000); background-position: center;background-size: cover; height: 500px; width: 100%;"> </div>
  302.         </div>
  303.         <!-- TEXT -->
  304.         <div class="col-lg-4">
  305.             <!-- HEADER -->
  306.             <div class="p-2 row no-gutters hidden-md-down" style="color: #444;">
  307.                 <img src="//via.placeholder.com/200" style="height: 45px; width: 45px;" class="col-auto rounded-circle">
  308.                 <p class="my-auto pl-3 font-weight-bold">username</p>
  309.             </div>
  310.             <!-- DIVIDER --> <hr class="m-0 mt-1 hidden-md-down" style="background: rgb(200,200,200);">
  311.             <!-- DESCRIPTION & COMMENTS -->
  312.             <div style="height: 353px; overflow: auto; color: #444;">
  313.                 <!-- DESCRIPTION -->
  314.                 <div class="px-2 py-2 row no-gutters">
  315.                     <img src="//via.placeholder.com/200" style="height: 45px; width: 45px;" class="col-auto rounded-circle">
  316.                     <div class="px-1 col">
  317.                         <p class="m-0"><b>username</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
  318.                         <p class="m-0 faded">5h</p>
  319.                 </div> </div>
  320.                 <!-- COMMENT -->
  321.                 <div class="px-2 pb-2 row no-gutters">
  322.                     <img src="//via.placeholder.com/200" style="height: 45px; width: 45px;" class="col-auto rounded-circle">
  323.                     <div class="px-1 col">
  324.                         <p class="m-0"><b>username</b> This is a comment.</p>
  325.                         <p class="m-0 faded">5h <span class="pl-3">0 likes</span></p>
  326.                 </div> </div>
  327.                 <!-- REPLY -->
  328.                 <div class="px-2 pb-2 pl-5 row no-gutters">
  329.                     <img src="//via.placeholder.com/200" style="height: 45px; width: 45px;" class="col-auto rounded-circle">
  330.                     <div class="px-1 col">
  331.                         <p class="m-0"><b>username</b> This is a reply.</p>
  332.                         <p class="m-0 faded">5h <span class="pl-3">0 likes</span></p>
  333.                 </div> </div>
  334.                 <!-- COMMENT -->
  335.                 <div class="px-2 pb-2 row no-gutters">
  336.                     <img src="//via.placeholder.com/200" style="height: 45px; width: 45px;" class="col-auto rounded-circle">
  337.                     <div class="px-1 col">
  338.                         <p class="m-0"><b>username</b> This is a comment.</p>
  339.                         <p class="m-0 faded">5h <span class="pl-3">0 likes</span></p>
  340.                 </div> </div>
  341.                 <!-- REPLY -->
  342.                 <div class="px-2 pb-2 pl-5 row no-gutters">
  343.                     <img src="//via.placeholder.com/200" style="height: 45px; width: 45px;" class="col-auto rounded-circle">
  344.                     <div class="px-1 col">
  345.                         <p class="m-0"><b>username</b> This is a reply.</p>
  346.                         <p class="m-0 faded">5h <span class="pl-3">0 likes</span></p>
  347.                 </div> </div>
  348.                 <!-- add more comments here -->
  349.             </div>
  350.             <!-- FOOTER -->
  351.             <div class="p-2" style="color: #444;">
  352.                 <h1 class="m-0">
  353.                     <i class="fal fa-heart"></i> <i class="fal fa-comment fa-flip-horizontal"></i> <i class="fal fa-paper-plane"></i>
  354.                     <i class="fal fa-bookmark pull-right"></i>
  355.                 </h1>
  356.                 <div class="mt-2">
  357.                     <img src="//via.placeholder.com/100" class="mr-1 float-left rounded-circle" style="height: 20px; width: 20px;">
  358.                     <p style="line-height: 13px;">Liked by <b>username</b> and <b>00 others</b></p>
  359.                 </div>
  360.                 <p class="mt-1 faded" style="font-size:10px;">5 HOURS AGO</p>
  361.             </div>
  362.         </div> <!-- end text -->
  363.     </div> </div> <!-- END CONTENT -->
  364. </div>
  365. <!-- POST POPUP -->
  366. <div id="post4" class="collapse fade h-100 w-100" style="background: rgba(0,0,0,0.5); position: absolute; top: 0px; left: 0px; z-index: 10000;">
  367.     <!-- CLOSE BUTTON NO TOUCHY -->
  368.     <div class="sticky-top text-right p-3" style="z-index:10000"> <a href="#post4" data-toggle="collapse" class="m-0 text-white"> <i class="fal fa-times fa-2x"></i> </a> </div>
  369.     <!-- CONTENT -->
  370.     <div class="sticky-top" style="padding-top: 30px;"> <div class="p-0 bg-white row no-gutters mx-auto col-lg-9 col-11">
  371.         <!-- IMAGE -->
  372.         <div class="col-lg-8">
  373.             <div style="background-image: url(//via.placeholder.com/1000); background-position: center;background-size: cover; height: 500px; width: 100%;"> </div>
  374.         </div>
  375.         <!-- TEXT -->
  376.         <div class="col-lg-4">
  377.             <!-- HEADER -->
  378.             <div class="p-2 row no-gutters hidden-md-down" style="color: #444;">
  379.                 <img src="//via.placeholder.com/200" style="height: 45px; width: 45px;" class="col-auto rounded-circle">
  380.                 <p class="my-auto pl-3 font-weight-bold">username</p>
  381.             </div>
  382.             <!-- DIVIDER --> <hr class="m-0 mt-1 hidden-md-down" style="background: rgb(200,200,200);">
  383.             <!-- DESCRIPTION & COMMENTS -->
  384.             <div style="height: 353px; overflow: auto; color: #444;">
  385.                 <!-- DESCRIPTION -->
  386.                 <div class="px-2 py-2 row no-gutters">
  387.                     <img src="//via.placeholder.com/200" style="height: 45px; width: 45px;" class="col-auto rounded-circle">
  388.                     <div class="px-1 col">
  389.                         <p class="m-0"><b>username</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
  390.                         <p class="m-0 faded">5h</p>
  391.                 </div> </div>
  392.                 <!-- COMMENT -->
  393.                 <div class="px-2 pb-2 row no-gutters">
  394.                     <img src="//via.placeholder.com/200" style="height: 45px; width: 45px;" class="col-auto rounded-circle">
  395.                     <div class="px-1 col">
  396.                         <p class="m-0"><b>username</b> This is a comment.</p>
  397.                         <p class="m-0 faded">5h <span class="pl-3">0 likes</span></p>
  398.                 </div> </div>
  399.                 <!-- REPLY -->
  400.                 <div class="px-2 pb-2 pl-5 row no-gutters">
  401.                     <img src="//via.placeholder.com/200" style="height: 45px; width: 45px;" class="col-auto rounded-circle">
  402.                     <div class="px-1 col">
  403.                         <p class="m-0"><b>username</b> This is a reply.</p>
  404.                         <p class="m-0 faded">5h <span class="pl-3">0 likes</span></p>
  405.                 </div> </div>
  406.                 <!-- COMMENT -->
  407.                 <div class="px-2 pb-2 row no-gutters">
  408.                     <img src="//via.placeholder.com/200" style="height: 45px; width: 45px;" class="col-auto rounded-circle">
  409.                     <div class="px-1 col">
  410.                         <p class="m-0"><b>username</b> This is a comment.</p>
  411.                         <p class="m-0 faded">5h <span class="pl-3">0 likes</span></p>
  412.                 </div> </div>
  413.                 <!-- REPLY -->
  414.                 <div class="px-2 pb-2 pl-5 row no-gutters">
  415.                     <img src="//via.placeholder.com/200" style="height: 45px; width: 45px;" class="col-auto rounded-circle">
  416.                     <div class="px-1 col">
  417.                         <p class="m-0"><b>username</b> This is a reply.</p>
  418.                         <p class="m-0 faded">5h <span class="pl-3">0 likes</span></p>
  419.                 </div> </div>
  420.                 <!-- add more comments here -->
  421.             </div>
  422.             <!-- FOOTER -->
  423.             <div class="p-2" style="color: #444;">
  424.                 <h1 class="m-0">
  425.                     <i class="fal fa-heart"></i> <i class="fal fa-comment fa-flip-horizontal"></i> <i class="fal fa-paper-plane"></i>
  426.                     <i class="fal fa-bookmark pull-right"></i>
  427.                 </h1>
  428.                 <div class="mt-2">
  429.                     <img src="//via.placeholder.com/100" class="mr-1 float-left rounded-circle" style="height: 20px; width: 20px;">
  430.                     <p style="line-height: 13px;">Liked by <b>username</b> and <b>00 others</b></p>
  431.                 </div>
  432.                 <p class="mt-1 faded" style="font-size:10px;">5 HOURS AGO</p>
  433.             </div>
  434.         </div> <!-- end text -->
  435.     </div> </div> <!-- END CONTENT -->
  436. </div>
  437. <!-- POST POPUP -->
  438. <div id="post5" class="collapse fade h-100 w-100" style="background: rgba(0,0,0,0.5); position: absolute; top: 0px; left: 0px; z-index: 10000;">
  439.     <!-- CLOSE BUTTON NO TOUCHY -->
  440.     <div class="sticky-top text-right p-3" style="z-index:10000"> <a href="#post5" data-toggle="collapse" class="m-0 text-white"> <i class="fal fa-times fa-2x"></i> </a> </div>
  441.     <!-- CONTENT -->
  442.     <div class="sticky-top" style="padding-top: 30px;"> <div class="p-0 bg-white row no-gutters mx-auto col-lg-9 col-11">
  443.         <!-- IMAGE -->
  444.         <div class="col-lg-8">
  445.             <div style="background-image: url(//via.placeholder.com/1000); background-position: center;background-size: cover; height: 500px; width: 100%;"> </div>
  446.         </div>
  447.         <!-- TEXT -->
  448.         <div class="col-lg-4">
  449.             <!-- HEADER -->
  450.             <div class="p-2 row no-gutters hidden-md-down" style="color: #444;">
  451.                 <img src="//via.placeholder.com/200" style="height: 45px; width: 45px;" class="col-auto rounded-circle">
  452.                 <p class="my-auto pl-3 font-weight-bold">username</p>
  453.             </div>
  454.             <!-- DIVIDER --> <hr class="m-0 mt-1 hidden-md-down" style="background: rgb(200,200,200);">
  455.             <!-- DESCRIPTION & COMMENTS -->
  456.             <div style="height: 353px; overflow: auto; color: #444;">
  457.                 <!-- DESCRIPTION -->
  458.                 <div class="px-2 py-2 row no-gutters">
  459.                     <img src="//via.placeholder.com/200" style="height: 45px; width: 45px;" class="col-auto rounded-circle">
  460.                     <div class="px-1 col">
  461.                         <p class="m-0"><b>username</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
  462.                         <p class="m-0 faded">5h</p>
  463.                 </div> </div>
  464.                 <!-- COMMENT -->
  465.                 <div class="px-2 pb-2 row no-gutters">
  466.                     <img src="//via.placeholder.com/200" style="height: 45px; width: 45px;" class="col-auto rounded-circle">
  467.                     <div class="px-1 col">
  468.                         <p class="m-0"><b>username</b> This is a comment.</p>
  469.                         <p class="m-0 faded">5h <span class="pl-3">0 likes</span></p>
  470.                 </div> </div>
  471.                 <!-- REPLY -->
  472.                 <div class="px-2 pb-2 pl-5 row no-gutters">
  473.                     <img src="//via.placeholder.com/200" style="height: 45px; width: 45px;" class="col-auto rounded-circle">
  474.                     <div class="px-1 col">
  475.                         <p class="m-0"><b>username</b> This is a reply.</p>
  476.                         <p class="m-0 faded">5h <span class="pl-3">0 likes</span></p>
  477.                 </div> </div>
  478.                 <!-- COMMENT -->
  479.                 <div class="px-2 pb-2 row no-gutters">
  480.                     <img src="//via.placeholder.com/200" style="height: 45px; width: 45px;" class="col-auto rounded-circle">
  481.                     <div class="px-1 col">
  482.                         <p class="m-0"><b>username</b> This is a comment.</p>
  483.                         <p class="m-0 faded">5h <span class="pl-3">0 likes</span></p>
  484.                 </div> </div>
  485.                 <!-- REPLY -->
  486.                 <div class="px-2 pb-2 pl-5 row no-gutters">
  487.                     <img src="//via.placeholder.com/200" style="height: 45px; width: 45px;" class="col-auto rounded-circle">
  488.                     <div class="px-1 col">
  489.                         <p class="m-0"><b>username</b> This is a reply.</p>
  490.                         <p class="m-0 faded">5h <span class="pl-3">0 likes</span></p>
  491.                 </div> </div>
  492.                 <!-- add more comments here -->
  493.             </div>
  494.             <!-- FOOTER -->
  495.             <div class="p-2" style="color: #444;">
  496.                 <h1 class="m-0">
  497.                     <i class="fal fa-heart"></i> <i class="fal fa-comment fa-flip-horizontal"></i> <i class="fal fa-paper-plane"></i>
  498.                     <i class="fal fa-bookmark pull-right"></i>
  499.                 </h1>
  500.                 <div class="mt-2">
  501.                     <img src="//via.placeholder.com/100" class="mr-1 float-left rounded-circle" style="height: 20px; width: 20px;">
  502.                     <p style="line-height: 13px;">Liked by <b>username</b> and <b>00 others</b></p>
  503.                 </div>
  504.                 <p class="mt-1 faded" style="font-size:10px;">5 HOURS AGO</p>
  505.             </div>
  506.         </div> <!-- end text -->
  507.     </div> </div> <!-- END CONTENT -->
  508. </div>
  509. <!-- POST POPUP -->
  510. <div id="post6" class="collapse fade h-100 w-100" style="background: rgba(0,0,0,0.5); position: absolute; top: 0px; left: 0px; z-index: 10000;">
  511.     <!-- CLOSE BUTTON NO TOUCHY -->
  512.     <div class="sticky-top text-right p-3" style="z-index:10000"> <a href="#post6" data-toggle="collapse" class="m-0 text-white"> <i class="fal fa-times fa-2x"></i> </a> </div>
  513.     <!-- CONTENT -->
  514.     <div class="sticky-top" style="padding-top: 30px;"> <div class="p-0 bg-white row no-gutters mx-auto col-lg-9 col-11">
  515.         <!-- IMAGE -->
  516.         <div class="col-lg-8">
  517.             <div style="background-image: url(//via.placeholder.com/1000); background-position: center;background-size: cover; height: 500px; width: 100%;"> </div>
  518.         </div>
  519.         <!-- TEXT -->
  520.         <div class="col-lg-4">
  521.             <!-- HEADER -->
  522.             <div class="p-2 row no-gutters hidden-md-down" style="color: #444;">
  523.                 <img src="//via.placeholder.com/200" style="height: 45px; width: 45px;" class="col-auto rounded-circle">
  524.                 <p class="my-auto pl-3 font-weight-bold">username</p>
  525.             </div>
  526.             <!-- DIVIDER --> <hr class="m-0 mt-1 hidden-md-down" style="background: rgb(200,200,200);">
  527.             <!-- DESCRIPTION & COMMENTS -->
  528.             <div style="height: 353px; overflow: auto; color: #444;">
  529.                 <!-- DESCRIPTION -->
  530.                 <div class="px-2 py-2 row no-gutters">
  531.                     <img src="//via.placeholder.com/200" style="height: 45px; width: 45px;" class="col-auto rounded-circle">
  532.                     <div class="px-1 col">
  533.                         <p class="m-0"><b>username</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
  534.                         <p class="m-0 faded">5h</p>
  535.                 </div> </div>
  536.                 <!-- COMMENT -->
  537.                 <div class="px-2 pb-2 row no-gutters">
  538.                     <img src="//via.placeholder.com/200" style="height: 45px; width: 45px;" class="col-auto rounded-circle">
  539.                     <div class="px-1 col">
  540.                         <p class="m-0"><b>username</b> This is a comment.</p>
  541.                         <p class="m-0 faded">5h <span class="pl-3">0 likes</span></p>
  542.                 </div> </div>
  543.                 <!-- REPLY -->
  544.                 <div class="px-2 pb-2 pl-5 row no-gutters">
  545.                     <img src="//via.placeholder.com/200" style="height: 45px; width: 45px;" class="col-auto rounded-circle">
  546.                     <div class="px-1 col">
  547.                         <p class="m-0"><b>username</b> This is a reply.</p>
  548.                         <p class="m-0 faded">5h <span class="pl-3">0 likes</span></p>
  549.                 </div> </div>
  550.                 <!-- COMMENT -->
  551.                 <div class="px-2 pb-2 row no-gutters">
  552.                     <img src="//via.placeholder.com/200" style="height: 45px; width: 45px;" class="col-auto rounded-circle">
  553.                     <div class="px-1 col">
  554.                         <p class="m-0"><b>username</b> This is a comment.</p>
  555.                         <p class="m-0 faded">5h <span class="pl-3">0 likes</span></p>
  556.                 </div> </div>
  557.                 <!-- REPLY -->
  558.                 <div class="px-2 pb-2 pl-5 row no-gutters">
  559.                     <img src="//via.placeholder.com/200" style="height: 45px; width: 45px;" class="col-auto rounded-circle">
  560.                     <div class="px-1 col">
  561.                         <p class="m-0"><b>username</b> This is a reply.</p>
  562.                         <p class="m-0 faded">5h <span class="pl-3">0 likes</span></p>
  563.                 </div> </div>
  564.                 <!-- add more comments here -->
  565.             </div>
  566.             <!-- FOOTER -->
  567.             <div class="p-2" style="color: #444;">
  568.                 <h1 class="m-0">
  569.                     <i class="fal fa-heart"></i> <i class="fal fa-comment fa-flip-horizontal"></i> <i class="fal fa-paper-plane"></i>
  570.                     <i class="fal fa-bookmark pull-right"></i>
  571.                 </h1>
  572.                 <div class="mt-2">
  573.                     <img src="//via.placeholder.com/100" class="mr-1 float-left rounded-circle" style="height: 20px; width: 20px;">
  574.                     <p style="line-height: 13px;">Liked by <b>username</b> and <b>00 others</b></p>
  575.                 </div>
  576.                 <p class="mt-1 faded" style="font-size:10px;">5 HOURS AGO</p>
  577.             </div>
  578.         </div> <!-- end text -->
  579.     </div> </div> <!-- END CONTENT -->
  580. </div>
  581.  
  582. </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!