En cette période festive, pensons à la nature et à la durabilité.
+
+ En savoir +
+
+
+ Commerce
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda debitis dolores eligendi, eum explicabo facilis fugit illum impedit in inventore natus nisi obcaecati odio quae, sequi. Modi quaerat reprehenderit rerum.
+
+
+
+ Habitat
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam blanditiis deleniti impedit maxime perferendis quaerat quis. Assumenda beatae blanditiis deserunt ducimus explicabo illo, impedit ipsum iusto nemo reiciendis sunt?
+
+
+
+ Phénomènes naturels
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis quisquam repellendus totam veritatis voluptatum. Debitis ea esse harum hic iure molestiae, officiis quam ut. Consectetur deserunt itaque neque omnis sed!
+
+
+
+ Sources d’énergies
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad architecto dignissimos dolor dolorem doloribus, dolorum eum eveniet inventore ipsum, labore laboriosam modi molestias mollitia nulla quia quo ratione tempore unde?
+
+
+
+ Transport
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aliquam aperiam culpa delectus dignissimos iure iusto, nulla numquam sit. Adipisci aspernatur beatae cupiditate ipsa iste odio pariatur, perspiciatis praesentium reiciendis.
+
+
+
+
+
\ No newline at end of file
diff --git a/front/style/init.css b/front/style/init.css
new file mode 100644
index 0000000..9af252a
--- /dev/null
+++ b/front/style/init.css
@@ -0,0 +1,96 @@
+@font-face {
+ font-family: 'Manrope';
+ src: url('../font/manrope/Manrope-ExtraBold.ttf');
+ font-weight: 800;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Manrope';
+ src: url('../font/manrope/Manrope-Bold.ttf');
+ font-weight: 700;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Manrope';
+ src: url('../font/manrope/Manrope-Medium.ttf');
+ font-weight: 500;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Manrope';
+ src: url('../font/manrope/Manrope-Regular.ttf');
+ font-weight: 400;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Manrope';
+ src: url('../font/manrope/Manrope-Light.ttf');
+ font-weight: 300;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Manrope';
+ src: url('../font/manrope/Manrope-ExtraLight.ttf');
+ font-weight: 200;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Inter';
+ src: url('../font/inter/Inter-Black.ttf');
+ font-weight: 700;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Inter';
+ src: url('../font/inter/Inter-Bold.ttf');
+ font-weight: 600;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Inter';
+ src: url('../font/inter/Inter-Medium.ttf');
+ font-weight: 500;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Inter';
+ src: url('../font/inter/Inter-Regular.ttf');
+ font-weight: 400;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Inter';
+ src: url('../font/inter/Inter-Light.ttf');
+ font-weight: 300;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Inter';
+ src: url('../font/inter/Inter-ExtraLight.ttf');
+ font-weight: 200;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'Inter';
+ src: url('../font/inter/Inter-Thin.ttf');
+ font-weight: 100;
+ font-style: normal;
+}
+
+
+body {
+ margin: 0;
+ padding: 0;
+}
\ No newline at end of file
diff --git a/front/style/jeu.css b/front/style/jeu.css
new file mode 100644
index 0000000..b670788
--- /dev/null
+++ b/front/style/jeu.css
@@ -0,0 +1,156 @@
+#starContainer {
+ position: fixed;
+ top: 10px;
+ right: 10px;
+ display: flex;
+ align-items: center;
+ visibility: hidden;
+ z-index: 2;
+}
+
+.star {
+ width: 20px;
+ height: 20px;
+ margin: 0 2px;
+ background-image: url('../img/star.png');
+ background-size: cover;
+}
+
+body {
+ width: 100vw;
+ height: 100vh;
+ overflow: hidden;
+}
+
+.container {
+ width: 100%;
+ height: 100vh;
+}
+
+section {
+ flex: 1;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ transition: transform 0.3s ease;
+}
+
+.hide {
+ display: none;
+}
+
+.image {
+ width: 100%;
+ height: 100%;
+}
+
+#imgleft.expanded, #imgright.expanded {
+ transform: scale(1.5);
+ z-index: 1;
+}
+
+.expanded {
+ position: absolute;
+!important;
+ top: 0;
+!important;
+ left: 0;
+!important;
+ width: 100%;
+!important;
+}
+
+/*#imgleft.expanded {*/
+/* margin-right: -100vw;*/
+/*}*/
+
+/*#imgright.expanded {*/
+/* margin-left: -100vw;*/
+/*}*/
+
+.image {
+ object-fit: cover;
+}
+
+section a {
+ display: block;
+ height: 100%;
+ width: 100%;
+ background-size: cover;
+ background-position: center;
+ text-decoration: none;
+}
+
+#left {
+ background-color: blue;
+ /*background-image: url('');*/
+}
+
+#right {
+ background-color: red;
+ /*background-image: url('');*/
+}
+
+.answer {
+ margin-top: 50vh;
+ text-align: center;
+ font-family: 'inter', sans-serif;
+ font-weight: 400;
+ font-size: 40px;
+ text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+ color: white;
+}
+
+.question {
+ position: absolute;
+ top: 0;
+ left: 50%;
+ transform: translateX(-50%);
+
+
+ background-color: #FFF1DD;
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
+ border-radius: 10px;
+ margin-top: 150px;
+ padding: 30px;
+ width: 400px;
+ height: auto;
+}
+
+.question h2 {
+ font-family: 'inter', sans-serif;
+ font-weight: 400;
+ font-size: 40px;
+ color: black;
+ margin: 0;
+}
+
+.question p {
+ font-family: 'Manrope', sans-serif;
+ font-size: 20px;
+ color: black;
+}
+
+.choices {
+ display: flex;
+}
+
+.choices > section {
+ flex: 1;
+}
+
+button {
+ background-color: #357266;
+ color: white;
+ width: 214px;
+ height: 59px;
+ padding: 10px 20px;
+ margin-top: 90px;
+ font-family: 'Manrope', sans-serif;
+ font-size: 20px;
+ border: none;
+ border-radius: 10px;
+ cursor: pointer;
+}
\ No newline at end of file
diff --git a/front/style/main.css b/front/style/main.css
new file mode 100644
index 0000000..db5c07b
--- /dev/null
+++ b/front/style/main.css
@@ -0,0 +1,53 @@
+body {
+ background: url('../img/heroBanner.jpg') fixed;
+ background-size: cover;
+}
+
+main {
+ display: inline-block;
+ max-width: px;
+ margin: auto auto auto 191px;
+ padding: 20px;
+}
+
+@media screen and (max-width: 768px) {
+ main {
+ margin: 30px;
+ }
+}
+
+h1 {
+ font-family: 'Manrope', extrabold;
+ font-size: 64px;
+ color: white;
+ text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+ padding-bottom: 0;
+}
+
+h2 {
+ font-family: 'Manrope', extrabold;
+ font-size: 48px;
+ color: white;
+ text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+}
+
+#sous-pres {
+ font-family: 'Manrope', bold;
+ font-size: 20px;
+ color: white;
+ text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+}
+
+#btnjouer {
+ background-color: #357266;
+ color: white;
+ width: 214px;
+ height: 59px;
+ padding: 10px 20px;
+ margin-top: 90px;
+ font-family: 'Manrope', bold;
+ font-size: 20px;
+ border: none;
+ border-radius: 10px;
+ cursor: pointer;
+}
\ No newline at end of file
diff --git a/front/style/navbarHorizontal.css b/front/style/navbarHorizontal.css
new file mode 100644
index 0000000..2e280a0
--- /dev/null
+++ b/front/style/navbarHorizontal.css
@@ -0,0 +1,30 @@
+#logo {
+ width: 50px;
+ height: 50px;
+}
+
+header {
+ background: linear-gradient(180deg, rgba(0, 0, 0, 0.60) 0.52%, rgba(0, 0, 0, 0.22) 53.65%, rgba(0, 0, 0, 0.00) 100%);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 20px;
+}
+
+ul {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+li {
+ list-style: none;
+ margin-left: 20px;
+}
+
+li a {
+ text-decoration: none;
+ color: white;
+ font-family: 'Manrope', sans-serif;
+ font-size: 20px;
+}
\ No newline at end of file
diff --git a/front/style/navbarVertical.css b/front/style/navbarVertical.css
new file mode 100644
index 0000000..5e77369
--- /dev/null
+++ b/front/style/navbarVertical.css
@@ -0,0 +1,66 @@
+body {
+ /*//overflow-x: hidden;*/
+}
+
+.navbar {
+ z-index: 1;
+ height: 100vh;
+ /*width: 60px;*/
+ background-color: #333;
+ position: fixed;
+ display: flex;
+ /*flex-direction: column;*/
+ align-items: center;
+ justify-content: space-between;
+ transition: width 0.3s ease;
+}
+
+.logo {
+ margin-top: 40px;
+ margin-bottom: 20px;
+}
+
+.nav-links {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
+}
+
+.nav-link {
+ padding: 20px;
+ margin-top: 20px;
+ text-align: center;
+ font-family: 'Manrope', sans-serif;
+ font-size: 20px;
+ color: #FFF1DD;
+ text-underline-offset: 8px;
+ transition: background-color 0.3s ease;
+}
+
+.nav-link:hover {
+ background-color: #555;
+}
+
+label {
+ padding: 10px 20px 10px 10px;
+ cursor: pointer;
+}
+
+.arrow-icon {
+ cursor: pointer;
+ margin-bottom: 20px;
+ padding: 10px;
+}
+
+#toggleNavbar {
+ cursor: pointer;
+ font-size: 30px;
+ color: #FFF1DD;
+ margin-bottom: 20px;
+ display: none;
+}
+
+.nav-links:has(+ .arrow > #toggleNavbar:checked){
+ display: none;
+}
\ No newline at end of file
diff --git a/front/style/propos.css b/front/style/propos.css
new file mode 100644
index 0000000..316b404
--- /dev/null
+++ b/front/style/propos.css
@@ -0,0 +1,27 @@
+body {
+ background-color: #457168;
+ font-family: 'Manrope', sans-serif;
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 1.5;
+ color: white;
+}
+
+main {
+ padding: 0 40px;
+}
+
+h1 {
+ margin: 0;
+ padding: 0;
+}
+
+section h2 {
+ color: #FFF;
+ font-family: "Manrope", sans-serif;
+ font-size: 40px;
+ font-style: normal;
+ font-weight: 300;
+ line-height: normal;
+ padding-bottom: 0;
+}
\ No newline at end of file
diff --git a/front/style/savoir.css b/front/style/savoir.css
new file mode 100644
index 0000000..f99621f
--- /dev/null
+++ b/front/style/savoir.css
@@ -0,0 +1,27 @@
+body {
+ background-color: #457168;
+ font-family: 'Manrope', sans-serif;
+ font-size: 16px;
+ font-weight: 400;|
+ line-height: 1.5;
+ color: white;
+}
+
+main {
+ padding: 0 40px;
+}
+
+h1 {
+ margin: 0;
+ padding: 0;
+}
+
+section h2 {
+ color: #FFF;
+ font-family: "Manrope", sans-serif;
+ font-size: 40px;
+ font-style: normal;
+ font-weight: 300;
+ line-height: normal;
+ padding-bottom: 0;
+}
\ No newline at end of file
+ 
+ 
+