index.html

<!DOCTYPE html>
<html>
<head>
    <title>Doe sangue! Doe vida</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/teste.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">
</head>
<body>

    <header class="header container">
        <h1 class="title"><img class="logo" src="img/logo.png" alt="Logo da campanha"></h1>
        <h2 class="title">A sua doação importa</h2>
        <p>Até 3 vidas com uma 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 container">
        <h2 class="title">Entre na lista de doadores</h2>
        <form action="/" method="POST">
            <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 class="app container">
        <h2 class="title subtitle">Últimos <span>doadores</span></h2>
        <section class="donors">

            <!-- <p>{{ donors[0].name }}</p> -->

            {% for donor in donors %}
                <div class="doner">
                    <div class="blood">{{donor.blood}}</div>
                    <p>{{donor.nome}}</p>
                </div>
            {%endfor%}
        </section>
    </main>
    <footer class="container">Com <span id="heart">♥</span> Rocketseat</footer>

    <script type="text/javascript" src="scripts/scripts.js"></script>
</body>
</html>