index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 SNF</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" type="image/x-icon" href="resources/images/logo_white.png">
</head>

<body class="font-montserrat">
    <!-- HEADER -->
    <header class="flex flex-row justify-center bg-slate-100 h-[6rem]">
        <navbar class="flex flex-grid items-center text-lg lg:gap-[128px]">
            <a href="#projet" class="p-2.5 rounded-lg hover:bg-gray-200 font-montserrat">Le projet</a>
            <a href="#equipe" class="p-2.5 rounded-lg hover:bg-gray-200 font-montserrat">Notre équipe</a>
            <img src="resources/images/logo_white.png" class="h-16">
            <a href="#reseaux" class="p-2.5 rounded-lg hover:bg-gray-200 font-montserrat">Réseaux sociaux</a>
            <a href="#album" class="p-2.5 rounded-lg hover:bg-gray-200 font-montserrat">Album photo</a>
        </navbar>
    </header>

    <main>
        <!-- HERO -->
        <section id="hero" class="h-full text-black pt-20 pb-10 text-black">
            <div class="container mx-auto px-6 text-center">
                <h1 class="font-macondo text-5xl font-bold mb-4">Ocean Harmony</h1>
                <p class="mb-8 text-xl">
                    -<i>Une nuit au fin fond de l'océan </i>-<br>
                    Découvrez le projet et notre équipe pour la Nuit de l'Info 2024 !
                </p>
                <div>
                    <a href="https://ocean-harmony.404-snf.fr/"
                        class="access inline-block bg-[#5627E2] bg-gradient-to-r from-[rgba(245,73,99,0)] to-[rgba(0,0,0,0.2)] text-white font-semibold py-3 px-8 rounded-xl mr-4">Accéder
                        au site</a>
                    <a href="#projet"
                        class="inline-block bg-[#E6DFFB] border-[#5627E2] border-2 text-[#5627E2] font-semibold py-3 px-8 rounded-xl hover:bg-[#5627E2] hover:text-white">En
                        savoir plus</a>
                </div>
            </div>
        </section>

        <!-- PROJET -->
        <section id="projet" class="bg-white flex flex-col items-center">
            <div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-12 lg:px-6">
                <div class="card flex flex-col lg:flex-row items-center p-8 rounded-xl space-y-8 lg:space-y-0 lg:space-x-16">
                    <!-- Texte -->
                    <div class="flex flex-col justify-start lg:w-2/3">
                        <h2 class="text-3xl font-bold mb-4">Le projet</h2>
                        <p class="mb-8">
                            Notre projet : des podcasts pour réfléchir et un jeu pour agir. Votre mission dans le jeu :
                            nettoyer l'océan en réduisant la pollution et en restaurant l'équilibre écologique. Chaque action
                            compte, avec des impacts sur l'environnement et la santé humaine. À vous de jouer pour réconcilier
                            la planète et nos corps !
                        </p>
                        <span class="mb-8">
                            <strong>La Stack</strong> : Vue.js, Nuxt, Tailwind CSS, Figma, Docker, Symfony, Github
                        </span>
                        <div class="flex flex-row">
                            <a href="https://ocean-harmony.404-snf.fr/"
                                class="bg-[#5627E2] bg-gradient-to-r from-[rgba(245,73,99,0)] to-[rgba(0,0,0,0.2)] text-white font-semibold py-3 px-8 rounded-xl mr-4">
                                Accéder au site
                            </a>
                        </div>
                    </div>
                    <!-- Image -->
                    <div class="flex lg:w-1/3 justify-center">
                        <img class="max-w-full h-auto object-contain rounded-xl" src="resources/images/projet-example.png" alt="Exemple du projet">
                    </div>
                </div>
            </div>
        </section>


        <!-- EQUIPE -->
        <section id="equipe" class="bg-white mb-8">
            <div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-12 lg:px-6">

                <div class="mx-auto mb-8 max-w-screen-sm lg:mb-16">
                    <h2 class="text-3xl font-bold mb-4">Notre équipe</h2>
                    <p class="text-gray-600 text-lg max-w-2xl mx-auto mb-12">
                        Voici notre équipe d'étudiants motivés et passionnés par l'informatique, réunis pour concevoir
                        et développer un projet unique dans le cadre de la Nuit de l'Info.
                    </p>
                </div>

                <div class="grid gap-8 lg:gap-16 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3">
                    <div class="text-center text-gray-500 dark:text-gray-400">
                        <img class="mx-auto mb-4 w-36 h-36 rounded-full" src="resources/images/mattéo-peltier.jpg"
                            alt="Leslie Avatar">
                        <h3 class="text-xl text-black font-semibold">Mattéo Peltier</h3>
                        <p>CEO & Développeur Front-end</p>
                        <ul class="flex justify-center mt-4 space-x-4">
                            <li>
                                <a href="https://github.com/MatMatGamer" class="text-gray-900">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                        fill="none">
                                        <path
                                            d="M12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 16.42 4.87 20.17 8.84 21.5C9.34 21.58 9.5 21.27 9.5 21V19.31C6.73 19.91 6.14 17.97 6.14 17.97C5.68 16.81 5.03 16.5 5.03 16.5C4.12 15.88 5.1 15.9 5.1 15.9C6.1 15.97 6.63 16.93 6.63 16.93C7.5 18.45 8.97 18 9.54 17.76C9.63 17.11 9.89 16.67 10.17 16.42C7.95 16.17 5.62 15.31 5.62 11.5C5.62 10.39 6 9.5 6.65 8.79C6.55 8.54 6.2 7.5 6.75 6.15C6.75 6.15 7.59 5.88 9.5 7.17C10.29 6.95 11.15 6.84 12 6.84C12.85 6.84 13.71 6.95 14.5 7.17C16.41 5.88 17.25 6.15 17.25 6.15C17.8 7.5 17.45 8.54 17.35 8.79C18 9.5 18.38 10.39 18.38 11.5C18.38 15.32 16.04 16.16 13.81 16.41C14.17 16.72 14.5 17.33 14.5 18.26V21C14.5 21.27 14.66 21.59 15.17 21.5C19.14 20.16 22 16.42 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z"
                                            fill="#5627E2" />
                                    </svg>
                                </a>
                            </li>
                            <li>
                                <a href="https://www.linkedin.com/in/matt%C3%A9o-peltier-b2416427a/"
                                    class="text-gray-900">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                        fill="none">
                                        <path
                                            d="M19 3C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19ZM18.5 18.5V13.2C18.5 12.3354 18.1565 11.5062 17.5452 10.8948C16.9338 10.2835 16.1046 9.94 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17C14.6813 12.17 15.0374 12.3175 15.2999 12.5801C15.5625 12.8426 15.71 13.1987 15.71 13.57V18.5H18.5ZM6.88 8.56C7.32556 8.56 7.75288 8.383 8.06794 8.06794C8.383 7.75288 8.56 7.32556 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19C6.43178 5.19 6.00193 5.36805 5.68499 5.68499C5.36805 6.00193 5.19 6.43178 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56ZM8.27 18.5V10.13H5.5V18.5H8.27Z"
                                            fill="#5627E2" />
                                    </svg>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="text-center text-gray-500 dark:text-gray-400">
                        <img class="mx-auto mb-4 w-36 h-36 rounded-full" src="resources/images/jules-gohier.png"
                            alt="Leslie Avatar">
                        <h3 class="text-xl text-black font-semibold">Jules Gohier</h3>
                        <p>Développeur Front-end</p>
                        <ul class="flex justify-center mt-4 space-x-4">
                            <li>
                                <a href="https://github.com/JulesGohier" class="text-gray-900">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                        fill="none">
                                        <path
                                            d="M12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 16.42 4.87 20.17 8.84 21.5C9.34 21.58 9.5 21.27 9.5 21V19.31C6.73 19.91 6.14 17.97 6.14 17.97C5.68 16.81 5.03 16.5 5.03 16.5C4.12 15.88 5.1 15.9 5.1 15.9C6.1 15.97 6.63 16.93 6.63 16.93C7.5 18.45 8.97 18 9.54 17.76C9.63 17.11 9.89 16.67 10.17 16.42C7.95 16.17 5.62 15.31 5.62 11.5C5.62 10.39 6 9.5 6.65 8.79C6.55 8.54 6.2 7.5 6.75 6.15C6.75 6.15 7.59 5.88 9.5 7.17C10.29 6.95 11.15 6.84 12 6.84C12.85 6.84 13.71 6.95 14.5 7.17C16.41 5.88 17.25 6.15 17.25 6.15C17.8 7.5 17.45 8.54 17.35 8.79C18 9.5 18.38 10.39 18.38 11.5C18.38 15.32 16.04 16.16 13.81 16.41C14.17 16.72 14.5 17.33 14.5 18.26V21C14.5 21.27 14.66 21.59 15.17 21.5C19.14 20.16 22 16.42 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z"
                                            fill="#5627E2" />
                                    </svg>
                                </a>
                            </li>
                            <li>
                                <a href="https://www.linkedin.com/in/jules-gohier5/" class="text-gray-900">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                        fill="none">
                                        <path
                                            d="M19 3C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19ZM18.5 18.5V13.2C18.5 12.3354 18.1565 11.5062 17.5452 10.8948C16.9338 10.2835 16.1046 9.94 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17C14.6813 12.17 15.0374 12.3175 15.2999 12.5801C15.5625 12.8426 15.71 13.1987 15.71 13.57V18.5H18.5ZM6.88 8.56C7.32556 8.56 7.75288 8.383 8.06794 8.06794C8.383 7.75288 8.56 7.32556 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19C6.43178 5.19 6.00193 5.36805 5.68499 5.68499C5.36805 6.00193 5.19 6.43178 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56ZM8.27 18.5V10.13H5.5V18.5H8.27Z"
                                            fill="#5627E2" />
                                    </svg>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="text-center text-gray-500 dark:text-gray-400">
                        <img class="mx-auto mb-4 w-36 h-36 rounded-full" src="resources/images/romain-tirbois.jpg"
                            alt="Leslie Avatar">
                        <h3 class="text-xl text-black font-semibold">Romain Tirbois</h3>
                        <p>Animateur</p>
                        <ul class="flex justify-center mt-4 space-x-4">
                            <li>
                                <a href="https://github.com/RomainTrbs" class="text-gray-900">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                        fill="none">
                                        <path
                                            d="M12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 16.42 4.87 20.17 8.84 21.5C9.34 21.58 9.5 21.27 9.5 21V19.31C6.73 19.91 6.14 17.97 6.14 17.97C5.68 16.81 5.03 16.5 5.03 16.5C4.12 15.88 5.1 15.9 5.1 15.9C6.1 15.97 6.63 16.93 6.63 16.93C7.5 18.45 8.97 18 9.54 17.76C9.63 17.11 9.89 16.67 10.17 16.42C7.95 16.17 5.62 15.31 5.62 11.5C5.62 10.39 6 9.5 6.65 8.79C6.55 8.54 6.2 7.5 6.75 6.15C6.75 6.15 7.59 5.88 9.5 7.17C10.29 6.95 11.15 6.84 12 6.84C12.85 6.84 13.71 6.95 14.5 7.17C16.41 5.88 17.25 6.15 17.25 6.15C17.8 7.5 17.45 8.54 17.35 8.79C18 9.5 18.38 10.39 18.38 11.5C18.38 15.32 16.04 16.16 13.81 16.41C14.17 16.72 14.5 17.33 14.5 18.26V21C14.5 21.27 14.66 21.59 15.17 21.5C19.14 20.16 22 16.42 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z"
                                            fill="#5627E2" />
                                    </svg>
                                </a>
                            </li>
                            <li>
                                <a href="https://www.linkedin.com/in/romain-tirbois-322016223/" class="text-gray-900">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                        fill="none">
                                        <path
                                            d="M19 3C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19ZM18.5 18.5V13.2C18.5 12.3354 18.1565 11.5062 17.5452 10.8948C16.9338 10.2835 16.1046 9.94 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17C14.6813 12.17 15.0374 12.3175 15.2999 12.5801C15.5625 12.8426 15.71 13.1987 15.71 13.57V18.5H18.5ZM6.88 8.56C7.32556 8.56 7.75288 8.383 8.06794 8.06794C8.383 7.75288 8.56 7.32556 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19C6.43178 5.19 6.00193 5.36805 5.68499 5.68499C5.36805 6.00193 5.19 6.43178 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56ZM8.27 18.5V10.13H5.5V18.5H8.27Z"
                                            fill="#5627E2" />
                                    </svg>
                                </a>
                            </li>
                        </ul>
                    </div>

                    <div class="text-center text-gray-500 dark:text-gray-400">
                        <img class="mx-auto mb-4 w-36 h-36 rounded-full" src="resources/images/romain-gore.jpg"
                            alt="Leslie Avatar">
                        <h3 class="text-xl text-black font-semibold">Romain Gore</h3>
                        <p>Développeur Back-end</p>
                        <ul class="flex justify-center mt-4 space-x-4">
                            <li>
                                <a href="https://github.com/romaingore" class="text-gray-900">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                        fill="none">
                                        <path
                                            d="M12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 16.42 4.87 20.17 8.84 21.5C9.34 21.58 9.5 21.27 9.5 21V19.31C6.73 19.91 6.14 17.97 6.14 17.97C5.68 16.81 5.03 16.5 5.03 16.5C4.12 15.88 5.1 15.9 5.1 15.9C6.1 15.97 6.63 16.93 6.63 16.93C7.5 18.45 8.97 18 9.54 17.76C9.63 17.11 9.89 16.67 10.17 16.42C7.95 16.17 5.62 15.31 5.62 11.5C5.62 10.39 6 9.5 6.65 8.79C6.55 8.54 6.2 7.5 6.75 6.15C6.75 6.15 7.59 5.88 9.5 7.17C10.29 6.95 11.15 6.84 12 6.84C12.85 6.84 13.71 6.95 14.5 7.17C16.41 5.88 17.25 6.15 17.25 6.15C17.8 7.5 17.45 8.54 17.35 8.79C18 9.5 18.38 10.39 18.38 11.5C18.38 15.32 16.04 16.16 13.81 16.41C14.17 16.72 14.5 17.33 14.5 18.26V21C14.5 21.27 14.66 21.59 15.17 21.5C19.14 20.16 22 16.42 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z"
                                            fill="#5627E2" />
                                    </svg>
                                </a>
                            </li>
                            <li>
                                <a href="https://www.linkedin.com/in/romain-gore/" class="text-gray-900">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                        fill="none">
                                        <path
                                            d="M19 3C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19ZM18.5 18.5V13.2C18.5 12.3354 18.1565 11.5062 17.5452 10.8948C16.9338 10.2835 16.1046 9.94 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17C14.6813 12.17 15.0374 12.3175 15.2999 12.5801C15.5625 12.8426 15.71 13.1987 15.71 13.57V18.5H18.5ZM6.88 8.56C7.32556 8.56 7.75288 8.383 8.06794 8.06794C8.383 7.75288 8.56 7.32556 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19C6.43178 5.19 6.00193 5.36805 5.68499 5.68499C5.36805 6.00193 5.19 6.43178 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56ZM8.27 18.5V10.13H5.5V18.5H8.27Z"
                                            fill="#5627E2" />
                                    </svg>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="text-center text-gray-500 dark:text-gray-400">
                        <img class="mx-auto mb-4 w-36 h-36 rounded-full" src="resources/images/quentin-couzinet.jpg"
                            alt="Nabil Avatar">
                        <h3 class="text-xl text-black font-semibold">Quentin Couzinet</h3>
                        <p>CM & Front-end Developer</p>
                        <ul class="flex justify-center mt-4 space-x-4">
                            <li>
                                <a href="https://github.com/soniiix" class="text-gray-900">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                        fill="none">
                                        <path
                                            d="M12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 16.42 4.87 20.17 8.84 21.5C9.34 21.58 9.5 21.27 9.5 21V19.31C6.73 19.91 6.14 17.97 6.14 17.97C5.68 16.81 5.03 16.5 5.03 16.5C4.12 15.88 5.1 15.9 5.1 15.9C6.1 15.97 6.63 16.93 6.63 16.93C7.5 18.45 8.97 18 9.54 17.76C9.63 17.11 9.89 16.67 10.17 16.42C7.95 16.17 5.62 15.31 5.62 11.5C5.62 10.39 6 9.5 6.65 8.79C6.55 8.54 6.2 7.5 6.75 6.15C6.75 6.15 7.59 5.88 9.5 7.17C10.29 6.95 11.15 6.84 12 6.84C12.85 6.84 13.71 6.95 14.5 7.17C16.41 5.88 17.25 6.15 17.25 6.15C17.8 7.5 17.45 8.54 17.35 8.79C18 9.5 18.38 10.39 18.38 11.5C18.38 15.32 16.04 16.16 13.81 16.41C14.17 16.72 14.5 17.33 14.5 18.26V21C14.5 21.27 14.66 21.59 15.17 21.5C19.14 20.16 22 16.42 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z"
                                            fill="#5627E2" />
                                    </svg>
                                </a>
                            </li>
                            <li>
                                <a href="https://www.linkedin.com/in/quentin-couzinet/" class="text-gray-900">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                        fill="none">
                                        <path
                                            d="M19 3C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19ZM18.5 18.5V13.2C18.5 12.3354 18.1565 11.5062 17.5452 10.8948C16.9338 10.2835 16.1046 9.94 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17C14.6813 12.17 15.0374 12.3175 15.2999 12.5801C15.5625 12.8426 15.71 13.1987 15.71 13.57V18.5H18.5ZM6.88 8.56C7.32556 8.56 7.75288 8.383 8.06794 8.06794C8.383 7.75288 8.56 7.32556 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19C6.43178 5.19 6.00193 5.36805 5.68499 5.68499C5.36805 6.00193 5.19 6.43178 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56ZM8.27 18.5V10.13H5.5V18.5H8.27Z"
                                            fill="#5627E2" />
                                    </svg>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="text-center text-gray-500 dark:text-gray-400">
                        <img class="mx-auto mb-4 w-36 h-36 rounded-full" src="resources/images/nabil-sabry.png"
                            alt="Nabil Avatar">
                        <h3 class="text-xl text-black font-semibold">Nabil Sabry</h3>
                        <p>UI/UX Designeur</p>
                        <ul class="flex justify-center mt-4 space-x-4">
                            <li>
                                <a href="https://www.behance.net/designinsync" class="text-gray-900">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                        fill="none">
                                        <path
                                            d="M7.354 11.107V9.50202C7.354 9.40702 7.354 9.36902 7.478 9.36902C8.541 9.36902 9.405 9.30602 9.834 9.55902C10.264 9.81102 10.282 10.159 10.289 10.263C10.296 10.367 10.293 10.516 10.093 10.879C9.893 11.242 8.998 11.249 8.352 11.249H7.497C7.392 11.249 7.354 11.211 7.354 11.107ZM10.3 12.789C10.399 12.9154 10.4697 13.0617 10.5073 13.2178C10.5448 13.374 10.5484 13.5364 10.5176 13.694C10.4869 13.8517 10.4226 14.0009 10.3292 14.1315C10.2357 14.2621 10.1153 14.3711 9.976 14.451C9.77142 14.5371 9.55195 14.5823 9.33 14.584H7.487C7.392 14.584 7.354 14.584 7.354 14.461V12.561C7.354 12.466 7.354 12.428 7.478 12.428H8.703C9.463 12.428 9.938 12.362 10.3 12.789Z"
                                            fill="#5627E2" />
                                        <path
                                            d="M16.3745 11.6852C16.3274 11.5743 16.2561 11.4754 16.1656 11.3959C16.0752 11.3163 15.968 11.2581 15.852 11.2255C15.6202 11.1622 15.3775 11.1488 15.1401 11.1862C14.9027 11.2236 14.6759 11.3109 14.4748 11.4425C14.2743 11.645 14.1448 11.907 14.1055 12.1892C14.1055 12.288 14.1055 12.3065 14.2228 12.3065H16.4105C16.5185 12.3065 16.5185 12.3065 16.5092 12.1708C16.4989 12.0011 16.4536 11.8356 16.3745 11.6852ZM16.3745 11.6852C16.3274 11.5743 16.2551 11.4754 16.1647 11.3959C16.0742 11.3163 15.968 11.2581 15.852 11.2255C15.6202 11.1622 15.3775 11.1488 15.1401 11.1862C14.9027 11.2236 14.6759 11.3109 14.4748 11.4425C14.2743 11.645 14.1439 11.907 14.1046 12.1892C14.1046 12.288 14.1046 12.3065 14.2218 12.3065H16.4105C16.5185 12.3065 16.5185 12.3065 16.5092 12.1708C16.4989 12.0011 16.4517 11.8356 16.3726 11.6852M17.4 3H6.6C5.64522 3 4.72955 3.37928 4.05442 4.05442C3.37928 4.72955 3 5.64522 3 6.6V17.4C3 18.3548 3.37928 19.2705 4.05442 19.9456C4.72955 20.6207 5.64522 21 6.6 21H17.4C18.3548 21 19.2705 20.6207 19.9456 19.9456C20.6207 19.2705 21 18.3548 21 17.4V6.6C21 5.64522 20.6207 4.72955 19.9456 4.05442C19.2705 3.37928 18.3548 3 17.4 3ZM13.872 8.73231C13.872 8.66123 13.872 8.63354 13.9532 8.63354H16.8692V9.39046C16.8692 9.39046 16.872 9.444 16.824 9.444H13.9985C13.872 9.444 13.872 9.444 13.872 9.31846V8.73231ZM11.172 15.348C10.0643 15.9508 8.20246 15.708 5.99723 15.708V8.24677H9.516C10.416 8.24677 11.4868 8.472 11.7748 9.42554C11.9243 9.84201 11.9152 10.299 11.7492 10.7092C11.5832 11.1194 11.2719 11.454 10.8748 11.6492C11.2408 11.7847 11.5604 12.0222 11.7957 12.3336C12.031 12.645 12.1721 13.0173 12.2024 13.4065C12.2327 13.7956 12.1509 14.1852 11.9667 14.5293C11.7824 14.8734 11.5034 15.1575 11.1628 15.348H11.172ZM17.8772 13.224H14.2772C14.1785 13.224 14.088 13.2775 14.1055 13.404C14.2135 13.9348 14.4563 14.4932 15.0065 14.5745C15.297 14.6609 15.608 14.6476 15.8901 14.5367C16.1722 14.4258 16.409 14.2236 16.5628 13.9625C16.5628 13.9625 16.608 13.908 16.6348 13.908H17.8052C17.8052 13.908 17.8772 13.908 17.8588 13.9708C17.7353 14.3203 17.5527 14.646 17.3188 14.9335C17.0059 15.2324 16.6285 15.4551 16.2156 15.5844C15.8028 15.7137 15.3657 15.7461 14.9383 15.6791C14.5109 15.6122 14.1047 15.4476 13.7512 15.1982C13.3977 14.9489 13.1064 14.6214 12.9 14.2412C12.773 13.9877 12.6939 13.713 12.6665 13.4308C12.5059 12.7215 12.6286 11.9775 13.0085 11.3573C13.3883 10.7372 13.9952 10.2898 14.7 10.1105C16.7428 9.66923 18.0388 11.0732 18.0388 13.0532C18.0418 13.0764 18.0395 13.0999 18.0319 13.122C18.0244 13.1441 18.0119 13.1642 17.9954 13.1807C17.9789 13.1972 17.9589 13.2097 17.9368 13.2172C17.9147 13.2247 17.8911 13.227 17.868 13.224H17.8772ZM15.8612 11.2255C15.6296 11.1613 15.3868 11.1481 15.1495 11.1868C14.9123 11.2237 14.7 11.2689 14.484 11.4425C14.268 11.6151 14.1535 11.9068 14.1148 12.1892C14.1148 12.288 14.1148 12.3065 14.232 12.3065H16.4105C16.5185 12.3065 16.5185 12.3065 16.5092 12.1708C16.4989 12.0011 16.4536 11.8356 16.3745 11.6852C16.3274 11.5743 16.2561 11.4754 16.1656 11.3959C16.0752 11.3163 15.968 11.2581 15.852 11.2255H15.8612Z"
                                            fill="#5627E2" />
                                    </svg>
                                </a>
                            </li>
                            <li>
                                <a href="https://www.linkedin.com/in/nabil-sabry/" class="text-gray-900">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                        fill="none">
                                        <path
                                            d="M19 3C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19ZM18.5 18.5V13.2C18.5 12.3354 18.1565 11.5062 17.5452 10.8948C16.9338 10.2835 16.1046 9.94 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17C14.6813 12.17 15.0374 12.3175 15.2999 12.5801C15.5625 12.8426 15.71 13.1987 15.71 13.57V18.5H18.5ZM6.88 8.56C7.32556 8.56 7.75288 8.383 8.06794 8.06794C8.383 7.75288 8.56 7.32556 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19C6.43178 5.19 6.00193 5.36805 5.68499 5.68499C5.36805 6.00193 5.19 6.43178 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56ZM8.27 18.5V10.13H5.5V18.5H8.27Z"
                                            fill="#5627E2" />
                                    </svg>
                                </a>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>
        </section>

        <!-- RESEAUX -->
        <section id="reseaux" class="bg-white flex flex-col items-center">
            <div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-12 lg:px-6">
                <div class="mx-auto max-w-screen-sm lg:mb-12">
                    <h2 class="text-3xl font-bold mb-4">Nos réseaux sociaux</h2>
                </div>

                <div class="card flex p-8 rounded-xl justify-center">
                    <div class="grid gap-8 lg:gap-16 grid-cols-2 items-center">
                        <div class="flex flex-col justify-center items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="49" viewBox="0 0 48 49"
                                fill="none">
                                <mask id="mask0_80_139" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="1"
                                    y="2" width="44" height="44">
                                    <path d="M1 2.5H46V47.5H1V2.5Z" fill="white" />
                                </mask>
                                <g mask="url(#mask0_80_139)">
                                    <path
                                        d="M36.4048 4.5H43.4942L28.0078 22.2451L46.2283 46.3961H31.9636L20.7829 31.7516L8.0041 46.3961H0.908056L17.471 27.4094L0 4.5033H14.628L24.7189 17.8864L36.4048 4.5ZM33.9118 42.1431H37.8412L12.4816 8.53177H8.26827L33.9118 42.1431Z"
                                        fill="#5323C4" />
                                </g>
                            </svg>
                            <a href="https://x.com/_404_SNF" class="mt-4 font-bold text-[#5323C4]">@_404_SNF</a>
                        </div>
                        <div class="flex flex-col justify-center items-center">
                            <svg class="mt-1.5" xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 44 44"
                                fill="none">
                                <path
                                    d="M24.2616 0C26.7365 0.00659984 27.9926 0.0197995 29.0772 0.0505988L29.504 0.0659983C29.9967 0.0835979 30.4829 0.105597 31.0703 0.131997C33.411 0.241994 35.0081 0.611585 36.4094 1.15497C37.8613 1.71376 39.0845 2.47054 40.3076 3.69151C41.4267 4.79089 42.2923 6.12129 42.8441 7.58982C43.3875 8.99118 43.757 10.5883 43.867 12.9313C43.8934 13.5165 43.9154 14.0027 43.933 14.4976L43.9462 14.9244C43.9792 16.0068 43.9924 17.263 43.9968 19.7379L43.999 21.3791V24.261C44.0044 25.8657 43.9875 27.4703 43.9484 29.0745L43.9352 29.5013C43.9176 29.9963 43.8956 30.4825 43.8692 31.0676C43.7592 33.4106 43.3853 35.0056 42.8441 36.4091C42.2923 37.8776 41.4267 39.208 40.3076 40.3074C39.2083 41.4265 37.8779 42.2922 36.4094 42.844C35.0081 43.3873 33.411 43.7569 31.0703 43.8669L29.504 43.9329L29.0772 43.9461C27.9926 43.9769 26.7365 43.9923 24.2616 43.9967L22.6205 43.9989H19.7409C18.1355 44.0046 16.5302 43.9877 14.9253 43.9483L14.4985 43.9351C13.9763 43.9154 13.4542 43.8926 12.9322 43.8669C10.5915 43.7569 8.9944 43.3873 7.59087 42.844C6.12317 42.2919 4.79358 41.4263 3.69706 40.3074C2.575 39.2083 1.7086 37.8778 1.15619 36.4091C0.612821 35.0077 0.243239 33.4106 0.133244 31.0676L0.0672479 29.5013L0.0562487 29.0745C0.0156961 27.4703 -0.00263832 25.8657 0.00125129 24.261V19.7379C-0.00483777 18.1333 0.0112965 16.5286 0.049649 14.9244L0.0650482 14.4976C0.0826473 14.0027 0.104646 13.5165 0.131045 12.9313C0.241039 10.5883 0.61062 8.99338 1.15399 7.58982C1.70769 6.12069 2.57561 4.79024 3.69706 3.69151C4.79515 2.57295 6.12396 1.70732 7.59087 1.15497C8.9944 0.611585 10.5893 0.241994 12.9322 0.131997C13.5174 0.105597 14.0057 0.0835979 14.4985 0.0659983L14.9253 0.0527986C16.5294 0.0137116 18.134 -0.00315626 19.7387 0.00219979L24.2616 0ZM22.0001 10.9997C19.0829 10.9997 16.2852 12.1586 14.2224 14.2215C12.1596 16.2843 11.0007 19.0822 11.0007 21.9995C11.0007 24.9168 12.1596 27.7146 14.2224 29.7775C16.2852 31.8403 19.0829 32.9992 22.0001 32.9992C24.9174 32.9992 27.7151 31.8403 29.7779 29.7775C31.8407 27.7146 32.9996 24.9168 32.9996 21.9995C32.9996 19.0822 31.8407 16.2843 29.7779 14.2215C27.7151 12.1586 24.9174 10.9997 22.0001 10.9997ZM22.0001 15.3996C22.8668 15.3995 23.725 15.57 24.5258 15.9016C25.3266 16.2331 26.0542 16.7191 26.6671 17.3319C27.2801 17.9446 27.7663 18.6721 28.0981 19.4728C28.4299 20.2735 28.6008 21.1317 28.6009 21.9984C28.6011 22.8651 28.4305 23.7233 28.099 24.5241C27.7674 25.3249 27.2814 26.0525 26.6687 26.6655C26.056 27.2784 25.3285 27.7647 24.5278 28.0965C23.7272 28.4283 22.869 28.5992 22.0023 28.5993C20.252 28.5993 18.5733 27.904 17.3357 26.6663C16.098 25.4285 15.4027 23.7499 15.4027 21.9995C15.4027 20.2491 16.098 18.5704 17.3357 17.3327C18.5733 16.095 20.252 15.3996 22.0023 15.3996M33.5518 7.69981C32.8224 7.69981 32.123 7.98954 31.6073 8.50525C31.0916 9.02096 30.8019 9.72042 30.8019 10.4497C30.8019 11.1791 31.0916 11.8785 31.6073 12.3942C32.123 12.91 32.8224 13.1997 33.5518 13.1997C34.2811 13.1997 34.9805 12.91 35.4962 12.3942C36.0119 11.8785 36.3016 11.1791 36.3016 10.4497C36.3016 9.72042 36.0119 9.02096 35.4962 8.50525C34.9805 7.98954 34.2811 7.69981 33.5518 7.69981Z"
                                    fill="#5323C4" />
                            </svg>
                            <a href="https://www.instagram.com/_404_snf/"
                                class="mt-4 font-bold text-[#5323C4]">@_404_snf</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- ALBUM PHOTO -->
        <section id="album" class="bg-white flex flex-col items-center">
            <div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-12 lg:px-6">
                <div class="mx-auto max-w-screen-sm lg:mb-12">
                    <h2 class="text-3xl font-bold mb-3">Album photo</h2>
                </div>

                <div class="card p-8 rounded-xl bg-[#E6DFFB]">
                    <div class="grid grid-cols-4 gap-4">
                        <div>
                            <img class="h-auto max-w-full rounded-lg" src="resources/images/album/album1.png" alt="">
                        </div>
                        <div>
                            <img class="h-auto max-w-full rounded-lg" src="resources/images/album/album2.png" alt="">
                        </div>
                        <div>
                            <img class="h-auto max-w-full rounded-lg" src="resources/images/album/album3.png" alt="">
                        </div>
                        <div>
                            <img class="h-auto max-w-full rounded-lg" src="resources/images/album/album4.png" alt="">
                        </div>
                        <div>
                            <img class="h-auto max-w-full rounded-lg" src="resources/images/album/album5.jpg" alt="">
                        </div>
                        <div>
                            <img class="h-auto max-w-full rounded-lg" src="resources/images/album/album6.png" alt="">
                        </div>
                        <div>
                            <img class="h-auto max-w-full rounded-lg" src="resources/images/album/album7.png" alt="">
                        </div>
                        <div>
                            <img class="h-auto max-w-full rounded-lg" src="resources/images/album/album8.jpg" alt="">
                        </div>

                    </div>

                </div>

            </div>
        </section>
    </main>

    <!-- FOOTER -->
    <footer class="flex w-full flex-row justify-center bg-slate-100 h-[4rem]">
        <navbar class="flex flex-row items-center">
            2024 © 404 SNF
        </navbar>
    </footer>
</body>

</html>