Django_kube/django_code/templates/stash/simple_form.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Simple  form</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>
        @charset "UTF-8";
        .m-b-xs {
            margin-bottom: 2%;
        }

        .m-b-md {
            margin-bottom: 10%;
        }

        .m-t-xs {
            margin-top: 2%;
        }

        .m-t-sm {
            margin-top: 5%;
        }

        * {
            outline: 0 !important;
        }

        body {
            padding: 2% 0;
            background-color: #37404a;
        }

        h1 {
            font-family: "Roboto", sans-serif;
            font-size: 2.2em;
            font-weight: 300;
            color: #85ffc7;
            text-transform: uppercase;
        }

        p {
            font-family: "Roboto", sans-serif;
            font-size: 1.1em;
            font-weight: 300;
            color: #fff;
        }

        a {
            color: #fff;
        }
        a:hover {
            text-decoration: none;
            color: #fff;
        }

        #survey-form label,
        #survey-form .labels {
            display: block;
            margin-bottom: 2%;
            font-family: "Roboto", sans-serif;
            font-size: 1.1em;
            font-weight: 300;
            color: #fff;
            letter-spacing: 0.5px;
        }
        #survey-form input::-webkit-input-placeholder {
            color: transparent !important;
        }
        #survey-form input::-moz-placeholder {
            color: transparent !important;
        }
        #survey-form input:-ms-input-placeholder {
            color: transparent !important;
        }
        #survey-form input:-moz-placeholder {
            color: transparent !important;
        }
        #survey-form input,
        #survey-form select {
            display: block;
            width: 100%;
            overflow: hidden;
            outline: none;
            border: 2px solid #333;
        }
        #survey-form input {
            margin-top: 1.5%;
            padding: 0 0 5px 0;
            background: transparent;
            border: none;
            outline: none;
            border-bottom: 2px solid #fff;
            font-size: 1.1em;
            font-weight: 300;
            color: #85ffc7;
        }
        #survey-form input:focus {
            border-color: #85ffc7;
        }
        #survey-form [type=checkbox],
        #survey-form [type=radio] {
            display: inline-block;
            width: auto;
            margin: 0px 10px 0 0;
        }
        #survey-form [type=checkbox],
        #survey-form [type=radio] {
            display: inline-block;
            margin: 0 10px 0 0 !important;
            position: relative;
            top: 5px;
            right: 0;
            bottom: 0;
            left: 0;
            -webkit-appearance: none;
            -moz-appearance: none;
            -o-appearance: none;
            appearance: none;
            height: 23px;
            width: 23px;
            transition: all 0.15s ease-out 0s;
            background: #37404a;
            color: #fff;
            cursor: pointer;
            outline: none;
            z-index: 1000;
            border: 1px solid #fff;
        }
        #survey-form [type=checkbox]:hover,
        #survey-form [type=radio]:hover {
            border-color: #85ffc7;
        }
        #survey-form [type=checkbox]:checked:before,
        #survey-form [type=radio]:checked:before {
            display: inline-block;
            height: 21px;
            width: 21px;
            position: relative;
            left: 0;
            bottom: 0;
            content: "";
            text-align: center;
            font-family: "Glyphicons Halflings";
            line-height: 20px;
            font-size: 15px;
            color: #85ffc7;
        }
        #survey-form [type=checkbox]:focus,
        #survey-form [type=radio]:focus {
            outline: none;
            border-color: #fff;
        }
        #survey-form [type=radio] {
            border-radius: 50%;
        }
        #survey-form [type=radio]:after {
            border-radius: 50%;
        }
        #survey-form [type=number] {
            width: 45px;
        }
        #survey-form [type=number]::-webkit-inner-spin-button, #survey-form [type=number]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            margin: 0;
        }
        #survey-form select {
            height: 40px;
            padding-left: 5px;
            background-color: #37404a;
            border: 2px solid #fff;
            color: #85ffc7;
        }
        #survey-form select option {
            padding: 5px 10px;
            font-weight: 300;
            cursor: pointer;
        }
        #survey-form select option:hover {
            background-color: #85ffc7;
        }
        #survey-form textarea {
            resize: none;
            margin-top: 2%;
            padding: 10px 10px 0px 20px;
            width: 100%;
            height: 90px;
            color: #85ffc7;
            background-color: #37404a;
            border: 2px solid #fff;
        }
        #survey-form .btn {
            display: inline-block;
            position: relative;
            width: 100%;
            margin: 3% 0 0 0;
            height: 45px;
            text-transform: uppercase;
            text-decoration: none;
            cursor: pointer;
            border: 3px solid #85ffc7;
            border-radius: 0;
            font-weight: 500;
            font-size: 1.2em;
            color: #85ffc7;
            text-align: center;
            background: none;
            transition: color 0.25s ease;
        }
        #survey-form .btn:after {
            position: absolute;
            content: "";
            top: 0;
            left: 0;
            width: 0;
            height: 100%;
            background-color: #85ffc7;
            transform-origin: left;
            transition: width 0.5s ease;
            z-index: -1;
        }
        #survey-form .btn:hover {
            color: #37404a;
        }
        #survey-form .btn:hover:after {
            width: 100%;
        }
        #survey-form fieldset {
            margin: 5% 0 0 0;
        }

        .copyright {
            text-align: center;
            font-size: 10px;
            color: #fff;
        }
        .copyright i {
            color: #ef5350;
        }

        @media only screen and (max-width: 600px) {
            body {
                padding: 8% 0;
            }
        }
    </style>
</head>
<main id="main" class="container">
    <div class="row">
        <div class="col-xs-12 col-lg-offset-3 col-lg-6">
            <div class="m-b-md text-center">
                <h1 id="title">Stash Form</h1>
                <p id="description" class="description" class="text-center">Download form</p>
            </div>
                <form method="GET" action="/stash/simple-form/" id="survey-form" name="survey-form">

                <fieldset>
                    <label for="name" id="name-label">
                        Name *
                        <input class="" type="text" id="name" name="name" placeholder="Enter your name (required)" required />
                    </label>
                </fieldset>
                <button id="submit" type="submit" class="btn">Submit the form</button>
            </form>
        </div>
    </div>
</main>
</html>