<html>
    <head>
        <style>body{font-family: arial; font-size: 10pt;}
        img{display: block; max-width: 450px; margin: auto; margin-bottom: 5%;}
        h2{font-family:arial; font-size: 10pt; padding-left: 10px; color: #383838;}
        li{line-height: 1em; margin-bottom: 12px;}
        span{color: blue;}
        .wrapper{width: 90%; margin: 20px auto; }
        .end { padding-top:4%; }
        p .box { padding-top:5%; }
        .box {margin: 30px;
            background-image: linear-gradient(#FFFFFF, #DAEAF4);
            border: 2px solid black;
            opacity: 0.8;
            padding: 20px;
            filter: alpha(opacity=60);}
        .box-bottom {
            padding-left: 40px;
            padding-right: 40px;}
        @media screen and (min-width: 600px) {
            .wrapper{width: 60%; margin: 20px auto;} 
            p .box{
                padding-top:2%;
            }
            .end {
                padding-top:4%;
            }
        }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="box">
                    <img src="{{ absolute_url(asset('images/mail/banners.png')) }}"/>
                    <div>
                        <h4 class="end" style="text-align: left;">Bonjour {{user.getProfile().getFirstName()}},</h4><p>Nous sommes heureux qu'une nouvelle personne souhaite rejoindre notre association.</p><p>Pour commencer, effectuez ces deux tâches simples qui vous aideront à activer votre compte :</p>
                        <ul><li> <b>Cliquez <a href="{{ url('default_confirm_token', {'token': user.getConfirmationToken()}) }}">ici</a> pour confirmer votre adresse e-mail.</b></li><li><b>Contactez-nous au plus vite pour régler votre cotisation.</b></li></ul>
                    </div>
                    <p>Merci de nous rejoindre, faisons de grandes choses ensemble !</p>
                <p>Cordialement.</p>
                <br/>
                <p>Pour plus d'informations contactez nous sur : </p>
                <img src="{{ absolute_url(asset('images/mail/info.png')) }}"/>
               <p style="text-align: center;">© ATPU {{ 'now' | date('Y') }}</p>
            </div>
        </div>
    </body>
</html>