Untitled

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Kamasutra Dice</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="{% static 'css/custom.css' %}">
</head>
<body>
<nav>
    <div class="container theme-switch-wrapper d-flex justify-content-start">
        <input type="number" id="counter_val" class="numberCircle name-size">
        <button type="button" id="countdown-start" class="btn btn-outline-secondary timer-size" style="margin-top: 1vh">
            Timer
        </button>
        <div class="container theme-switch-wrapper d-flex justify-content-center">
            <p class="name-size" id="countdown"></p>
        </div>
        <div class="theme-switch-wrapper container d-flex justify-content-end">
            <label class="theme-switch" for="checkbox">
                <input type="checkbox" id="checkbox"/>
                <div class="slider round"></div>
            </label>
        </div>
    </div>
</nav>
{% block content %}
{% endblock content %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
        integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>

<script
        src="https://code.jquery.com/jquery-3.4.0.js"
        integrity="sha256-DYZMCC8HTC+QDr5QNaIcfR7VSPtcISykd+6eSmBW5qo="
        crossorigin="anonymous"></script>
<script src="{% static 'js/app.js' %}"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
</body>
</html>