index.html

{% extends 'base.html' %}

{% block head %}
<title>Transaction Ledger</title>
  <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800,900&display=swap" rel="stylesheet">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
    .hel{
        background: transparent;
        border: none;
        border-bottom: 1px solid #000000;
    }
    .buton3 {border-radius: 8px;
            font-size:16px;
            }
    .krish{
        
        background-color: #E8EEF1;
        background-repeat: no-repeat;
        background-size: auto;
    }
    .ielts{
        font-family: 'Montserrat', sans-serif;
    }
    .lol{
        background-color: #FFFFFF;
    }
</style>
{% endblock %}

{% block body %}
<div class="krish ielts">
<br>
<div class="content"><br><font color="#1E3D58">
    <h1 style="text-align: center"><b>Transaction Ledger</b></h1></font><br>
    {% if tasks|length < 1 %}
    <h4 style="text-align: center">There are no transactions. Create one below!</h4>
    {% else %}
    <div class="text-center">
    <div class="container-fluid">
        <div class="table-responsive">
    <table class="table table-bordered">
        <tr ><b>
            <th class="bg-primary text-white"><p align="center">    Name    </p></th>
            <th class="bg-primary text-white"><p align="center">   Block number   </p></th>
            <th class="bg-primary text-white"><p align="center">   Hash Code  </p></th>
            <th class="bg-primary text-white"><p align="center">   Amount   </p></th></b>
        </tr>
        {% for task in tasks %}
            <tr class="lol">
                <td ><p align="center">{{ task.data }}</p></td>
                <td><p align="center">{{ task.blockno }}</p></td>
                <td><p align="center">{{task.previoushash}}</p></td>
                <td><p align="center">{{task.amount}}</p></td>
            </tr>
        {% endfor %}
    </table></div>
    </div>
    {% endif %}
<br><br></div>
    <div class="form">
        <form action="/" method="POST">
            <div class="row">
            <div class="col">
            <b ><p align="right" style="font-size:23px">Name      :</p>  </b></div><div class="col"><input type="text" class="hel" name="content" id="content"><br><br></div></div>
            <div class="row"><div class="col">
            <b ><p align="right" style="font-size:23px">Amount    : </p></b></div><div class="col"><input type="text" class="hel" name="content123" id="content123"><br><br></div></div></div>
            <p align="center"><input type="submit" class="m-5 btn-primary buton3" value="Add Block"></p>
        </form>
</div></div>
<b><p align="center">Zero Error, Three Warnings</p></b>
{% endblock %}