anthony/avocate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CSS : Ajustement

Browse Source
This commit is contained in:
Anthony Mahe
2025-05-19 15:53:20 +02:00
parent f6c2f4b710
commit 0110e77609
11 changed files with 234 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
assistance_educative.html
View File

@@ -18,6 +18,7 @@
<!--<link rel="preload" href="assets/fonts/WorkSans-Regular.woff2" as="font" type="font/woff2" crossorigin>--> <!--<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="style.css" />
<link rel="stylesheet" href="class.css" />
<link rel="stylesheet" href="navigation.css" /> <link rel="stylesheet" href="navigation.css" />
<link rel="canonical" href="https://www.pasteuravocate.com/assistance_educative.html" /> <link rel="canonical" href="https://www.pasteuravocate.com/assistance_educative.html" />
<link rel="icon" href="assets/img/logo.png"> <link rel="icon" href="assets/img/logo.png">
@@ -25,11 +26,14 @@
<body> <body>
<div class="contact"> <div class="contact">
<div>Tel : 06.......... Email : c.pasteuravocate@gmail.com</div> <div>Tel : 06..........</div>
<div> <div>
<a href="https://consultation.avocat.fr/avocat-nantes/charline-pasteur-54896.html" class="button">Rendez <a href="https://consultation.avocat.fr/avocat-nantes/charline-pasteur-54896.html" class="button">
vous en Rendez vous en ligne
ligne</a> </a>
</div>
<div>
Email : c.pasteuravocate@gmail.com
</div> </div>
</div> </div>
<header class="header"> <header class="header">
@@ -55,18 +59,18 @@
</ul> </ul>
</nav> </nav>
</header> </header>
<div class="banner"> <div class="banner banner-assistance-educative">
</div> </div>
<main> <main>
<section id="assistance"> <section id="assistance">
<h1>Assistance éducative</h1> <h1>Assistance éducative</h1>
<div class="citation"> <div class="citation">
<p>“Si la santé, la sécurité ou la moralité d'un mineur non émancipé sont en danger, <p>« Si la santé, la sécurité ou la moralité d'un mineur non émancipé sont en danger,
ou si les conditions de son éducation ou de son développement physique, ou si les conditions de son éducation ou de son développement physique,
affectif, intellectuel et social sont gravement compromises, des mesures d'assistance affectif, intellectuel et social sont gravement compromises, des mesures d'assistance
éducative peuvent être ordonnées par justice à la requête des père et mère conjointement, éducative peuvent être ordonnées par justice à la requête des père et mère conjointement,
ou de l'un d'eux, de la personne ou du service à qui l'enfant a été confié ou du tuteur, ou de l'un d'eux, de la personne ou du service à qui l'enfant a été confié ou du tuteur,
du mineur lui-même ou du ministère public. “ du mineur lui-même ou du ministère public. »
</p> </p>
<span>Article 375 du code civil</span> <span>Article 375 du code civil</span>
</div> </div>
@@ -82,11 +86,7 @@
</p> </p>
</div> </div>
</section> </section>
<section id="contact">
<h2>Contactez-moi</h2>
<p>Vous pouvez me contacter à l'adresse email suivante : <a
href="mailto:votre@email.com">votre@email.com</a></p>
</section>
</main> </main>
<!-- ===== PIED-DE-PAGE ===== --> <!-- ===== PIED-DE-PAGE ===== -->

180
class.css Normal file
View File

@@ -0,0 +1,180 @@
/* Style de la bannière */
.contact {
top: 0;
position: fixed;
width: 100%;
display: flex;
flex-wrap: wrap;
row-gap: 10px;
column-gap: 2em;
justify-content: center;
align-items: center;
background-color: #CC4331;
margin: auto;
padding: 0.7rem 1rem;
color: #F9E7DB;
z-index: 100;
font-size: 11px;
}
.banner {
position: relative;
top:50px;
background-size: cover;
background-position: center;
min-height: 50vh;
}
.banner-accueil {
background-image: url('assets/img/CharlinePasteur-banniere.jpg');
}
.banner-droit-education {
background-image: url('assets/img/DroitddelEducation.jpg');
}
.banner-droit-etrangers {
background-image: url('assets/img/DroitdesEtrangers.jpg');
}
.banner-droit-penal-mineur {
background-image: url('assets/img/DroitPenaldesMineurs.jpg');
}
.banner-assistance-educative {
background-image: url('assets/img/AssistanceEducative.jpg');
}
.button {
border: 1px solid #F9E7DB;
color: #F9E7DB;
padding: 0.3rem 1rem;
cursor: pointer;
border-radius: 0.2rem;
}
.button:hover {
background-color: #F9E7DB;
color: #CC4331;
}
.citation {
color: #734332;
font-size: 11pt;
font-weight: 700;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.citation span {
font-weight: 400;
align-self: flex-end;
font-style: italic;
}
/* Styles pour les écrans plus grand */
@media (min-width: 48em) {
.banner {
padding: 2rem 1rem;
min-height: 70vh;
}
}
@media (max-width: 48em) {
.banner {
top:80px !important;
min-height: 50vh;
}
.header {
top :68px !important
}
.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;
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;
}

20
contact.html
View File

@@ -16,6 +16,7 @@
<meta property="og:url" content="https://www.pasteuravocate.com/contact.html" /> <meta property="og:url" content="https://www.pasteuravocate.com/contact.html" />
<meta property="og:image" content="assets/img/og-cover.jpg" /> <meta property="og:image" content="assets/img/og-cover.jpg" />
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="class.css" />
<link rel="stylesheet" href="navigation.css" /> <link rel="stylesheet" href="navigation.css" />
<link rel="canonical" href="https://www.pasteuravocate.com/contact.html" /> <link rel="canonical" href="https://www.pasteuravocate.com/contact.html" />
<link rel="icon" href="assets/img/logo.png"> <link rel="icon" href="assets/img/logo.png">
@@ -23,11 +24,14 @@
<body> <body>
<div class="contact"> <div class="contact">
<div>Tel : 06.......... Email : c.pasteuravocate@gmail.com</div> <div>Tel : 06..........</div>
<div> <div>
<a href="https://consultation.avocat.fr/avocat-nantes/charline-pasteur-54896.html" class="button">Rendez <a href="https://consultation.avocat.fr/avocat-nantes/charline-pasteur-54896.html" class="button">
vous en Rendez vous en ligne
ligne</a> </a>
</div>
<div>
Email : c.pasteuravocate@gmail.com
</div> </div>
</div> </div>
<header class="header"> <header class="header">
@@ -53,7 +57,7 @@
</ul> </ul>
</nav> </nav>
</header> </header>
<div class="banner"> <div class="banner banner-accueil">
</div> </div>
<main> <main>
<section id="accueil"> <section id="accueil">
@@ -134,12 +138,6 @@
</li> </li>
</ul> </ul>
</section> </section>
<section id="contact">
<h2>Contactez-moi</h2>
<p>Vous pouvez me contacter à l'adresse email suivante : <a
href="mailto:votre@email.com">votre@email.com</a></p>
</section>
</main> </main>
<!-- ===== PIED-DE-PAGE ===== --> <!-- ===== PIED-DE-PAGE ===== -->

5
droit_education.html
View File

@@ -17,6 +17,7 @@
<!--<link rel="preload" href="assets/fonts/WorkSans-Regular.woff2" as="font" type="font/woff2" crossorigin>--> <!--<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="style.css" />
<link rel="stylesheet" href="class.css" />
<link rel="stylesheet" href="navigation.css" /> <link rel="stylesheet" href="navigation.css" />
<link rel="canonical" href="https://www.pasteuravocate.com/droit_education.html" /> <link rel="canonical" href="https://www.pasteuravocate.com/droit_education.html" />
<link rel="icon" href="assets/img/logo.png"> <link rel="icon" href="assets/img/logo.png">
@@ -54,14 +55,14 @@
</ul> </ul>
</nav> </nav>
</header> </header>
<div class="banner"> <div class="banner banner-droit-education">
</div> </div>
<main> <main>
<section id="accueil"> <section id="accueil">
<section id="droit_education"> <section id="droit_education">
<h1>Droit de l'éducation</h1> <h1>Droit de l'éducation</h1>
<div class="citation"> <div class="citation">
<p>«Le droit à l'éducation est garanti à chacun afin de lui permettre de développer sa personnalité, <p>« Le droit à l'éducation est garanti à chacun afin de lui permettre de développer sa personnalité,
d'élever son niveau de formation initiale et continue, de s'insérer dans la vie sociale et d'élever son niveau de formation initiale et continue, de s'insérer dans la vie sociale et
professionnelle, d'exercer sa citoyenneté .» professionnelle, d'exercer sa citoyenneté .»
</p> </p>

9
droit_etrangers.html
View File

@@ -18,6 +18,7 @@
<!--<link rel="preload" href="assets/fonts/WorkSans-Regular.woff2" as="font" type="font/woff2" crossorigin>--> <!--<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="style.css" />
<link rel="stylesheet" href="class.css" />
<link rel="stylesheet" href="navigation.css" /> <link rel="stylesheet" href="navigation.css" />
<link rel="canonical" href="https://www.pasteuravocate.com/droit_etrangers.html" /> <link rel="canonical" href="https://www.pasteuravocate.com/droit_etrangers.html" />
<link rel="icon" href="assets/img/logo.png"> <link rel="icon" href="assets/img/logo.png">
@@ -55,7 +56,7 @@
</ul> </ul>
</nav> </nav>
</header> </header>
<div class="banner"> <div class="banner banner-droit-etrangers">
</div> </div>
<main> <main>
<section id="droit_etrangers"> <section id="droit_etrangers">
@@ -111,11 +112,7 @@
</div> </div>
</section> </section>
<section id="contact">
<h2>Contactez-moi</h2>
<p>Vous pouvez me contacter à l'adresse email suivante : <a
href="mailto:votre@email.com">votre@email.com</a></p>
</section>
</main> </main>
<!-- ===== PIED-DE-PAGE ===== --> <!-- ===== PIED-DE-PAGE ===== -->

9
droit_penal_mineur.html
View File

@@ -18,6 +18,7 @@
<!--<link rel="preload" href="assets/fonts/WorkSans-Regular.woff2" as="font" type="font/woff2" crossorigin>--> <!--<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="style.css" />
<link rel="stylesheet" href="class.css" />
<link rel="stylesheet" href="navigation.css" /> <link rel="stylesheet" href="navigation.css" />
<link rel="canonical" href="https://www.pasteuravocate.com/droit_penal_mineur.html" /> <link rel="canonical" href="https://www.pasteuravocate.com/droit_penal_mineur.html" />
<link rel="icon" href="assets/img/logo.png"> <link rel="icon" href="assets/img/logo.png">
@@ -55,7 +56,7 @@
</ul> </ul>
</nav> </nav>
</header> </header>
<div class="banner"> <div class="banner banner-droit-penal-mineur">
</div> </div>
<main> <main>
<section id="droit_penal_mineur"> <section id="droit_penal_mineur">
@@ -88,11 +89,7 @@
</div> </div>
</section> </section>
<section id="contact">
<h2>Contactez-moi</h2>
<p>Vous pouvez me contacter à l'adresse email suivante : <a
href="mailto:votre@email.com">votre@email.com</a></p>
</section>
</main> </main>
<!-- ===== PIED-DE-PAGE ===== --> <!-- ===== PIED-DE-PAGE ===== -->

9
honoraires.html
View File

@@ -16,6 +16,7 @@
<!--<link rel="preload" href="assets/fonts/WorkSans-Regular.woff2" as="font" type="font/woff2" crossorigin>--> <!--<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="style.css" />
<link rel="stylesheet" href="class.css" />
<link rel="stylesheet" href="navigation.css" /> <link rel="stylesheet" href="navigation.css" />
<link rel="canonical" href="https://www.pasteuravocate.com/honoraires.html" /> <link rel="canonical" href="https://www.pasteuravocate.com/honoraires.html" />
<link rel="icon" href="assets/img/logo.png"> <link rel="icon" href="assets/img/logo.png">
@@ -53,7 +54,7 @@
</ul> </ul>
</nav> </nav>
</header> </header>
<div class="banner"> <div class="banner banner-accueil">
</div> </div>
<main> <main>
<section id="honoraires"> <section id="honoraires">
@@ -113,11 +114,7 @@
</div> </div>
</section> </section>
<section id="contact">
<h2>Contactez-moi</h2>
<p>Vous pouvez me contacter à l'adresse email suivante : <a
href="mailto:votre@email.com">votre@email.com</a></p>
</section>
</main> </main>
<!-- ===== PIED-DE-PAGE ===== --> <!-- ===== PIED-DE-PAGE ===== -->

12
index.html
View File

@@ -18,6 +18,7 @@
<!--<link rel="preload" href="assets/fonts/WorkSans-Regular.woff2" as="font" type="font/woff2" crossorigin>--> <!--<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="style.css" />
<link rel="stylesheet" href="class.css" />
<link rel="stylesheet" href="navigation.css" /> <link rel="stylesheet" href="navigation.css" />
<link rel="canonical" href="https://www.pasteuravocate.com" /> <link rel="canonical" href="https://www.pasteuravocate.com" />
<link rel="icon" href="assets/img/logo.png"> <link rel="icon" href="assets/img/logo.png">
@@ -33,17 +34,14 @@
</div> </div>
</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
</a> </a>
<input class="menu-btn" type="checkbox" id="menu-btn" /> <input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"> <label class="menu-icon" for="menu-btn">
<span class="navicon"></span> <span class="navicon"></span>
</label> </label>
<nav class="nav-wrapper" aria-label="Menu principal"> <nav class="nav-wrapper" aria-label="Menu principal">
<ul class="menu"> <ul class="menu">
<li><a href="index.html">Accueil</a></li> <li><a href="index.html">Accueil</a></li>
@@ -55,7 +53,7 @@
</ul> </ul>
</nav> </nav>
</header> </header>
<div class="banner"> <div class="banner banner-accueil" >
</div> </div>
<main> <main>
<section id="accueil"> <section id="accueil">
@@ -137,11 +135,7 @@
</ul> </ul>
</section> </section>
<section id="contact">
<h2>Contactez-moi</h2>
<p>Vous pouvez me contacter à l'adresse email suivante : <a
href="mailto:votre@email.com">votre@email.com</a></p>
</section>
</main> </main>
<!-- ===== PIED-DE-PAGE ===== --> <!-- ===== PIED-DE-PAGE ===== -->

9
mentions.html
View File

@@ -16,6 +16,7 @@
<!--<link rel="preload" href="assets/fonts/WorkSans-Regular.woff2" as="font" type="font/woff2" crossorigin>--> <!--<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="style.css" />
<link rel="stylesheet" href="class.css" />
<link rel="stylesheet" href="navigation.css" /> <link rel="stylesheet" href="navigation.css" />
<link rel="canonical" href="https://www.pasteuravocate.com/mentions.html" /> <link rel="canonical" href="https://www.pasteuravocate.com/mentions.html" />
<link rel="icon" href="assets/img/logo.png"> <link rel="icon" href="assets/img/logo.png">
@@ -53,7 +54,7 @@
</ul> </ul>
</nav> </nav>
</header> </header>
<div class="banner"> <div class="banner banner-accueil">
</div> </div>
<main> <main>
<section id="mentions"> <section id="mentions">
@@ -139,11 +140,7 @@
</p> </p>
</div> </div>
</section> </section>
<section id="contact">
<h2>Contactez-moi</h2>
<p>Vous pouvez me contacter à l'adresse email suivante : <a
href="mailto:votre@email.com">votre@email.com</a></p>
</section>
</main> </main>
<!-- ===== PIED-DE-PAGE ===== --> <!-- ===== PIED-DE-PAGE ===== -->

6
navigation.css
View File

@@ -3,6 +3,7 @@
background-color: #F9E7DB; background-color: #F9E7DB;
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .1); box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .1);
position: fixed; position: fixed;
top:40px;
width: 100%; width: 100%;
z-index: 3; z-index: 3;
align-items: center; align-items: center;
@@ -16,11 +17,6 @@
overflow: hidden; overflow: hidden;
} }
a {
color: #333;
text-decoration: none;
}
.header li { .header li {
display: block; display: block;
padding: 0.5rem; padding: 0.5rem;

148
style.css
View File

@@ -1,39 +1,3 @@
/* Style de la bannière */
.contact {
display:flex;
flex-wrap: wrap;
row-gap: 10px;
column-gap: 2em;
position: sticky;
top: 0;
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 {
background-image: url('assets/img/CharlinePasteur-banniere.jpg');
background-size: cover;
background-position: center;
min-height: 50vh;
}
body { body {
font-family: sans-serif; font-family: sans-serif;
@@ -53,6 +17,11 @@ section {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
a {
color: #333;
text-decoration: none;
}
h1 { h1 {
color: #bf9000; color: #bf9000;
vertical-align: baseline; vertical-align: baseline;
@@ -66,111 +35,22 @@ h2 {
text-align: center; text-align: center;
} }
p span{ p {
text-indent: 10px;
}
p span {
font-weight: bold; font-weight: bold;
} }
/* 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;
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;
padding: 0.7rem 1rem; padding: 0.7rem 1rem;
color: #F9E7DB; text-align: center; color: #F9E7DB;
text-align: center;
padding: 0.5rem 0; padding: 0.5rem 0;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
font-size: 0.9rem; font-size: 0.9rem;
} }