HTML/CSS - Power Level Calculator Online Editor and JavaScript Compiler

html

<!DOCTYPE html>
<html>
    <head>
        <title>Power Calculator</title>
    </head>
    <body>
        <header>
            <h1>My Power Calculator</h1>
        </header>
        <div id="main">
            
        <div id="floater">
            <img src="https://vignette.wikia.nocookie.net/dragonball/images/a/ab/Vegeta_power_levelov3095654.gif/revision/latest?cb=20121102034543" width="230" height="160" alt="No Image"/>
        </div>
        
        <div id="theform">
        <form id="form" onsubmit="return calculator()" method="post" autocomplete="off">
            <label>Name:</label>
            <input id="name" type="text" name="name" placeholder="Joe Name" required/>
            <hr class="short" align="left"/>
            <label>Age:</label>
            <input  id="age" type="text" name="age" placeholder="99" required/>
            <hr class="short" align="left"/>
            <label>Weight:</label>
            <input id="weight" type="text" name="weight" placeholder="135" required/>lbs
            <hr class="short" align="left"/>
            <input id="ok" type="submit" name="ok" value="ok"/>
        </form>

css

body {
    background: linear-gradient( orange, white);
}
header {
    border: 4px solid  black;
    width: 400px;
    color:  white;
    border-radius: 5px;
    margin-left: 12px;
    margin-bottom: 5px;
    text-align: center;
    background: url("https://images7.alphacoders.com/315/thumb-1920-315686.jpg") no-repeat 50% 25%;
    background-size: 400px 200px;
}
label {
    padding: 1px;
    background:  white;
    border-radius: 2px;
}
img {
    margin-top: 2px;
    margin-left: 4px;
    border:5px solid  black;
    border-radius: 5px;
}

BROWSER

Console