API tools faq
paste
Advertisement
Guest User

card exercise rumah coding

a guest
Aug 23rd, 2019
123
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.59 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <!DOCTYPE html>
  4. <html lang="en">
  5.  
  6. <head>
  7.     <meta charset="UTF-8">
  8.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  10.     <title>Document Latihan</title>
  11.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  12. </head>
  13.  
  14. <body>
  15. <div class="container-fluid">
  16.     <div class="row">
  17.         <div class="col-md-12"><h2>latihan Card Bootstrap</h2></div>
  18.     </div>
  19.     <div class="row">
  20.         <div class="col-md-4">
  21.             <div class="card bg-danger text-white">
  22.                 <div class="card-header"> Ini Header</div>              
  23.                 <div class="card-body">
  24.                     <h3 class="card-title">Judul Card "just Simple Card"</h3>
  25.                     Ini Body
  26.                     <a class="card-link" href="#">Google.Com</a>
  27.                 </div>
  28.                 <div class="card-footer">ini footer</div>
  29.             </div>
  30.         </div>
  31.         <div class="col-md-4">
  32.             <div class="card">
  33.                   <img class="card-img-top"
  34.                      src="https://citraindonesia.com/wp-content/uploads/2019/06/Ilustrasi-buah-mangga..jpg" alt="">
  35.                 <div class="card-body">
  36.                     <h4 class="card-title">Card with image</h4>
  37.                     <p>Food Traveler bla Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi labore dolores enim accusamus, provident nam incidunt eius recusandae autem minima blanditiis quo sed beatae eligendi nostrum commodi impedit consectetur debitis!</p>
  38.                   <a class="btn btn-primary stretched-link" href="#">see profile</a>
  39.                 </div>
  40.             </div>
  41.         </div>
  42.          <div class="col-md-4">
  43.              <div class="card">
  44.                  <img class="card-img-top"
  45.                     src="https://www.trzcacak.rs/myfile/detail/136-1363125_avatar-png-pic-male-avatar-icon-png.png"
  46.                     alt="">
  47.                  <div class="card-img-overlay">
  48.                     <h4 class="card-title">Puguh Rismadi Ismail</h4>
  49.                    <p> Food Traveler bla Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi
  50.                      labore dolores enim accusamus, provident nam incidunt eius recusandae autem minima blanditiis quo
  51.                      sed beatae eligendi nostrum commodi impedit consectetur debitis!</p>
  52.                      <a class="btn btn-primary stretched-link" href="#">see profile</a>
  53.                  </div>
  54.              </div>
  55.          </div>
  56.     </div>
  57.     <h3>Latihan Card mansory</h3>
  58.     <hr>
  59.     <div class="row">
  60.         <div class="card-columns">
  61.         <div class="card">
  62.             <img class="card-img-top" src="https://plantogram.com/wa-data/public/shop/products/97/03/397/images/761/761.750.jpg"
  63.                alt="">
  64.             <div class="card-body">
  65.                 <h4 class="card-title">Card with image Papaya</h4>
  66.                 <p>Food Traveler bla Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi labore dolores enim
  67.                     accusamus, provident nam incidunt eius recusandae autem minima blanditiis quo sed beatae eligendi nostrum
  68.                     commodi impedit consectetur debitis! Papaya</p>
  69.                 <a class="btn btn-primary stretched-link" href="#">see profile</a>
  70.             </div>
  71.         </div>
  72.         <div class="card">
  73.             <img class="card-img-top" src="https://www.naturalfoodseries.com/wp-content/uploads/2018/01/Red-Grapes-800x416.jpg"
  74.                alt="">
  75.             <div class="card-body">
  76.                 <h4 class="card-title">Card with image</h4>
  77.                 <p>Food Traveler bla Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi labore dolores enim
  78.                     accusamus, provident nam incidunt eius recusandae autem minima blanditiis quo sed beatae eligendi nostrum
  79.                     commodi impedit consectetur debitis!</p>
  80.                 <a class="btn btn-primary stretched-link" href="#">see profile</a>
  81.             </div>
  82.         </div>
  83.         <div class="card">
  84.             <img class="card-img-top" src="https://citraindonesia.com/wp-content/uploads/2019/06/Ilustrasi-buah-mangga..jpg"
  85.                alt="">
  86.             <div class="card-body">
  87.                 <h4 class="card-title">Card with image</h4>
  88.                 <p>Food Traveler bla Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi labore dolores enim
  89.                     accusamus, provident nam incidunt eius recusandae autem minima blanditiis quo sed beatae eligendi nostrum
  90.                     commodi impedit consectetur debitis!</p>
  91.                 <a class="btn btn-primary stretched-link" href="#">see profile</a>
  92.             </div>
  93.         </div>
  94.         <div class="card">
  95.             <img class="card-img-top" src="https://i.pinimg.com/originals/ae/7f/b9/ae7fb9b2718201fdd8c8238e779a3323.jpg"
  96.                alt="">
  97.             <div class="card-body">
  98.                 <h4 class="card-title">Card with image</h4>
  99.                 <p>Food Traveler bla Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi labore dolores enim
  100.                     accusamus, provident nam incidunt eius recusandae autem minima blanditiis quo sed beatae eligendi nostrum
  101.                     commodi impedit consectetur debitis!</p>
  102.                 <a class="btn btn-primary stretched-link" href="#">see profile</a>
  103.             </div>
  104.         </div>
  105.         <div class="card">
  106.             <img class="card-img-top" src="https://i.pinimg.com/originals/ae/7f/b9/ae7fb9b2718201fdd8c8238e779a3323.jpg"
  107.                alt="">
  108.             <div class="card-body">
  109.                 <h4 class="card-title">Card with image</h4>
  110.                 <p>Food Traveler bla Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi labore dolores enim
  111.                     accusamus, provident nam incidunt eius recusandae autem minima blanditiis quo sed beatae eligendi nostrum
  112.                     commodi impedit consectetur debitis!</p>
  113.                 <a class="btn btn-primary stretched-link" href="#">see profile</a>
  114.             </div>
  115.         </div>
  116.        
  117.         </div>
  118.     </div>
  119. </div>  
  120. </body>
  121. <!-- jQuery library -->
  122. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  123.  
  124. <!-- Popper JS -->
  125. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  126.  
  127. <!-- Latest compiled JavaScript -->
  128. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  129. </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!