Skip to content

Commit 47f8cb3

Browse files
Sandro642Sandro642
authored
Update index.html
1 parent 540bee4 commit 47f8cb3

1 file changed

Lines changed: 150 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,151 @@
1+
<!DOCTYPE html>
2+
<html lang="fr">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>NodeLink - Bientôt Disponible</title>
7+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
8+
<style>
9+
:root {
10+
--primary-color: #3498db; /* Un bleu moderne */
11+
--secondary-color: #2c3e50; /* Un gris foncé pour le contraste */
12+
--text-color: #ecf0f1; /* Texte clair */
13+
--background-color: #1a1a1a; /* Fond très sombre */
14+
--accent-color: #e74c3c; /* Rouge pour les accents ou alertes */
15+
}
116

17+
body {
18+
font-family: 'Roboto', sans-serif;
19+
background-color: var(--background-color);
20+
color: var(--text-color);
21+
display: flex;
22+
justify-content: center;
23+
align-items: center;
24+
min-height: 100vh;
25+
margin: 0;
26+
overflow: hidden; /* Pour le dégradé de fond */
27+
position: relative;
28+
}
29+
30+
/* Effet de fond subtil */
31+
body::before {
32+
content: '';
33+
position: absolute;
34+
top: 0;
35+
left: 0;
36+
width: 100%;
37+
height: 100%;
38+
background: radial-gradient(circle at top left, rgba(52, 152, 219, 0.1), transparent 50%),
39+
radial-gradient(circle at bottom right, rgba(231, 76, 60, 0.1), transparent 50%);
40+
z-index: 0;
41+
}
42+
43+
.container {
44+
background-color: var(--secondary-color);
45+
padding: 40px 60px;
46+
border-radius: 12px;
47+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
48+
text-align: center;
49+
max-width: 700px;
50+
width: 90%;
51+
position: relative;
52+
z-index: 1;
53+
transform: translateY(0);
54+
animation: fadeInScale 1s ease-out forwards;
55+
}
56+
57+
@keyframes fadeInScale {
58+
from {
59+
opacity: 0;
60+
transform: translateY(20px) scale(0.95);
61+
}
62+
to {
63+
opacity: 1;
64+
transform: translateY(0) scale(1);
65+
}
66+
}
67+
68+
.logo {
69+
margin-bottom: 25px;
70+
}
71+
72+
.logo img {
73+
max-width: 180px;
74+
height: auto;
75+
filter: drop-shadow(0 0 8px rgba(52, 152, 219, 0.7)); /* Ombre lumineuse */
76+
}
77+
78+
h1 {
79+
font-size: 3.2em;
80+
color: var(--primary-color);
81+
margin-bottom: 15px;
82+
text-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
83+
letter-spacing: 1px;
84+
font-weight: 700;
85+
}
86+
87+
p {
88+
font-size: 1.2em;
89+
line-height: 1.6;
90+
margin-bottom: 30px;
91+
font-weight: 300;
92+
color: rgba(236, 240, 241, 0.85);
93+
}
94+
95+
.cta-button {
96+
display: inline-block;
97+
background-color: var(--primary-color);
98+
color: var(--background-color);
99+
padding: 14px 30px;
100+
border-radius: 8px;
101+
text-decoration: none;
102+
font-size: 1.1em;
103+
font-weight: 700;
104+
transition: background-color 0.3s ease, transform 0.2s ease;
105+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
106+
}
107+
108+
.cta-button:hover {
109+
background-color: #2980b9; /* Bleu plus foncé au survol */
110+
transform: translateY(-3px);
111+
}
112+
113+
.footer {
114+
margin-top: 40px;
115+
font-size: 0.9em;
116+
color: rgba(236, 240, 241, 0.6);
117+
}
118+
119+
/* Styles pour une icône de chargement facultative */
120+
.loading-animation {
121+
display: inline-block;
122+
width: 20px;
123+
height: 20px;
124+
border: 3px solid var(--text-color);
125+
border-bottom-color: transparent;
126+
border-radius: 50%;
127+
animation: spin 1s linear infinite;
128+
vertical-align: middle;
129+
margin-left: 10px;
130+
}
131+
132+
@keyframes spin {
133+
0% { transform: rotate(0deg); }
134+
100% { transform: rotate(360deg); }
135+
}
136+
</style>
137+
</head>
138+
<body>
139+
<div class="container">
140+
<div class="logo">
141+
<img src="https://via.placeholder.com/180x60?text=NodeLink+Logo" alt="NodeLink Logo">
142+
</div>
143+
<h1>NodeLink est en cours de création !</h1>
144+
<p>Nous travaillons d'arrache-pied pour vous apporter une expérience exceptionnelle. <br> Préparez-vous à découvrir une nouvelle façon de [insérer un petit slogan ou une promesse de NodeLink].</p>
145+
<a href="#" class="cta-button">Restez Connectés</a>
146+
<div class="footer">
147+
<p>&copy; 2023 NodeLink. Tous droits réservés.</p>
148+
</div>
149+
</div>
150+
</body>
151+
</html>

0 commit comments

Comments
 (0)