lemansky

Untitled

Mar 31st, 2021
449
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  8.     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
  9.     <script>
  10.         document.addEventListener('DOMContentLoaded', function(event){
  11.             clean(document.body);
  12.  
  13.             let _btns = document.getElementsByClassName('close');
  14.             for(item of _btns){
  15.                 item.addEventListener('click', (e) => {
  16.                     // e.target.parentNode.remove();
  17.                     // e.target.closest('.media').remove();
  18.                 });
  19.  
  20.             }
  21.  
  22.         });
  23.         const clean = (node) =>
  24.         {
  25.           for(var n = 0; n < node.childNodes.length; n ++)
  26.          {
  27.            var child = node.childNodes[n];
  28.            if
  29.            (
  30.              child.nodeType === 8
  31.              ||
  32.              (child.nodeType === 3 && !/\S/.test(child.nodeValue))
  33.            )
  34.            {
  35.              node.removeChild(child);
  36.              n --;
  37.            }
  38.            else if(child.nodeType === 1)
  39.            {
  40.              clean(child);
  41.            }
  42.          }
  43.        }
  44.     </script>
  45.     <style>
  46.         .media{
  47.             position:relative;
  48.  
  49.         }
  50.         .media-object{
  51.             border-radius:5px;
  52.         }
  53.         .close{
  54.             position:absolute;
  55.             top:0;
  56.             right:5px;
  57.         }
  58.     </style>
  59. </head>
  60. <body>
  61.  
  62.     <div class="container" style="margin-top:50px">
  63.         <div class="row">
  64.             <div class="col-md-6 col-lg-6">
  65.                 <ul class="media-list main-list">
  66.                   <li class="media border-info card">
  67.                     <a class="pull-left" href="#">
  68.                       <img class="media-object" src="http://placehold.it/500x100" alt="...">
  69.                     </a>
  70.                     <div class="card-body">
  71.                       <h4 class="card-heading">Lorem ipsum dolor asit amet 1</h4>
  72.                       <p class="by-author">By John Doe</p>
  73.                     </div>
  74.                     <a href="#" class="close">x</a>
  75.                   </li>
  76.                   <li class="media border-info card">
  77.                     <a class="pull-left" href="#">
  78.                       <img class="media-object" src="http://placehold.it/500x100" alt="...">
  79.                     </a>
  80.                     <div class="card-body">
  81.                       <h4 class="card-heading">Lorem ipsum dolor asit amet 2</h4>
  82.                       <p class="by-author">By Jane Doe</p>
  83.                     </div>
  84.                     <a href="#" class="close">x</a>
  85.                   </li>
  86.                   <li class="media border-info card">
  87.                     <a class="pull-left" href="#">
  88.                       <img class="media-object" src="http://placehold.it/500x100" alt="...">
  89.                     </a>
  90.                     <div class="card-body">
  91.                       <h4 class="card-heading">Lorem ipsum dolor asit amet 3</h4>
  92.                       <p class="by-author">By Johnson Doe</p>
  93.                     </div>
  94.                     <a href="#" class="close">x</a>
  95.                   </li>
  96.                 </ul>
  97.             </div>
  98.         </div>
  99.     </div>
  100.  
  101.  
  102. </body>
  103. </html>
RAW Paste Data

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×