mirror of
https://github.com/LucasVbr/nuitdelinfo-2023.git
synced 2026-05-13 17:21:56 +00:00
On a fait le front (a peut près)
This commit is contained in:
Lucàs
Generated
+5
@@ -0,0 +1,5 @@
|
|||||||
|
# Default ignored files
|
||||||
|
/shelf/
|
||||||
|
/workspace.xml
|
||||||
|
# Editor-based HTTP Client requests
|
||||||
|
/httpRequests/
|
||||||
Generated
+7
@@ -0,0 +1,7 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="DiscordProjectSettings">
|
||||||
|
<option name="show" value="ASK" />
|
||||||
|
<option name="description" value="" />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
Generated
+12
@@ -0,0 +1,12 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<module type="WEB_MODULE" version="4">
|
||||||
|
<component name="NewModuleRootManager">
|
||||||
|
<content url="file://$MODULE_DIR$">
|
||||||
|
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
|
||||||
|
<excludeFolder url="file://$MODULE_DIR$/temp" />
|
||||||
|
<excludeFolder url="file://$MODULE_DIR$/tmp" />
|
||||||
|
</content>
|
||||||
|
<orderEntry type="inheritedJdk" />
|
||||||
|
<orderEntry type="sourceFolder" forTests="false" />
|
||||||
|
</component>
|
||||||
|
</module>
|
||||||
Generated
+6
@@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="MarkdownSettingsMigration">
|
||||||
|
<option name="stateVersion" value="1" />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
Generated
+8
@@ -0,0 +1,8 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="ProjectModuleManager">
|
||||||
|
<modules>
|
||||||
|
<module fileurl="file://$PROJECT_DIR$/.idea/front.iml" filepath="$PROJECT_DIR$/.idea/front.iml" />
|
||||||
|
</modules>
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
Generated
+6
@@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="VcsDirectoryMappings">
|
||||||
|
<mapping directory="$PROJECT_DIR$/.." vcs="Git" />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Noël Écologique</title>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: #A3BBAD;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-family: 'Manrope', extrabold;
|
||||||
|
font-size: 64px;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 18px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#santa {
|
||||||
|
font-size: 72px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h1>Joyeux Noël Écologique !</h1>
|
||||||
|
<p>En cette période festive, pensons à la nature et à la durabilité.</p>
|
||||||
|
<p>Faites un geste écologique pendant les fêtes ! 🌲</p>
|
||||||
|
|
||||||
|
<div id="santa" onclick="showEasterEgg()">→ 🎅 ←</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function showEasterEgg() {
|
||||||
|
alert("Easter Egg : C'est le moment de penser à des cadeaux éco-friendly !");
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="14" height="21" viewBox="0 0 14 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M0.371318 9.6839L10.6381 0.338062C11.1333 -0.11268 11.9361 -0.11268 12.4312 0.338062L13.6286 1.4281C14.123 1.87808 14.1239 2.60735 13.6308 3.05838L5.49411 10.5L13.6308 17.9416C14.1239 18.3927 14.123 19.1219 13.6286 19.5719L12.4312 20.6619C11.936 21.1127 11.1333 21.1127 10.6381 20.6619L0.371372 11.3161C-0.123786 10.8654 -0.123787 10.1346 0.371318 9.6839Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 484 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 68 B |
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="86" height="76" viewBox="0 0 86 76" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M81.5503 1.44316C80.7141 -0.412059 78.325 -0.486268 77.3245 1.26506C72.6956 9.26477 64.4084 14.2516 54.9415 14.2516H42.9959C27.168 14.2516 14.3265 27.0155 14.3265 42.7478C14.3265 43.7867 14.446 44.7811 14.5505 45.7903C24.0771 39.0077 37.8295 33.2491 57.3306 33.2491C58.6446 33.2491 59.7197 34.3177 59.7197 35.6237C59.7197 36.9298 58.6446 37.9984 57.3306 37.9984C19.7916 37.9984 3.87414 60.8696 0.350198 69.4629C-0.635313 71.8821 0.529381 74.6427 2.96329 75.6371C5.41214 76.6464 8.18948 75.4739 9.20486 73.0695C9.42884 72.5352 12.3256 65.9603 19.9409 59.6229C24.7789 66.1384 33.977 72.3571 46.057 71.0807C69.5002 69.3887 86 48.4915 86 22.9043C86 15.4538 84.3874 7.73607 81.5503 1.44316Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 814 B |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
@@ -0,0 +1,41 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Mon site ecolo</title>
|
||||||
|
<link rel="icon" href="img/logo.svg" type="image/svg">
|
||||||
|
<link rel="stylesheet" href="style/init.css">
|
||||||
|
<link rel="stylesheet" href="style/navbarHorizontal.css">
|
||||||
|
<link rel="stylesheet" href="style/main.css">
|
||||||
|
</head>
|
||||||
|
<body id="accueil">
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<div id="logo">
|
||||||
|
<a href="./index.html"></a><img src="./img/logo.svg" alt="Logo">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="./jouer.html">Jouer</a></li>
|
||||||
|
<li><a href="./savoir.html">En Savoir +</a></li>
|
||||||
|
<li><a href="./propos.html">A propos</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<h1>Sauvons la planète,</h1>
|
||||||
|
<h2>distinguons la réalité<br>des idées reçues.</h2>
|
||||||
|
<p id="sous-pres">
|
||||||
|
Défiez les idées reçues sur l'écologie avec notre quiz captivant !
|
||||||
|
Testez-vous dès maintenant pour une expérience éducative et
|
||||||
|
amusante.
|
||||||
|
</p>
|
||||||
|
<button id="btnjouer"><a href="./jouer.html"></a>Essayer ce jeu</button>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,121 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Mon site ecolo | Jeu </title>
|
||||||
|
<link rel="icon" href="img/logo.svg" type="image/svg">
|
||||||
|
<link rel="stylesheet" href="style/init.css">
|
||||||
|
<link rel="stylesheet" href="style/navbarVertical.css">
|
||||||
|
<link rel="stylesheet" href="style/jeu.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<nav class="navbar" id="navbar">
|
||||||
|
<div class="nav-links">
|
||||||
|
<div class="logo">
|
||||||
|
<img src="./img/logo.svg" alt="Logo" width="40">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a href="#" class="nav-link">Commerces</a>
|
||||||
|
<a href="#" class="nav-link">Habitats</a>
|
||||||
|
<a href="#" class="nav-link">Phénomènes</a>
|
||||||
|
<a href="#" class="nav-link">Energies</a>
|
||||||
|
<a href="#" class="nav-link">Transports</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="arrow">
|
||||||
|
<label for="toggleNavbar">
|
||||||
|
<img src="./img/arrow.svg" alt="arrow" width="10">
|
||||||
|
</label>
|
||||||
|
<input id="toggleNavbar" type="checkbox">
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div id="starContainer">
|
||||||
|
<div class="star" id="star5"></div>
|
||||||
|
<div class="star" id="star4"></div>
|
||||||
|
<div class="star" id="star3"></div>
|
||||||
|
<div class="star" id="star2"></div>
|
||||||
|
<div class="star" id="star1"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="choices">
|
||||||
|
<section id="left">
|
||||||
|
<img class="image" id="imgleft" src="./img/imgleft.png"
|
||||||
|
alt="imgleft">
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="right">
|
||||||
|
<img class="image" id="imgright" src="./img/imgright.webp"
|
||||||
|
alt="imgright">
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="question">
|
||||||
|
<h2>Question</h2>
|
||||||
|
<p>Lorem ipsum</p>
|
||||||
|
<button class="hide">Question suivante</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const rightSection = document.getElementById('right');
|
||||||
|
const leftSection = document.getElementById('left');
|
||||||
|
const buttonElement = document.querySelector('button');
|
||||||
|
|
||||||
|
rightSection.addEventListener('click', () => {
|
||||||
|
rightSection.classList.remove('hide');
|
||||||
|
leftSection.classList.add('hide');
|
||||||
|
buttonElement.classList.remove('hide');
|
||||||
|
});
|
||||||
|
|
||||||
|
leftSection.addEventListener('click', () => {
|
||||||
|
leftSection.classList.remove('hide');
|
||||||
|
rightSection.classList.add('hide');
|
||||||
|
buttonElement.classList.remove('hide');
|
||||||
|
});
|
||||||
|
|
||||||
|
buttonElement.addEventListener('click', () => {
|
||||||
|
augmenterCompteur();
|
||||||
|
buttonElement.classList.add('hide');
|
||||||
|
|
||||||
|
rightSection.classList.remove('hide');
|
||||||
|
leftSection.classList.remove('hide');
|
||||||
|
});
|
||||||
|
|
||||||
|
let score = 20;
|
||||||
|
|
||||||
|
function augmenterCompteur() {
|
||||||
|
score += 5;
|
||||||
|
|
||||||
|
if (score >= 5) {
|
||||||
|
document.getElementById('star1').style.visibility = 'visible';
|
||||||
|
}
|
||||||
|
if (score >= 10) {
|
||||||
|
document.getElementById('star2').style.visibility = 'visible';
|
||||||
|
}
|
||||||
|
if (score >= 15) {
|
||||||
|
document.getElementById('star3').style.visibility = 'visible';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (score >= 20) {
|
||||||
|
document.getElementById('star4').style.visibility = 'visible';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (score >= 25) {
|
||||||
|
document.getElementById('star5').style.visibility = 'visible';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (score === 25) {
|
||||||
|
window.location.href = './easterEggEtoile.html';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,51 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="./style/init.css">
|
||||||
|
<link rel="stylesheet" href="./style/navbarHorizontal.css">
|
||||||
|
<link rel="stylesheet" href="./style/propos.css">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Nuit de l'info | A Propos</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<div id="logo">
|
||||||
|
<a href="./index.html"></a><img src="./img/logo.svg" alt="Logo">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="./jouer.html">Jouer</a></li>
|
||||||
|
<li><a href="./savoir.html">En Savoir +</a></li>
|
||||||
|
<li><a href="./propos.html">A propos</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<h1>A propos</h1>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Qui sommes-nous</h2>
|
||||||
|
<p>
|
||||||
|
Nous sommes une équipe de 6 étudiants en informatique à l'Université
|
||||||
|
de Pau et des Pays de l'Adour.
|
||||||
|
Ce site a été créé dans le cadre de la nuit de l'info 2023 qui
|
||||||
|
essaie de répondre à la problématique suivante : Faire face au
|
||||||
|
changement climatique: Le vrai du faux.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Inspirations</h2>
|
||||||
|
<p>
|
||||||
|
Le concept de ce site est fortement inspiré du jeu "Plus ou moins".
|
||||||
|
Nous avons voulu créer un jeu qui permet de sensibiliser les
|
||||||
|
utilisateurs sur les problématiques écologiques.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,56 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="./style/init.css">
|
||||||
|
<link rel="stylesheet" href="./style/navbarHorizontal.css">
|
||||||
|
<link rel="stylesheet" href="./style/savoir.css">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Title</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<div id="logo">
|
||||||
|
<a href="./index.html"></a><img src="./img/logo.svg" alt="Logo">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="./jouer.html">Jouer</a></li>
|
||||||
|
<li><a href="./savoir.html">En Savoir +</a></li>
|
||||||
|
<li><a href="./propos.html">A propos</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<h1>En savoir +</h1>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Commerce</h2>
|
||||||
|
<p>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.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Habitat</h2>
|
||||||
|
<p>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?</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Phénomènes naturels</h2>
|
||||||
|
<p>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!</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Sources d’énergies</h2>
|
||||||
|
<p>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?</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Transport</h2>
|
||||||
|
<p>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.</p>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -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;
|
||||||
|
}
|
||||||
@@ -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;
|
||||||
|
}
|
||||||
@@ -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;
|
||||||
|
}
|
||||||
@@ -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;
|
||||||
|
}
|
||||||
@@ -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;
|
||||||
|
}
|
||||||
@@ -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;
|
||||||
|
}
|
||||||
@@ -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;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user