rezamalik15

HTML CSS BMI

Nov 20th, 2025
328
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 1.09 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html data-theme="light">
  3. <head>
  4.     <title>Kalkulator BMI</title>
  5.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
  6.     <style>
  7.         main.container {
  8.             max-width: 400px;
  9.             margin-top: 5vh;
  10.         }        
  11.         article {
  12.             text-align: center;
  13.         }
  14.         input[type="number"] {
  15.             width: 100%;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <main class="container">
  21.         <article>
  22.             <h1>Kalkulator BMI</h1>
  23.            
  24.             <label for="berat">Berat Badan (kg)</label>
  25.             <input type="number" id="berat" placeholder="Masukkan berat Anda">
  26.            
  27.             <label for="tinggi">Tinggi Badan (cm)</label>
  28.             <input type="number" id="tinggi" placeholder="Masukkan tinggi Anda">
  29.            
  30.             <button id="hitung" role="button">Hitung BMI</button>
  31.            
  32.             <hr> <h3 id="hasil"></h3>
  33.             <p id="kategori"></p>
  34.         </article>
  35.     </main>
  36.  
  37.     <script src="bmi.js"></script>
  38. </body>
  39. </html>
Advertisement
Add Comment
Please, Sign In to add comment