diff --git a/index.html b/index.html index b3e951c..3c15e83 100644 --- a/index.html +++ b/index.html @@ -11,9 +11,9 @@

- - Site internet est encours d’évolution - + + Site internet est en cours d’évolution +

@@ -96,53 +96,44 @@
  • Saint-Rémy-du-Nord - 03 27 63 66 00 -
    - 12 Rue Jean Messager, 59330 Saint-Remy-du-Nord -
    -
  • -
  • - Estaires - 03 28 48 83 98 -
    - 52 Rue de la Chapelle, 59940 Estaires -
    + 03 27 63 66 00 +
    12 Rue Jean Messager
    59330 Saint-Remy-du-Nord
  • Auby - 03 27 63 66 00 -
    - Rue Jean-Jacques Rousseau, 59950 Auby -
    -
  • -
  • - Raillencourt-Sainte-Olle - 03 27 85 06 47 -
    81 Av. des Deux Vallées, 59554 - Raillencourt-Sainte-Olle -
    + 03 27 63 66 00 +
    Rue Jean-Jacques Rousseau
    59950 Auby
  • +
  • Bondues - 03 20 26 00 15 -
    Rue du Moulin Cardon, 59910 Bondues
    + 03 20 26 00 15 +
    Rue du Moulin Cardon
    59910 Bondues
  • - Wignehies - 03 27 63 66 00 -
    Adresse à confirmer
    -
  • -
  • - Wignehies - 03 27 63 66 00 -
    Adresse à confirmer
    + Caudry + 03 27 85 06 47 +
    29 rue Edouard Vaillant
    59540 Caudry
  • Dunkerque - 03 20 26 00 15 -
    241 rue du Meunynck - ZI de Petite Synthe 59640 Dunkerque -
    + 03 28 44 21 82 +
    241 rue du Meunynck
    ZI de Petite Synthe
    59640 Dunkerque
    +
  • +
  • + Estaires + 03 28 48 83 98 +
    52 Rue de la Chapelle
    59940 Estaires
    +
  • +
  • + Raillencourt-Sainte-Olle + 03 27 85 06 47 +
    81 Av. des Deux Vallées
    59554 Raillencourt-Sainte-Olle
    +
  • +
  • + Wignehies + 03 27 57 26 12 +
    8 route Féron
    59212 Wigneghies
diff --git a/sass/style.scss b/sass/style.scss index b667aa5..9217281 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -2,6 +2,7 @@ $page-width: 1280px; $color-black: #231f20; $color-white: #fafafa; $color-red: #d7191e; +$color-blue: #0056b3; *, ::before, @@ -239,29 +240,78 @@ body { } .section-contact { - margin: 48px 0; + padding: 40px 20px; + background-color: #fff; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + margin: 40px 0; &__title { display: flex; + flex-direction: column; align-items: center; - gap: 48px; + gap: 8px; + text-align: center; + margin-bottom: 40px; + + @media only screen and (min-width: 768px) { + flex-direction: row; + gap: 48px; + } + + h2 { + font-size: 2.5em; + color: #333; + } + + a { + font-size: 1.2em; + color: $color-blue; + text-decoration: none; + font-weight: bold; + } } &__addresses { display: grid; - grid-template-columns: 1fr 1fr; - gap: 16px; - margin-block: 32px; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + gap: 30px; + margin-block-start: 32px; } .address-item { display: flex; flex-direction: column; - gap: 4px; + gap: 14px; + + background-color: #f9f9f9; + padding: 20px; + border-radius: 8px; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); + transition: transform 0.3s, box-shadow 0.3s; + + &:hover { + transform: translateY(-10px); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); + } &__title { + font-weight: 600; text-transform: uppercase; - margin-bottom: 6px; + font-size: 1.5em; + color: #333; + } + + &__phone { + font-size: 1.2em; + color: $color-blue; + font-weight: bold; + flex-grow: 1; + } + + address { + font-style: normal; + color: #666; + justify-self: end; } } } \ No newline at end of file