Merge pull request #1 from Andrii-Moshenskyi/main

Stylistic improvements

14 files changed, 985 insertions, 175 deletions

diff --git a/sass/fonts.sass b/sass/fonts.sass
index 8875af9..a22bc92 100644
--- a/sass/fonts.sass
+++ b/sass/fonts.sass
@@ -1,4 +1,3 @@
-

 @font-face

   font-family: 'Lato'

   font-style: normal

@@ -21,4 +20,4 @@
   font-weight: 900

   font-display: swap

   src: local('Lato Black'), local('Lato-Black'), url('../fonts/lato-black.woff2') format('woff2')

-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD

+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
\ No newline at end of file
diff --git a/sass/footer.sass b/sass/footer.sass
index d386160..0c9faf1 100644
--- a/sass/footer.sass
+++ b/sass/footer.sass
@@ -37,43 +37,58 @@ footer
 

         div.footer__column

           display: grid

-          grid-template-rows: 50px 1fr

-          margin-right: 80px

-          &:last-child

-            margin-right: 0

+          grid-template-rows: auto 1fr

+          margin-right: 48px

           +resp(lg)

-            margin-right: 32px

+            margin-right: 28px

           +resp(md)

-            width: 50%

             margin: 0 0 30px

             grid-template-rows: 34px 1fr

-          h3.footer__links-title

-            font-weight: 600

-            font-size: 21px

-            color: $black

+          &:nth-child(1)

+            +resp(lg)

+              width: 16%

+            +resp(md)

+              width: 40%

+          &:nth-child(2)

+            +resp(lg)

+              width: 18%

+            +resp(md)

+              width: 60%

+          &:nth-child(3)

+            +resp(lg)

+              width: 20%

+            +resp(md)

+              width: 40%

+          &:nth-child(4)

+            margin-right: 0

             +resp(lg)

-              line-height: 50px

+              width: 32%

             +resp(md)

-              line-height: 150%

-              font-size: 16px

-              margin-bottom: 0px

+              width: 60%

 

-          ul.footer__links-item

+          h3

+            font-weight: 600

+            font-size: 18px

+            padding: 0 0 17px 0

+            color: $black

+

+          ul

             padding-left: 0

             list-style: none

-            a

-              list-style: none

-              font-family: $lato

-              font-weight: normal

-              font-size: 16px

-              line-height: 230%

-              color: #747577

-              text-decoration: none

-              +resp(md)

-                font-size: 14px

-              &:hover

-                color: $orange

-                text-decoration: underline

+            li

+              padding: 5px 0

+              a

+                list-style: none

+                font-weight: normal

+                font-size: 16px

+                line-height: 1.7

+                color: #747577

+                text-decoration: none

+                +resp(md)

+                  font-size: 14px

+                &:hover

+                  color: $orange

+                  text-decoration: underline

 

       div.footer__trustpilot

         justify-self: end

@@ -97,7 +112,6 @@ footer
         display: flex

         align-items: center

         p

-          font-family: $lato

           font-weight: normal

           font-size: 13px

           line-height: 16px

@@ -106,10 +120,10 @@ footer
           +resp(md)

             padding-right: 8px

             display: none

+

       div.footer__rights

         display: flex

         p, a

-          font-family: $lato

           font-weight: normal

           font-size: 15px

           line-height: 150%

@@ -142,7 +156,6 @@ footer
           justify-content: space-between

         div.footer__sm__developer

           p, a

-            font-family: $lato

             font-weight: normal

             font-size: 13px

             line-height: 16px

@@ -158,4 +171,6 @@ footer
               &:hover

                 text-decoration: underline

               &:first-child

-                margin-right: 20px
\ No newline at end of file
+                margin-right: 20px

+          div.footer__sm__rights

+            text-align: center
\ No newline at end of file
diff --git a/sass/front-page/banner.sass b/sass/front-page/banner.sass
index c243d03..51b6bcf 100644
--- a/sass/front-page/banner.sass
+++ b/sass/front-page/banner.sass
@@ -1,4 +1,4 @@
-@import settings.sass

+@import ../settings.sass

   

 section.banner

   background-image: url("/img/front-page/banner/banner-bg.svg")

@@ -14,27 +14,18 @@ section.banner
       padding: 0

   div.banner__text-button

     max-width: 50%

-    +resp(lg)

-      max-width: 61%

+    +resp(md)

+      max-width: 60%

     +resp(sm)

       margin-bottom: 23px

       max-width: 100%

-    h1.banner__title

-      font-family: $lato

-      font-weight: 800

-      font-size: 45px

-      line-height: 120%

-      letter-spacing: 0.02em

-      color: $black

+    h1

       padding-bottom: 57px

       +resp(sm)

-        font-size: 38px

         text-align: center

         padding-bottom: 51%

         padding-left: 20px

         padding-right: 20px

-      +resp(esm)

-        font-size: 28px

     div.banner__btn_container

       +resp(sm)

         background-color: $white

@@ -42,7 +33,7 @@ section.banner
         justify-content: center

         padding-left: 20px

         padding-right: 20px

-      a.banner__btn

+      a

         max-width: 311px

         width: 100%

         height: 58px

@@ -52,8 +43,7 @@ section.banner
         margin-top: 23px

         align-items: center

         justify-content: center

-        font-family: $lato

-        font-weight: 900

+        font-weight: 700

         font-size: 16px

         line-height: 15px

         color: $white

@@ -62,10 +52,6 @@ section.banner
         +resp(sm)

           height: 38px

           font-size: 14px

-          // margin-left: auto

-          // margin-right: auto

-          // margin-top: 50px

-          // position: absolute

         &:hover

           background: $white

           color: $black
\ No newline at end of file
diff --git a/sass/front-page/bottom-text.sass b/sass/front-page/bottom-text.sass
index e8aee16..943c4b6 100644
--- a/sass/front-page/bottom-text.sass
+++ b/sass/front-page/bottom-text.sass
@@ -1,10 +1,11 @@
-@import settings.sass

+@import ../settings.sass

 

-section.bottom-text

-  div.bottom-text__inner

+.bottom-text

+  &__inner

     padding: 138px 0 182px

     max-width: 657px

     margin-left: auto

+    text-align: center

     margin-right: auto

     +resp(lg)

       padding: 138px 250px 182px

@@ -14,6 +15,13 @@ section.bottom-text
       padding: 56px 50px 64px

     +resp(esm)

       padding: 56px 20px 64px

-    h2.bottom-text__title

-      text-align: center

-      padding-bottom: 25px
\ No newline at end of file
+    h2

+      padding-bottom: 25px

+      +resp(sm)

+        padding-bottom: 0

+    p

+      font-size: 18px

+      +resp(sm)

+        font-size: 16px

+      +resp(esm)

+        font-size: 14px
\ No newline at end of file
diff --git a/sass/front-page/inform-columns.sass b/sass/front-page/inform-columns.sass
index 68930df..250982f 100644
--- a/sass/front-page/inform-columns.sass
+++ b/sass/front-page/inform-columns.sass
@@ -1,6 +1,7 @@
-@import settings.sass

+@import ../settings.sass

 

 section.inform-columns

+

   div.inform-column__inner

     display: grid

     grid-template-columns: 1fr 1fr

@@ -17,6 +18,7 @@ section.inform-columns
       grid-gap: 40px

       padding: 48px 54px 59px

       +resp(md)

+        grid-gap: 25px

         padding: 30px 25px

       +resp(sm)

         padding: 30px 24px 40px

@@ -30,7 +32,6 @@ section.inform-columns
           padding-right: 19px

         div.inform-column__title

           h3

-            font-family: $lato

             font-weight: bold

             font-size: 28px

             line-height: 150%

@@ -44,6 +45,8 @@ section.inform-columns
           text-align: left

           margin-bottom: 29px

           font-size: 16px

+          +resp(md)

+            margin-bottom: 20px

           &:last-child

             margin-bottom: 10px

             +resp(sm)

@@ -57,25 +60,24 @@ section.inform-columns
         +resp(sm)

           align-self: end

         a.inform-column__btn

-          max-width: 311px

-          width: 100%

-          height: 58px

+          max-width: 291px

+          padding: 10px

+          min-height: 38px

+          color: #18191C !important

           display: flex

           align-items: center

           justify-content: center

+          text-align: center

           background: $orange

           border: 1px solid $orange

-          font-family: $lato

-          font-weight: 900

+          font-weight: 700

           font-size: 16px

-          line-height: 15px

           color: $black

           text-decoration: none

           transition: 0.3s

+          line-height: 1.5

           +resp(sm)

-            height: 38px

-            width: 100%

+            min-height: 28px

             font-size: 14px

-            line-height: 96%

           &:hover

             background: $white
\ No newline at end of file
diff --git a/sass/front-page/main-text.sass b/sass/front-page/main-text.sass
index 54e0786..c3b4fdd 100644
--- a/sass/front-page/main-text.sass
+++ b/sass/front-page/main-text.sass
@@ -1,13 +1,20 @@
-@import settings.sass

+@import ../settings.sass

   

 section.main-text

   max-width: 884px

   margin-left: auto

   margin-right: auto

   padding: 143px 0

+  text-align: center

   +resp(lg)

     padding: 143px 0

   +resp(md)

     padding: 90px 0

   +resp(sm)

-    padding: 34px 0 64px
\ No newline at end of file
+    padding: 0 0 55px

+  p

+    font-size: 18px

+    +resp(sm)

+      font-size: 16px

+    +resp(esm)

+      font-size: 14px
\ No newline at end of file
diff --git a/sass/header.sass b/sass/header.sass
index c409dab..0ae1105 100644
--- a/sass/header.sass
+++ b/sass/header.sass
@@ -28,7 +28,6 @@ header
         +resp(lg)

           margin-right: 16px

       div.header__text

-        font-family: $lato

         font-weight: 500

         font-size: 16px

         line-height: 25px

@@ -53,7 +52,6 @@ header
       +resp(sm)

         display: none

       a

-        font-family: $lato

         font-weight: 600

         font-size: 15px

         line-height: 14px

diff --git a/sass/main.sass b/sass/main.sass
index 53de465..ece16ef 100644
--- a/sass/main.sass
+++ b/sass/main.sass
@@ -1,36 +1,96 @@
 @import settings.sass

-@import fonts.sass

 

 body

-  font-family: $lato, sans-serif

+  font-family: sans-serif

   margin: 0

   color: $black

 

 h1, h2, h3, h4, h5, p, ul, li

   margin: 0

 

+h1

+  font-weight: 800

+  font-size: 45px

+  line-height: 120%

+  letter-spacing: 0.02em

+  color: $black

+  +resp(sm)

+    font-size: 32px

+  +resp(esm)

+    font-size: 28px

 h2

-  font-family: $lato

   font-weight: 800

-  font-size: 38px

+  font-size: 32px

   line-height: 140%

   +resp(sm)

-    font-size: 24px

+    font-size: 21px

 p

-  font-family: $lato

   font-weight: normal

-  font-size: 18px

   line-height: 180%

-  text-align: center

+  font-size: 16px

   color: $black

-  +resp(sm)

+  +resp(esm)

     font-size: 14px

+  @supports (hyphens: auto)

+    text-align: justify

+    hyphens: auto

+

+pre, code, sample

+  white-space: pre-wrap

+  hyphens: none

 

 div.container

   max-width: 1340px

   margin: 0 auto

   padding-left: 15px

   padding-right: 15px

+  &.small

+    max-width: 1000px

+

+#content

+  padding-top: 60px

+  padding-bottom: 50px

+  +resp(sm)

+    padding-top: 40px

+    padding-bottom: 20px

+  +resp(esm)

+    padding-top: 30px

+  h1

+    margin-bottom: 25px

+    +resp(esm)

+      margin-bottom: 15px

+  h2

+    margin-top: 25px

+    margin-bottom: 20px

+    +resp(esm)

+      margin-top: 20px

+      margin-bottom: 15px

+  p

+    margin: 15px 0

+    +resp(esm)

+      margin: 9px 0

+  ul

+    +resp(sm)

+      padding-left: 25px

+    +resp(esm)

+      padding-left: 15px

+    li

+      list-style: none

+      display: flex

+      align-items: center

+      margin: 12px 0

+      line-height: 150%

+      +resp(esm)

+        font-size: 14px

+        margin: 10px 0

+      &:before

+        margin-top: 4px

+        margin-right: 10px

+        content: url('../img/global/list-element.svg')

+  a

+    color: $dark-orange

+    &:hover

+      text-decoration: none

 

 @import header.sass

 @import front-page/banner.sass

diff --git a/sass/settings.sass b/sass/settings.sass
index 136578d..9cf5631 100644
--- a/sass/settings.sass
+++ b/sass/settings.sass
@@ -1,5 +1,3 @@
-// fonts

-$lato : "Lato", "Arial", sans-serif

 // colors

 $white : #ffffff

 $orange : #FFBE12

diff --git a/site/css/main.css b/site/css/main.css
new file mode 100644
index 0000000..67dbe75
--- /dev/null
+++ b/site/css/main.css
@@ -0,0 +1,736 @@
+body {
+  font-family: sans-serif;
+  margin: 0;
+  color: #18191C; }
+
+h1, h2, h3, h4, h5, p, ul, li {
+  margin: 0; }
+
+h1 {
+  font-weight: 800;
+  font-size: 45px;
+  line-height: 120%;
+  letter-spacing: 0.02em;
+  color: #18191C; }
+  @media only screen and (max-width: 767px) {
+    h1 {
+      font-size: 32px; } }
+  @media only screen and (max-width: 575px) {
+    h1 {
+      font-size: 28px; } }
+
+h2 {
+  font-weight: 800;
+  font-size: 32px;
+  line-height: 140%; }
+  @media only screen and (max-width: 767px) {
+    h2 {
+      font-size: 21px; } }
+
+p {
+  font-weight: normal;
+  line-height: 180%;
+  font-size: 16px;
+  color: #18191C; }
+  @media only screen and (max-width: 575px) {
+    p {
+      font-size: 14px; } }
+  @supports ((-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto)) {
+    p {
+      text-align: justify;
+      -webkit-hyphens: auto;
+          -ms-hyphens: auto;
+              hyphens: auto; } }
+
+pre, code, sample {
+  white-space: pre-wrap;
+  -webkit-hyphens: none;
+      -ms-hyphens: none;
+          hyphens: none; }
+
+div.container {
+  max-width: 1340px;
+  margin: 0 auto;
+  padding-left: 15px;
+  padding-right: 15px; }
+  div.container.small {
+    max-width: 1000px; }
+
+#content {
+  padding-top: 60px;
+  padding-bottom: 50px; }
+  @media only screen and (max-width: 767px) {
+    #content {
+      padding-top: 40px;
+      padding-bottom: 20px; } }
+  @media only screen and (max-width: 575px) {
+    #content {
+      padding-top: 30px; } }
+  #content h1 {
+    margin-bottom: 25px; }
+    @media only screen and (max-width: 575px) {
+      #content h1 {
+        margin-bottom: 15px; } }
+  #content h2 {
+    margin-top: 25px;
+    margin-bottom: 20px; }
+    @media only screen and (max-width: 575px) {
+      #content h2 {
+        margin-top: 20px;
+        margin-bottom: 15px; } }
+  #content p {
+    margin: 15px 0; }
+    @media only screen and (max-width: 575px) {
+      #content p {
+        margin: 9px 0; } }
+  @media only screen and (max-width: 767px) {
+    #content ul {
+      padding-left: 25px; } }
+  @media only screen and (max-width: 575px) {
+    #content ul {
+      padding-left: 15px; } }
+  #content ul li {
+    list-style: none;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+        -ms-flex-align: center;
+            align-items: center;
+    margin: 12px 0;
+    line-height: 150%; }
+    @media only screen and (max-width: 575px) {
+      #content ul li {
+        font-size: 14px;
+        margin: 10px 0; } }
+    #content ul li:before {
+      margin-top: 4px;
+      margin-right: 10px;
+      content: url("../img/global/list-element.svg"); }
+  #content a {
+    color: #FD8F01; }
+    #content a:hover {
+      text-decoration: none; }
+
+header {
+  background: #ffffff;
+  -webkit-box-shadow: 0px 5px 20px rgba(0, 56, 79, 0.07);
+          box-shadow: 0px 5px 20px rgba(0, 56, 79, 0.07);
+  padding: 20px 0;
+  position: relative; }
+  @media only screen and (max-width: 991px) {
+    header {
+      padding: 15px 0;
+      position: -webkit-sticky;
+      position: sticky;
+      top: 0;
+      z-index: 2; } }
+  @media only screen and (max-width: 575px) {
+    header {
+      padding: 10px 0; } }
+  header div.header__inner {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+        -ms-flex-pack: justify;
+            justify-content: space-between; }
+    @media only screen and (max-width: 767px) {
+      header div.header__inner {
+        -webkit-box-align: center;
+        -webkit-align-items: center;
+            -ms-flex-align: center;
+                align-items: center; } }
+    header div.header__inner div.header__logo-side {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-align: center;
+      -webkit-align-items: center;
+          -ms-flex-align: center;
+              align-items: center; }
+      header div.header__inner div.header__logo-side a.header__logo {
+        display: inherit;
+        margin-right: 30px; }
+        @media only screen and (max-width: 1199px) {
+          header div.header__inner div.header__logo-side a.header__logo {
+            margin-right: 16px; } }
+      header div.header__inner div.header__logo-side div.header__text {
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 25px; }
+        @media only screen and (max-width: 767px) {
+          header div.header__inner div.header__logo-side div.header__text {
+            display: none; } }
+        header div.header__inner div.header__logo-side div.header__text p {
+          font-size: 16px;
+          color: #ACACAD;
+          text-align: left; }
+          @media only screen and (max-width: 991px) {
+            header div.header__inner div.header__logo-side div.header__text p {
+              display: none; } }
+    header div.header__inner div.header__links-side {
+      display: grid;
+      grid-template-columns: 1fr auto auto auto;
+      grid-gap: 31px;
+      justify-items: center;
+      -webkit-box-align: center;
+      -webkit-align-items: center;
+          -ms-flex-align: center;
+              align-items: center; }
+      @media only screen and (max-width: 1199px) {
+        header div.header__inner div.header__links-side {
+          grid-gap: 20px;
+          text-align: center; } }
+      @media only screen and (max-width: 767px) {
+        header div.header__inner div.header__links-side {
+          display: none; } }
+      header div.header__inner div.header__links-side a {
+        font-weight: 600;
+        font-size: 15px;
+        line-height: 14px;
+        text-transform: uppercase;
+        text-decoration: none;
+        color: #18191C;
+        -webkit-transition: 0.3s;
+        -o-transition: 0.3s;
+        transition: 0.3s; }
+        @media only screen and (max-width: 1199px) {
+          header div.header__inner div.header__links-side a {
+            font-size: 14px; } }
+        header div.header__inner div.header__links-side a:hover {
+          color: #FFBE12; }
+    header div.header__inner div.header__mobile-menu__buttons {
+      height: 100%;
+      width: 30px;
+      -webkit-box-pack: center;
+      -webkit-justify-content: center;
+          -ms-flex-pack: center;
+              justify-content: center;
+      display: none; }
+      @media only screen and (max-width: 767px) {
+        header div.header__inner div.header__mobile-menu__buttons {
+          display: -webkit-box;
+          display: -webkit-flex;
+          display: -ms-flexbox;
+          display: flex; } }
+      header div.header__inner div.header__mobile-menu__buttons img {
+        cursor: pointer;
+        display: none; }
+      header div.header__inner div.header__mobile-menu__buttons img.active {
+        display: block; }
+
+nav#mobile-menu {
+  z-index: 1;
+  bottom: 0;
+  top: 0;
+  right: 0;
+  position: fixed;
+  left: 100%;
+  background-color: #ffffff;
+  padding: 70px 15px; }
+  @media only screen and (max-width: 575px) {
+    nav#mobile-menu {
+      padding: 60px 15px; } }
+  nav#mobile-menu a {
+    display: block;
+    text-transform: uppercase;
+    color: #18191C;
+    text-decoration: none;
+    padding: 15px 0;
+    font-weight: 600;
+    -webkit-transition: 0.3s;
+    -o-transition: 0.3s;
+    transition: 0.3s;
+    border-bottom: 1px solid #e0e0e0; }
+    nav#mobile-menu a:hover {
+      color: #FFBE12; }
+
+section.banner {
+  background-image: url("/img/front-page/banner/banner-bg.svg");
+  background-position: bottom;
+  background-repeat: no-repeat;
+  -webkit-background-size: cover;
+          background-size: cover;
+  padding: 77px 0 87px; }
+  @media only screen and (max-width: 767px) {
+    section.banner {
+      background-image: url("/img/front-page/banner/banner-bg-sm.svg");
+      padding: 45px 0 0; } }
+  @media only screen and (max-width: 767px) {
+    section.banner div.sm-none {
+      padding: 0; } }
+  section.banner div.banner__text-button {
+    max-width: 50%; }
+    @media only screen and (max-width: 991px) {
+      section.banner div.banner__text-button {
+        max-width: 60%; } }
+    @media only screen and (max-width: 767px) {
+      section.banner div.banner__text-button {
+        margin-bottom: 23px;
+        max-width: 100%; } }
+    section.banner div.banner__text-button h1 {
+      padding-bottom: 57px; }
+      @media only screen and (max-width: 767px) {
+        section.banner div.banner__text-button h1 {
+          text-align: center;
+          padding-bottom: 51%;
+          padding-left: 20px;
+          padding-right: 20px; } }
+    @media only screen and (max-width: 767px) {
+      section.banner div.banner__text-button div.banner__btn_container {
+        background-color: #ffffff;
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-pack: center;
+        -webkit-justify-content: center;
+            -ms-flex-pack: center;
+                justify-content: center;
+        padding-left: 20px;
+        padding-right: 20px; } }
+    section.banner div.banner__text-button div.banner__btn_container a {
+      max-width: 311px;
+      width: 100%;
+      height: 58px;
+      background: #18191C;
+      border: 1px solid #18191C;
+      display: -webkit-inline-box;
+      display: -webkit-inline-flex;
+      display: -ms-inline-flexbox;
+      display: inline-flex;
+      margin-top: 23px;
+      -webkit-box-align: center;
+      -webkit-align-items: center;
+          -ms-flex-align: center;
+              align-items: center;
+      -webkit-box-pack: center;
+      -webkit-justify-content: center;
+          -ms-flex-pack: center;
+              justify-content: center;
+      font-weight: 700;
+      font-size: 16px;
+      line-height: 15px;
+      color: #ffffff;
+      text-decoration: none;
+      -webkit-transition: 0.3s;
+      -o-transition: 0.3s;
+      transition: 0.3s; }
+      @media only screen and (max-width: 767px) {
+        section.banner div.banner__text-button div.banner__btn_container a {
+          height: 38px;
+          font-size: 14px; } }
+      section.banner div.banner__text-button div.banner__btn_container a:hover {
+        background: #ffffff;
+        color: #18191C; }
+
+section.main-text {
+  max-width: 884px;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 143px 0;
+  text-align: center; }
+  @media only screen and (max-width: 1199px) {
+    section.main-text {
+      padding: 143px 0; } }
+  @media only screen and (max-width: 991px) {
+    section.main-text {
+      padding: 90px 0; } }
+  @media only screen and (max-width: 767px) {
+    section.main-text {
+      padding: 0 0 55px; } }
+  section.main-text p {
+    font-size: 18px; }
+    @media only screen and (max-width: 767px) {
+      section.main-text p {
+        font-size: 16px; } }
+    @media only screen and (max-width: 575px) {
+      section.main-text p {
+        font-size: 14px; } }
+
+section.inform-columns div.inform-column__inner {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 23px 30px; }
+  @media only screen and (max-width: 1199px) {
+    section.inform-columns div.inform-column__inner {
+      grid-gap: 20px; } }
+  @media only screen and (max-width: 1199px) and (max-width: 767px) {
+    section.inform-columns div.inform-column__inner {
+      grid-template-columns: 1fr; } }
+  section.inform-columns div.inform-column__inner div.inform-column__item {
+    background: #F3F4F4;
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    grid-gap: 40px;
+    padding: 48px 54px 59px; }
+    @media only screen and (max-width: 991px) {
+      section.inform-columns div.inform-column__inner div.inform-column__item {
+        grid-gap: 25px;
+        padding: 30px 25px; } }
+    @media only screen and (max-width: 767px) {
+      section.inform-columns div.inform-column__inner div.inform-column__item {
+        padding: 30px 24px 40px;
+        grid-gap: 15px;
+        grid-template-rows: auto 1fr 65px; } }
+    section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__header {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-align: center;
+      -webkit-align-items: center;
+          -ms-flex-align: center;
+              align-items: center; }
+      section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__header div.inform-column__icon {
+        padding-right: 19px; }
+      section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__header div.inform-column__title h3 {
+        font-weight: bold;
+        font-size: 28px;
+        line-height: 150%;
+        letter-spacing: 0.02em;
+        color: #000000; }
+        @media only screen and (max-width: 767px) {
+          section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__header div.inform-column__title h3 {
+            font-size: 21px; } }
+    section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__data p {
+      text-align: left;
+      margin-bottom: 29px;
+      font-size: 16px; }
+      @media only screen and (max-width: 991px) {
+        section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__data p {
+          margin-bottom: 20px; } }
+      section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__data p:last-child {
+        margin-bottom: 10px; }
+        @media only screen and (max-width: 767px) {
+          section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__data p:last-child {
+            margin-bottom: 0; } }
+      @media only screen and (max-width: 767px) {
+        section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__data p {
+          line-height: 180%;
+          font-size: 14px;
+          margin-bottom: 25px; } }
+    @media only screen and (max-width: 767px) {
+      section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__button {
+        -webkit-align-self: end;
+            -ms-flex-item-align: end;
+                align-self: end; } }
+    section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__button a.inform-column__btn {
+      max-width: 291px;
+      padding: 10px;
+      min-height: 38px;
+      color: #18191C !important;
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-align: center;
+      -webkit-align-items: center;
+          -ms-flex-align: center;
+              align-items: center;
+      -webkit-box-pack: center;
+      -webkit-justify-content: center;
+          -ms-flex-pack: center;
+              justify-content: center;
+      text-align: center;
+      background: #FFBE12;
+      border: 1px solid #FFBE12;
+      font-weight: 700;
+      font-size: 16px;
+      color: #18191C;
+      text-decoration: none;
+      -webkit-transition: 0.3s;
+      -o-transition: 0.3s;
+      transition: 0.3s;
+      line-height: 1.5; }
+      @media only screen and (max-width: 767px) {
+        section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__button a.inform-column__btn {
+          min-height: 28px;
+          font-size: 14px; } }
+      section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__button a.inform-column__btn:hover {
+        background: #ffffff; }
+
+.bottom-text__inner {
+  padding: 138px 0 182px;
+  max-width: 657px;
+  margin-left: auto;
+  text-align: center;
+  margin-right: auto; }
+  @media only screen and (max-width: 1199px) {
+    .bottom-text__inner {
+      padding: 138px 250px 182px; } }
+  @media only screen and (max-width: 991px) {
+    .bottom-text__inner {
+      padding: 90px 50px 126px; } }
+  @media only screen and (max-width: 767px) {
+    .bottom-text__inner {
+      padding: 56px 50px 64px; } }
+  @media only screen and (max-width: 575px) {
+    .bottom-text__inner {
+      padding: 56px 20px 64px; } }
+  .bottom-text__inner h2 {
+    padding-bottom: 25px; }
+    @media only screen and (max-width: 767px) {
+      .bottom-text__inner h2 {
+        padding-bottom: 0; } }
+  .bottom-text__inner p {
+    font-size: 18px; }
+    @media only screen and (max-width: 767px) {
+      .bottom-text__inner p {
+        font-size: 16px; } }
+    @media only screen and (max-width: 575px) {
+      .bottom-text__inner p {
+        font-size: 14px; } }
+
+footer div.footer__inner div.footer__logo-society {
+  display: grid;
+  grid-template-columns: 60px 1fr 191px;
+  grid-gap: 25px;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center; }
+  @media only screen and (max-width: 767px) {
+    footer div.footer__inner div.footer__logo-society {
+      display: none; } }
+  footer div.footer__inner div.footer__logo-society div.footer__hr {
+    -webkit-align-self: center;
+        -ms-flex-item-align: center;
+            align-self: center; }
+    footer div.footer__inner div.footer__logo-society div.footer__hr img {
+      margin-bottom: 10px;
+      width: 100%; }
+      @media only screen and (max-width: 991px) {
+        footer div.footer__inner div.footer__logo-society div.footer__hr img {
+          border-bottom: 1px solid #E0DFDF; } }
+  footer div.footer__inner div.footer__logo-society div.footer__socials {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+        -ms-flex-align: center;
+            align-items: center;
+    padding-left: 6px; }
+
+footer div.footer__inner div.footer__links-trustpilot {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  margin-top: 36px; }
+  @media only screen and (max-width: 767px) {
+    footer div.footer__inner div.footer__links-trustpilot {
+      display: none; } }
+  footer div.footer__inner div.footer__links-trustpilot div.footer__links {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex; }
+    @media only screen and (max-width: 991px) {
+      footer div.footer__inner div.footer__links-trustpilot div.footer__links {
+        -webkit-flex-wrap: wrap;
+            -ms-flex-wrap: wrap;
+                flex-wrap: wrap; } }
+    footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column {
+      display: grid;
+      grid-template-rows: auto 1fr;
+      margin-right: 48px; }
+      @media only screen and (max-width: 1199px) {
+        footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column {
+          margin-right: 28px; } }
+      @media only screen and (max-width: 991px) {
+        footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column {
+          margin: 0 0 30px;
+          grid-template-rows: 34px 1fr; } }
+      @media only screen and (max-width: 1199px) {
+        footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(1) {
+          width: 16%; } }
+      @media only screen and (max-width: 991px) {
+        footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(1) {
+          width: 40%; } }
+      @media only screen and (max-width: 1199px) {
+        footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(2) {
+          width: 18%; } }
+      @media only screen and (max-width: 991px) {
+        footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(2) {
+          width: 60%; } }
+      @media only screen and (max-width: 1199px) {
+        footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(3) {
+          width: 20%; } }
+      @media only screen and (max-width: 991px) {
+        footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(3) {
+          width: 40%; } }
+      footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(4) {
+        margin-right: 0; }
+        @media only screen and (max-width: 1199px) {
+          footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(4) {
+            width: 32%; } }
+        @media only screen and (max-width: 991px) {
+          footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(4) {
+            width: 60%; } }
+      footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column h3 {
+        font-weight: 600;
+        font-size: 18px;
+        padding: 0 0 17px 0;
+        color: #18191C; }
+      footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column ul {
+        padding-left: 0;
+        list-style: none; }
+        footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column ul li {
+          padding: 5px 0; }
+          footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column ul li a {
+            list-style: none;
+            font-weight: normal;
+            font-size: 16px;
+            line-height: 1.7;
+            color: #747577;
+            text-decoration: none; }
+            @media only screen and (max-width: 991px) {
+              footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column ul li a {
+                font-size: 14px; } }
+            footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column ul li a:hover {
+              color: #FFBE12;
+              text-decoration: underline; }
+  footer div.footer__inner div.footer__links-trustpilot div.footer__trustpilot {
+    justify-self: end;
+    border-left: 1px solid #E0DFDF;
+    padding-left: 33px; }
+    @media only screen and (max-width: 1199px) {
+      footer div.footer__inner div.footer__links-trustpilot div.footer__trustpilot {
+        padding-left: 10px; } }
+    footer div.footer__inner div.footer__links-trustpilot div.footer__trustpilot div#tp-widget-wrapper {
+      margin: 0; }
+
+footer div.footer__inner div.footer__developer {
+  border-top: 1px solid #E0DFDF;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 40px 0;
+  margin-top: 37px; }
+  @media only screen and (max-width: 767px) {
+    footer div.footer__inner div.footer__developer {
+      display: none; } }
+  footer div.footer__inner div.footer__developer div.footer__hosted {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+        -ms-flex-align: center;
+            align-items: center; }
+    footer div.footer__inner div.footer__developer div.footer__hosted p {
+      font-weight: normal;
+      font-size: 13px;
+      line-height: 16px;
+      color: #ACACAD;
+      padding-right: 16px; }
+      @media only screen and (max-width: 991px) {
+        footer div.footer__inner div.footer__developer div.footer__hosted p {
+          padding-right: 8px;
+          display: none; } }
+  footer div.footer__inner div.footer__developer div.footer__rights {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex; }
+    footer div.footer__inner div.footer__developer div.footer__rights p, footer div.footer__inner div.footer__developer div.footer__rights a {
+      font-weight: normal;
+      font-size: 15px;
+      line-height: 150%;
+      text-decoration: none;
+      color: #ACACAD;
+      padding-right: 30px; }
+      @media only screen and (max-width: 991px) {
+        footer div.footer__inner div.footer__developer div.footer__rights p, footer div.footer__inner div.footer__developer div.footer__rights a {
+          font-size: 14px;
+          padding-right: 22px; } }
+    footer div.footer__inner div.footer__developer div.footer__rights a:hover {
+      text-decoration: underline;
+      color: #FFBE12; }
+
+footer div.footer__inner div.footer__sm {
+  display: none; }
+  @media only screen and (max-width: 767px) {
+    footer div.footer__inner div.footer__sm {
+      display: block; } }
+  footer div.footer__inner div.footer__sm div.footer__sm__contant {
+    border-top: 1px solid #ACACAD;
+    padding: 32px 0 23px; }
+    footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__logos {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-pack: justify;
+      -webkit-justify-content: space-between;
+          -ms-flex-pack: justify;
+              justify-content: space-between;
+      -webkit-box-align: center;
+      -webkit-align-items: center;
+          -ms-flex-align: center;
+              align-items: center; }
+    footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__society {
+      max-width: 200px;
+      margin: 24px auto 17px;
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-pack: justify;
+      -webkit-justify-content: space-between;
+          -ms-flex-pack: justify;
+              justify-content: space-between; }
+    footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__developer p, footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__developer a {
+      font-weight: normal;
+      font-size: 13px;
+      line-height: 16px;
+      color: #747577;
+      opacity: 0.5; }
+    footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__developer div.footer__sm__privacy-policy {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-pack: center;
+      -webkit-justify-content: center;
+          -ms-flex-pack: center;
+              justify-content: center;
+      margin-bottom: 19px; }
+      footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__developer div.footer__sm__privacy-policy a {
+        text-decoration: none;
+        -webkit-transition: 0.3s;
+        -o-transition: 0.3s;
+        transition: 0.3s; }
+        footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__developer div.footer__sm__privacy-policy a:hover {
+          text-decoration: underline; }
+        footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__developer div.footer__sm__privacy-policy a:first-child {
+          margin-right: 20px; }
+    footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__developer div.footer__sm__rights {
+      text-align: center; }
diff --git a/site/img/global/list-element.svg b/site/img/global/list-element.svg
new file mode 100644
index 0000000..e97525e
--- /dev/null
+++ b/site/img/global/list-element.svg
@@ -0,0 +1,6 @@
+<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.79 3.75805H12.24V7.25805H15V0.998047H6.79V3.75805Z" fill="#FFBE12"/>
+<path d="M4.26 0.998047H0V7.20805H2.76V3.75805H4.26V0.998047Z" fill="#FFBE12"/>
+<path d="M2.76 9.73805H0V15.998H8.21V13.238H2.76V9.73805Z" fill="#FFBE12"/>
+<path d="M10.74 13.238V15.998H15V9.78805H12.24V13.238H10.74Z" fill="#FFBE12"/>
+</svg>
diff --git a/site/index.html b/site/index.html
index 0cd9146..91d4d55 100644
--- a/site/index.html
+++ b/site/index.html
@@ -1,97 +1,93 @@
       <section class="main-text">
-        <div class="container">
-          <p class="main-text__title">VyOS is a fully open source, enterprise-grade router platform. Being open source and community-driven is not a liability for us, not an early stage gimmick we want to shed—it’s our distinctive advantage. VyOS started as a community fork of a discontinued Vyatta Core project in 2013, with a promise to live up to free and open source software values. We kept the promise and turned VyOS into a successful, self-funded project. </p>
-        </div>
+        <p>VyOS is a fully open source, enterprise-grade router platform. Being open source and community-driven is not a liability for us, not an early stage gimmick we want to shed—it’s our distinctive advantage. VyOS started as a community fork of a discontinued Vyatta Core project in 2013, with a promise to live up to free and open source software values. We kept the promise and turned VyOS into a successful, self-funded project. </p>
       </section>
 
       <section class="inform-columns">
-        <div class="container">
-          <div class="inform-column__inner">
+        <div class="inform-column__inner">
 
-            <div class="inform-column__item">
-              <div class="inform-column__header">
-                <div class="inform-column__icon">
-                  <img src="/img/front-page/inform-columns/open-source.svg" alt="Open Source" title="Open Source">
-                </div>
-                <div class="inform-column__title">
-                  <h3 class="title">Open Source</h3>
-                </div>
+          <div class="inform-column__item">
+            <div class="inform-column__header">
+              <div class="inform-column__icon">
+                <img src="/img/front-page/inform-columns/open-source.svg" alt="Open Source" title="Open Source">
               </div>
-              <div class="inform-column__data">
-                <p>VyOS is fully open source and we encourage everyone to build images and report any build process issues. The source code of the rolling release and LTS branches alike is available online. However, simply making code available is not enough.</p>
-                <p>We also keep the complete build toolchain available, and we strive to make it easy to use. You can build a VyOS image in just a few commands. There is no special maintainer toolchain we keep to ourselves: all image build tools are available to everyone interested.</p>
-              </div>
-              <div class="inform-column__button">
-                <a href="#" class="inform-column__btn">Learn how to build a VyOS image</a>
+              <div class="inform-column__title">
+                <h3 class="title">Open Source</h3>
               </div>
             </div>
+            <div class="inform-column__data">
+              <p>VyOS is fully open source and we encourage everyone to build images and report any build process issues. The source code of the rolling release and LTS branches alike is available online. However, simply making code available is not enough.</p>
+              <p>We also keep the complete build toolchain available, and we strive to make it easy to use. You can build a VyOS image in just a few commands. There is no special maintainer toolchain we keep to ourselves: all image build tools are available to everyone interested.</p>
+            </div>
+            <div class="inform-column__button">
+              <a href="#" class="inform-column__btn">Learn how to build a VyOS image</a>
+            </div>
+          </div>
 
-            <div class="inform-column__item">
-              <div class="inform-column__header">
-                <div class="inform-column__icon">
-                  <img src="/img/front-page/inform-columns/open-proccess.svg" alt="Open Process" title="Open Process">
-                </div>
-                <div class="inform-column__title">
-                  <h3 class="title">Open Process</h3>
-                </div>
-              </div>
-              <div class="inform-column__data">
-                <p>Our issue tracker is available online. There is no private issue tracker: even issues reported by commercial users through the support portal are registered in the public tracker (except security issues before public disclosure of course).</p>
-                <p>Everyone is free to browse open tasks, test them, fix them, and make pull requests.</p>
-                <p>We do not have any contributor agreements that require you to transfer your copyrights to us. The copyright is shared between all contributors. This means no one can make a closed source fork of VyOS—not even its current maintainers.</p>
+          <div class="inform-column__item">
+            <div class="inform-column__header">
+              <div class="inform-column__icon">
+                <img src="/img/front-page/inform-columns/open-proccess.svg" alt="Open Process" title="Open Process">
               </div>
-              <div class="inform-column__button">
-                <a href="#" class="inform-column__btn">Read contributing guidelines</a>
+              <div class="inform-column__title">
+                <h3 class="title">Open Process</h3>
               </div>
             </div>
+            <div class="inform-column__data">
+              <p>Our issue tracker is available online. There is no private issue tracker: even issues reported by commercial users through the support portal are registered in the public tracker (except security issues before public disclosure of course).</p>
+              <p>Everyone is free to browse open tasks, test them, fix them, and make pull requests.</p>
+              <p>We do not have any contributor agreements that require you to transfer your copyrights to us. The copyright is shared between all contributors. This means no one can make a closed source fork of VyOS—not even its current maintainers.</p>
+            </div>
+            <div class="inform-column__button">
+              <a href="#" class="inform-column__btn">Read contributing guidelines</a>
+            </div>
+          </div>
 
-            <div class="inform-column__item">
-              <div class="inform-column__header">
-                <div class="inform-column__icon">
-                  <img src="/img/front-page/inform-columns/open-platform.svg" alt="Open Platform" title="Open Platform">
-                </div>
-                <div class="inform-column__title">
-                  <h3 class="title">Open Platform</h3>
-                </div>
-              </div>
-              <div class="inform-column__data">
-                <p>VyOS is not just a product, but an open platform. It uses a layered architecture with unified and documented internal APIs.</p>
-                <p>A number of major features were contributed by community members. Command definitions are written in a machine-verifiable XML format and malformed definitions fail the build. Our new code is in legacy-free Python3, and some core components are in OCaml.</p>
-                <p>Every part of the system is open to contributions.</p>
+          <div class="inform-column__item">
+            <div class="inform-column__header">
+              <div class="inform-column__icon">
+                <img src="/img/front-page/inform-columns/open-platform.svg" alt="Open Platform" title="Open Platform">
               </div>
-              <div class="inform-column__button">
-                <a href="#" class="inform-column__btn">Read about VyOS architecture</a>
+              <div class="inform-column__title">
+                <h3 class="title">Open Platform</h3>
               </div>
             </div>
+            <div class="inform-column__data">
+              <p>VyOS is not just a product, but an open platform. It uses a layered architecture with unified and documented internal APIs.</p>
+              <p>A number of major features were contributed by community members. Command definitions are written in a machine-verifiable XML format and malformed definitions fail the build. Our new code is in legacy-free Python3, and some core components are in OCaml.</p>
+              <p>Every part of the system is open to contributions.</p>
+            </div>
+            <div class="inform-column__button">
+              <a href="#" class="inform-column__btn">Read about VyOS architecture</a>
+            </div>
+          </div>
 
-            <div class="inform-column__item">
-              <div class="inform-column__header">
-                <div class="inform-column__icon">
-                  <img src="/img/front-page/inform-columns/open-community.svg" alt="Open Community" title="Open Community">
-                </div>
-                <div class="inform-column__title">
-                  <h3 class="title">Open Community</h3>
-                </div>
+          <div class="inform-column__item">
+            <div class="inform-column__header">
+              <div class="inform-column__icon">
+                <img src="/img/front-page/inform-columns/open-community.svg" alt="Open Community" title="Open Community">
               </div>
-              <div class="inform-column__data">
-                <p> We welcome all contributors. Even if you are not a programmer, there are many things to do: testing, documentation, evangelism and so on.</p>
-                <p>Since you are sharing your time and effort with us to make the project better, we are also happy to share our LTS release maintenance effort with you. Every active contributor can get access to prebuilt LTS images.</p>
-                <p>We also issue contributor badges through YourAcclaim that you can put on your CV. Already a contributor?</p>
-              </div>
-              <div class="inform-column__button">
-                <a href="#" class="inform-column__btn">Claim your rewards</a>
+              <div class="inform-column__title">
+                <h3 class="title">Open Community</h3>
               </div>
             </div>
-
+            <div class="inform-column__data">
+              <p> We welcome all contributors. Even if you are not a programmer, there are many things to do: testing, documentation, evangelism and so on.</p>
+              <p>Since you are sharing your time and effort with us to make the project better, we are also happy to share our LTS release maintenance effort with you. Every active contributor can get access to prebuilt LTS images.</p>
+              <p>We also issue contributor badges through YourAcclaim that you can put on your CV. Already a contributor?</p>
+            </div>
+            <div class="inform-column__button">
+              <a href="#" class="inform-column__btn">Claim your rewards</a>
+            </div>
           </div>
+
         </div>
       </section>
 
       <section class="bottom-text">
         <div class="container">
           <div class="bottom-text__inner">
-            <h2 class="bottom-text__title">Funding model</h2>
-            <p class="bottom text__subtitle">VyOS is funded through cloud marketplace images, prebuilt LTS image subscriptions, and support/consulting services.</p>
+            <h2>Funding model</h2>
+            <p>VyOS is funded through cloud marketplace images, prebuilt LTS image subscriptions, and support/consulting services.</p>
           </div>
         </div>
       </section>
diff --git a/templates/banner.html b/templates/banner.html
index 02b12e4..28ca769 100644
--- a/templates/banner.html
+++ b/templates/banner.html
@@ -1,10 +1,10 @@
-    <section class="banner">
-      <div class="container sm-none">
-        <div class="banner__text-button">
-          <h1 class="banner__title">VyOS. The universal router.</h1>
-          <div class="banner__btn_container">
-            <a href="#" class="banner__btn">Learn about the project</a>
-          </div>
-        </div>
+<section class="banner">
+  <div class="container sm-none">
+    <div class="banner__text-button">
+      <h1>VyOS. The universal router.</h1>
+      <div class="banner__btn_container">
+        <a href="#">Learn about the project</a>
       </div>
-    </section>
+    </div>
+  </div>
+</section>
\ No newline at end of file
diff --git a/templates/main.html b/templates/main.html
index 9292d1b..d11e2e0 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -12,7 +12,6 @@
     <meta name="msapplication-TileColor" content="#da532c">

     <meta name="theme-color" content="#ffffff">

     <link rel="stylesheet" href="/css/main.css">

-    <link rel="stylesheet" href="/css/fixup.css">

   </head>

   <body>

     

@@ -50,10 +49,10 @@
       <a href="#">COMMERCIAL SERVICES</a>

     </nav>

 

-

-

     <main>

-      <div id="content"><!-- content is automatically inserted here --></div>

+      <div class="container small" id="content">

+        <!-- content is automatically inserted here -->

+      </div>

     </main>

 

     <footer>

@@ -88,30 +87,30 @@
           <div class="footer__links-trustpilot">

             <div class="footer__links">

               <div class="footer__column">

-                <h3 class="footer__links-title">Get VyOS</h3>

-                <ul class="footer__links-item">

+                <h3>Get VyOS</h3>

+                <ul>

                   <li><a href="/nightly-builds">Nightly builds</a></li>

                   <li><a href="/snapshots">Snapshots</a></li>

                   <li><a href="/lts">LTS release</a></li>

                 </ul>

               </div>

               <div class="footer__column">

-                <h3 class="footer__links-title">Contribute</h3>

-                <ul class="footer__links-item">

+                <h3>Contribute</h3>

+                <ul>

                   <li><a href="/contribute">Contributing guidelines</a></li>

                   <li><a href="https://github.com/vyos">Code on GitHub</a></li>

                   <li><a href="https://phabricator.vyos.net/maniphest">Open tasks</a></li>

                 </ul>

               </div>

               <div class="footer__column">

-                <h3 class="footer__links-title">Report a Bug</h3>

-                <ul class="footer__links-item">

+                <h3>Report a Bug</h3>

+                <ul>

                   <li><a href="https://phabricator.vyos.net/">Bug Tracker</a></li>

                 </ul>

               </div>

               <div class="footer__column">

-                <h3 class="footer__links-title">Commercial Services</h3>

-                <ul class="footer__links-item">

+                <h3>Commercial Services</h3>

+                <ul>

                   <li><a href="https://vyos.io/subscriptions/support/">Commercial supports</a></li>

                   <li><a href="https://vyos.io/subscriptions/software/">LTS release subscriptions</a></li>

                   <li><a href="http://vyos.io/contact-us/">Custom development and consulting</a></li>

@@ -189,7 +188,7 @@
                   <a href='https://www.vyos.io/terms-and-conditions'>Terms & Conditions</a>

                 </div>

                 <div class="footer__sm__rights">

-                  <p>© 2020 vyos.io. All rights reserved.</p>

+                  <p>© 2021 vyos.io. All rights reserved.</p>

                 </div>

               </div>