API tools faq
paste
Advertisement
darmariduan

test.html

darmariduan
Apr 10th, 2022
1,093
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.74 KB | None | 0 0
raw download clone embed print report
  1. <html lang="en"><head>
  2.     <meta charset="UTF-8">
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>Dashboard</title>
  6.     <!-- General CSS Files -->
  7.     <link rel="stylesheet" href="http://localhost/php8/assets/css/bootstrap.min.css">
  8.     <link rel="stylesheet" href="http://localhost/php8/assets/css/all.css">
  9.     <link rel="stylesheet" href="http://localhost/php8/assets/vendors/datatables-responsive/css/responsive.bootstrap4.min.css">
  10.     <link rel="stylesheet" href="http://localhost/php8/assets/vendors/datatables-buttons/css/buttons.bootstrap4.min.css">
  11.     <style>
  12.     .kotak {
  13.         background-color: orange;
  14.         color: white;
  15.         font-size: 20px;
  16.         border-radius: 35px;
  17.         margin: auto;
  18.         width: 50%;
  19.         vertical-align: middle;
  20.         text-align: center;
  21.         display: table-cell;
  22.     }
  23.  
  24.     .rounded-circle {
  25.         border-radius: 176px;
  26.         width: 65px;
  27.         height: 75px;
  28.     }
  29.  
  30.     .Circle {
  31.         width: 50px;
  32.         height: 50px;
  33.         border-radius: 50%;
  34.         text-align: center;
  35.         font-size: 22px;
  36.         color: white;
  37.         background: #cfcdc6;
  38.         z-index: -9999;
  39.         transform: translateY(-55%);
  40.         line-height: 40px;
  41.     }
  42.     </style>
  43. </head>
  44.  
  45. <body style="background-color: #004d8f;">
  46.     <div class="container-fluids">
  47.         <div class="row">
  48.             <div class="col-sm-12">
  49.                 <div class="row">
  50.                     <div class="col-sm-6"></div>
  51.                     <div class="col-sm-6">
  52.                         <div class="row" style="height: 50px">
  53.                             <div class="col-sm-12" style="color: white;">
  54.                                 <div class="row">
  55.                                     <div class="col-sm-10 ">
  56.                                         <div class="row">
  57.                                             <div class="col-sm-12 text-right">
  58.                                                 <h4>TULISAN UKURAN SEGINI RATA KANAN</h4>
  59.                                             </div>
  60.                                         </div>
  61.                                         <div class="row">
  62.                                             <div class="col-sm-12 text-right">
  63.                                                 Tulisan Ini Lebih Panjang dari yang Atas Ukuran Segini Rata Kanan
  64.                                             </div>
  65.                                         </div>
  66.                                     </div>
  67.                                     <div class="col-sm-2 ">
  68.                                         <img src="http://localhost/php8/assets/images/cta-bg.jpg" class="rounded-circle" alt="hero-img.png">
  69.                                     </div>
  70.                                 </div>
  71.                             </div>
  72.                         </div>
  73.                     </div>
  74.                 </div>
  75.             </div>
  76.         </div>
  77.         <br><br>
  78.         <div class="row">
  79.             <div class="col-sm-12">
  80.                 <div class="row">
  81.                     <div class="col-sm-6 text-center">
  82.                         <img src="http://localhost/php8/assets/images/cta-bg.jpg" alt="hero-img.png" style="width: 650px;height:650px;">
  83.                     </div>
  84.                     <div class="col-sm-6">
  85.                         <br><br>
  86.                         <div class="row">
  87.                             <div class="col-sm-12">
  88.                                 <div class="row">
  89.                                     <div class="col-sm-12 text-center" style="color:white;margin-bottom:20px;">
  90.                                         <h2 style="font-size:55px;">
  91.                                             Tulisan Ukuran Segini Rata Tengah
  92.                                         </h2>
  93.                                     </div>
  94.                                 </div>
  95.                                 <div class="row">
  96.                                     <div class="col-sm-6">
  97.                                         <a href="">
  98.                                             <div class="kotak text-center" style="width: 350px">
  99.                                                 <div class="Circle">
  100.                                                     Ikon
  101.                                                 </div>
  102.                                                 TOMBOL PUTAR VIDEO <br>UKURAN INI RATA TENGAH
  103.                                             </div>
  104.                                         </a>
  105.                                     </div>
  106.                                     <div class="col-sm-6 mt-3">
  107.                                         <div class="kotak text-center" style="width: 350px;height:65px;">
  108.                                             TOMBOL PUTAR VIDEO <br>UKURAN INI RATA TENGAH
  109.                                         </div>
  110.                                     </div>
  111.                                 </div>
  112.                                 <div class="row">
  113.                                     <div class="col-sm-6 mt-3">
  114.                                         <div class="kotak text-center" style="width: 350px;height:65px;">
  115.                                             TOMBOL LINK KE EKS <br>UKURAN INI RATA TENGAH
  116.                                         </div>
  117.                                     </div>
  118.                                     <div class="col-sm-6 mt-3">
  119.                                         <div class="kotak text-center" style="width: 350px;height:65px;">
  120.                                             TOMBOL LINK KE EKS <br>UKURAN INI RATA TENGAH
  121.                                         </div>
  122.                                     </div>
  123.                                 </div>
  124.                                 <div class="row">
  125.                                     <div class="col-sm-6 mt-3">
  126.                                         <div class="kotak text-center" style="width: 350px;height:65px;">
  127.                                             TOMBOL LINK KE EKS <br>UKURAN INI RATA TENGAH
  128.                                         </div>
  129.                                     </div>
  130.                                     <div class="col-sm-6 mt-3">
  131.                                         <div class="kotak text-center" style="width: 350px;height:65px;">
  132.                                             TOMBOL LINK KE EKS <br>UKURAN INI RATA TENGAH
  133.                                         </div>
  134.                                     </div>
  135.                                 </div>
  136.                             </div>
  137.                         </div>
  138.                     </div>
  139.                 </div>
  140.             </div>
  141.         </div>
  142.     </div>
  143.  
  144.  
  145. </body></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!