SHARE
TWEET

Untitled

Rofihimam Oct 1st, 2019 (edited) 77 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <link href="https://fonts.googleapis.com/css?family=Bree+Serif&display=swap" rel="stylesheet">
  2.  
  3. <form id="tangga" name="tangga" method="post">
  4.     <table>
  5.         <tr>
  6.             <th colspan="3">Tangga Berwarna</th>
  7.         </tr>
  8.         <tr>
  9.             <td class="batas" colspan="3"></td>
  10.         </tr>
  11.         <tr>
  12.             <td>Masukkan Jumlah Anak Tangga</td>
  13.             <td>:</td>
  14.             <td>
  15.                 <input type="number" name="jml_anakTangga" autocomplete="off" required="">
  16.             </td>
  17.         </tr>
  18.         <tr>
  19.             <td>Warna</td>
  20.             <td>:</td>
  21.             <td>
  22.                 <input type="radio" name="warna" value="green">Hijau
  23.                 <input type="radio" name="warna" value="purple">Ungu
  24.                 <input type="radio" name="warna" value="yellow">Kuning
  25.                 <input type="radio" name="warna" value="blue">Biru
  26.                 <input type="radio" name="warna" value="grey">Abu
  27.             </td>
  28.         </tr>
  29.         <tr>
  30.             <th colspan="3">
  31.                 <input type="submit" name="button" id="button" value="Buat Tangga">
  32.             </th>
  33.         </tr>
  34.     </table>
  35. </form>
  36.  
  37. <?php
  38. if (isset($_POST['button'])) {
  39. $jml_anakTangga = $_POST['jml_anakTangga'];
  40. $warna = $_POST['warna'];
  41.    
  42.     for ($i = 1; $i <= $jml_anakTangga; $i++) {
  43.         for ($j = 1; $j <= $i; $j++) {
  44.             echo "<div></div>";
  45.         }
  46.         echo "<br/>";
  47.     }
  48. }
  49. ?>
  50.  
  51. <style type="text/css">
  52.     div{
  53.         width: 30px;
  54.         height: 30px;
  55.         background-color: <?php echo $warna ?>;
  56.         display: inline-block;
  57.         margin: 3px;
  58.     }
  59.     table{
  60.         border: 5px outset darkblue;
  61.         background: linear-gradient(to right, #0033cc 0%, #ff0066 100%);
  62.     }
  63.     th{
  64.         font-family: 'Bree Serif', serif;
  65.         font-size: 25px;
  66.         width: 200px;
  67.     }
  68.     td{
  69.         font-family: 'Bree Serif', serif;
  70.         font-size: 20px;
  71.     }
  72.     td.batas{
  73.         height: 5px;
  74.         border-radius: 50px;
  75.         background-color: cyan;
  76.     }
  77.     input{
  78.         border: 2px inset black;
  79.         background-color: silver;
  80.         font-family: 'Bree Serif', serif;
  81.         font-size: 15px;
  82.         border-radius: 50px;
  83.         text-align: center;
  84.     }
  85.     input#button{
  86.         border: 3px outset blue;
  87.         background-color: silver;
  88.         font-family: 'Bree Serif', serif;
  89.         transition-duration: 0.5s;
  90.         font-size: 15px;
  91.         border-radius: 50px;
  92.     }
  93.     input#button:hover{
  94.         border: 3px outset blue;
  95.         background: linear-gradient(to bottom, #0033cc 0%, #ff0066 100%);
  96.         font-family: 'Bree Serif', serif;
  97.         font-size: 17px;
  98.         border-radius: 50px;
  99.         color: white;
  100.     }
  101. </style>
RAW Paste Data
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
 
Top