diff --git a/css/styles.css b/css/styles.css index 0d8817c..3ed45fa 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,4 +1,4 @@ -/* VARIABLES / RESET */ +/* Variables & Reset */ :root { --vert-fonce: #154e1f; --vert-clair: #659b1f; @@ -14,22 +14,22 @@ } body { - font-family: 'Helvetica Neue', Arial, sans-serif; - background-color: var(--fond-gris); color: var(--texte-sombre); line-height: 1.5; overflow-x: hidden; + background: #f4f6f4; + font-family: "Arial Black", serif; } -/* HEADER */ +/* Header */ header { background-color: var(--blanc); display: flex; flex-direction: column; align-items: center; padding: 1.5rem 1rem; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); text-align: center; + border-bottom: #154e1f solid 2px; } #logo { @@ -41,34 +41,39 @@ header { header h1 { color: var(--vert-fonce); font-size: 1.4rem; - margin-bottom: 1rem; + margin-bottom: 0; text-transform: uppercase; letter-spacing: 1px; } -/* SOCIALS */ +/* Réseaux Sociaux */ .réseaux { + background-color: var(--blanc); display: flex; - gap: 1.2rem; + justify-content: center; + gap: 2rem; + padding: 10px 0px 15px 0px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); } .réseaux a { color: var(--vert-fonce); - font-size: 1.5rem; + font-size: 1.8rem; text-decoration: none; - transition: color 0.3s; + transition: color 0.3s, transform 0.2s; } .réseaux a:active, .réseaux a:hover { color: var(--vert-clair); + transform: scale(1.1); } -/* MAIN */ +/* Main */ main { - padding: 1rem; - max-width: 1200px; /* Limite la largeur sur grand écran */ - margin: 0 auto; /* Centre le contenu */ + max-width: 1200px; + margin: 0 auto; + padding: 0 1rem; } hr { @@ -79,8 +84,8 @@ hr { margin: 2rem 0; } -/* BANNER */ -section:first-of-type { +/* Bannière */ +.banner { display: flex; flex-direction: column; align-items: center; @@ -88,15 +93,18 @@ section:first-of-type { } #photo { - width: calc(100% + 2rem); - margin: 50px 50px 50px 50px ; - height: 50%; + width: 100vw; + margin-left: calc(-50vw + 50%); + margin-right: calc(-50vw + 50%); + margin-top: 0; + margin-bottom: 1.5rem; + height: 250px; object-fit: cover; border-radius: 0; box-shadow: none; } -/* PROJECTS */ +/* Projets */ .projets h2 { color: var(--vert-fonce); text-align: center; @@ -104,7 +112,7 @@ section:first-of-type { margin-bottom: 0.2rem; } -/* INDICATOR */ +/* Indicateur de Défilement */ .projets h2::after { content: "\f337 Glissez pour voir plus"; font-family: "Font Awesome 6 Free"; @@ -116,7 +124,7 @@ section:first-of-type { margin-bottom: 1.5rem; } -/* CAROUSEL */ +/* Carrousel */ .projets > div { display: flex; flex-direction: row; @@ -129,7 +137,7 @@ section:first-of-type { scrollbar-color: var(--vert-clair) rgba(0,0,0,0.05); } -/* SCROLLBAR WEBKIT */ +/* Scrollbar Personnalisée */ .projets > div::-webkit-scrollbar { height: 6px; display: block; @@ -145,7 +153,7 @@ section:first-of-type { border-radius: 10px; } -/* CARDS */ +/* Cartes Projets */ .projets > div > div { flex: 0 0 100%; scroll-snap-align: center; @@ -168,78 +176,85 @@ section:first-of-type { font-size: 0.95rem; } -/* CONTACT */ -.contact { - background-color: var(--blanc); - padding: 2rem 1rem; - border-radius: 8px; +/* Footer */ +footer { + background-color: rgb(78 125 19 / 0.88); + color: var(--blanc); text-align: center; - box-shadow: 0 2px 5px rgba(0,0,0,0.05); + padding: 2rem 1rem; + margin-top: 2rem; + font-size: 0.95rem; } -.contact h2 { - color: var(--vert-fonce); - font-size: 1.5rem; +/* Footer Layout */ +.footer-sections { + display: flex; + flex-direction: column; + align-items: center; + gap: 2rem; margin-bottom: 1rem; } -.contact h3 { - color: var(--vert-clair); +.footer-block { + width: 100%; +} + +.footer-block h3 { font-size: 1.2rem; - margin-bottom: 0.5rem; - margin-top: 1rem; + margin-bottom: 1rem; + text-transform: uppercase; + letter-spacing: 1px; } -.contact p { - font-size: 1rem; - font-weight: 500; +.footer-block p { + display: flex; + align-items: center; + justify-content: center; + gap: 10px; + margin-bottom: 0.8rem; + word-break: break-word; } -/* FOOTER */ -footer { - background-color: var(--vert-fonce); - color: var(--blanc); +.footer-block i { + width: 20px; text-align: center; - padding: 1.5rem 1rem; - margin-top: 2rem; - font-size: 0.85rem; } -/* ========================================= - MEDIA QUERIES (Tablette & Desktop) -========================================= */ +/* Media Queries */ @media (min-width: 768px) { - - /* Force la bannière à toucher les bords de l'écran */ #photo { - width: 100vw; /* 100% de la largeur de l'écran */ - margin-left: calc(-50vw + 50%); /* Astuce pour sortir du conteneur centré */ - margin-right: calc(-50vw + 50%); - margin-top: -1rem; /* Pour rester collé en haut */ + height: 350px; margin-bottom: 2rem; - height: 350px; /* On l'agrandit un peu pour les grands écrans */ - border-radius: 0; /* Pas de bords arrondis */ } - /* Supprime l'indicateur tactile "Glissez" */ .projets h2::after { display: none; } - /* Grille 3x3 pour les projets */ .projets > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; - - /* Annule le comportement du carrousel */ overflow-x: visible; scroll-snap-type: none; padding-bottom: 0; } - /* Ajustement des cartes pour la grille */ .projets > div > div { - flex: auto; /* Annule la largeur forcée du carrousel */ + flex: auto; + } + + .footer-sections { + flex-direction: row; + justify-content: space-around; + align-items: flex-start; + max-width: 800px; + margin-left: auto; + margin-right: auto; + text-align: left; + } + + .footer-block p { + justify-content: flex-start; } } \ No newline at end of file diff --git a/index.html b/index.html index f79a48d..ada2ce9 100644 --- a/index.html +++ b/index.html @@ -1,76 +1,88 @@ - - - - FERNANDO PAYSAGISTE - - - - -
- -

FERNANDO PAYSAGISTE

- -
-
-
- photo -

Fernando Paysagiste est une autoentreprise de proximité, spécialisée dans la création et l'entretien d'espaces verts. De la tonte à l'aménagement complet de votre jardin, chaque intervention est réalisée avec professionnalisme, passion et souci du détail. Mon objectif est de vous offrir un extérieur harmonieux, agréable à vivre et adapté à vos besoins.

-
-
-

Galerie de mes projets

-
-
-
- photo -
-
- photo -
-
- photo -
-
- photo -
-
- photo -
-
- photo -
-
- photo -
-
- photo -
-
- photo -
-
-
-
+ + + + FERNANDO PAYSAGISTE + + + + - + + \ No newline at end of file