index.html

<!DOCTYPE html>
<html>

<head>
    <title>Doe sangue! Doe vida</title>

    <link rel="stylesheet" href="/style.css">

    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">
</head>

<body>
    <header>
        <img 
        src="/logo_doe.png"
        alt="Imagem de DOE"
        class="logo"
        >
        <h1>A sua doação importa</h1>
        <p>Até 3 vidas com 1 doação</p>
        <p>Mais de 38.000 doações são necessárias todos os dias</p>
        <p>Apenas 1,9% da população brasileira, doa sangue</p>

        <button>Quero ajudar</button>
    </header>

    <section class="form hide">
        <h2>Entre na lista de doadores</h2>
        <form action="/" method="POST"><!-- Esse POST, postará coisas no nosso banco de dados -->
            <input 
                type="text" 
                name="name"
                placeholder="Nome Completo"
            >
            <input 
                type="text" 
                name="email"
                placeholder="Email"
            >
            <input 
                type="text" 
                name="blood"
                placeholder="Tipo sanguíneo"
            >
            <button>Quero Ajudar</button>
        </form>
    </section>

    <main>
        <h2>Últimos <span>doadores</span></h2>

        <section class="donors">

            {% for donor in donors %}

                <div class="donor">
                    <div class="blood">{{donor.blood}}</div>
                    <p>{{donor.name}}</p>
                </div>

            {%endfor%}

        </section>
    </main>

    <footer> Com 💝 João </footer>
    <script src="/scripts.js"> </script>
</body>

</html>