v1
This commit is contained in:
toussain
parent
0f42e083dc
commit
767c044d7e
BIN
contenu/Assia.png
Normal file
BIN
contenu/Assia.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 159 KiB |
BIN
contenu/CV-Nolan-Toussaint.pdf
Normal file
BIN
contenu/CV-Nolan-Toussaint.pdf
Normal file
Binary file not shown.
BIN
contenu/Cyril.png
Normal file
BIN
contenu/Cyril.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
contenu/Nolan.png
Normal file
BIN
contenu/Nolan.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 352 KiB |
66
contenu/abonnement.html
Normal file
66
contenu/abonnement.html
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="FAQs" content="FAQ">
|
||||||
|
<meta name="author" content="Assia Mzyene">
|
||||||
|
<link rel="stylesheet" href="./style.css">
|
||||||
|
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||||
|
<title>Foire aux questions</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<nav class="navbar">
|
||||||
|
<div class="logo-navbar">
|
||||||
|
<a href="accueil.html"><img src="./logo.png"></a>
|
||||||
|
</div>
|
||||||
|
<div class="links-navbar">
|
||||||
|
<ul>
|
||||||
|
<li><a class="link" href="accueil.html">Accueil</a></li>
|
||||||
|
<li><a class="link" href ="guide.html">Guide</a></li>
|
||||||
|
<li><a class="link" href ="abonnement.html">Abonnement</a></li>
|
||||||
|
<li><a class="link" href ="faq.html">FAQ</a></li>
|
||||||
|
<li><a class="link" href ="contact.html">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="right-navbar">
|
||||||
|
<a href="#"><i class='bx bx-user-circle'></i></a>
|
||||||
|
<a href="#"><i class='bx bx-search-alt-2'></i></a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h1 class="section-titre">LE RÉSULTAT SERA LE MÊME, PAS L'EXPÉRIENCE !</h1>
|
||||||
|
<div class="cards">
|
||||||
|
<div class="card">
|
||||||
|
<h2 class="card-name">Découverte</h2>
|
||||||
|
<hr>
|
||||||
|
<p class="card-avantage"><i class='bx bx-check-circle'></i> Accès aux missions quotidiennes</p>
|
||||||
|
<p class="card-avantage"><i class='bx bx-check-circle'></i> Accès à la bibliothèque </p>
|
||||||
|
<p class="card-avantage"><i class='bx bx-check-circle'></i> 2 Masterclass en direct par mois</p>
|
||||||
|
<p class="card-prix">8,99€</p>
|
||||||
|
<p class="card-periode">Par mois</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h2 class="card-name">Premium</h2>
|
||||||
|
<hr>
|
||||||
|
<p class="card-avantage"><i class='bx bx-check-circle'></i> Accès aux missions quotidiennes</p>
|
||||||
|
<p class="card-avantage"><i class='bx bx-check-circle'></i> Accès à 3 masterclass par mois</p>
|
||||||
|
<p class="card-avantage"><i class='bx bx-check-circle'></i> 1 ticket pour un Ted Talk en présentiel</p>
|
||||||
|
<p class="card-prix">14,99€</p>
|
||||||
|
<p class="card-periode">Par mois</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h2 class="card-name">Premium annuel</h2>
|
||||||
|
<hr>
|
||||||
|
<p class="card-avantage"><i class='bx bx-check-circle'></i> Le prix du Premium sur une année !</p>
|
||||||
|
<p class="card-avantage"><i class='bx bx-check-circle'></i> Personalisation optimisée</p>
|
||||||
|
<p class="card-avantage"><i class='bx bx-check-circle'></i> Sans engagement</p>
|
||||||
|
<p class="card-prix">129,99€</p>
|
||||||
|
<p class="card-periode">Par an</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
47
contenu/accueil.html
Normal file
47
contenu/accueil.html
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="./style.css">
|
||||||
|
<!-- CDN Boxicons -->
|
||||||
|
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||||
|
|
||||||
|
<title>BetterSelf</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<nav class="navbar">
|
||||||
|
<div class="logo-navbar">
|
||||||
|
<a href="accueil.html"><img src="./logo.png"></a>
|
||||||
|
</div>
|
||||||
|
<div class="links-navbar">
|
||||||
|
<ul>
|
||||||
|
<li><a class="link" href="accueil.html">Accueil</a></li>
|
||||||
|
<li><a class="link" href ="guide.html">Guide</a></li>
|
||||||
|
<li><a class="link" href ="abonnement.html">Abonnement</a></li>
|
||||||
|
<li><a class="link" href ="faq.html">FAQ</a></li>
|
||||||
|
<li><a class="link" href ="contact.html">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="right-navbar">
|
||||||
|
<a href="#"><i class='bx bx-user-circle'></i></a>
|
||||||
|
<a href="#"><i class='bx bx-search-alt-2'></i></a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h1 class="section-titre">"J'ai appris il y a longtemps qu'il y a quelque chose de pire que de rater l'objectif: ne pas passer à l'action", Mia Hamm.</h1>
|
||||||
|
<div class="cards-guide">
|
||||||
|
<div class="card-accueil">
|
||||||
|
<p class="section-texte">BetterSelf est une entreprise qui a pour but de construire, mettre en pratique votre développement personnel et de vous accompagner durant celui-ci.<br>Pour cela, nous vous proposons différentes pistes avec un suivi adapté, telles qu'un parcours sportif ou des missions quotidiennes en lien avec vos objectifs. Ces missions quotidiennes vous permettront de récolter un certains nombre de points, vous donnant accès à plus d'activités payantes.<br>
|
||||||
|
Le contenu complet de chaque activités sera disponible dans les formules d'abonnement.</p>
|
||||||
|
<a href="./accueil.html"><img src="./logo_complet.png"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="guide.html" class="section-bouton">EN SAVOIR PLUS</a>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
61
contenu/contact.html
Normal file
61
contenu/contact.html
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="Contact" content="Contact">
|
||||||
|
<meta name="author" content="Assia Mzyene">
|
||||||
|
<link rel="stylesheet" href="./style.css">
|
||||||
|
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||||
|
<title> Contact </title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<nav class="navbar">
|
||||||
|
<div class="logo-navbar">
|
||||||
|
<a href="accueil.html"><img src="./logo.png"></a>
|
||||||
|
</div>
|
||||||
|
<div class="links-navbar">
|
||||||
|
<ul>
|
||||||
|
<li><a class="link" href="accueil.html">Accueil</a></li>
|
||||||
|
<li><a class="link" href ="guide.html">Guide</a></li>
|
||||||
|
<li><a class="link" href ="abonnement.html">Abonnement</a></li>
|
||||||
|
<li><a class="link" href ="faq.html">FAQ</a></li>
|
||||||
|
<li><a class="link" href ="contact.html">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="right-navbar">
|
||||||
|
<a href="#"><i class='bx bx-user-circle'></i></a>
|
||||||
|
<a href="#"><i class='bx bx-search-alt-2'></i></a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h1 class="section-titre"> DÉCOUVREZ L'ÉQUIPE !</h1>
|
||||||
|
<div class="cards">
|
||||||
|
<div class="card">
|
||||||
|
<img class="profile-image" src="./Nolan.png">
|
||||||
|
<p class="nprenom"> NOLAN<br>TOUSSAINT </p>
|
||||||
|
<a href="./CV-Nolan-Toussaint.pdf" download> cv </a><br>
|
||||||
|
<a href="https://dwarves.iut-fbleau.fr/gitiut/toussain"> git </a><br>
|
||||||
|
<a href="https://www.linkedin.com/"> linkedin </a><br>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<img class="profile-image" src="./Cyril.png">
|
||||||
|
<p class="nprenom">CYRIL<br>NKOUMBI-SAMBA</p>
|
||||||
|
<a href="cv-cyril.pdf" download> cv </a><br>
|
||||||
|
<a href="https://dwarves.iut-fbleau.fr/gitiut/nsamba"> git </a><br>
|
||||||
|
<a href="https://www.linkedin.com/"> linkedin </a><br>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<img class="profile-image" src="./Assia.png">
|
||||||
|
<p class="nprenom"> ASSIA<br>MZYENE </p>
|
||||||
|
<a href="./cv-assia-mzyene.pdf" download> cv </a><br>
|
||||||
|
<a href="https://dwarves.iut-fbleau.fr/gitiut/mzyene"> git </a><br>
|
||||||
|
<a href="https://www.linkedin.com/in/assia-mzyene-a8a901219/?original_referer="> linkedin </a><br>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
contenu/cv-assia-mzyene.pdf
Normal file
BIN
contenu/cv-assia-mzyene.pdf
Normal file
Binary file not shown.
BIN
contenu/cv-cyril.pdf
Normal file
BIN
contenu/cv-cyril.pdf
Normal file
Binary file not shown.
79
contenu/faq.html
Normal file
79
contenu/faq.html
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="FAQs" content="FAQ">
|
||||||
|
<meta name="author" content="Assia Mzyene">
|
||||||
|
<link rel="stylesheet" href="./style.css">
|
||||||
|
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||||
|
<title>Foire aux questions</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<nav class="navbar">
|
||||||
|
<div class="logo-navbar">
|
||||||
|
<a href="accueil.html"><img src="./logo.png"></a>
|
||||||
|
</div>
|
||||||
|
<div class="links-navbar">
|
||||||
|
<ul>
|
||||||
|
<li><a class="link" href ="accueil.html">Accueil</a></li>
|
||||||
|
<li><a class="link" href ="guide.html">Guide</a></li>
|
||||||
|
<li><a class="link" href ="abonnement.html">Abonnement</a></li>
|
||||||
|
<li><a class="link" href ="faq.html">FAQ</a></li>
|
||||||
|
<li><a class="link" href ="contact.html">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="right-navbar">
|
||||||
|
<a href="#"><i class='bx bx-user-circle'></i></a>
|
||||||
|
<a href="#"><i class='bx bx-search-alt-2'></i></a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h1 class="section-titre">Comment pouvons-nous vous aider ?</h1>
|
||||||
|
<input type="search" class="input-search" placeholder="RECHERCHER">
|
||||||
|
<div class="faq">
|
||||||
|
<details>
|
||||||
|
<summary> BetterSelf, qu’est ce que c’est ?</summary>
|
||||||
|
<div class="contenu">
|
||||||
|
<p>BetterSelf est un service de développement qui propose une vaste sélection d’outils de développement, de livres et de conférences sur des milliers d’appareils. </p>
|
||||||
|
<p>Améliorez tout les aspects de votre vie à un prix mensuel très attractif. Découvrez des conférences, des livres, des articles et un accompagnement personnalisé!</p>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
<details>
|
||||||
|
<summary> Combien coûte BetterSelf ? Comment souscrire un abonnement ? </summary>
|
||||||
|
<div class="contenu">
|
||||||
|
<p>Consulter votre application BetterSelf sur votre smartphone, tablette, ordinateur et même sur vos consoles de jeu le tout pour un tarif fixe. Les offres mensuel vont de 8,99€ à 14,99€. Il existe également une offre annuelle qui propose les services premium pour 129,99€ seulement. </p>
|
||||||
|
<p>Rendez-vous dans <a href="abonnement.html">Abonnement</a>, choisissez l’abonnement qui vous correspond et appuyez sur ‘choisir cette offre’.</p>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
<details>
|
||||||
|
<summary>Comment puis-je annuler mon offre ? </summary>
|
||||||
|
<div class="contenu">
|
||||||
|
<p> BetterSelf offre une grande souplesse. Pas de contrat compliqué. Sans engagement. Deux clics suffisent pour annuler votre compte en ligne. Pas de frais d'annulation: ouvrez ou fermez votre compte à tout moment. </p>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
<details>
|
||||||
|
<summary>Comment sont utilisé mes données ? </summary>
|
||||||
|
<div class="contenu">
|
||||||
|
<p> Toutes les données récoltés seront utilisé UNIQUEMENT par nos équipes afin de proposé à tout les utilisateurs un meilleur suivi et des nouvelles pistes d’améliorations pour les outils existants. </p>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
<details>
|
||||||
|
<summary> Où puis-je accéder aux services BetterSelf ? </summary>
|
||||||
|
<div class="contenu">
|
||||||
|
<p> Betterself, c'est où vous voulez, quand vous voulez. Vous pouvez accéder à tout le contenu depuis vos appareil connecté à internet tel que votre smartphone, tablette, ordinateur et consoles de jeu via l’application. </p>
|
||||||
|
<p> Sans connection à internet, vous pourrez tout de même accéder à votre journal et à vos tâches quotidiennes. Téléchargez des conférences pour y accéder partout.</p>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
<details>
|
||||||
|
<summary> Comment réserver une place pour une conférence depuis l’application BetterSelf ? </summary>
|
||||||
|
<div class="contenu">
|
||||||
|
<p> Réservez votre place facilement, rapidement et en toute sécurité sur notre billetterie disponible sur l’application. </p>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
68
contenu/guide.html
Normal file
68
contenu/guide.html
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="./style.css">
|
||||||
|
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||||
|
<title>BetterSelf</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<nav class="navbar">
|
||||||
|
<div class="logo-navbar">
|
||||||
|
<a href="accueil.html"><img src="./logo.png"></a>
|
||||||
|
</div>
|
||||||
|
<div class="links-navbar">
|
||||||
|
<ul>
|
||||||
|
<li><a class="link" href="accueil.html">Accueil</a></li>
|
||||||
|
<li><a class="link" href ="guide.html">Guide</a></li>
|
||||||
|
<li><a class="link" href ="abonnement.html">Abonnement</a></li>
|
||||||
|
<li><a class="link" href ="faq.html">FAQ</a></li>
|
||||||
|
<li><a class="link" href ="contact.html">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="right-navbar">
|
||||||
|
<a href="#"><i class='bx bx-user-circle'></i></a>
|
||||||
|
<a href="#"><i class='bx bx-search-alt-2'></i></a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h1 class="section-titre">Qu'attendez vous pour vous lancer ?</h1>
|
||||||
|
<p class="section-texte">Avec nos guides spécialisés, vous pourrez choisir le domaine qui vous intéresse. Bien sur les guides seront mis à jour régulièrement, alors proposez nous des sujets qui vous intéresse !</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="formations">
|
||||||
|
<h3 class="formations-titre">CATALOGUE DES FORMATIONS</h3>
|
||||||
|
<div class="cards-guide">
|
||||||
|
<h6 class="formations-titre">Relations</h6>
|
||||||
|
<div class="card-guide">
|
||||||
|
<p>Vous voulez vous épanouir dans vos relations ?<br>
|
||||||
|
Le bonheur est différent pour chaque individu, mais être apprécié de vos proches et de vos collègues de travail, ne serait-ce pas idéal ? Avec notre guide "Relations humaines" vous saurez comment vous comporter dans chaque situation avec la personne en face de vous sans changer qui vous êtes pour autant !</p>
|
||||||
|
<br>
|
||||||
|
<a href="./guide.html"><img src="./relations.jpg"></a>
|
||||||
|
</div>
|
||||||
|
<h6 class="formations-titre">Sport</h6>
|
||||||
|
<div class="card-guide">
|
||||||
|
<a href="./guide.html"><img src="./sport.jpg"></a>
|
||||||
|
<br>
|
||||||
|
<p>Vous voulez exercer une activité sportive régulière :<br>
|
||||||
|
Football ? Basket ? Handball ? Boxe ?<br>
|
||||||
|
Savez-vous quel est le point commun entre tous les sports? <br>
|
||||||
|
En effet c’est bien la confiance en soi. Tout d'abord, il est essentiel de faire du sport quotidiennement pour sa santé mentale et physique. Nous vous proposons un "guide sportif" spécialisé en fonction de vos besoins et vos envies qui va vous permettre de vous épanouir.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<h6 class="formations-titre">Entreprenariat</h6>
|
||||||
|
<div class="card-guide">
|
||||||
|
<p>Vous n’osez pas faire ? Vous hésitez à créer votre propre société ? A diriger une équipe efficace ?<br>
|
||||||
|
Mais vous ne vous sentez pas à la hauteur ou vous pensez que vous n’avez pas assez de compétences? Grâce au guide "Entreprenariat" vous connaîtrez l’ensemble des compétences requises pour mener à bien vos projets.</p>
|
||||||
|
<br>
|
||||||
|
<a href="./guide.html"><img src="./productivité.jpg"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
contenu/logo.png
Normal file
BIN
contenu/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
BIN
contenu/logo_complet.png
Normal file
BIN
contenu/logo_complet.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
BIN
contenu/productivité.jpg
Normal file
BIN
contenu/productivité.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
BIN
contenu/relations.jpg
Normal file
BIN
contenu/relations.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 505 KiB |
BIN
contenu/sport.jpg
Normal file
BIN
contenu/sport.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 MiB |
348
contenu/style.css
Normal file
348
contenu/style.css
Normal file
@ -0,0 +1,348 @@
|
|||||||
|
/* RESET */
|
||||||
|
|
||||||
|
html, body, div, span, applet, object, iframe,
|
||||||
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||||
|
a, abbr, acronym, address, big, cite, code,
|
||||||
|
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||||
|
small, strike, strong, sub, sup, tt, var,
|
||||||
|
b, u, i, center,
|
||||||
|
dl, dt, dd, ol, ul, li,
|
||||||
|
fieldset, form, label, legend,
|
||||||
|
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||||
|
article, aside, canvas, details, embed,
|
||||||
|
figure, figcaption, footer, header, hgroup,
|
||||||
|
menu, nav, output, ruby, section, summary,
|
||||||
|
time, mark, audio, video {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
font-size: 100%;
|
||||||
|
font: inherit;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
/* HTML5 display-role reset for older browsers */
|
||||||
|
article, aside, details, figcaption, figure,
|
||||||
|
footer, header, hgroup, menu, nav, section {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
ol, ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
blockquote, q {
|
||||||
|
quotes: none;
|
||||||
|
}
|
||||||
|
blockquote:before, blockquote:after,
|
||||||
|
q:before, q:after {
|
||||||
|
content: '';
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* FONTS */
|
||||||
|
|
||||||
|
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Signika+Negative:wght@500;700&display=swap');
|
||||||
|
|
||||||
|
/* CUSTOM CSS */
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: linear-gradient(45deg, #000000, #28849b);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
min-height: 100vh;
|
||||||
|
font-family: 'Signika Negative', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* NAVBAR */
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
background: #00000086;
|
||||||
|
padding: 10px 30px;
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar a {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-navbar img{
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.links-navbar ul {
|
||||||
|
display: flex;
|
||||||
|
gap: 45px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.links-navbar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-navbar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link {
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-left: 50px;
|
||||||
|
margin-right: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* SECTION */
|
||||||
|
|
||||||
|
section {
|
||||||
|
width: 70%;
|
||||||
|
margin: 0 auto;
|
||||||
|
color: white;
|
||||||
|
padding: 50px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-titre {
|
||||||
|
font-size: 2rem;
|
||||||
|
padding-left: 20%;
|
||||||
|
word-spacing: 4px;
|
||||||
|
line-height: 50px;
|
||||||
|
text-align: center;
|
||||||
|
margin-left: -200px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-texte {
|
||||||
|
padding-left: 200px;
|
||||||
|
padding-top: 40px;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
word-spacing: 4px;
|
||||||
|
line-height: 30px;
|
||||||
|
margin-left: -200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-bouton {
|
||||||
|
padding: 6px 30px;
|
||||||
|
border-radius: 20px;
|
||||||
|
background: white;
|
||||||
|
color: #28849b;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-top: 50px;
|
||||||
|
margin-left: 30%;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* FAQ */
|
||||||
|
|
||||||
|
.input-search {
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
border-radius: 20px;
|
||||||
|
margin: 50px 0;
|
||||||
|
background: #ffffff50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-search::placeholder {
|
||||||
|
color: black;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
details {
|
||||||
|
background: #ffffff15;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 10px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
summary {
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
details .contenu {
|
||||||
|
padding-top: 10px;
|
||||||
|
margin-top: 5px;
|
||||||
|
border-top: 2px solid white;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
word-spacing: 4px;
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
details .contenu a {
|
||||||
|
color: rgb(47, 160, 180);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* ABONNEMENT */
|
||||||
|
|
||||||
|
.cards {
|
||||||
|
display: flex;
|
||||||
|
gap: 15px;
|
||||||
|
margin-top: 50px;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background: #00000080;
|
||||||
|
padding: 40px;
|
||||||
|
border-radius: 20px;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-left: 50px;
|
||||||
|
margin-right: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:hover {
|
||||||
|
/* CODE ICI */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* KEYFRAME POUR L'ANIMATION */
|
||||||
|
|
||||||
|
.card-name {
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-contenu {
|
||||||
|
padding: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-avantage {
|
||||||
|
padding: 5px 0;
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-prix {
|
||||||
|
padding-top: 10px;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
font-size: 2rem;
|
||||||
|
font-style: extrabold;
|
||||||
|
border-radius: 30px;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-periode {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* CONTACT */
|
||||||
|
|
||||||
|
.nprenom {
|
||||||
|
font-family: 'Lucida Console';
|
||||||
|
padding-top: 10px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card a {
|
||||||
|
color: white;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
word-spacing: 4px;
|
||||||
|
line-height: 50px;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: white;
|
||||||
|
border-width: 2px;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding-left: 40px;
|
||||||
|
padding-right: 40px;
|
||||||
|
padding-top: 1px;
|
||||||
|
padding-bottom: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-image {
|
||||||
|
height: 300px;
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* GUIDE */
|
||||||
|
|
||||||
|
.formations h3 {
|
||||||
|
margin-top: -20px;
|
||||||
|
margin-bottom: -20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cards-guide {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formations {
|
||||||
|
margin: 100 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formations-titre {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 2.2rem;
|
||||||
|
margin-top: 100px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-guide {
|
||||||
|
display: flex;
|
||||||
|
gap: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-guide img {
|
||||||
|
height: 400px;
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-guide p {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
word-spacing: 4px;
|
||||||
|
line-height: 30px;
|
||||||
|
margin-right: -100px;
|
||||||
|
margin-left: -50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ACCUEIL */
|
||||||
|
|
||||||
|
.card-accueil {
|
||||||
|
display: flex;
|
||||||
|
gap: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-accueil img {
|
||||||
|
height: 400px;
|
||||||
|
border-radius: 50px;
|
||||||
|
margin-right: -100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-accueil p {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
word-spacing: 4px;
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user