From cdc8cf1eb8b9227ad80efaff93acab8e685481d6 Mon Sep 17 00:00:00 2001 From: nathan boileau Date: Tue, 10 Jan 2023 19:29:14 +0100 Subject: [PATCH] =?UTF-8?q?Petites=20modif=20sur=20la=20page=20de=20pr?= =?UTF-8?q?=C3=A9sentation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- WEB/View/src/CSS/Pres.css | 134 --------------------- WEB/View/src/CSS/Presentation.css | 142 ++++++++++++++++++++++ WEB/View/src/pages/Presentation.html | 169 ++++++++++++--------------- 3 files changed, 218 insertions(+), 227 deletions(-) delete mode 100644 WEB/View/src/CSS/Pres.css create mode 100644 WEB/View/src/CSS/Presentation.css diff --git a/WEB/View/src/CSS/Pres.css b/WEB/View/src/CSS/Pres.css deleted file mode 100644 index db86b961..00000000 --- a/WEB/View/src/CSS/Pres.css +++ /dev/null @@ -1,134 +0,0 @@ -/*Fonts CSS */ - -@font-face { - font-family: Fauna; - src: url("../../assets/fonts/Fauna.ttf"); - } - @font-face { - font-family: Equinox; - src: url("../../assets/fonts/Equinox.otf"); - } - /* End Fonts CSS */ - html { - scroll-behavior: smooth; - } - - body { - min-height: 100vh; - font-family: "Equinox", sans-serif; - color: white; - height: 100vh; - background-position: center center; - background-attachment: fixed; - background-repeat: no-repeat; - background-size: cover; - background-color: #050e15; - } - - /* Navbar CSS */ - - nav { - background-color: #050e15; - } - - /* Moving fox CSS */ - - .moving-fox { - position: relative; - top: 0; - z-index: -1; - opacity: 0; - } - - /* Section Histoire */ - - section { - min-height: 60vh; - margin-bottom: 10px; - } - - .hidden { - opacity: 0; - filter: blur(10px); - transform: translateX(-100px); - transition: all 1.2s; - } - - .show { - opacity: 1; - filter: blur(0px); - transform: translateX(0px); - } - - @media (prefers-reduced-motion) { - .hidden { - transition: none; - } - } - - p { - font-family: "Fauna", sans-serif; - font-size: 20px; - } - - /* Scroll down arrow */ - - .scroll-down { - position: absolute; - bottom: 15px; - left: 50%; - margin-left: -16px; - display: block; - width: 40px; - height: 40px; - border: 2px solid #fff; - background-size: 14px auto; - border-radius: 50%; - z-index: 2; - -webkit-animation: bounce 2s infinite 2s; - animation: bounce 2s infinite 2s; - -webkit-transition: all 0.2s ease-in; - transition: all 0.2s ease-in; - } - - .scroll-down:before { - position: absolute; - top: calc(50% - 8px); - left: calc(50% - 6px); - transform: rotate(-45deg); - display: block; - width: 12px; - height: 12px; - content: ""; - border: 2px solid white; - border-width: 0px 0 2px 2px; - } - - @keyframes bounce { - 0%, - 100%, - 20%, - 50%, - 80% { - transform: translateY(0); - -webkit-transform: translateY(0); - -ms-transform: translateY(0); - -moz-transform: translateY(0); - -o-transform: translateY(0); - } - 40% { - transform: translateY(-10px); - -webkit-transform: translateY(-10px); - -ms-transform: translateY(-10px); - -moz-transform: translateY(-10px); - -o-transform: translateY(-10px); - } - 60% { - transform: translateY(-5px); - -webkit-transform: translateY(-5px); - -ms-transform: translateY(-5px); - -moz-transform: translateY(-5px); - -o-transform: translateY(-5px); - } - } - \ No newline at end of file diff --git a/WEB/View/src/CSS/Presentation.css b/WEB/View/src/CSS/Presentation.css new file mode 100644 index 00000000..1df27882 --- /dev/null +++ b/WEB/View/src/CSS/Presentation.css @@ -0,0 +1,142 @@ +/*Fonts CSS */ + +@font-face { + font-family: Fauna; + src: url("../../assets/fonts/Fauna.ttf"); +} +@font-face { + font-family: Equinox; + src: url("../../assets/fonts/Equinox.otf"); +} +/* End Fonts CSS */ +html { + scroll-behavior: smooth; +} + +body { + min-height: 100vh; + font-family: "Equinox", sans-serif; + color: white; + height: 100vh; + background-position: center center; + background-attachment: fixed; + background-repeat: no-repeat; + background-size: cover; + background-color: #050e15; +} + +/* Navbar CSS */ + +nav { + background-color: #050e15; +} + +/* Moving fox CSS */ + +.moving-fox { + position: relative; + top: 0; + z-index: -1; + opacity: 0; +} + +/* Section Histoire */ + +section { + min-height: 60vh; + margin-bottom: 10px; +} + +.hidden { + opacity: 0; + filter: blur(10px); + transform: translateX(-100px); + transition: all 1.2s; +} + +.show { + opacity: 1; + filter: blur(0px); + transform: translateX(0px); +} + +@media (prefers-reduced-motion) { + .hidden { + transition: none; + } +} + +p { + font-family: "Fauna", sans-serif; + font-size: 20px; +} + +a { + color: #44fff6; + text-decoration: none; +} + +a:hover { + color: #44fff6; +} + +/* Scroll down arrow */ + +.scroll-down { + position: absolute; + bottom: 15px; + left: 50%; + margin-left: -16px; + display: block; + width: 40px; + height: 40px; + border: 2px solid #fff; + background-size: 14px auto; + border-radius: 50%; + z-index: 2; + -webkit-animation: bounce 2s infinite 2s; + animation: bounce 2s infinite 2s; + -webkit-transition: all 0.2s ease-in; + transition: all 0.2s ease-in; +} + +.scroll-down:before { + position: absolute; + top: calc(50% - 8px); + left: calc(50% - 6px); + transform: rotate(-45deg); + display: block; + width: 12px; + height: 12px; + content: ""; + border: 2px solid white; + border-width: 0px 0 2px 2px; +} + +@keyframes bounce { + 0%, + 100%, + 20%, + 50%, + 80% { + transform: translateY(0); + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + -moz-transform: translateY(0); + -o-transform: translateY(0); + } + 40% { + transform: translateY(-10px); + -webkit-transform: translateY(-10px); + -ms-transform: translateY(-10px); + -moz-transform: translateY(-10px); + -o-transform: translateY(-10px); + } + 60% { + transform: translateY(-5px); + -webkit-transform: translateY(-5px); + -ms-transform: translateY(-5px); + -moz-transform: translateY(-5px); + -o-transform: translateY(-5px); + } +} diff --git a/WEB/View/src/pages/Presentation.html b/WEB/View/src/pages/Presentation.html index 4425b43f..c02fe721 100644 --- a/WEB/View/src/pages/Presentation.html +++ b/WEB/View/src/pages/Presentation.html @@ -1,108 +1,91 @@  - - - - Présentation - - - - - - - - + + + + + Présentation + + + + + + + + + -
-
-
-
- + + - +
+
+
+
+ - + - -
+ -
- +

+ Clique sur le bouton NEXT pour commencer tes premiers pas dans + l'ère du développement, où je vais t'apprendre les bases !
+
+ Si tu es déjà un boss, clique sur SKIP pour aller directement aux énigmes. +

+ +
+ +
+ Logo -
+ " />
- - +
+ + + \ No newline at end of file