From bb505a02488a92140f79141ebfdb5d0e6784fc89 Mon Sep 17 00:00:00 2001 From: Marianne <96336286+Wolap@users.noreply.github.com> Date: Sat, 2 Mar 2024 16:07:29 +0100 Subject: [PATCH] :rocket: DEPLOYING --- assets/Background.svg | 50 +++++++++++++++++++++ assets/phone.svg | 10 +++++ index.html | 30 +++++++++++++ script.js | 22 +++++++++ style.css | 102 ++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 214 insertions(+) create mode 100644 assets/Background.svg create mode 100644 assets/phone.svg create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/assets/Background.svg b/assets/Background.svg new file mode 100644 index 0000000..41d4ba9 --- /dev/null +++ b/assets/Background.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/phone.svg b/assets/phone.svg new file mode 100644 index 0000000..b97b5e8 --- /dev/null +++ b/assets/phone.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..8f1b33f --- /dev/null +++ b/index.html @@ -0,0 +1,30 @@ + + + + + + + + + + Document + + +
+
+

PIXEL

+

//WAR

+
+ +
+ + +
+ +

En attendant, commencez votre Hacker's Journey!

+ + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..de7a073 --- /dev/null +++ b/script.js @@ -0,0 +1,22 @@ +// modifier heure si nécessaire +const endDate = new Date("2024-03-15T20:00:00").getTime(); + +const countdown = setInterval(() => { + const now = new Date().getTime(); + const distance = endDate - now; + + const days = Math.floor(distance / (1000 * 60 * 60 * 24)); + const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); + const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); + const seconds = Math.floor((distance % (1000 * 60)) / 1000); + + document.getElementById("countdown").innerHTML = `

${days}J

`; + document.getElementById("countdown").innerHTML += `

${hours}H

`; + document.getElementById("countdown").innerHTML += `

${minutes}M

`; + document.getElementById("countdown").innerHTML += `

${seconds}S

`; + + if (distance < 0) { + clearInterval(countdown); + document.getElementById("countdown").innerHTML ="Le countdown est terminé !"; + } +}, 1000); diff --git a/style.css b/style.css new file mode 100644 index 0000000..7fbae01 --- /dev/null +++ b/style.css @@ -0,0 +1,102 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Press Start 2P", system-ui; + +} + +body { + background-color: #f4f4f4; + background-color: #131518; + color: white; + height: 100vh; +} + +section { + width: 90%; + max-width: 800px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-weight: 700; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.title { + width: 90%; + max-width: 770px; + font-size: 7em; + margin-bottom: 100px; +} + +#countdown { + display: flex; + font-size: 2em; + margin-bottom: 100px; +} + +#countdown p { + margin: 0 0.5em; +} + +#countdown p span { + margin: 0 0.5em; + opacity: 0.5; +} + +.title p:nth-child(1) { + text-align: left; +} + +.title p:nth-child(2) { + text-align: right; +} + +.btn-notification { + background-image: url(assets/Background.svg); + background-repeat: no-repeat; + background-size: cover; + color: white; + border: none; + padding: 1.5em; + cursor: pointer; +} + +.wait { + position: fixed; + bottom: 0; + left: 50%; + transform: translateX(-50%); + margin-bottom: 1.5em; + font-size: 0.8em; + text-align: center; +} + +.wait a { + color: #5C5CFF; + text-decoration: none; +} + +@media screen and (max-width: 768px) { + section { + max-width: 90%; + } + + .title { + font-size: 3.5em; + text-align: center; + } + + #countdown { + font-size: 1em; + } + + .wait { + width: 90%; + } +} \ No newline at end of file