You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

96 lines
2.6 KiB

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<title>Corentin - En Construction</title>
<style>
body {
background-color: #1a1a1a;
color: #fff;
font-family: 'Roboto', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
padding: 0;
animation: fadeIn 2s ease-in;
}
.development-container {
text-align: center;
background: rgba(0, 0, 0, 0.6);
padding: 50px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
}
.dev-message {
font-size: 2em;
font-weight: bold;
margin: 20px 0;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}
.dev-submessage {
font-size: 1.3em;
color: #ccc;
margin-bottom: 40px;
}
.spinner {
margin: 40px auto;
border: 10px solid rgba(255, 255, 255, 0.3);
border-top: 10px solid #3498db;
border-radius: 50%;
width: 100px;
height: 100px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
footer {
position: fixed;
bottom: 20px;
width: 100%;
text-align: center;
color: #aaa;
font-size: 0.9em;
}
footer a {
color: #3498db;
text-decoration: none;
transition: color 0.3s ease;
}
footer a:hover {
color: #fff;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
</head>
<body>
<div class="development-container">
<h1 class="dev-message">Page en cours de développement</h1>
<p class="dev-submessage">Revenez bientôt !</p>
<div class="spinner"></div>
<p class="dev-submessage">Merci pour votre patience !</p>
</div>
<footer>
<p>Pour toute question, contactez-moi à <a href="mailto:contact@corentincaillot.com">contact@corentincaillot.com</a></p>
</footer>
</body>
</html>
k