Untitled

<!doctype html>
<html lang="pl" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet" />
    <style style="display: none">
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            display: block;
        }
    </style>
    <style style="display: none">
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
    </style>
</head>
<body>
<div style="width: 100%; font-family: 'Poppins', sans-serif; background-color: #e5e5e5">
    <img src="https://i.imgur.com/ZSq5qftl.png" alt="Zdjęcie w banerze" style="margin: 0 auto; width: 600px; height: 245px; object-fit: cover" />
    <div style="max-width: 600px; margin: 0 auto; padding: 30px 40px; background-color: #fff">
        <h1 style="width: 100%; line-height: 36px; font-size: 24px; font-weight: 700; padding: 40px 0">Witaj w konkursie Elevator Pitch</h1>
        <p style="font-weight: 400; font-size: 18px; line-height: 27px; margin-bottom: 60px; width: 100%">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.
        </p>
        <div style="padding: 40px 30px; margin-bottom: 70px; width: 100%; background: #474f5a; font-size: 18px">
            <h2 style="font-weight: 700; font-size: 18px; text-transform: capitalize; width: 100%; margin-bottom: 40px; color: #fff">
                Dane twojego zespołu:
            </h2>
            <p style="width: 100%; margin-bottom: 20px">
                <span style="color: #85bd4b; font-weight: 600; width: 100%">Nazwa zespołu</span>
                <span th:text="${user.getUsername()}" style="color: #fff; width: 100%">ZespółStartUp</span>
            </p>
            <p style="width: 100%; color: #85bd4b; margin-bottom: 20px">
                <span style="color: #85bd4b; font-weight: 600; width: 100%">Członkowie zespołu:</span>
                <span th:each="member :${user.getMembers()} " th:text="${member.getName()+' '+member.getSurname()}" style="color: #fff; width: 100%">Jan Kowalski<br/>
              Anna Nowak</span>
            </p>

        </div>
        <h1 style="line-height: 36px; font-size: 24px; font-weight: 700; text-align: center; width: 100%; margin-bottom: 40px">
            Potwierdź adres email Twojego zespołu!
        </h1>
        <p style="font-weight: 400; font-size: 18px; text-align: center; line-height: 27px; margin-bottom: 60px; width: 100%">
            Potwierdź adres email klikając w link poniżej:
        </p>
        <div style="width: 100%; display: flex; justify-content: center">
            <a th:href="${validateLink}" href="#link"
                    style="
              text-decoration: none;
              color: white;
              font-weight: 700;
              font-size: 18px;
              padding: 10px;
              text-transform: uppercase;
              background-color: #85bd4b;
              width: fit-content;
              margin: 0 auto 70px;
            ">Potwierdź e-mail</a>
        </div>
        <p style="font-weight: 400; font-size: 16px; line-height: 27px; margin-bottom: 1em; width: 100%">
            Jeśli powyższy przycisk nie działa, prosimy wejść w link ponizej:
        </p>
        <a th:href="${validateLink}" th:text="${validateLink}" href="" style="color: #85bd4b; font-weight: 400; font-size: 16px; margin-bottom: 75px"
        >https://loremipsum.pl/auth?=e2342e23d2d232dd222</a>
        <hr />
        <p style="font-weight: 400; font-size: 14px; line-height: 27px; margin-block: 25px 40px; width: 100%; color: #919191">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. A porro aliquam laudantium vero nisi eveniet hic iusto laborum dolore ad, veniam
            quo ducimus consectetur in libero?
        </p>
    </div>
</div>
</body>
</html>