timedoor intermediate pertemuan 6

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Timedoor Temperature Converter</title>
  </head>

  <style>
    body,
    html {
      width: 100%;
      height: 100%;
      margin: 0;
    }

    .container {
      width: 100%;
      height: 100%;
    }

    .toppane {
      position: relative;
      width: 100%;
      height: 100px;
      border-collapse: collapse;
      background-color: white;
    }

    .leftpane {
      position: relative;
      width: 50%;
      height: calc(100% - 100px);
      float: left;
      background-color: white;
      border-collapse: collapse;
    }

    .rightpane {
      width: 50%;
      height: calc(100% - 100px);
      position: relative;
      float: right;
      background-color: white;
      border-collapse: collapse;
    }

    /* If you want the content centered horizontally and vertically */
    .centered {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
    }

    #Celcius {
      color: black;
      width: 250px;
      height: 30px;
      font-size: 15px;
      border-style: none;
      border: 5px solid orange;
      text-align: center;
    }

    #Fahrenheit {
      color: black;
      width: 250px;
      height: 30px;
      font-size: 15px;
      border-style: none;
      border: 5px solid orange;
      text-align: center;
    }
  </style>

  <body>
    <div class="container">
      <div class="toppane">
        <div class="centered">
          <h1>Thermometer Converter</h1>
          <button onclick="convertTemp()">Click to convert</button>
        </div>
      </div>

      <div class="leftpane">
        <div class="centered">
          <img src="img/thermo.jpg" alt="Avatar woman" />
          <h2>Termometer Celcius</h2>
          <input type="text" id="Celcius" class="Celcius" />
        </div>
      </div>

      <div class="rightpane">
        <div class="centered">
          <img src="img/thermo.jpg" alt="Avatar man" />
          <h2>Termometer Fahrenheit</h2>
          <input type="text" id="Fahrenheit" class="Fahrenheit" />
        </div>
      </div>
    </div>
  </body>

  <script></script>
</html>