CINXE.COM
Coming Soon
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Coming Soon</title> <link rel="stylesheet" href="https://use.typekit.net/ruf7xep.css"> <style> body { margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; background-color: #111023; /* couleur gris tr猫s fonc茅 */ font-family: 'calling code', sans-serif; position: relative; overflow: hidden; color: white; /* couleur du texte en blanc */ } .container { text-align: center; position: relative; } .container img { width: 40%; /* Ajuste la largeur du logo 脿 30% de la largeur de l'茅cran par d茅faut */ animation: float 6s ease-in-out infinite; filter: brightness(0) invert(1); /* transformation en blanc */ } @media (max-width: 768px) { .container img { width: 55%; /* Ajuste la largeur du logo 脿 55% de la largeur de l'茅cran sur mobile en mode portrait */ } } @keyframes float { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } .corners { position: absolute; width: 15px; height: 15px; border: 2px solid white; /* bordures blanches */ } .corner-top-left { top: 5%; left: 5%; border-right: none; border-bottom: none; } .corner-top-right { top: 5%; right: 5%; border-left: none; border-bottom: none; } .corner-bottom-left { bottom: 5%; left: 5%; border-right: none; border-top: none; } .corner-bottom-right { bottom: 5%; right: 5%; border-left: none; border-top: none; } .coming-soon-wrapper { margin-top: 20px; position: relative; display: inline-block; } .coming-soon { font-size: 18px; position: relative; display: inline-block; z-index: 2; /* Met le texte au-dessus de la surbrillance */ } .highlight { display: inline-block; width: 20px; height: 20px; background-color: #A280D8; border-radius: 10px; position: absolute; left: calc(100% + 10px); bottom: 0; z-index: 1; /* Met la surbrillance derri猫re le texte */ animation: highlight 5s ease-in-out infinite; /* Dur茅e totale de l'animation de 5 secondes */ animation-delay: 1s; /* Ajoute un d茅lai de d茅marrage de 1 seconde */ } @keyframes highlight { 0%, 60%, 100% { width: 20px; height: 20px; border-radius: 10px; left: calc(100% + 10px); } 40% { width: calc(100% + 20px); height: 20px; border-radius: 10px; left: -10px; } } .contact-info { margin-top: 10px; font-size: 12px; } .contact-info a { color: white; /* couleur du texte en blanc */ text-decoration: none; /* Enl猫ve le soulignement */ } .old-website-link { margin-top: 20px; font-size: 14px; } .old-website-link a { text-decoration: none; /* Enl猫ve le soulignement */ font-weight: 700; color: white; /* couleur du texte en blanc */ } .old-website-link a:hover { text-decoration: none; /* Souligne le texte au survol */ font-weight: 700; color: #A280D8; } </style> </head> <body> <div class="container"> <img src="img/logo_pad01.png" alt="Logo"><br> <div class="coming-soon-wrapper"> <div class="coming-soon"> New website coming soon </div> <div class="highlight"></div> </div> <div class="contact-info"> <a id="email-link" href="mailto:contact@padesign.fr">contact@padesign.fr</a><br> <a href="tel:+33139169331">01.39.16.93.31</a> </div> <div class="old-website-link"> > <a href="https://www.padesign.fr/index2.html" target="_blank">OLD WEBSITE</a> < </div> </div> <div class="corners corner-top-left"></div> <div class="corners corner-top-right"></div> <div class="corners corner-bottom-left"></div> <div class="corners corner-bottom-right"></div> <script> document.addEventListener("DOMContentLoaded", function() { var user = 'contact'; var domain = 'padesign.fr'; var email = user + '@' + domain; var emailLink = document.getElementById('email-link'); emailLink.setAttribute('href', 'mailto:' + email); emailLink.textContent = email; }); </script> </body> </html>