commit d0f45b8e4a1190198f85cc4277aed92e333ac6c5 Author: Nicolas Doby Date: Tue Dec 10 09:34:48 2024 +0100 feat: add first version diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..57499d0 --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +/node_modules/ +.idea/ +*.iml +yarn.lock \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..f658084 --- /dev/null +++ b/css/style.css @@ -0,0 +1,239 @@ +*, +::before, +::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +ul, li { + list-style: none; + margin: 0; + padding: 0; +} + +h1, h2, h3 { + text-transform: uppercase; +} + +a { + color: #231f20; +} + +body { + font-family: Inter, sans-serif; + max-width: 1280px; + margin-inline: auto; + padding: 0 12px; +} + +.header, .section-services { + position: relative; + overflow: hidden; + background: #231f20; +} + +.header { + position: relative; + overflow: hidden; +} + +.decoration-pipes--top, +.decoration-pipes--bottom { + position: absolute; + width: 100%; + z-index: 1; +} + +.decoration-pipes--top { + top: 0; + left: 0; + height: 100%; +} + +.decoration-pipes--bottom { + bottom: 0; + left: 0; + @media only screen and (max-width: 950px) { + display: none; + } +} + +.header__information { + display: flex; + justify-content: space-evenly; + color: #fafafa; + background: #231f20; + text-align: center; + padding: 12px; + font-style: italic; + position: relative; + z-index: 2; +} +@media only screen and (max-width: 950px) { + .header__information span:first-child, + .header__information span:last-child { + display: none; + } +} + +.header-content { + display: flex; + flex-direction: column-reverse; + align-items: center; + gap: 32px; + padding: 32px 80px; + background: #d7191e; +} +@media only screen and (min-width: 768px) { + .header-content { + flex-direction: row; + } +} +.header-content__title { + flex: 2; + color: #fafafa; + font-size: 1.5rem; + z-index: 2; +} +.header-content__title--text-big { + font-size: 2rem; +} +.header-content__title--text-small { + font-size: 1rem; +} +.header-content__logo { + flex: 1; + width: 280px; + z-index: 2; +} + +.header__main-image { + position: relative; + display: flex; + justify-content: center; + background: #d7191e; + overflow: hidden; +} +.header__main-image img { + height: 340px; + max-width: 100%; + object-fit: cover; + z-index: 11; + margin-bottom: 32px; +} +.header__main-image--decoration { + position: absolute; + z-index: 10; + top: 75px; + left: 50%; + transform: translateX(-50%); + height: 640px; + width: 1280px; + border-radius: 50% 50% 0 0; + background: #231f20; +} + +.section-history { + margin: 24px 0; +} +.section-history__content { + text-align: center; + padding: 48px; + background-image: url("/images/paper.jpg"); + background-repeat: no-repeat; +} +.section-history__content h2 { + font-weight: 300; + letter-spacing: 4px; + margin-bottom: 32px; +} +.section-history__content p { + line-height: 150%; +} +.section-history__img { + height: 310px; + width: 100%; + object-fit: cover; +} + +.section-services { + padding: 48px; +} +.section-services--decoration { + position: absolute; + z-index: 2; + top: -50px; + left: 50%; + transform: translateX(-50%); + height: 640px; + width: 1280px; + border-radius: 0 0 50% 50%; + background: #231f20; +} +.section-services__title { + color: #fafafa; + margin-bottom: 24px; + font-weight: normal; + position: relative; + z-index: 3; +} +.section-services__cards { + display: grid; + gap: 16px; + grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); +} +.section-services__card { + background: #231f20; + border-radius: 4px 6px 0 0; + z-index: 3; +} +.section-services__card__title { + font-size: 1.25rem; + text-align: center; + font-weight: 700; + padding: 8px 16px; + color: #fafafa; +} +.section-services__card__img { + height: 220px; + width: 100%; + object-fit: cover; + object-position: top; + border-radius: 4px 6px 0 0; +} +.section-services__card .img-center { + object-position: bottom; +} +.section-services__card--red { + background: #d7191e; +} +.section-services__card--fullwidth { + grid-column: 1/-1; +} + +.section-contact { + margin: 48px 0; +} +.section-contact__title { + display: flex; + align-items: center; + gap: 48px; +} +.section-contact__addresses { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 16px; + margin-block: 32px; +} +.section-contact .address-item { + display: flex; + flex-direction: column; + gap: 4px; +} +.section-contact .address-item__title { + text-transform: uppercase; + margin-bottom: 6px; +} + +/*# sourceMappingURL=style.css.map */ diff --git a/css/style.css.map b/css/style.css.map new file mode 100644 index 0000000..421400b --- /dev/null +++ b/css/style.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../sass/style.scss"],"names":[],"mappings":"AAKA;AAAA;AAAA;EAGE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE,OAvBY;;;AA0Bd;EACE;EACA,WA7BW;EA8BX;EACA;;;AAGF;EACE;EACA;EACA,YApCY;;;AAsCd;EACE;EACA;;;AAKF;AAAA;EAEE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAGF;EACE;EACA;EACA,OA9DY;EA+DZ,YAhEY;EAiEZ;EACA;EACA;EACA;EACA;;AAEA;EACE;AAAA;IAEE;;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA,YAnFU;;AAqFV;EARF;IASI;;;AAGF;EACE;EACA,OA5FU;EA6FV;EACA;;AAEA;EACE;;AAGF;EACE;;AAIJ;EACE;EACA;EACA;;;AAIJ;EAEE;EACA;EACA;EACA,YApHU;EAqHV;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EAGA;EACA,OA3IS;EA4IT;EACA,YA5IU;;;AAgJd;EAEE;;AAEA;EACE;EACA;EAEA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAIJ;EACE;EACA;EACA;;;AAKJ;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EAEA;EACA,OA1LS;EA2LT;EACA,YA3LU;;AA8LZ;EACE,OA9LU;EA+LV;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE,YA7MU;EA8MV;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA,OArNQ;;AAwNV;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE,YApOM;;AAuOR;EACE;;;AAKN;EACE;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA","file":"style.css"} \ No newline at end of file diff --git a/images/family.png b/images/family.png new file mode 100644 index 0000000..c5c52ca Binary files /dev/null and b/images/family.png differ diff --git a/images/family.webp b/images/family.webp new file mode 100644 index 0000000..1d15f75 Binary files /dev/null and b/images/family.webp differ diff --git a/images/logo.png b/images/logo.png new file mode 100644 index 0000000..5335380 Binary files /dev/null and b/images/logo.png differ diff --git a/images/logo.webp b/images/logo.webp new file mode 100644 index 0000000..e55d181 Binary files /dev/null and b/images/logo.webp differ diff --git a/images/paper.jpg b/images/paper.jpg new file mode 100644 index 0000000..52543d2 Binary files /dev/null and b/images/paper.jpg differ diff --git a/images/paper.webp b/images/paper.webp new file mode 100644 index 0000000..9590664 Binary files /dev/null and b/images/paper.webp differ diff --git a/images/pipes.png b/images/pipes.png new file mode 100644 index 0000000..c7d60ef Binary files /dev/null and b/images/pipes.png differ diff --git a/images/pipes.webp b/images/pipes.webp new file mode 100644 index 0000000..839acc4 Binary files /dev/null and b/images/pipes.webp differ diff --git a/images/service-1.png b/images/service-1.png new file mode 100644 index 0000000..769e391 Binary files /dev/null and b/images/service-1.png differ diff --git a/images/service-1.webp b/images/service-1.webp new file mode 100644 index 0000000..c3e3b1e Binary files /dev/null and b/images/service-1.webp differ diff --git a/images/service-10.webp b/images/service-10.webp new file mode 100644 index 0000000..72e783f Binary files /dev/null and b/images/service-10.webp differ diff --git a/images/service-2.png b/images/service-2.png new file mode 100644 index 0000000..49a601b Binary files /dev/null and b/images/service-2.png differ diff --git a/images/service-2.webp b/images/service-2.webp new file mode 100644 index 0000000..0902464 Binary files /dev/null and b/images/service-2.webp differ diff --git a/images/service-3.png b/images/service-3.png new file mode 100644 index 0000000..6beb862 Binary files /dev/null and b/images/service-3.png differ diff --git a/images/service-3.webp b/images/service-3.webp new file mode 100644 index 0000000..e6e1364 Binary files /dev/null and b/images/service-3.webp differ diff --git a/images/service-4.png b/images/service-4.png new file mode 100644 index 0000000..dff9876 Binary files /dev/null and b/images/service-4.png differ diff --git a/images/service-4.webp b/images/service-4.webp new file mode 100644 index 0000000..a02767d Binary files /dev/null and b/images/service-4.webp differ diff --git a/images/service-5.png b/images/service-5.png new file mode 100644 index 0000000..999cca4 Binary files /dev/null and b/images/service-5.png differ diff --git a/images/service-5.webp b/images/service-5.webp new file mode 100644 index 0000000..453ad35 Binary files /dev/null and b/images/service-5.webp differ diff --git a/images/service-6.png b/images/service-6.png new file mode 100644 index 0000000..b0d7928 Binary files /dev/null and b/images/service-6.png differ diff --git a/images/service-6.webp b/images/service-6.webp new file mode 100644 index 0000000..de5aa60 Binary files /dev/null and b/images/service-6.webp differ diff --git a/images/service-7.png b/images/service-7.png new file mode 100644 index 0000000..1d0d6bd Binary files /dev/null and b/images/service-7.png differ diff --git a/images/service-7.webp b/images/service-7.webp new file mode 100644 index 0000000..9227130 Binary files /dev/null and b/images/service-7.webp differ diff --git a/images/service-8.png b/images/service-8.png new file mode 100644 index 0000000..59e0cde Binary files /dev/null and b/images/service-8.png differ diff --git a/images/service-8.webp b/images/service-8.webp new file mode 100644 index 0000000..1432f0c Binary files /dev/null and b/images/service-8.webp differ diff --git a/images/service-9.png b/images/service-9.png new file mode 100644 index 0000000..a97ebeb Binary files /dev/null and b/images/service-9.png differ diff --git a/images/service-9.webp b/images/service-9.webp new file mode 100644 index 0000000..04b3af3 Binary files /dev/null and b/images/service-9.webp differ diff --git a/images/truck.png b/images/truck.png new file mode 100644 index 0000000..8f458dc Binary files /dev/null and b/images/truck.png differ diff --git a/images/truck.webp b/images/truck.webp new file mode 100644 index 0000000..82ce36d Binary files /dev/null and b/images/truck.webp differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..b3e951c --- /dev/null +++ b/index.html @@ -0,0 +1,151 @@ + + + + + + + FLAMME assainissement + + + +
+ +

+ + Site internet est encours d’évolution + +

+
+

+ Votre partenaire + en assainissement + & maintenance industrielle + depuis 1900
 + Expertise - Innovation - Réactivité +

+ +
+
+ +
+
+
+
+
+
+

Entreprise familiale et indépendante

+

Nous nous distinguons par notre capacité à innover et à nous adapter aux évolutions réglementaires.
+ Disponibles 24h/24 et 7j/7, nous mettons un point d’honneur à offrir des services fiables, réactifs et + sur + mesure, tout en respectant des valeurs familiales et de proximité.

+
+ +
+
+
+

Nos services

+
    +
  • + +

    Maintenance & nettoyage industriel

    +
    • +
  • + +

    Pompage & enlèvement de déchets

    +
    • +
  • + +

    Vidange · détartrage débouchage

    +
    • +
  • + +

    Nettoyage haute pression thp & uhp

    +
    • +
  • + +

    Balayage des voiries

    +
    • +
  • + +

    Dératisation & désinfection

    +
    • +
  • + +

    Désinsectisation

    +
    • +
  • + +

    Passage de caméra

    +
    • +
  • + +

    Inspection & nettoyage par drone

    +
    • +
  • + +

    Bureau d’études · diag anc

    +
    • +
+ +
+
+
+

Contactez-nous

+ contactflamme@flamme.fr +
+
    +
  • + 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 +
    +
    • +
  • + 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 +
    +
    • +
  • + 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
    +
    • +
  • + Dunkerque + 03 20 26 00 15 +
    241 rue du Meunynck + ZI de Petite Synthe 59640 Dunkerque +
    +
    • +
+
+
+ + \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..3099ebd --- /dev/null +++ b/package.json @@ -0,0 +1,15 @@ +{ + "name": "flamme-website", + "version": "1.0.0", + "main": "index.js", + "author": "Nicolas DOBY ", + "license": "MIT", + "private": true, + "scripts": { + "build": "sass sass/style.scss css/style.css", + "dev": "sass --watch sass/style.scss css/style.css" + }, + "dependencies": { + "sass": "^1.82.0" + } +} diff --git a/sass/style.scss b/sass/style.scss new file mode 100644 index 0000000..b667aa5 --- /dev/null +++ b/sass/style.scss @@ -0,0 +1,267 @@ +$page-width: 1280px; +$color-black: #231f20; +$color-white: #fafafa; +$color-red: #d7191e; + +*, +::before, +::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +ul, li { + list-style: none; + margin: 0; + padding: 0; +} + +h1, h2, h3 { + text-transform: uppercase; +} + +a { + color: $color-black; +} + +body { + font-family: Inter, sans-serif; + max-width: $page-width; + margin-inline: auto; + padding: 0 12px; +} + +.header, .section-services { + position: relative; + overflow: hidden; + background: $color-black; +} +.header { + position: relative; + overflow: hidden; + //background-image: url("/images/pipes.png"); + //background-repeat: no-repeat; +} + +.decoration-pipes--top, +.decoration-pipes--bottom{ + position: absolute; + width: 100%; + z-index: 1; +} +.decoration-pipes--top { + top: 0; + left: 0; +} +.decoration-pipes--bottom { + bottom: 0; + left: 0; +} + +.header__information { + display: flex; + justify-content: space-evenly; + color: $color-white; + background: $color-black; + text-align: center; + padding: 12px; + font-style: italic; + position: relative; + z-index: 2; + + @media only screen and (max-width: 950px) { + span:first-child, + span:last-child { + display: none; + } + } +} + +.header-content { + display: flex; + flex-direction: column-reverse; + align-items: center; + gap: 32px; + padding: 32px 80px; + background: $color-red; + + @media only screen and (min-width: 768px) { + flex-direction: row; + } + + &__title { + flex: 2; + color: $color-white; + font-size: 1.5rem; + z-index: 2; + + &--text-big { + font-size: 2rem; + } + + &--text-small { + font-size: 1rem; + } + } + + &__logo { + flex: 1; + width: 280px; + z-index: 2; + } +} + +.header__main-image { + + position: relative; + display: flex; + justify-content: center; + background: $color-red; + overflow: hidden; + + img { + height: 340px; + max-width: 100%; + object-fit: cover; + z-index: 11; + margin-bottom: 32px; + } + + &--decoration { + position: absolute; + z-index: 10; + top: 75px; + left: 50%; + transform: translateX(-50%); + + + height: calc($page-width / 2); + width: $page-width; + border-radius: 50% 50% 0 0; + background: $color-black; + } +} + +.section-history { + + margin: 24px 0; + + &__content { + text-align: center; + padding: 48px; + + background-image: url("/images/paper.jpg"); + background-repeat: no-repeat; + + h2 { + font-weight: 300; + letter-spacing: 4px; + margin-bottom: 32px; + } + + p { + line-height: 150%; + } + } + + &__img { + height: 310px; + width: 100%; + object-fit: cover; + } +} + + +.section-services { + padding: 48px; + + &--decoration { + position: absolute; + z-index: 2; + top: -50px; + left: 50%; + transform: translateX(-50%); + + height: calc($page-width / 2); + width: $page-width; + border-radius: 0 0 50% 50% ; + background: $color-black; + } + + &__title { + color: $color-white; + margin-bottom: 24px; + font-weight: normal; + position: relative; + z-index: 3; + } + + &__cards { + display: grid; + gap: 16px; + grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); + } + + &__card { + background: $color-black; + border-radius: 4px 6px 0 0; + z-index: 3; + + &__title { + font-size: 1.25rem; + text-align: center; + font-weight: 700; + padding: 8px 16px; + color: $color-white; + } + + &__img { + height: 220px; + width: 100%; + object-fit: cover; + object-position: top; + border-radius: 4px 6px 0 0; + } + + .img-center { + object-position: bottom; + } + + &--red { + background: $color-red; + } + + &--fullwidth { + grid-column: 1 / -1; + } + } +} + +.section-contact { + margin: 48px 0; + + &__title { + display: flex; + align-items: center; + gap: 48px; + } + + &__addresses { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 16px; + margin-block: 32px; + } + + .address-item { + display: flex; + flex-direction: column; + gap: 4px; + + &__title { + text-transform: uppercase; + margin-bottom: 6px; + } + } +} \ No newline at end of file