diff --git a/assistance_educative.html b/assistance_educative.html index 2fd857e..22c0b6a 100644 --- a/assistance_educative.html +++ b/assistance_educative.html @@ -18,6 +18,7 @@ + @@ -25,11 +26,14 @@
-
Tel : 06.......... Email : c.pasteuravocate@gmail.com
+
Tel : 06..........
- Rendez - vous en - ligne + + Rendez vous en ligne + +
+
+ Email : c.pasteuravocate@gmail.com
@@ -55,18 +59,18 @@
- -
-

Contactez-moi

-

Vous pouvez me contacter à l'adresse email suivante : votre@email.com

-
+ diff --git a/class.css b/class.css new file mode 100644 index 0000000..0502477 --- /dev/null +++ b/class.css @@ -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; +} \ No newline at end of file diff --git a/contact.html b/contact.html index d88665d..95008fa 100644 --- a/contact.html +++ b/contact.html @@ -16,6 +16,7 @@ + @@ -23,11 +24,14 @@
-
Tel : 06.......... Email : c.pasteuravocate@gmail.com
+
Tel : 06..........
- Rendez - vous en - ligne + + Rendez vous en ligne + +
+
+ Email : c.pasteuravocate@gmail.com
@@ -53,7 +57,7 @@
-
- - -
-