Skip to content

Commit c1265eb

Browse files
nabondancenabondance
committed
feat: coming soon with brand color
1 parent f337fac commit c1265eb

File tree

2 files changed

+22
-102
lines changed

2 files changed

+22
-102
lines changed

‎index.html‎

Lines changed: 21 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,121 +1,40 @@
11
<!DOCTYPE html>
2-
<html lang="fr">
2+
<html lang="en">
33
<head>
4-
5-
<script defer src="https://cloud.umami.is/script.js" data-website-id="8c88412c-a7d5-42f3-9644-f84e1b0c9b8a"></script>
6-
<meta charset="UTF-8" />
7-
<title>Think2 - Coming soon !</title>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Think2 - Coming soon!</title>
87
<style>
98
body {
109
height: 100vh;
11-
display: grid;
12-
place-items: center;
13-
background: #f0f0f0;
14-
font-family: Arial, sans-serif;
15-
}
16-
17-
#logo {
18-
position: flex;
19-
top: 20px;
20-
left: 20px;
21-
font-size: 4rem; /* Ajustez si besoin */
22-
font-weight: bold;
23-
}
24-
25-
.flip-container {
26-
display: inline-block;
27-
width: 3em; /* ← augmentée pour loger “twice” */
28-
height: 1.1em; /* Ajustez si besoin pour la hauteur */
29-
position: relative;
30-
perspective: 600px;
31-
margin-left: 1px;
32-
}
33-
34-
.flip-face {
35-
position: absolute;
36-
width: 100%;
37-
height: 100%;
38-
line-height: 1.1em;
39-
text-align: center;
40-
backface-visibility: hidden;
41-
border: 2px solid #333;
42-
border-radius: 6px;
43-
background: #333;
44-
color: #fff;
45-
font-weight: bold;
46-
transform-origin: bottom;
4710
display: flex;
48-
align-items: center;
4911
justify-content: center;
12+
align-items: center;
13+
background: #030620;
14+
color: #f2eb0a;
15+
font-family: Arial, sans-serif;
16+
margin: 0;
5017
}
5118

52-
.front {
53-
transform: rotateX(0deg);
54-
z-index: 2;
55-
}
56-
57-
.back {
58-
transform: rotateX(180deg);
59-
}
60-
61-
/* Animations */
62-
.flip-animate .front {
63-
animation: flipFront 0.6s forwards;
64-
}
65-
.flip-animate .back {
66-
animation: flipBack 0.6s forwards;
19+
#container {
20+
text-align: center;
6721
}
6822

69-
@keyframes flipFront {
70-
0% {
71-
transform: rotateX(0deg);
72-
}
73-
100% {
74-
transform: rotateX(-180deg);
75-
}
23+
#logo {
24+
font-size: 4rem;
25+
font-weight: bold;
7626
}
7727

78-
@keyframes flipBack {
79-
0% {
80-
transform: rotateX(180deg);
81-
}
82-
100% {
83-
transform: rotateX(0deg);
84-
}
28+
#text {
29+
font-size: 1.5rem;
30+
margin-top: 1rem;
8531
}
8632
</style>
8733
</head>
8834
<body>
89-
90-
<div id="logo">Think<div class="flip-container" id="flip-container">
91-
<div class="flip-face front" id="front-face">2</div>
92-
<div class="flip-face back" id="back-face"></div>
93-
</div>
94-
coming soon !
35+
<div id="container">
36+
<img id="logo" src="v1-yellow-bottom.svg" alt="Think2 Logo">
37+
<div id="text">Coming soon !</div>
9538
</div>
96-
97-
<script>
98-
const textes = ["2", "Twice", "²", "Too", "2", "To", "Two"];
99-
let currentIndex = 0;
100-
101-
const flipContainer = document.getElementById('flip-container');
102-
const frontFace = document.getElementById('front-face');
103-
const backFace = document.getElementById('back-face');
104-
105-
function flipToNext() {
106-
let nextIndex = (currentIndex + 1) % textes.length;
107-
let nextText = textes[nextIndex];
108-
backFace.textContent = nextText;
109-
flipContainer.classList.add('flip-animate');
110-
111-
setTimeout(() => {
112-
frontFace.textContent = nextText;
113-
flipContainer.classList.remove('flip-animate');
114-
currentIndex = nextIndex;
115-
}, 600);
116-
}
117-
118-
setInterval(flipToNext, 1000);
119-
</script>
12039
</body>
121-
</html>
40+
</html>

‎v1-yellow-bottom.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)