API tools faq
paste
Advertisement
Guest User

cards

a guest
Sep 19th, 2019
197
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 14.60 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <title>Title</title>
  6.     <!-- Required meta tags -->
  7.     <meta charset="utf-8">
  8.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  9.  
  10.     <!-- Bootstrap CSS -->
  11.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  12.        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  13.     <script src="https://kit.fontawesome.com/f8c90c2c97.js" crossorigin="anonymous"></script>
  14. </head>
  15.  
  16. <body>
  17.  
  18.     <nav class="navbar navbar-expand-lg navbar-dark bg-danger">
  19.         <div class="container">
  20.             <a class="navbar-brand" href="#">Navbar</a>
  21.             <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse"
  22.                data-target="#collapsibleNavId" aria-controls="collapsibleNavId" aria-expanded="false"
  23.                aria-label="Toggle navigation"></button>
  24.             <div class="collapse navbar-collapse" id="collapsibleNavId">
  25.                 <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
  26.                     <li class="nav-item active">
  27.                         <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
  28.                     </li>
  29.                     <li class="nav-item">
  30.                         <a class="nav-link" href="#">Link</a>
  31.                     </li>
  32.                     <li class="nav-item dropdown">
  33.                         <a class="nav-link dropdown-toggle" href="#" id="dropdownId" data-toggle="dropdown"
  34.                            aria-haspopup="true" aria-expanded="false">Dropdown</a>
  35.                         <div class="dropdown-menu" aria-labelledby="dropdownId">
  36.                             <a class="dropdown-item" href="#">Action 1</a>
  37.                             <a class="dropdown-item" href="#">Action 2</a>
  38.                         </div>
  39.                     </li>
  40.                 </ul>
  41.                 <form class="form-inline my-2 my-lg-0">
  42.                     <input class="form-control mr-sm-2" type="text" placeholder="Search">
  43.                     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  44.                 </form>
  45.             </div>
  46.         </div>
  47.     </nav>
  48.  
  49.     <div class="container py-5">
  50.         <div class="row">
  51.             <div class="col-lg-4">
  52.                 <div class="card">
  53.                     <div class="container text-center pt-3">
  54.                         <img src="http://www.newdesignfile.com/postpic/2012/05/microsoft-word-2013-icon_220074.png"
  55.                            class="card-img-top w-25" alt="...">
  56.                     </div>
  57.                     <div class="card-body">
  58.                         <h5 class="card-title text-center">Card title</h5>
  59.                         <hr>
  60.                         <p class="card-text">Some Description <br> Lorem ipsum dolor sit, amet consectetur adipisicing
  61.                             elit.
  62.                             Dolorem
  63.                             sit pariatur enim expedita iste est, excepturi cum repellat. Dicta, doloribus.</p>
  64.                     </div>
  65.                     <div class="accordion" id="accordionOne">
  66.                         <div class="card">
  67.                             <div class="card-header" id="headingOne">
  68.                                 <h2 class="mb-0 d-flex align-contents-center">
  69.                                     <button class="btn btn-link" type="button" data-toggle="collapse"
  70.                                        data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
  71.                                         Show more
  72.                                     </button>
  73.                                 </h2>
  74.                             </div>
  75.                             <div id="collapseOne" class="collapse" aria-labelledby="headingOne"
  76.                                data-parent="#accordionOne">
  77.                                 <div class="card-body p-0">
  78.                                     <ul class="list-group list-group-flush">
  79.                                         <li class="list-group-item">
  80.                                             <p class="card-text">
  81.                                                 <small class="text-muted"><i
  82.                                                        class="fas pr-2 fa-file-contract"></i>Document
  83.                                                     Type:
  84.                                                     Policy</small>
  85.                                             </p>
  86.                                             <p class="card-text">
  87.                                                 <small class="text-muted"><i class="fas pr-2 fa-code-branch"></i>Version
  88.                                                     2.0.0</small>
  89.                                             </p>
  90.                                         </li>
  91.                                         <li class="list-group-item">
  92.                                             <p class="card-text">
  93.                                                 <small class="text-muted"><i class="fas pr-2 fa-user"></i>Uploaded by:
  94.                                                     Low
  95.                                                     Yiyuan</small>
  96.                                             </p>
  97.                                             <p class="card-text">
  98.                                                 <small class="text-muted"><i class="far pr-2 fa-clock"></i>Published On:
  99.                                                     8-Jan-2019</small>
  100.                                             </p>
  101.                                         </li>
  102.                                     </ul>
  103.                                     <div class="card-body">
  104.                                         <a href="#" class="card-link">Download</a>
  105.                                         <a href="#" class="card-link">Preview</a>
  106.                                     </div>
  107.                                 </div>
  108.                             </div>
  109.                         </div>
  110.                     </div>
  111.  
  112.                 </div>
  113.             </div>
  114.             <div class="col-lg-4">
  115.                 <div class="card">
  116.                     <div class="container text-center pt-3">
  117.                         <img src="http://www.newdesignfile.com/postpic/2012/05/microsoft-word-2013-icon_220074.png"
  118.                            class="card-img-top w-25" alt="...">
  119.                     </div>
  120.                     <div class="card-body">
  121.                         <h5 class="card-title text-center">Card title</h5>
  122.                         <hr>
  123.                         <p class="card-text">Some Description <br> Lorem ipsum dolor sit, amet consectetur adipisicing
  124.                             elit.
  125.                             Dolorem
  126.                             sit pariatur enim expedita iste est, excepturi cum repellat. Dicta, doloribus.</p>
  127.                     </div>
  128.                     <div class="accordion" id="accordionTwo">
  129.                         <div class="card">
  130.                             <div class="card-header" id="headingTwo">
  131.                                 <h2 class="mb-0 d-flex align-contents-center">
  132.                                     <button class="btn btn-link" type="button" data-toggle="collapse"
  133.                                        data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
  134.                                         Show more
  135.                                     </button>
  136.                                 </h2>
  137.                             </div>
  138.                             <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
  139.                                data-parent="#accordionTwo">
  140.                                 <div class="card-body p-0">
  141.                                     <ul class="list-group list-group-flush">
  142.                                         <li class="list-group-item">
  143.                                             <p class="card-text">
  144.                                                 <small class="text-muted"><i
  145.                                                        class="fas pr-2 fa-file-contract"></i>Document
  146.                                                     Type:
  147.                                                     Policy</small>
  148.                                             </p>
  149.                                             <p class="card-text">
  150.                                                 <small class="text-muted"><i class="fas pr-2 fa-code-branch"></i>Version
  151.                                                     2.0.0</small>
  152.                                             </p>
  153.                                         </li>
  154.                                         <li class="list-group-item">
  155.                                             <p class="card-text">
  156.                                                 <small class="text-muted"><i class="fas pr-2 fa-user"></i>Uploaded by:
  157.                                                     Low
  158.                                                     Yiyuan</small>
  159.                                             </p>
  160.                                             <p class="card-text">
  161.                                                 <small class="text-muted"><i class="far pr-2 fa-clock"></i>Published On:
  162.                                                     8-Jan-2019</small>
  163.                                             </p>
  164.                                         </li>
  165.                                     </ul>
  166.                                     <div class="card-body">
  167.                                         <a href="#" class="card-link">Download</a>
  168.                                         <a href="#" class="card-link">Preview</a>
  169.                                     </div>
  170.                                 </div>
  171.                             </div>
  172.                         </div>
  173.                     </div>
  174.                 </div>
  175.             </div>
  176.  
  177.             <div class="col-lg-4">
  178.                 <div class="card">
  179.                     <div class="container text-center pt-3">
  180.                         <img src="http://www.newdesignfile.com/postpic/2012/05/microsoft-word-2013-icon_220074.png"
  181.                            class="card-img-top w-25" alt="...">
  182.                     </div>
  183.                     <div class="card-body">
  184.                         <h5 class="card-title text-center">Card title</h5>
  185.                         <hr>
  186.                         <p class="card-text">Some Description <br> Lorem ipsum dolor sit, amet consectetur adipisicing
  187.                             elit.
  188.                             Dolorem
  189.                             sit pariatur enim expedita iste est, excepturi cum repellat. Dicta, doloribus.</p>
  190.                     </div>
  191.                     <div class="accordion" id="accordionThree">
  192.                         <div class="card">
  193.                             <div class="card-header" id="headingThree">
  194.                                 <h2 class="mb-0 d-flex align-contents-center">
  195.                                     <button class="btn btn-link" type="button" data-toggle="collapse"
  196.                                        data-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
  197.                                         Show more
  198.                                     </button>
  199.                                 </h2>
  200.                             </div>
  201.                             <div id="collapseThree" class="collapse" aria-labelledby="headingThree"
  202.                                data-parent="#accordionThree">
  203.                                 <div class="card-body p-0">
  204.                                     <ul class="list-group list-group-flush">
  205.                                         <li class="list-group-item">
  206.                                             <p class="card-text">
  207.                                                 <small class="text-muted"><i
  208.                                                        class="fas pr-2 fa-file-contract"></i>Document
  209.                                                     Type:
  210.                                                     Policy</small>
  211.                                             </p>
  212.                                             <p class="card-text">
  213.                                                 <small class="text-muted"><i class="fas pr-2 fa-code-branch"></i>Version
  214.                                                     2.0.0</small>
  215.                                             </p>
  216.                                         </li>
  217.                                         <li class="list-group-item">
  218.                                             <p class="card-text">
  219.                                                 <small class="text-muted"><i class="fas pr-2 fa-user"></i>Uploaded by:
  220.                                                     Low
  221.                                                     Yiyuan</small>
  222.                                             </p>
  223.                                             <p class="card-text">
  224.                                                 <small class="text-muted"><i class="far pr-2 fa-clock"></i>Published On:
  225.                                                     8-Jan-2019</small>
  226.                                             </p>
  227.                                         </li>
  228.                                     </ul>
  229.                                     <div class="card-body">
  230.                                         <a href="#" class="card-link">Download</a>
  231.                                         <a href="#" class="card-link">Preview</a>
  232.                                     </div>
  233.                                 </div>
  234.                             </div>
  235.                         </div>
  236.                     </div>
  237.                 </div>
  238.             </div>
  239.  
  240.         </div>
  241.     </div>
  242.  
  243.  
  244.     <!-- Optional JavaScript -->
  245.     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  246.     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  247.        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
  248.     </script>
  249.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
  250.        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
  251.     </script>
  252.     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
  253.        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
  254.     </script>
  255. </body>
  256.  
  257. </html>
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!