Mise en place domaines et responsive
This commit is contained in:
Anthony Mahe
BIN
assets/img/AssistanceEducative.jpg
Normal file
BIN
assets/img/AssistanceEducative.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
BIN
assets/img/DroitPenaldesMineurs.jpg
Normal file
BIN
assets/img/DroitPenaldesMineurs.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 129 KiB |
BIN
assets/img/DroitddelEducation.jpg
Normal file
BIN
assets/img/DroitddelEducation.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 202 KiB |
BIN
assets/img/DroitdesEtrangers.jpg
Normal file
BIN
assets/img/DroitdesEtrangers.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 156 KiB |
BIN
assets/img/portraitCharlinePasteur.jpg
Normal file
BIN
assets/img/portraitCharlinePasteur.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 116 KiB |
BIN
assets/img/specialiste.png
Normal file
BIN
assets/img/specialiste.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
122
index.html
122
index.html
@@ -5,22 +5,35 @@
|
|||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta http‑equiv="X-UA-Compatible" content="IE=edge" />
|
<meta http‑equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
|
||||||
<title>Maître Charline Pasteur – Avocate au barreau de Nantes</title>
|
<title>Maître Charline Pasteur – Avocate au barreau de Nantes</title>
|
||||||
<meta name="description"
|
<meta name="description"
|
||||||
content="Conseil et contentieux en droit pénal, droit de la famille, droit du travail à Paris et Île‑de‑France." />
|
content="Conseil et contentieux en droit pénal, droit de la famille, droit du travail à Paris et Île‑de‑France." />
|
||||||
<link rel="preload" href="assets/fonts/WorkSans-Regular.woff2" as="font" type="font/woff2" crossorigin>
|
|
||||||
<link rel="stylesheet" href="style.css" />
|
|
||||||
<link rel="canonical" href="https://www.charline‑pasteur‑avocate.fr/" />
|
|
||||||
<meta property="og:type" content="website" />
|
<meta property="og:type" content="website" />
|
||||||
<meta property="og:title" content="Maître Charline Pasteur – Avocate au barreau de Nantes" />
|
<meta property="og:title" content="Maître Charline Pasteur – Avocate au barreau de Nantes" />
|
||||||
<meta property="og:description"
|
<meta property="og:description"
|
||||||
content="Conseil et contentieux en droit pénal, droit de la famille, droit du travail à Paris et Île‑de‑France." />
|
content="Conseil et contentieux en droit pénal, droit de la famille, droit du travail à Paris et Île‑de‑France." />
|
||||||
<meta property="og:url" content="https://www.charline‑pasteur‑avocate.fr/" />
|
<meta property="og:url" content="https://www.charline‑pasteur‑avocate.fr/" />
|
||||||
<meta property="og:image" content="assets/img/og-cover.jpg" />
|
<meta property="og:image" content="assets/img/og-cover.jpg" />
|
||||||
|
|
||||||
|
<!--<link rel="preload" href="assets/fonts/WorkSans-Regular.woff2" as="font" type="font/woff2" crossorigin>-->
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<link rel="stylesheet" href="navigation.css" />
|
||||||
|
<link rel="canonical" href="https://www.charline‑pasteur‑avocate.fr/" />
|
||||||
|
<link rel="icon" href="assets/img/logo.png">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<div class="contact">
|
||||||
|
<div>Tel : 06.......... Email : c.pasteuravocate@gmail.com</div>
|
||||||
|
<div>
|
||||||
|
<a href="https://consultation.avocat.fr/avocat-nantes/charline-pasteur-54896.html" class="button">Rendez
|
||||||
|
vous en
|
||||||
|
ligne</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<header class="header">
|
<header class="header">
|
||||||
|
|
||||||
<a href="index.html" class="logo">
|
<a href="index.html" class="logo">
|
||||||
<img src="assets/img/logo.png" alt="Logo – Charline Pasteur Avocate">
|
<img src="assets/img/logo.png" alt="Logo – Charline Pasteur Avocate">
|
||||||
Charline Pasteur, Avocate
|
Charline Pasteur, Avocate
|
||||||
@@ -40,7 +53,6 @@
|
|||||||
<li><a href="droit_education.html">Droit de l'éducation</a></li>
|
<li><a href="droit_education.html">Droit de l'éducation</a></li>
|
||||||
<li><a href="droit_etrangers.html">Droit des étrangers</a></li>
|
<li><a href="droit_etrangers.html">Droit des étrangers</a></li>
|
||||||
<li><a href="honnoraires.html">Honorraires</a></li>
|
<li><a href="honnoraires.html">Honorraires</a></li>
|
||||||
<li><a href="contact.html">Contact</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
@@ -48,39 +60,81 @@
|
|||||||
</div>
|
</div>
|
||||||
<main>
|
<main>
|
||||||
<section id="accueil">
|
<section id="accueil">
|
||||||
<h2>Spécialiste droit des enfants</h2>
|
<div class="">
|
||||||
<p>Ayant obtenu mon certificat d’aptitude à la profession d’Avocat au sein de l’École de Formation du
|
<div>
|
||||||
Barreau à Paris, j’ai débuté mon exercice en tant qu’avocate au sein du Barreau de Nantes en janvier
|
<h1>Charline Pasteur</h1>
|
||||||
2018.
|
</div>
|
||||||
Conformément au serment que j’ai prêté, j’exerce ma profession avec dignité, humanité, probité,
|
<div>
|
||||||
conscience et indépendance.
|
<h1>Avocate au Barreau de Nantes</h1>
|
||||||
</p>
|
</div>
|
||||||
<p>Au quotidien, j’ai à cœur de mettre mes compétences au service de causes individuelles mais aussi de
|
</div>
|
||||||
causes collectives, le droit étant à mes yeux avant tout un outil au service des droits humains. Parmi
|
<div class="presentation">
|
||||||
ces causes, défendre l’intérêt supérieur de l’enfant et porter leur parole m’animent particulièrement.
|
<div class="portrait">
|
||||||
</p>
|
<img src="assets/img/portraitCharlinePasteur.jpg">
|
||||||
<p>La justice des mineurs étant une justice spécialisée, j’ai souhaité me former davantage à travers une
|
</div>
|
||||||
année de formation en 2022/2023 auprès de l’Université de Bordeaux m’ayant permis d’obtenir le Diplôme
|
<div class="texte">
|
||||||
Universitaire « Protection de l’Enfance ».
|
<h2>Spécialiste droit des enfants</h2>
|
||||||
</p>
|
<p>Ayant obtenu mon certificat d’aptitude à la profession d’Avocat au sein de l’École de Formation
|
||||||
<p>J’ai également obtenu le certificat de spécialisation « Droit des enfants » en décembre 2024 me
|
du
|
||||||
permettant aujourd’hui d’exercer comme avocate spécialiste.
|
Barreau à Paris, j’ai débuté mon exercice en tant qu’avocate au sein du Barreau de Nantes en
|
||||||
</p>
|
janvier
|
||||||
<p>Je pratique ainsi les contentieux de l’assistance éducative, du droit pénal des mineurs, du droit de la
|
2018.
|
||||||
famille et du droit de l’éducation. J’exerce également dans le domaine du droit des étrangers.
|
Conformément au serment que j’ai prêté, j’exerce ma profession avec dignité, humanité, probité,
|
||||||
</p>
|
conscience et indépendance.
|
||||||
<p>Je suis membre de l’Association de Défense du droit des mineurs à Nantes et j’anime la commission
|
</p>
|
||||||
mineure du Syndicat des Avocats de France.
|
<p>Au quotidien, j’ai à cœur de mettre mes compétences au service de causes individuelles mais aussi
|
||||||
</p>
|
de
|
||||||
|
causes collectives, le droit étant à mes yeux avant tout un outil au service des droits humains.
|
||||||
|
Parmi
|
||||||
|
ces causes, défendre l’intérêt supérieur de l’enfant et porter leur parole m’animent
|
||||||
|
particulièrement.
|
||||||
|
</p>
|
||||||
|
<p>La justice des mineurs étant une justice spécialisée, j’ai souhaité me former davantage à travers
|
||||||
|
une
|
||||||
|
année de formation en 2022/2023 auprès de l’Université de Bordeaux m’ayant permis d’obtenir le
|
||||||
|
Diplôme
|
||||||
|
Universitaire « Protection de l’Enfance ».
|
||||||
|
</p>
|
||||||
|
<p>J’ai également obtenu le certificat de spécialisation « Droit des enfants » en décembre 2024 me
|
||||||
|
permettant aujourd’hui d’exercer comme avocate spécialiste.
|
||||||
|
</p>
|
||||||
|
<p>Je pratique ainsi les contentieux de l’assistance éducative, du droit pénal des mineurs, du droit
|
||||||
|
de la
|
||||||
|
famille et du droit de l’éducation. J’exerce également dans le domaine du droit des étrangers.
|
||||||
|
</p>
|
||||||
|
<p>Je suis membre de l’Association de Défense du droit des mineurs à Nantes et j’anime la commission
|
||||||
|
mineure du Syndicat des Avocats de France.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="specialiste">
|
||||||
|
<img src="assets/img/specialiste.png">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="domaines">
|
<section id="domaines">
|
||||||
<h2>Domaines d'intervention</h2>
|
<h2>Domaines d'intervention</h2>
|
||||||
<ul id="menu" class="nav-list">
|
<ul class="cards-list">
|
||||||
<li><a href="assistance_educative.html">Assistance éducative</a></li>
|
<li>
|
||||||
<li><a href="droit_penal_mineur.html">Droit pénal des mineurs</a></li>
|
<a href="assistance_educative.html"
|
||||||
<li><a href="droit_education.html">Droit de l'éducation</a></li>
|
style="background-image: url('assets/img/AssistanceEducative.jpg');"></a>
|
||||||
<li><a href="droit_etrangers.html">Droit des étrangers</a></li>
|
<span>Assistance éducative</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="droit_penal_mineur.html"
|
||||||
|
style="background-image: url('assets/img/DroitPenaldesMineurs.jpg');"></a>
|
||||||
|
<span>Droit pénal des mineurs</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="droit_education.html"
|
||||||
|
style="background-image: url('assets/img/DroitddelEducation.jpg');"></a>
|
||||||
|
<span>Droit de l'éducation</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="droit_etrangers.html"
|
||||||
|
style="background-image: url('assets/img/DroitdesEtrangers.jpg');"></a>
|
||||||
|
<span>Droit des étrangers</span>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@@ -95,6 +149,8 @@
|
|||||||
<footer class="site-footer">
|
<footer class="site-footer">
|
||||||
<p>© 2025 – Maître Charline Pasteur. Tous droits réservés.</p>
|
<p>© 2025 – Maître Charline Pasteur. Tous droits réservés.</p>
|
||||||
<p><a href="mentions.html">Mentions légales</a></p>
|
<p><a href="mentions.html">Mentions légales</a></p>
|
||||||
|
<p>Le contenu du site, y compris les illustrations, est protégé par des droits d’auteur. Les illustrations
|
||||||
|
présentes sont la propriété de Marion Monnier. Pour en savoir plus, visitez www.creayon.fr.</p>
|
||||||
</footer>
|
</footer>
|
||||||
<script src="script.js" defer></script>
|
<script src="script.js" defer></script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
148
navigation.css
Normal file
148
navigation.css
Normal file
@@ -0,0 +1,148 @@
|
|||||||
|
/* Style pour le header et la navigation */
|
||||||
|
.header {
|
||||||
|
background-color: #F9E7DB;
|
||||||
|
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .1);
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 3;
|
||||||
|
align-items: center;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #333;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header li {
|
||||||
|
display: block;
|
||||||
|
padding: 0.5rem;
|
||||||
|
border-right: 1px solid #F9E7DB;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header li a:hover,
|
||||||
|
.header .menu-btn:hover {
|
||||||
|
background-color: #F9E7DB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .logo {
|
||||||
|
max-width: 380px;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
vertical-align: middle;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .logo img {
|
||||||
|
display: inline-block;
|
||||||
|
max-height: 40px;
|
||||||
|
padding: 8px 4px 8px 12px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header nav {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* menu */
|
||||||
|
.header .menu {
|
||||||
|
clear: both;
|
||||||
|
max-height: 0;
|
||||||
|
transition: max-height .2s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* menu icon */
|
||||||
|
.header .menu-icon {
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
float: right;
|
||||||
|
padding: 28px 20px;
|
||||||
|
position: relative;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .menu-icon .navicon {
|
||||||
|
background: #333;
|
||||||
|
display: block;
|
||||||
|
height: 2px;
|
||||||
|
position: relative;
|
||||||
|
transition: background .2s ease-out;
|
||||||
|
width: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .menu-icon .navicon:before,
|
||||||
|
.header .menu-icon .navicon:after {
|
||||||
|
background: #333;
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
transition: all .2s ease-out;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .menu-icon .navicon:before {
|
||||||
|
top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .menu-icon .navicon:after {
|
||||||
|
top: -5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* menu btn */
|
||||||
|
.header .menu-btn {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .menu-btn:checked~nav .menu {
|
||||||
|
max-height: 240px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .menu-btn:checked~.menu-icon .navicon {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .menu-btn:checked~.menu-icon .navicon:before {
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .menu-btn:checked~.menu-icon .navicon:after {
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
|
||||||
|
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Styles pour les écrans plus petits (téléphones) */
|
||||||
|
@media (min-width: 48em) {
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.header li {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header li a {
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .menu {
|
||||||
|
clear: none;
|
||||||
|
float: right;
|
||||||
|
max-height: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .menu-icon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
343
style.css
343
style.css
@@ -1,202 +1,177 @@
|
|||||||
/* Style de la bannière */
|
/* Style de la bannière */
|
||||||
|
.contact {
|
||||||
|
display:flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
row-gap: 10px;
|
||||||
|
column-gap: 2em;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #CC4331;
|
||||||
|
margin : auto;
|
||||||
|
padding: 0.7rem 1rem;
|
||||||
|
color: #F9E7DB;
|
||||||
|
z-index: 100;
|
||||||
|
align-items: baseline;
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
border: 1px solid #F9E7DB;
|
||||||
|
color: #F9E7DB;
|
||||||
|
padding: 0.3rem 1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover {
|
||||||
|
background-color: #F9E7DB;
|
||||||
|
color: #CC4331;
|
||||||
|
}
|
||||||
|
|
||||||
.banner {
|
.banner {
|
||||||
background-image: url('assets/img/accueil.jpg');
|
background-image: url('assets/img/accueil.jpg');
|
||||||
/* Remplace 'ton-image-de-fond.jpg' par le chemin de ton image */
|
background-size: cover;
|
||||||
background-size: cover;
|
background-position: center;
|
||||||
/* L'image couvre tout l'espace disponible */
|
min-height: 50vh;
|
||||||
background-position: center;
|
|
||||||
/* Centre l'image */
|
|
||||||
/*color: #fff;
|
|
||||||
/* Texte en blanc sur l'image */
|
|
||||||
/*text-align: center;
|
|
||||||
padding: 4rem 2rem;
|
|
||||||
Ajoute de l'espace intérieur
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
Centre le contenu horizontalement
|
|
||||||
align-items: center;
|
|
||||||
Centre le contenu verticalement */
|
|
||||||
min-height: 50vh;
|
|
||||||
/* Hauteur minimum de la bannière (50% de la hauteur de la fenêtre) */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
/* Police de caractères par défaut */
|
line-height: 1.6;
|
||||||
line-height: 1.6;
|
margin: 0;
|
||||||
/* Espacement entre les lignes pour une meilleure lisibilité */
|
padding: 0;
|
||||||
margin: 0;
|
background-color: #F9E7DB;
|
||||||
/* Supprime les marges par défaut du body */
|
color: #333;
|
||||||
padding: 0;
|
|
||||||
/* Supprime les paddings par défaut du body */
|
|
||||||
background-color: #F9E7DB;
|
|
||||||
/* Couleur de fond légère */
|
|
||||||
color: #333;
|
|
||||||
/* Couleur de texte principale */
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
background-color: #F9E7DB;
|
|
||||||
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .1);
|
|
||||||
position: fixed;
|
|
||||||
width: 100%;
|
|
||||||
z-index: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header ul {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style: none;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header li a {
|
|
||||||
display: block;
|
|
||||||
padding: 0.5rem;
|
|
||||||
border-right: 1px solid #F9E7DB;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header li a:hover,
|
|
||||||
.header .menu-btn:hover {
|
|
||||||
background-color: #F9E7DB;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header .logo {
|
|
||||||
display: block;
|
|
||||||
float: left;
|
|
||||||
padding: 10px 20px;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* menu */
|
|
||||||
|
|
||||||
.header .menu {
|
|
||||||
clear: both;
|
|
||||||
max-height: 0;
|
|
||||||
transition: max-height .2s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* menu icon */
|
|
||||||
|
|
||||||
.header .menu-icon {
|
|
||||||
cursor: pointer;
|
|
||||||
display: inline-block;
|
|
||||||
float: right;
|
|
||||||
padding: 28px 20px;
|
|
||||||
position: relative;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header .menu-icon .navicon {
|
|
||||||
background: #333;
|
|
||||||
display: block;
|
|
||||||
height: 2px;
|
|
||||||
position: relative;
|
|
||||||
transition: background .2s ease-out;
|
|
||||||
width: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header .menu-icon .navicon:before,
|
|
||||||
.header .menu-icon .navicon:after {
|
|
||||||
background: #333;
|
|
||||||
content: '';
|
|
||||||
display: block;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
transition: all .2s ease-out;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header .menu-icon .navicon:before {
|
|
||||||
top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header .menu-icon .navicon:after {
|
|
||||||
top: -5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* menu btn */
|
|
||||||
|
|
||||||
.header .menu-btn {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header .menu-btn:checked~nav .menu {
|
|
||||||
max-height: 240px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header .menu-btn:checked~.menu-icon .navicon {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header .menu-btn:checked~.menu-icon .navicon:before {
|
|
||||||
transform: rotate(-45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.header .menu-btn:checked~.menu-icon .navicon:after {
|
|
||||||
transform: rotate(45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
|
|
||||||
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
|
|
||||||
top: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
max-width: 800px;
|
margin: 0 auto;
|
||||||
/* Limite la largeur du contenu pour une meilleure lecture */
|
|
||||||
margin: 0 auto;
|
|
||||||
/* Centre le contenu horizontalement */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
section {
|
section {
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1,
|
h1 {
|
||||||
|
color: #bf9000;
|
||||||
|
vertical-align: baseline;
|
||||||
|
font-size: 2rem;
|
||||||
|
line-height: 0.5;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
color: #CC4331;
|
color: #CC4331;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Styles pour les écrans plus grand */
|
||||||
|
@media (min-width: 48em) {
|
||||||
|
.banner {
|
||||||
|
padding: 2rem 1rem;
|
||||||
|
min-height: 70vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 48em) {
|
||||||
|
.presentation {
|
||||||
|
flex-direction: column;
|
||||||
|
/* les enfants s'empilent verticalement */
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portrait img,
|
||||||
|
.specialiste img {
|
||||||
|
max-width: 80%;
|
||||||
|
/* pour s'adapter au petit écran */
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.texte {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cards-list {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cards-list li {
|
||||||
|
margin: auto;
|
||||||
|
width: 250px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cards-list li a {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 250px;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
border-radius: 8px;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cards-list li:hover a {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cards-list li span {
|
||||||
|
margin-top: 1rem;
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
color: #CC4331;
|
||||||
|
background-color: transparent;
|
||||||
|
font-size: 1.5em;
|
||||||
|
font-weight: bold;
|
||||||
|
margin: 1rem 0.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.presentation {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
/* permet aux enfants de passer à la ligne */
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portrait {
|
||||||
|
flex-grow: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portrait img {
|
||||||
|
padding: 2rem 2rem;
|
||||||
|
max-width: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.texte {
|
||||||
|
flex-grow: 6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.specialiste {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.specialiste img {
|
||||||
|
padding: 2rem 2rem;
|
||||||
|
max-width: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
background-color: #CC4331;
|
background-color: #CC4331;
|
||||||
text-align: center;
|
padding: 0.7rem 1rem;
|
||||||
padding: 0.5rem 0;
|
color: #F9E7DB; text-align: center;
|
||||||
/* Suppression de la propriété sticky */
|
padding: 0.5rem 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
/* Assure qu'il reste en bas du viewport initialement */
|
width: 100%;
|
||||||
width: 100%;
|
font-size: 0.9rem;
|
||||||
font-size: 0.9rem;
|
|
||||||
/* Optionnel */
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Styles pour les écrans plus petits (téléphones) */
|
|
||||||
@media (min-width: 48em) {
|
|
||||||
.banner {
|
|
||||||
padding: 2rem 1rem;
|
|
||||||
min-height: 70vh;
|
|
||||||
/* Prend plus de hauteur sur les petits écrans */
|
|
||||||
}
|
|
||||||
|
|
||||||
.header li {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header li a {
|
|
||||||
padding: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header .menu {
|
|
||||||
clear: none;
|
|
||||||
float: right;
|
|
||||||
max-height: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header .menu-icon {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user