feat: add first version

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