<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My BMI health care</title> <link rel="stylesheet" href="css/style.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> </head> <body> <div class="container"> <div class="heading"> <h1> BMI - The Great APP </h1> <h2>Your weight is our concern</h2> <h3><span>Warning:</span> hey, this is a fun app. But you might get hurt because of the truth</h2> <h3><span>Recommend:</span> Only for people who don't take the result (or life) seriously</h2> </div> <main> <div class="left"> <div class="message img-fluid"> <h2>HELLO Welcome to BMI</h2> <p>Let us take care of you</p> </div> </div> <div class="right"> <h4>What is BMI index? </h4> <p>A health indicator calculated from your weight and height that helps you realize if you've eaten too much or not!</p> <p>Now, please provide us your WEIGHT and you HEIGHT <span style="color:coral">(and be honest)</span>. You will get the result you deserve</p> <label for="Input1" class="form-label">Weight(kg)</label> <input type="number" class="form-control" id="weight_input" placeholder="Example: 90"> <label for="Input2" class="form-label">Height(cm)</label> <input type="number" class="form-control" id="height_input" placeholder="Example: 175"> <div class="d-grid gap-2 m-2"> <button id = "btn_submit" class="btn btn-dark btn-block"> Submit </button> </div> </div> </main> </div> </body> <script src="js/bmi.js"></script> </html>