feat: add first version

.gitignore

@@ -0,0 +1,4 @@
+/node_modules/
+.idea/
+*.iml
+yarn.lock

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 */

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"}

index.html

@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>FLAMME assainissement</title>
+    <link rel="stylesheet" href="css/style.css"/>
+</head>
+<body>
+<header class="header">
+    <img class="decoration-pipes--top" src="images/pipes.webp" alt="">
+    <p class="header__information">
+        <span aria-hidden="true">Site internet est encours d’évolution</span>
+        <span>Site internet est encours d’évolution</span>
+        <span aria-hidden="true">Site internet est encours d’évolution</span>
+    </p>
+    <div class="header-content">
+        <h1 class="header-content__title">
+            <span class="header-content__title--text-big">Votre partenaire</span>
+            <span>en assainissement</span>
+            <span>&&nbsp;maintenance industrielle</span>
+            <span class="header-content__title--text-big">depuis 1900<br/></span>
+            <span class="header-content__title--text-small">Expertise - Innovation - Réactivité</span>
+        </h1>
+        <img class="header-content__logo" alt="Flamme assainissement" src="images/logo.webp">
+    </div>
+    <div class="header__main-image">
+        <img src="images/truck.webp" alt="">
+        <div class="header__main-image--decoration"></div>
+    </div>
+</header>
+<main>
+    <section class="section-history">
+        <div class="section-history__content">
+            <h2>Entreprise familiale et indépendante</h2>
+            <p>Nous nous distinguons par notre capacité à innover et à nous adapter aux évolutions réglementaires.<br/>
+                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é.</p>
+        </div>
+        <img class="section-history__img" src="images/family.webp" alt="">
+    </section>
+    <section class="section-services">
+        <div class="section-services--decoration"></div>
+        <h2 class="section-services__title">Nos services</h2>
+        <ul class="section-services__cards">
+            <li class="section-services__card section-services__card--red">
+                <img class="section-services__card__img" src="images/service-1.webp" alt="">
+                <h3 class="section-services__card__title">Maintenance & nettoyage industriel</h3>
+            </li>
+            <li class="section-services__card section-services__card--red">
+                <img class="section-services__card__img" src="images/service-2.webp" alt="">
+                <h3 class="section-services__card__title">Pompage & enlèvement de déchets</h3>
+            </li>
+            <li class="section-services__card section-services__card--red">
+                <img class="section-services__card__img" src="images/service-3.webp" alt="">
+                <h3 class="section-services__card__title">Vidange · détartrage débouchage</h3>
+            </li>
+            <li class="section-services__card">
+                <img class="section-services__card__img" src="images/service-4.webp" alt="">
+                <h3 class="section-services__card__title">Nettoyage haute pression thp & uhp</h3>
+            </li>
+            <li class="section-services__card">
+                <img class="section-services__card__img" src="images/service-5.webp" alt="">
+                <h3 class="section-services__card__title">Balayage des voiries</h3>
+            </li>
+            <li class="section-services__card">
+                <img class="section-services__card__img" src="images/service-6.webp" alt="">
+                <h3 class="section-services__card__title">Dératisation & désinfection</h3>
+            </li>
+            <li class="section-services__card">
+                <img class="section-services__card__img" src="images/service-7.webp" alt="">
+                <h3 class="section-services__card__title">Désinsectisation</h3>
+            </li>
+            <li class="section-services__card">
+                <img class="section-services__card__img img-center" src="images/service-8.webp" alt="">
+                <h3 class="section-services__card__title">Passage de caméra</h3>
+            </li>
+            <li class="section-services__card">
+                <img class="section-services__card__img" src="images/service-9.webp" alt="">
+                <h3 class="section-services__card__title">Inspection & nettoyage par drone</h3>
+            </li>
+            <li class="section-services__card section-services__card--fullwidth">
+                <img class="section-services__card__img" src="images/service-10.webp" alt="">
+                <h3 class="section-services__card__title">Bureau d’études · diag anc</h3>
+            </li>
+        </ul>
+        <img class="decoration-pipes--bottom" src="images/pipes.webp" alt="">
+    </section>
+    <section class="section-contact">
+        <div class="section-contact__title">
+            <h2>Contactez-nous</h2>
+            <a href="mailto:contactflamme@flamme.fr">contactflamme@flamme.fr</a>
+        </div>
+        <ul class="section-contact__addresses">
+            <li class="address-item">
+                <span class="address-item__title">Saint-Rémy-du-Nord</span>
+                <span>03 27 63 66 00</span>
+                <address>
+                    12 Rue Jean Messager, 59330 Saint-Remy-du-Nord
+                </address>
+            </li>
+            <li class="address-item">
+                <span class="address-item__title">Estaires</span>
+                <span>03 28 48 83 98</span>
+                <address>
+                    52 Rue de la Chapelle, 59940 Estaires
+                </address>
+            </li>
+            <li class="address-item">
+                <span class="address-item__title">Auby</span>
+                <span>03 27 63 66 00</span>
+                <address>
+                    Rue Jean-Jacques Rousseau, 59950 Auby
+                </address>
+            </li>
+            <li class="address-item">
+                <span class="address-item__title">Raillencourt-Sainte-Olle</span>
+                <span>03 27 85 06 47</span>
+                <address>81 Av. des Deux Vallées, 59554
+                    Raillencourt-Sainte-Olle
+                </address>
+            </li>
+            <li class="address-item">
+                <span class="address-item__title">Bondues</span>
+                <span>03 20 26 00 15</span>
+                <address>Rue du Moulin Cardon, 59910 Bondues</address>
+            </li>
+            <li class="address-item">
+                <span class="address-item__title">Wignehies</span>
+                <span>03 27 63 66 00</span>
+                <address>Adresse à confirmer</address>
+            </li>
+            <li class="address-item">
+                <span class="address-item__title">Wignehies</span>
+                <span>03 27 63 66 00</span>
+                <address>Adresse à confirmer</address>
+            </li>
+            <li class="address-item">
+                <span class="address-item__title">Dunkerque</span>
+                <span>03 20 26 00 15</span>
+                <address>241 rue du Meunynck
+                    ZI de Petite Synthe 59640 Dunkerque
+                </address>
+            </li>
+        </ul>
+    </section>
+</main>
+</body>
+</html>

package.json

@@ -0,0 +1,15 @@
+{
+  "name": "flamme-website",
+  "version": "1.0.0",
+  "main": "index.js",
+  "author": "Nicolas DOBY <nicolas.doby@itsonus.fr>",
+  "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"
+  }
+}

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;
+    }
+  }
+}