Desktop design

Mobile design

Mortgage repayment calculator

<div class="heading">
          <h2>Mortgage Calculator</h2>
          <a href="#">Clear All</a>
        </div>

<label for="Mortgage-amount">Mortgage Amount</label>

<label for="Mortgage-item">Mortgage Term</label>

<div class="years">
                  <input type="text" id="Mortgage-item">
                  <span class="">years</span>
                </div>

<label for="Mortgage-rate">Mortgage Rate</label>

<div class="repayment">
              <input type="radio" id="repayment" value="Repayment" name="repayment">
              <label for="repayment">Repayment</label>
            </div>

<div class="interest">
              <input type="radio" id="interest" value="Interest" name="repayment">
              <label for="interest">Interest Only</label>
            </div>

<div class="right">
        <div class="content">
          <img src="images/illustration-empty.svg" alt="">
          <h3>Results shown here</h3>
          <p>Complete the form and click "Calculate Repayments" to see your monthly repayments would be.</p>
        </div>
      </div>

Design comparison

Please log in to post a comment

Community feedback

Repayment-Calculator

Design comparison

Please log in to post a comment

Community feedback

Join our Discord community