PX To EM Calculator>

This is a live demo and preview. Get this PX To EM Calculator for free for your own websites and blogs
PX to REM Calculator

This is Code and demo of PX To EM Calculator. Copy this code and paste it into your own website and blog posts.

<center>
<html>
<head>
  <title>PX to REM Calculator</title>
  <style>
    h1 {
      text-align: center;
      margin-top: 0px;
    }

form {
      margin: 0 auto;
      max-width: 400px;
      padding: 20px;
      box-shadow: 0 2px 20px rgba(0, 0, 0, 1), 0 0 0 3px #006db0;
      border-radius: 0px;
    }

.form-group {
      margin-bottom: 20px;
    }

label {
      display: block;
      font-size: 16px;
      margin-bottom: 5px;
    }

input[type="number"] {
      padding: 10px;
      width: 80%;
      font-size: 16px;
      border: 5px solid #ccc;
      border-radius: px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    }

button {
      padding: 10px 20px;
      font-size: 16px;
      background-color: #4CAF50;
      color: #fff;
      border: none;
      border-radius: px;
      cursor: pointer;
      transition: background-color 0.2s ease-in-out;
    }

button:hover {
      background-color: #3E8E41;
    }

input[type="text"] {
      padding: 10px;
      font-size: 16px;
      border: 1px solid;
      border-radius: px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    }

.reset-button {
      background-color: #f44336;
      margin-top: 10px;
    }

.reset-button:hover {
      background-color: #d32f2f;
    }
  </style>
</head>
<body>
  
  <form>
    <h1>PX to REM Calculator</h1>
  <br />
    <div class="form-group">
      <label for="px">PX</label>
      <input id="input-px" name="px" required="" type="number" />
    </div>
    <div class="form-group">
      <label for="base">Base Font Size</label>
      <input id="input-base" name="base" required="" type="number" value="16" />
    </div>
    <div class="form-group">
      <button onclick="calculate()" type="button">Convert</button>
    </div>
    <div class="form-group">
      <label for="rem">REM</label>
      <input id="rem" name="rem" readonly="" type="text" />
    </div>
    <div class="form-group">
      <button class="reset-button" onclick="resetValues()" type="button">Reset</button>
    </div>
  </form>

function resetValues() {
      document.getElementById("input-px").value = "";
      document.getElementById("input-base").value = "16";
      document.getElementById("rem").value = "";
    }
  </script>
</body>
</html>
</center>

Download Code

FAQs: PX To EM Calculator

Code terms

You Can freely use it for personal and users
You Can modify/change the main code
You Can freely add your blogs and websites
Attribution is not required.

If you have any questions about this converter, please feel free to reach out to us via email.

Best PX To EM Calculator-Get A free code and script

PX to REM Calculator

FAQs: PX To EM Calculator

Code Editor

Code Editor

Popular

Tags

Navigation