diff --git a/assets/images/photo_6.png b/assets/images/photo_6.png index 3fcef56..8bdb4ab 100644 Binary files a/assets/images/photo_6.png and b/assets/images/photo_6.png differ diff --git a/css/styles.css b/css/styles.css index e69de29..0d8817c 100644 --- a/css/styles.css +++ b/css/styles.css @@ -0,0 +1,245 @@ +/* VARIABLES / RESET */ +:root { + --vert-fonce: #154e1f; + --vert-clair: #659b1f; + --blanc: #ffffff; + --fond-gris: #f4f6f4; + --texte-sombre: #2c3e50; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Helvetica Neue', Arial, sans-serif; + background-color: var(--fond-gris); + color: var(--texte-sombre); + line-height: 1.5; + overflow-x: hidden; +} + +/* 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; +} + +#logo { + width: 120px; + height: auto; + margin-bottom: 0.5rem; +} + +header h1 { + color: var(--vert-fonce); + font-size: 1.4rem; + margin-bottom: 1rem; + text-transform: uppercase; + letter-spacing: 1px; +} + +/* SOCIALS */ +.réseaux { + display: flex; + gap: 1.2rem; +} + +.réseaux a { + color: var(--vert-fonce); + font-size: 1.5rem; + text-decoration: none; + transition: color 0.3s; +} + +.réseaux a:active, +.réseaux a:hover { + color: var(--vert-clair); +} + +/* MAIN */ +main { + padding: 1rem; + max-width: 1200px; /* Limite la largeur sur grand écran */ + margin: 0 auto; /* Centre le contenu */ +} + +hr { + border: none; + height: 1px; + background-color: var(--vert-clair); + opacity: 0.3; + margin: 2rem 0; +} + +/* BANNER */ +section:first-of-type { + display: flex; + flex-direction: column; + align-items: center; + text-align: justify; +} + +#photo { + width: calc(100% + 2rem); + margin: 50px 50px 50px 50px ; + height: 50%; + object-fit: cover; + border-radius: 0; + box-shadow: none; +} + +/* PROJECTS */ +.projets h2 { + color: var(--vert-fonce); + text-align: center; + font-size: 1.5rem; + margin-bottom: 0.2rem; +} + +/* INDICATOR */ +.projets h2::after { + content: "\f337 Glissez pour voir plus"; + font-family: "Font Awesome 6 Free"; + font-weight: 900; + display: block; + font-size: 0.9rem; + color: #7f8c8d; + margin-top: 0.4rem; + margin-bottom: 1.5rem; +} + +/* CAROUSEL */ +.projets > div { + display: flex; + flex-direction: row; + gap: 1rem; + overflow-x: auto; + overscroll-behavior-x: contain; + scroll-snap-type: x mandatory; + padding-bottom: 1.5rem; + scrollbar-width: thin; + scrollbar-color: var(--vert-clair) rgba(0,0,0,0.05); +} + +/* SCROLLBAR WEBKIT */ +.projets > div::-webkit-scrollbar { + height: 6px; + display: block; +} + +.projets > div::-webkit-scrollbar-track { + background: rgba(0,0,0,0.05); + border-radius: 10px; +} + +.projets > div::-webkit-scrollbar-thumb { + background: var(--vert-clair); + border-radius: 10px; +} + +/* CARDS */ +.projets > div > div { + flex: 0 0 100%; + scroll-snap-align: center; + background-color: var(--blanc); + border-radius: 8px; + overflow: hidden; + box-shadow: 0 2px 5px rgba(0,0,0,0.1); +} + +.projets img { + width: 100%; + height: 220px; + object-fit: cover; + display: block; +} + +.projets p { + padding: 1rem; + text-align: center; + font-size: 0.95rem; +} + +/* CONTACT */ +.contact { + background-color: var(--blanc); + padding: 2rem 1rem; + border-radius: 8px; + text-align: center; + box-shadow: 0 2px 5px rgba(0,0,0,0.05); +} + +.contact h2 { + color: var(--vert-fonce); + font-size: 1.5rem; + margin-bottom: 1rem; +} + +.contact h3 { + color: var(--vert-clair); + font-size: 1.2rem; + margin-bottom: 0.5rem; + margin-top: 1rem; +} + +.contact p { + font-size: 1rem; + font-weight: 500; +} + +/* FOOTER */ +footer { + background-color: var(--vert-fonce); + color: var(--blanc); + text-align: center; + padding: 1.5rem 1rem; + margin-top: 2rem; + font-size: 0.85rem; +} + +/* ========================================= + MEDIA QUERIES (Tablette & Desktop) +========================================= */ +@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 */ + 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 */ + } +} \ No newline at end of file diff --git a/index.html b/index.html index d7a7440..f79a48d 100644 --- a/index.html +++ b/index.html @@ -11,12 +11,12 @@

FERNANDO PAYSAGISTE

-
+