diff --git a/assets/img/AssistanceEducative.jpg b/assets/img/AssistanceEducative.jpg new file mode 100644 index 0000000..91f0973 Binary files /dev/null and b/assets/img/AssistanceEducative.jpg differ diff --git a/assets/img/DroitPenaldesMineurs.jpg b/assets/img/DroitPenaldesMineurs.jpg new file mode 100644 index 0000000..8e82901 Binary files /dev/null and b/assets/img/DroitPenaldesMineurs.jpg differ diff --git a/assets/img/DroitddelEducation.jpg b/assets/img/DroitddelEducation.jpg new file mode 100644 index 0000000..fce9b2b Binary files /dev/null and b/assets/img/DroitddelEducation.jpg differ diff --git a/assets/img/DroitdesEtrangers.jpg b/assets/img/DroitdesEtrangers.jpg new file mode 100644 index 0000000..478ec4d Binary files /dev/null and b/assets/img/DroitdesEtrangers.jpg differ diff --git a/assets/img/portraitCharlinePasteur.jpg b/assets/img/portraitCharlinePasteur.jpg new file mode 100644 index 0000000..857f366 Binary files /dev/null and b/assets/img/portraitCharlinePasteur.jpg differ diff --git a/assets/img/specialiste.png b/assets/img/specialiste.png new file mode 100644 index 0000000..dd74fe7 Binary files /dev/null and b/assets/img/specialiste.png differ diff --git a/index.html b/index.html index 1daeeef..d49e65a 100644 --- a/index.html +++ b/index.html @@ -5,22 +5,35 @@ + Maître Charline Pasteur – Avocate au barreau de Nantes - - - + + + + + + +
+
Tel : 06.......... Email : c.pasteuravocate@gmail.com
+
+ Rendez + vous en + ligne +
+
+
  • Droit de l'éducation
  • Droit des étrangers
  • Honorraires
  • -
  • Contact
  • @@ -48,39 +60,81 @@
    -

    Spécialiste droit des enfants

    -

    Ayant obtenu mon certificat d’aptitude à la profession d’Avocat au sein de l’École de Formation du - Barreau à Paris, j’ai débuté mon exercice en tant qu’avocate au sein du Barreau de Nantes en janvier - 2018. - Conformément au serment que j’ai prêté, j’exerce ma profession avec dignité, humanité, probité, - conscience et indépendance. -

    -

    Au quotidien, j’ai à cœur de mettre mes compétences au service de causes individuelles mais aussi 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. -

    -

    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 ». -

    -

    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. -

    -

    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. -

    -

    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. -

    +
    +
    +

    Charline Pasteur

    +
    +
    +

    Avocate au Barreau de Nantes

    +
    +
    +
    +
    + +
    +
    +

    Spécialiste droit des enfants

    +

    Ayant obtenu mon certificat d’aptitude à la profession d’Avocat au sein de l’École de Formation + du + Barreau à Paris, j’ai débuté mon exercice en tant qu’avocate au sein du Barreau de Nantes en + janvier + 2018. + Conformément au serment que j’ai prêté, j’exerce ma profession avec dignité, humanité, probité, + conscience et indépendance. +

    +

    Au quotidien, j’ai à cœur de mettre mes compétences au service de causes individuelles mais aussi + 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. +

    +

    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 ». +

    +

    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. +

    +

    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. +

    +

    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. +

    +
    +
    + +
    +

    Domaines d'intervention

    -
    @@ -95,6 +149,8 @@ diff --git a/navigation.css b/navigation.css new file mode 100644 index 0000000..9c9da2b --- /dev/null +++ b/navigation.css @@ -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; + } +} \ No newline at end of file diff --git a/style.css b/style.css index 236886f..492aab7 100644 --- a/style.css +++ b/style.css @@ -1,202 +1,177 @@ /* 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 { - background-image: url('assets/img/accueil.jpg'); - /* Remplace 'ton-image-de-fond.jpg' par le chemin de ton image */ - background-size: cover; - /* L'image couvre tout l'espace disponible */ - 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) */ + background-image: url('assets/img/accueil.jpg'); + background-size: cover; + background-position: center; + min-height: 50vh; } body { - font-family: sans-serif; - /* Police de caractères par défaut */ - line-height: 1.6; - /* Espacement entre les lignes pour une meilleure lisibilité */ - margin: 0; - /* Supprime les marges par défaut du body */ - 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; + font-family: sans-serif; + line-height: 1.6; + margin: 0; + padding: 0; + background-color: #F9E7DB; + color: #333; } main { - padding: 2rem; - max-width: 800px; - /* Limite la largeur du contenu pour une meilleure lecture */ - margin: 0 auto; - /* Centre le contenu horizontalement */ + padding: 2rem; + margin: 0 auto; } 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 { - color: #CC4331; - line-height: 1.2; + color: #CC4331; + 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 { - background-color: #CC4331; - text-align: center; - padding: 0.5rem 0; - /* Suppression de la propriété sticky */ - bottom: 0; - /* Assure qu'il reste en bas du viewport initialement */ - width: 100%; - 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; - } + background-color: #CC4331; + padding: 0.7rem 1rem; + color: #F9E7DB; text-align: center; + padding: 0.5rem 0; + bottom: 0; + width: 100%; + font-size: 0.9rem; } \ No newline at end of file