diff --git a/.eslintignore b/.eslintignore
index c925c21d56..89f52aaca4 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,2 +1,2 @@
+/backstop_data
 /dist
-/node_modules
diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template
new file mode 100644
index 0000000000..8b5743ecb4
--- /dev/null
+++ b/.github/workflows/test.yml-template
@@ -0,0 +1,29 @@
+name: Test
+
+on:
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm install
+    - run: npm test
+    - name: Upload HTML report(backstop data)
+      if: ${{ always() }}
+      uses: actions/upload-artifact@v2
+      with:
+        name: report
+        path: backstop_data
diff --git a/.gitignore b/.gitignore
index 885c5fa6a4..1558091fd7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,15 +1,15 @@
+# IDE
 .idea
 .vscode
-build
-dist
+
+# Node
 node_modules
-.DS_Store
 
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+# MacOS
+.DS_Store
 
-raw_reports
-reports
-cypress/screenshots
-cypress/videos
+# Generated files
+backstop_data
+dist
+.cache
+.parcel-cache
diff --git a/README.md b/README.md
index 97d3c9060a..6d1edd03b1 100644
--- a/README.md
+++ b/README.md
@@ -3,13 +3,9 @@
 In this task, you will learn how to implement a landing page. To do that:
 
 - choose a landing page design from the list below;
-  - [BOSE landing](https://www.figma.com/file/DtkQmQ797hk0nI4KfMi2Uq/BOSE-New-Version?type=design&node-id=6703-88&t=L7eKz5YKLN0m5WxR-0)
-  - [MET landing](https://www.figma.com/file/lSR1m42L9YwzQwzzxKwHpw/THE-MET)
   - [MYBIKE landing](https://www.figma.com/file/NZQAIydtHo5QkINyGLHNcq/BIKE-New-Version?node-id=0%3A1)
-  - [B&O](https://www.figma.com/file/DtkQmQ797hk0nI4KfMi2Uq/BOSE-New-Version?type=design&node-id=6817-212&t=ZTV6Gl8NzaWkJ4FK-0)
-  - [Nothing](https://www.figma.com/file/DtkQmQ797hk0nI4KfMi2Uq/BOSE-New-Version?type=design&node-id=6802-139&t=L7eKz5YKLN0m5WxR-0)
 - watch the lesson videos and implement your page blocks similarly to the videos;
 - **DON'T** try to do it `Pixel Perfect` - implement it the most `simple` way so it looks similar;
-- when you finish the first block of your page deploy it and create a Pull Request with a [DEMO LINK](https://<your_account>.github.io/layout_miami/) 
-- after each next block do the same (add, commit and push the changes, and deploy the updated demo;
+- when you finish the first block of your page deploy it and create a Pull Request with a [DEMO LINK](https://botqqku.github.io/layout_miami/)
+- after each next block do the same (add, commit and push the changes, and deploy the updated demo);
 - check yourself using the [CHECKLIST](https://github.com/mate-academy/layout_miami/blob/master/checklist.md) when finished;
diff --git a/checklist.md b/checklist.md
index 5a7e226250..6e867f66bf 100644
--- a/checklist.md
+++ b/checklist.md
@@ -1,19 +1,19 @@
-1. Add a favicon
-2. Don’t forget to add a title for the whole web page (it could be the name of your landing)
-3. All Logos on the page should be links to home page
-4. Change text color on hover for phone, email and address
-5. When you click on phone icon or phone number in contacts section, make sure that there is no 404 error, make it a real link to start a call on device
-6. Same when you click on logo. There shouldn't be any error.
-7. When clicking on any location / address - prevent errors and make it to open location in Google Maps
-8. Pictures in Gallery should increase on hover
-9. Location-related addresses / links should open google maps in a new tab `target="_blank"`
-10. Apply `:hover` effect for images on page (testimonials / gallery, other sections).
-11. Make sure everything looks neat on mobile and without horizontal scrolling
-12. The speed of animations is the same throughout the landing page (for example, increasing when hovering or moving blocks when scrolling)
-13. Placeholders in the forms suggest what to enter; apply validation of the form fields (`required`, `email / tel etc.`), then it is clear in what format to enter the data
-14. Form shouldn't be submitted if some of the fields are not filled
-15. Page shouldn't be reloaded on form submit (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
-16. Add a smooth scroll for the whole page
+1. Add a favicon [x]
+2. Don’t forget to add a title for the whole web page (it could be the name of your landing) [x]
+3. All Logos on the page should be links to home page [x]
+4. Change text color on hover for phone, email and address [x]
+5. When you click on phone icon or phone number in contacts section, make sure that there is no 404 error, make it a real link to start a call on device [x]
+6. Same when you click on logo. There shouldn't be any error. [x]
+7. When clicking on any location / address - prevent errors and make it to open location in Google Maps [x]
+8. Pictures in Gallery should increase on hover [x]
+9. Location-related addresses / links should open google maps in a new tab `target="_blank"` [x]
+10. Apply `:hover` effect for images on page (testimonials / gallery, other sections). [x]
+11. Make sure everything looks neat on mobile and without horizontal scrolling [x]
+12. The speed of animations is the same throughout the landing page (for example, increasing when hovering or moving blocks when scrolling) [x]
+13. Placeholders in the forms suggest what to enter; apply validation of the form fields (`required`, `email / tel etc.`), then it is clear in what format to enter the data [x]
+14. Form shouldn't be submitted if some of the fields are not filled [x]
+15. Page shouldn't be reloaded on form submit (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) [x]
+16. Add a smooth scroll for the whole page [x]
 17. Fix menu for small screens (if there is not enough space for all the menu items)
     ```css
     .menu {
@@ -43,6 +43,6 @@
         document.body.classList.remove('page__body--with-menu');
       }
     });
-    ```
+    ``` [x]
 19. Remember to reset default margins for headings (h1, h2, h3, etc.).
-* Only for Miami: Make sure that ```<h1>``` is positioned exactly 80px from the bottom of the header.
+* Only for Miami: Make sure that ```<h1>``` is positioned exactly 80px from the bottom of the header. [x]
diff --git a/css/styles.css b/css/styles.css
new file mode 100644
index 0000000000..2887e270f1
--- /dev/null
+++ b/css/styles.css
@@ -0,0 +1,931 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+.title {
+  font-family: Poppins;
+  font-weight: 700;
+  font-style: Bold;
+  font-size: 36px;
+  line-height: 100%;
+  letter-spacing: -1.5px;
+  color: white;
+  text-align: center;
+}
+@media (min-width: 744px) {
+  .title {
+    font-size: 64px;
+    line-height: 100%;
+    letter-spacing: -1.5px;
+    vertical-align: middle;
+  }
+}
+@media (min-width: 1260px) {
+  .title {
+    font-size: 80px;
+    line-height: 100%;
+    letter-spacing: -1.5px;
+    vertical-align: middle;
+  }
+}
+.title--secondary {
+  font-family: Poppins;
+  font-weight: 500;
+  font-style: Medium;
+  font-size: 32px;
+  line-height: 100%;
+  letter-spacing: -1.5px;
+  color: white;
+  text-align: left;
+}
+@media (min-width: 744px) {
+  .title--secondary {
+    font-size: 48px;
+    line-height: 100%;
+    letter-spacing: -1.5px;
+  }
+}
+@media (min-width: 1260px) {
+  .title--secondary {
+    font-size: 64px;
+    line-height: 100%;
+    letter-spacing: -1.5px;
+  }
+}
+.title--section {
+  font-family: Poppins;
+  font-weight: 500;
+  font-style: Medium;
+  font-size: 32px;
+  line-height: 32px;
+  letter-spacing: -1.5px;
+  text-align: center;
+  text-transform: capitalize;
+  color: white;
+  margin-bottom: 48px;
+}
+@media (min-width: 744px) {
+  .title--section {
+    font-size: 48px;
+    line-height: 100%;
+    letter-spacing: -1.5px;
+  }
+}
+@media (min-width: 1260px) {
+  .title--section {
+    font-size: 64px;
+    line-height: 100%;
+    letter-spacing: -1.5px;
+  }
+}
+.title--tertiary {
+  font-family: Poppins;
+  font-weight: 700;
+  font-style: Bold;
+  font-size: 24px;
+  line-height: 140%;
+  letter-spacing: 0px;
+  text-align: left;
+  margin-bottom: 8px;
+  margin: 0 clamp(20px, 5vw, 80px) 8px;
+}
+@media (min-width: 744px) {
+  .title--tertiary {
+    margin: 0 clamp(72px, 5vw, 80px) 8px;
+  }
+}
+@media (min-width: 1260px) {
+  .title--tertiary {
+    margin: 0 clamp(120px, 10vw, 120px) 8px;
+  }
+}
+
+.header {
+  background-image: url('../images/header-320.jpg');
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  background-color: black;
+  width: 100%;
+  min-height: 100vh;
+  box-sizing: border-box;
+  padding: 0 clamp(20px, 5vw, 80px) 88px;
+  display: flex;
+  flex-direction: column;
+}
+@media (min-width: 744px) {
+  .header {
+    background-image: url('../images/header-744.jpg');
+    padding: 0 clamp(72px, 5vw, 80px) 130px;
+  }
+}
+@media (min-width: 1260px) {
+  .header {
+    background-image: url('../images/header-1260.jpg');
+    padding: 0 clamp(120px, 5vw, 80px) 203px;
+  }
+}
+.header__navigation {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 24px;
+}
+.header__title {
+  margin-top: auto;
+}
+
+.main {
+  padding-top: 60px;
+  font-family: Poppins;
+  font-weight: 500;
+  font-style: Medium;
+  font-size: 23px;
+  line-height: 140%;
+  letter-spacing: 0px;
+  background-color: #1d1d1d;
+  color: white;
+}
+@media (min-width: 744px) {
+  .main {
+    padding-top: 120px;
+  }
+}
+@media (min-width: 1260px) {
+  .main {
+    padding-top: 120px;
+  }
+}
+.main__content {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 32px;
+  margin: 0 clamp(20px, 5vw, 80px) 92px;
+}
+@media (min-width: 744px) {
+  .main__content {
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 60px;
+    margin: 0 clamp(72px, 8vw, 160px) 132px;
+  }
+}
+@media (min-width: 1260px) {
+  .main__content {
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 88px;
+    margin: 0 clamp(120px, 10vw, 200px) 164px;
+  }
+}
+.main__paragraph {
+  font-size: 23px;
+  line-height: 140%;
+  flex: 2;
+}
+
+.bike {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1;
+}
+.bike__photo {
+  max-width: 100%;
+  height: auto;
+  margin-bottom: 32px;
+}
+.bike__photo:hover {
+  transform: scale(1.05);
+  transition: transform 0.3s ease-in-out;
+  cursor: pointer;
+}
+.bike__type {
+  font-family: Poppins;
+  font-weight: 700;
+  font-style: Bold;
+  font-size: 24px;
+  line-height: 140%;
+  letter-spacing: 0px;
+  margin-bottom: 8px;
+}
+.bike__description {
+  font-family: Poppins;
+  font-weight: 400;
+  font-style: Regular;
+  font-size: 16px;
+  line-height: 140%;
+  letter-spacing: 0px;
+  margin-bottom: 16px;
+}
+.bike__price {
+  font-family: Poppins;
+  font-weight: 700;
+  font-style: Bold;
+  font-size: 24px;
+  line-height: 140%;
+  letter-spacing: 0px;
+}
+
+.details__paragraph {
+  font-family: Poppins;
+  font-weight: 400;
+  font-style: Regular;
+  font-size: 16px;
+  line-height: 140%;
+  letter-spacing: 0px;
+  margin: 0 clamp(20px, 5vw, 80px) 40px;
+}
+@media (min-width: 744px) {
+  .details__paragraph {
+    margin: 0 clamp(72px, 5vw, 80px) 48px;
+  }
+}
+@media (min-width: 1260px) {
+  .details__paragraph {
+    margin: 0 clamp(120px, 10vw, 120px) 48px;
+    width: 672px;
+  }
+}
+.images {
+  display: grid;
+  justify-content: center;
+  grid-template-columns: repeat(2, 130px);
+  gap: 20px;
+}
+@media (min-width: 744px) {
+  .images {
+    grid-template-columns: repeat(6, 80px);
+    gap: 24px;
+  }
+}
+@media (min-width: 1260px) {
+  .images {
+    grid-template-columns: repeat(12, 63px);
+    gap: 24px;
+  }
+}
+.images {
+  margin-bottom: 16px;
+}
+.images__item {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.images__item:hover {
+  transform: scale(1.05);
+  transition: transform 0.3s ease-in-out;
+  filter: brightness(0.9);
+  cursor: pointer;
+}
+@media (min-width: 744px) {
+  .images__item {
+    grid-column: span 3;
+  }
+}
+@media (min-width: 1260px) {
+  .images__item {
+    grid-column: span 6;
+  }
+}
+@media (min-width: 744px) {
+  .images__item--small {
+    grid-column: span 2;
+  }
+}
+@media (min-width: 1260px) {
+  .images__item--small {
+    grid-column: span 4;
+  }
+}
+@media (min-width: 744px) {
+  .images__item--big {
+    grid-column: span 4;
+  }
+}
+@media (min-width: 1260px) {
+  .images__item--big {
+    grid-column: span 8;
+  }
+}
+
+.button {
+  border-radius: 40px;
+  background-color: white;
+  color: #1d1d1d;
+  text-decoration: none;
+  height: 56px;
+  font-family: Poppins;
+  font-weight: 700;
+  font-style: Bold;
+  font-size: 16px;
+  line-height: 56px;
+  letter-spacing: 0px;
+  text-align: center;
+  padding: 0 20px;
+  display: block;
+}
+.button--primary {
+  font-family: Poppins;
+  font-weight: 700;
+  font-style: Bold;
+  font-size: 16px;
+  line-height: 27px;
+  letter-spacing: 0px;
+  text-align: center;
+  color: #1d1d1d;
+  margin-bottom: 28px;
+}
+.button--primary:hover {
+  background-color: #ffffff;
+  box-shadow: 1px 4px 16px 0px rgba(232, 232, 240, 0.4);
+}
+@media (min-width: 744px) {
+  .button--primary {
+    margin-bottom: 120px;
+  }
+}
+@media (min-width: 1260px) {
+  .button--primary {
+    margin-bottom: 180px;
+  }
+}
+.button__explore {
+  margin: 0 clamp(20px, 5vw, 80px) 80px;
+}
+@media (min-width: 744px) {
+  .button__explore {
+    margin: 0 clamp(176px, 5vw, 200px) 120px;
+  }
+}
+@media (min-width: 1260px) {
+  .button__explore {
+    margin: 0 clamp(468px, 5vw, 500px) 180px;
+  }
+}
+.button__explore:hover {
+  background-color: #ffffff;
+  box-shadow: 1px 4px 16px 0px rgba(232, 232, 240, 0.4);
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.form__input {
+  border-radius: 40px;
+  background-color: #f8f8fa;
+  height: 48px;
+  line-height: 48px;
+  border: 0;
+  width: 100%;
+  padding-left: 16px;
+  box-sizing: border-box;
+}
+.form__input::placeholder {
+  font-family: Poppins;
+  font-weight: 400;
+  font-style: Regular;
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: 0px;
+  color: #7e7e83;
+}
+.form__input:hover::placeholder {
+  color: #292929;
+}
+.form__textarea {
+  border-radius: 16px;
+  background-color: #f8f8fa;
+  border: 0;
+  width: 100%;
+  box-sizing: border-box;
+  padding-left: 16px;
+  line-height: 48px;
+  height: 148px;
+}
+.form__textarea::placeholder {
+  font-family: Poppins;
+  font-weight: 400;
+  font-style: Regular;
+  font-size: 14px;
+  color: #7e7e83;
+}
+.form__textarea:hover::placeholder {
+  color: #292929;
+}
+.form__label:not(:focus):not(:active) {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.compare-bikes__row {
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+}
+@media (min-width: 1260px) {
+  .compare-bikes__row {
+    flex-direction: row;
+  }
+}
+
+.address {
+  color: #ffffff;
+}
+.address__label {
+  font-family: Poppins;
+  font-weight: 400;
+  font-style: Regular;
+  font-size: 14px;
+  line-height: 140%;
+  letter-spacing: 0px;
+  margin-bottom: 8px;
+}
+.address__value {
+  font-family: Poppins;
+  font-weight: 500;
+  font-style: Medium;
+  font-size: 16px;
+  line-height: 140%;
+  letter-spacing: 0px;
+  margin-bottom: 24px;
+}
+.address__value:hover {
+  color: #ffcc00;
+}
+.address__spacing {
+  margin-bottom: 120px;
+}
+.address__nap-link {
+  color: #ffffff;
+  text-decoration: none;
+}
+.address__nap-link:hover {
+  color: #ffcc00;
+}
+
+.footer {
+  height: 200px;
+  background-image: url('../images/footer-image--desktop.jpg');
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-position-x: 83%;
+  box-sizing: border-box;
+}
+@media (min-width: 744px) {
+  .footer {
+    height: 480px;
+  }
+}
+@media (min-width: 1260px) {
+  .footer {
+    height: 555px;
+  }
+}
+
+.navigation {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.navigation__icons {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+.navigation__close-icon {
+  height: 16px;
+}
+@media (min-width: 744px) {
+  .navigation__close-icon {
+    height: 21px;
+  }
+}
+@media (min-width: 1260px) {
+  .navigation__close-icon {
+    height: 21px;
+  }
+}
+.navigation__logo {
+  height: 38px;
+}
+@media (min-width: 744px) {
+  .navigation__logo {
+    height: 56px;
+  }
+}
+@media (min-width: 1260px) {
+  .navigation__logo {
+    height: 56px;
+  }
+}
+
+.menu {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  transform: translateX(-100%);
+  transition: transform 0.3s ease-in-out;
+  background-color: #c2c2c2;
+  box-sizing: border-box;
+  overflow-y: auto;
+  padding: 0 clamp(20px, 5vw, 80px) 88px;
+  display: grid;
+  justify-content: center;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 12px;
+}
+.menu:target {
+  transform: translateX(0);
+}
+.menu__contact-box,
+.menu__navigation,
+.menu__links,
+.menu__paragraph {
+  grid-column: span 2;
+}
+.menu__contact-box {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.menu__paragraph {
+  white-space: nowrap;
+  font-family: Poppins;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 27px;
+  text-transform: uppercase;
+  color: #1d1d1d;
+}
+.menu__call-link {
+  font-family: Poppins;
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 24px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  color: #1d1d1d;
+  text-decoration: none;
+  border-bottom: 1px solid transparent;
+}
+.menu__call-link:hover {
+  border-bottom: 1px solid #1d1d1d;
+}
+@media (min-width: 744px) {
+  .menu {
+    grid-template-columns: repeat(6, 1fr);
+    row-gap: 16px;
+  }
+  .menu__contact-box,
+  .menu__navigation,
+  .menu__links,
+  .menu__paragraph {
+    grid-column: span 6;
+  }
+}
+@media (min-width: 1260px) {
+  .menu {
+    grid-template-columns: repeat(12, 1fr);
+    row-gap: 20px;
+  }
+  .menu__contact-box,
+  .menu__navigation,
+  .menu__links,
+  .menu__paragraph {
+    grid-column: span 12;
+  }
+}
+
+.page__body--with-menu {
+  overflow: hidden;
+}
+
+.links {
+  margin-bottom: 8px;
+}
+.links__list {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+.links__link {
+  display: inline-block;
+  font-family: Poppins;
+  font-weight: 600;
+  font-style: SemiBold;
+  font-size: 22px;
+  line-height: 22px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  border-bottom: 1px solid transparent;
+  color: #1d1d1d;
+  text-decoration: none;
+  padding-bottom: 8px;
+}
+.links__link:hover {
+  border-bottom: 1px solid #1d1d1d;
+}
+
+.contact {
+  display: grid;
+  justify-content: center;
+  grid-template-columns: repeat(2, 130px);
+  gap: 20px;
+}
+@media (min-width: 744px) {
+  .contact {
+    grid-template-columns: repeat(6, 80px);
+    gap: 24px;
+  }
+}
+@media (min-width: 1260px) {
+  .contact {
+    grid-template-columns: repeat(12, 63px);
+    gap: 24px;
+  }
+}
+.contact__form {
+  grid-column: span 2;
+}
+@media (min-width: 744px) {
+  .contact__form {
+    grid-column: span 3;
+  }
+}
+@media (min-width: 1260px) {
+  .contact__form {
+    grid-column: 1/6;
+  }
+}
+.contact__address {
+  grid-column: span 2;
+}
+@media (min-width: 744px) {
+  .contact__address {
+    grid-column: span 3;
+  }
+}
+@media (min-width: 1260px) {
+  .contact__address {
+    grid-column: -6/-1;
+  }
+}
+
+.burger::before {
+  content: '';
+  background-image: url('../images/menu-vector.svg');
+  background-size: cover;
+  display: inline-block;
+  width: 18px;
+  height: 12px;
+}
+@media (min-width: 744px) {
+  .burger::before {
+    width: 24px;
+    height: 16px;
+  }
+}
+@media (min-width: 1260px) {
+  .burger::before {
+    width: 24px;
+    height: 16px;
+  }
+}
+.burger::after {
+  display: none;
+  content: '';
+  background-image: url('../images/menu-vector--hover.svg');
+  background-size: cover;
+  width: 18px;
+  height: 12px;
+}
+@media (min-width: 744px) {
+  .burger::after {
+    width: 24px;
+    height: 24px;
+  }
+}
+@media (min-width: 1260px) {
+  .burger::after {
+    width: 24px;
+    height: 16px;
+  }
+}
+.burger:hover::before {
+  display: none;
+}
+.burger:hover::after {
+  display: inline-block;
+}
+.burger__label {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.phone__label {
+  font-family: Poppins;
+  font-weight: 700;
+  font-style: Bold;
+  font-size: 12px;
+  line-height: 16px;
+  letter-spacing: 2px;
+  text-align: right;
+  vertical-align: middle;
+  text-transform: uppercase;
+  text-decoration: none;
+  white-space: nowrap;
+  color: #ffffff;
+  position: absolute;
+  transform: translateX(calc(-100% - 20px)) translateY(5px);
+  transition: color 0.3s ease;
+}
+.phone__link {
+  color: #ffffff;
+  text-decoration: none;
+}
+.phone__link:hover {
+  color: #ffcc00;
+}
+.phone__icon {
+  height: 18px;
+  width: 18px;
+}
+@media (min-width: 744px) {
+  .phone__icon {
+    width: 24px;
+    height: 24px;
+  }
+}
+@media (min-width: 1260px) {
+  .phone__icon {
+    width: 24px;
+    height: 24px;
+  }
+}
+.phone:not(:hover) .phone__label {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+/*# sourceMappingURL=styles.css.map */
diff --git a/css/styles.css.map b/css/styles.css.map
new file mode 100644
index 0000000000..d1daf90d67
--- /dev/null
+++ b/css/styles.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../styles/utils/reset.scss","../styles/main.scss","../styles/blocks/title.scss","../styles/utils/mixins.scss","../styles/blocks/header.scss","../styles/blocks/main.scss","../styles/blocks/bike.scss","../styles/blocks/details.scss","../styles/blocks/images.scss","../styles/blocks/button.scss","../styles/blocks/form.scss","../styles/blocks/section.scss","../styles/blocks/address.scss","../styles/blocks/footer.scss","../styles/blocks/navigation.scss","../styles/blocks/menu.scss","../styles/blocks/links.scss","../styles/blocks/contact.scss","../styles/blocks/burger.scss","../styles/blocks/phone.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAiFE;EACA;EACA;EACA;EACA;EACA;;;AAEF;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAWE;;;AAEF;EACE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;EAEE;;;AAEF;AAAA;AAAA;AAAA;EAIE;EACA;;;AAEF;EACE;EACA;;;AC7HF;EACE;;;ACDF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ACTA;EDCF;IAWI;IACA;IACA;IACA;;;ACTF;EDLF;IAkBI;IACA;IACA;IACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ACjCF;EDyBA;IAWI;IACA;IACA;;;AChCJ;EDmBA;IAiBI;IACA;IACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AC1DF;EDgDA;IAaI;IACA;IACA;;;ACzDJ;ED0CA;IAoBI;IACA;IACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ACnFF;ED0EA;IAYI;;;AChFJ;EDoEA;IAgBI;;;;AEvFN;EACE;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;;ADfA;ECGF;IAeI;IACA;;;ADbF;ECHF;IAoBI;IACA;;;AAKF;EACE;EACA;EACA;EACA;;AAGF;EACE;;;ACpCJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AFVA;EECF;IAYI;;;AFPF;EELF;IAeI;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AFxBF;EEmBA;IAQI;IACA;IACA;IACA;;;AFxBJ;EEaA;IAeI;IACA;IACA;IACA;;;AAIJ;EACE;EACA;EACA;;;AC3CJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;;;AC7CF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AJTF;EIEA;IAUI;;;AJNJ;EIJA;IAcI;IACA;;;AChBN;ELWE;EACA;EACA;EACA;;AAfA;EKCF;ILiBI;IACA;;;AAbF;EKLF;ILsBI;IACA;;;AKvBJ;EAGE;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;ALfJ;EKMA;IAaI;;;ALbJ;EKAA;IAiBI;;;ALvBJ;EK0BE;IAEI;;;ALtBN;EKoBE;IAMI;;;ALhCN;EKoCE;IAEI;;;ALhCN;EK8BE;IAMI;;;;ACzCR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AN9BJ;EMiBA;IAiBI;;;AN5BJ;EMWA;IAqBI;;;AAIJ;EACE;;AN3CF;EM0CA;IAII;;;ANxCJ;EMoCA;IAQI;;;AAEF;EACE;EACA;;;ACrDN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAKF;EPxBF;EACA;EACA;EACA;EACA;EACA;EACA;;;AQlCF;EACE;EACA;EACA;;AREA;EQLF;IAMI;;;;ACRJ;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;;AAGF;EACE;EACA;;AAEA;EACE;;;AClCN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AVXA;EUCF;IAaI;;;AVRF;EULF;IAiBI;;;;ACjBJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AXbF;EWYA;IAII;;;AXVJ;EWMA;IAQI;;;AAIJ;EACE;;AXzBF;EWwBA;IAII;;;AXtBJ;EWkBA;IAQI;;;;AC/BN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAIE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AZ1DJ;EYCF;IA8DI;IACA;;EAEA;IAIE;;;AZhEJ;EYLF;IA0EI;IACA;;EAEA;IAIE;;;;AAKN;EACE;;;ACzFF;EACE;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;ACtBN;EdWE;EACA;EACA;EACA;;AAfA;EcCF;IdiBI;IACA;;;AAbF;EcLF;IdsBI;IACA;;;AcpBF;EACE;;AdLF;EcIA;IAII;;;AdFJ;EcFA;IAQI;;;AAIJ;EACE;;AdjBF;EcgBA;IAII;;;AddJ;EcUA;IAQI;;;;ACtBJ;EACE;EACA;EACA;EACA;EACA;EACA;;AfRF;EeEA;IASI;IACA;;;AfNJ;EeJA;IAcI;IACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;Af3BF;EeqBA;IASI;IACA;;;AfzBJ;EeeA;IAcI;IACA;;;AAKF;EACE;;AAGF;EACE;;AAIJ;EfrBA;EACA;EACA;EACA;EACA;EACA;EACA;;;AgBjCA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;;AhBhCF;EgB8BA;IAKI;IACA;;;AhB9BJ;EgBwBA;IAUI;IACA;;;AAIJ;EhBhBA;EACA;EACA;EACA;EACA;EACA;EACA","file":"styles.css"}
\ No newline at end of file
diff --git a/images/close-vector.svg b/images/close-vector.svg
new file mode 100644
index 0000000000..d99ba26e00
--- /dev/null
+++ b/images/close-vector.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.7224 1.94522C15.1673 1.50024 15.1673 0.778774 14.7224 0.33379C14.2774 -0.111193 13.5559 -0.111193 13.1109 0.33379L7.52808 5.91665L1.94522 0.333792C1.50024 -0.111192 0.778774 -0.111193 0.33379 0.33379C-0.111193 0.778774 -0.111193 1.50024 0.33379 1.94522L5.91665 7.52808L0.333792 13.1109C-0.111192 13.5559 -0.111193 14.2774 0.33379 14.7224C0.778774 15.1673 1.50024 15.1673 1.94522 14.7224L7.52808 9.13951L13.1109 14.7224C13.5559 15.1673 14.2774 15.1673 14.7224 14.7224C15.1673 14.2774 15.1673 13.5559 14.7224 13.1109L9.13951 7.52808L14.7224 1.94522Z" fill="#1D1D1D"/>
+</svg>
diff --git a/images/favicon.jpg b/images/favicon.jpg
new file mode 100644
index 0000000000..97ad2d87c2
Binary files /dev/null and b/images/favicon.jpg differ
diff --git a/images/footer-image--desktop.jpg b/images/footer-image--desktop.jpg
new file mode 100644
index 0000000000..5bddfcf0da
Binary files /dev/null and b/images/footer-image--desktop.jpg differ
diff --git a/images/footer-image--mobil.jpg b/images/footer-image--mobil.jpg
new file mode 100644
index 0000000000..7c8ef43374
Binary files /dev/null and b/images/footer-image--mobil.jpg differ
diff --git a/images/footer-image.jpg b/images/footer-image.jpg
new file mode 100644
index 0000000000..5bddfcf0da
Binary files /dev/null and b/images/footer-image.jpg differ
diff --git a/images/greenbike-mobil.jpg b/images/greenbike-mobil.jpg
new file mode 100644
index 0000000000..5fc6d9d6cd
Binary files /dev/null and b/images/greenbike-mobil.jpg differ
diff --git a/images/greybike-mobil.jpg b/images/greybike-mobil.jpg
new file mode 100644
index 0000000000..94a533a191
Binary files /dev/null and b/images/greybike-mobil.jpg differ
diff --git a/images/header-1260.jpg b/images/header-1260.jpg
new file mode 100644
index 0000000000..c9c2abba8f
Binary files /dev/null and b/images/header-1260.jpg differ
diff --git a/images/header-320.jpg b/images/header-320.jpg
new file mode 100644
index 0000000000..cbfb63f682
Binary files /dev/null and b/images/header-320.jpg differ
diff --git a/images/header-744.jpg b/images/header-744.jpg
new file mode 100644
index 0000000000..50b9790947
Binary files /dev/null and b/images/header-744.jpg differ
diff --git a/images/image1-desktop.jpg b/images/image1-desktop.jpg
new file mode 100644
index 0000000000..abe3d5adda
Binary files /dev/null and b/images/image1-desktop.jpg differ
diff --git a/images/image1-mobil.jpg b/images/image1-mobil.jpg
new file mode 100644
index 0000000000..c43b8e632b
Binary files /dev/null and b/images/image1-mobil.jpg differ
diff --git a/images/image2-desktop.jpg b/images/image2-desktop.jpg
new file mode 100644
index 0000000000..05e12d49c1
Binary files /dev/null and b/images/image2-desktop.jpg differ
diff --git a/images/image2-mobil.jpg b/images/image2-mobil.jpg
new file mode 100644
index 0000000000..017508ace2
Binary files /dev/null and b/images/image2-mobil.jpg differ
diff --git a/images/image3-desktop.jpg b/images/image3-desktop.jpg
new file mode 100644
index 0000000000..cb3a8fa9bc
Binary files /dev/null and b/images/image3-desktop.jpg differ
diff --git a/images/image3-mobil.jpg b/images/image3-mobil.jpg
new file mode 100644
index 0000000000..97878b07a7
Binary files /dev/null and b/images/image3-mobil.jpg differ
diff --git a/images/image4-desktop.jpg b/images/image4-desktop.jpg
new file mode 100644
index 0000000000..23b0322030
Binary files /dev/null and b/images/image4-desktop.jpg differ
diff --git a/images/image4-mobil.jpg b/images/image4-mobil.jpg
new file mode 100644
index 0000000000..ccb9f32c4d
Binary files /dev/null and b/images/image4-mobil.jpg differ
diff --git a/images/image5-desktop.jpg b/images/image5-desktop.jpg
new file mode 100644
index 0000000000..4e60243c92
Binary files /dev/null and b/images/image5-desktop.jpg differ
diff --git a/images/image5-mobil.jpg b/images/image5-mobil.jpg
new file mode 100644
index 0000000000..26f47476cb
Binary files /dev/null and b/images/image5-mobil.jpg differ
diff --git a/images/image6-desktop.jpg b/images/image6-desktop.jpg
new file mode 100644
index 0000000000..6a0310e719
Binary files /dev/null and b/images/image6-desktop.jpg differ
diff --git a/images/image6-mobil.jpg b/images/image6-mobil.jpg
new file mode 100644
index 0000000000..6ed6b25067
Binary files /dev/null and b/images/image6-mobil.jpg differ
diff --git a/images/menu-vector--hover.svg b/images/menu-vector--hover.svg
new file mode 100644
index 0000000000..1fc00346bf
--- /dev/null
+++ b/images/menu-vector--hover.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 11C0 11.5523 0.447715 12 1 12H8C8.55229 12 9 11.5523 9 11C9 10.4477 8.55229 10 8 10H1C0.447715 10 0 10.4477 0 11ZM0 6C0 6.55228 0.447715 7 1 7H17C17.5523 7 18 6.55228 18 6C18 5.44772 17.5523 5 17 5H1C0.447716 5 0 5.44772 0 6ZM1 0C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H12C12.5523 2 13 1.55228 13 1C13 0.447715 12.5523 0 12 0H1Z" fill="white"/>
+</svg>
diff --git a/images/menu-vector.svg b/images/menu-vector.svg
new file mode 100644
index 0000000000..b5ea4b25d0
--- /dev/null
+++ b/images/menu-vector.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 11C0 11.5523 0.447715 12 1 12H17C17.5523 12 18 11.5523 18 11C18 10.4477 17.5523 10 17 10H1C0.447716 10 0 10.4477 0 11ZM0 6C0 6.55228 0.447715 7 1 7H17C17.5523 7 18 6.55228 18 6C18 5.44772 17.5523 5 17 5H1C0.447716 5 0 5.44772 0 6ZM1 0C0.447716 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H17C17.5523 2 18 1.55228 18 1C18 0.447715 17.5523 0 17 0H1Z" fill="white"/>
+</svg>
diff --git a/images/mybike-black.svg b/images/mybike-black.svg
new file mode 100644
index 0000000000..7025785957
--- /dev/null
+++ b/images/mybike-black.svg
@@ -0,0 +1,8 @@
+<svg width="187" height="56" viewBox="0 0 187 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M42.3067 5.20075V42.0788H33.2068V19.9625L24.8518 42.0788H17.508L9.09993 19.9099V42.0788H0V5.20075H10.7496L21.2332 30.7317L31.6103 5.20075H42.3067Z" fill="#1D1D1D"/>
+<path d="M77.9364 12.7655L59.3108 56H49.5191L56.3307 41.0807L44.2507 12.7655H54.415L61.2798 31.0994L68.0915 12.7655H77.9364Z" fill="#1D1D1D"/>
+<path d="M102.597 23.167C104.761 23.6223 106.499 24.6904 107.812 26.3715C109.124 28.0175 109.781 29.9087 109.781 32.045C109.781 35.127 108.681 37.5785 106.481 39.3996C104.317 41.1857 101.284 42.0788 97.3814 42.0788H79.9798V5.20075H96.7961C100.592 5.20075 103.554 6.05879 105.683 7.77486C107.847 9.49093 108.929 11.8199 108.929 14.7617C108.929 16.9331 108.344 18.7367 107.173 20.1726C106.038 21.6085 104.512 22.6066 102.597 23.167ZM89.0797 20.1201H95.0399C96.53 20.1201 97.6653 19.8049 98.4458 19.1745C99.2617 18.5091 99.6697 17.546 99.6697 16.2852C99.6697 15.0244 99.2617 14.0613 98.4458 13.3959C97.6653 12.7305 96.53 12.3978 95.0399 12.3978H89.0797V20.1201ZM95.785 34.8293C97.3105 34.8293 98.4812 34.4966 99.2972 33.8311C100.149 33.1307 100.574 32.1326 100.574 30.8368C100.574 29.541 100.131 28.5253 99.244 27.7899C98.3925 27.0544 97.204 26.6867 95.6785 26.6867H89.0797V34.8293H95.785Z" fill="#1D1D1D"/>
+<path d="M118.388 9.71857C116.792 9.71857 115.479 9.26329 114.45 8.35272C113.457 7.40713 112.96 6.25141 112.96 4.88556C112.96 3.48468 113.457 2.32896 114.45 1.41839C115.479 0.472796 116.792 0 118.388 0C119.949 0 121.226 0.472796 122.22 1.41839C123.248 2.32896 123.763 3.48468 123.763 4.88556C123.763 6.25141 123.248 7.40713 122.22 8.35272C121.226 9.26329 119.949 9.71857 118.388 9.71857ZM122.911 12.7655V42.0788H113.811V12.7655H122.911Z" fill="#1D1D1D"/>
+<path d="M149.918 42.0788L137.359 25.7936V42.0788H128.259V5.20075H137.359V21.3809L149.811 5.20075H160.508L146.033 23.272L161.04 42.0788H149.918Z" fill="#1D1D1D"/>
+<path d="M173.217 12.3978V19.8574H185.404V26.7917H173.217V34.8818H187V42.0788H164.117V5.20075H187V12.3978H173.217Z" fill="#1D1D1D"/>
+</svg>
diff --git a/images/mybike-white.svg b/images/mybike-white.svg
new file mode 100644
index 0000000000..4fa6cd0bc6
--- /dev/null
+++ b/images/mybike-white.svg
@@ -0,0 +1,8 @@
+<svg width="187" height="56" viewBox="0 0 187 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M42.3067 5.20075V42.0788H33.2068V19.9625L24.8518 42.0788H17.508L9.09993 19.9099V42.0788H0V5.20075H10.7496L21.2332 30.7317L31.6103 5.20075H42.3067Z" fill="white"/>
+<path d="M77.9364 12.7655L59.3108 56H49.5191L56.3307 41.0807L44.2507 12.7655H54.415L61.2798 31.0994L68.0915 12.7655H77.9364Z" fill="white"/>
+<path d="M102.597 23.167C104.761 23.6223 106.499 24.6904 107.812 26.3715C109.124 28.0175 109.781 29.9087 109.781 32.045C109.781 35.127 108.681 37.5785 106.481 39.3996C104.317 41.1857 101.284 42.0788 97.3814 42.0788H79.9798V5.20075H96.7961C100.592 5.20075 103.554 6.05879 105.683 7.77486C107.847 9.49093 108.929 11.8199 108.929 14.7617C108.929 16.9331 108.344 18.7367 107.173 20.1726C106.038 21.6085 104.512 22.6066 102.597 23.167ZM89.0797 20.1201H95.0399C96.53 20.1201 97.6653 19.8049 98.4458 19.1745C99.2617 18.5091 99.6697 17.546 99.6697 16.2852C99.6697 15.0244 99.2617 14.0613 98.4458 13.3959C97.6653 12.7305 96.53 12.3978 95.0399 12.3978H89.0797V20.1201ZM95.785 34.8293C97.3105 34.8293 98.4812 34.4966 99.2972 33.8311C100.149 33.1307 100.574 32.1326 100.574 30.8368C100.574 29.541 100.131 28.5253 99.244 27.7899C98.3925 27.0544 97.204 26.6867 95.6785 26.6867H89.0797V34.8293H95.785Z" fill="white"/>
+<path d="M118.388 9.71857C116.792 9.71857 115.479 9.26329 114.45 8.35272C113.457 7.40713 112.96 6.25141 112.96 4.88556C112.96 3.48468 113.457 2.32896 114.45 1.41839C115.479 0.472796 116.792 0 118.388 0C119.949 0 121.226 0.472796 122.22 1.41839C123.248 2.32896 123.763 3.48468 123.763 4.88556C123.763 6.25141 123.248 7.40713 122.22 8.35272C121.226 9.26329 119.949 9.71857 118.388 9.71857ZM122.911 12.7655V42.0788H113.811V12.7655H122.911Z" fill="white"/>
+<path d="M149.918 42.0788L137.359 25.7936V42.0788H128.259V5.20075H137.359V21.3809L149.811 5.20075H160.508L146.033 23.272L161.04 42.0788H149.918Z" fill="white"/>
+<path d="M173.217 12.3978V19.8574H185.404V26.7917H173.217V34.8818H187V42.0788H164.117V5.20075H187V12.3978H173.217Z" fill="white"/>
+</svg>
diff --git a/images/phone-vector.svg b/images/phone-vector.svg
new file mode 100644
index 0000000000..ce3f027938
--- /dev/null
+++ b/images/phone-vector.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.01 12.38C15.78 12.38 14.59 12.18 13.48 11.82C13.13 11.7 12.74 11.79 12.47 12.06L10.9 14.03C8.07 12.68 5.42 10.13 4.01 7.2L5.96 5.54C6.23 5.26 6.31 4.87 6.2 4.52C5.83 3.41 5.64 2.22 5.64 0.99C5.64 0.45 5.19 0 4.65 0H1.19C0.65 0 0 0.24 0 0.99C0 10.28 7.73 18 17.01 18C17.72 18 18 17.37 18 16.82V13.37C18 12.83 17.55 12.38 17.01 12.38Z" fill="white"/>
+</svg>
diff --git a/images/whitebike-mobil.jpg b/images/whitebike-mobil.jpg
new file mode 100644
index 0000000000..63edaf2fa7
Binary files /dev/null and b/images/whitebike-mobil.jpg differ
diff --git a/index.html b/index.html
index 06bcd7773a..8ba900b9e3 100644
--- a/index.html
+++ b/index.html
@@ -6,17 +6,412 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0"
     />
-    <title>Miami</title>
+    <title>MYBIKE</title>
+    <link
+      rel="icon"
+      href="/images/favicon.jpg"
+    />
+    <link
+      rel="preconnect"
+      href="https://fonts.googleapis.com"
+    />
+    <link
+      rel="preconnect"
+      href="https://fonts.gstatic.com"
+      crossorigin="anonymous"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+      rel="stylesheet"
+    />
     <link
       rel="stylesheet"
-      href="src/styles/main.scss"
+      href="/styles/main.scss"
     />
-    <script
-      src="src/scripts/main.js"
-      defer
-    ></script>
   </head>
   <body>
-    <h1>Miami</h1>
+    <header
+      class="header"
+      id="home"
+    >
+      <nav class="navigation header__navigation">
+        <a href="#home">
+          <img
+            class="navigation__logo"
+            src="images/mybike-white.svg"
+            alt="MyBike-white-logo"
+          />
+        </a>
+        <div class="navigation__icons">
+          <a
+            class="phone"
+            href="tel:+1 234 555-55-55"
+          >
+            <span class="phone__label">+1 234 5555-55-55</span>
+            <img
+              class="phone__icon"
+              src="images/phone-vector.svg"
+              alt="phone-icon"
+            />
+          </a>
+          <a
+            class="burger"
+            href="#menu"
+          >
+            <span class="burger__label">Open menu</span>
+          </a>
+        </div>
+      </nav>
+
+      <h1 class="title header__title">Take the Streets</h1>
+    </header>
+
+    <div
+      class="menu"
+      id="menu"
+    >
+      <nav class="navigation menu__navigation">
+        <a href="#home">
+          <img
+            class="navigation__logo"
+            src="images/mybike-black.svg"
+            alt="MyBike-black-logo"
+          />
+        </a>
+        <div class="navigation__icons">
+          <a href="#home">
+            <img
+              class="navigation__close-icon"
+              src="images/close-vector.svg"
+              alt="navigation__close-icon"
+            />
+          </a>
+        </div>
+      </nav>
+
+      <nav class="links menu__links">
+        <ul class="links__list">
+          <li class="link__item">
+            <a
+              class="links__link"
+              href="#home"
+            >
+              Home
+            </a>
+          </li>
+          <li class="link__item">
+            <a
+              class="links__link"
+              href="#about-us"
+            >
+              About us
+            </a>
+          </li>
+          <li class="link__item">
+            <a
+              class="links__link"
+              href="#compare-bikes"
+            >
+              Compare bikes
+            </a>
+          </li>
+          <li class="link__item">
+            <a
+              class="links__link"
+              href="#details"
+            >
+              Details
+            </a>
+          </li>
+          <li class="link__item">
+            <a
+              class="links__link links__spacing"
+              href="#contacts"
+            >
+              Contacts
+            </a>
+          </li>
+        </ul>
+      </nav>
+      <div class="menu__contact-box">
+        <p class="menu__paragraph">+1 234 5555-55-55</p>
+        <p class="menu__paragraph">
+          <a
+            class="menu__call-link"
+            href="tel:+1 234 555-55-55"
+          >
+            Book a test ride
+          </a>
+        </p>
+      </div>
+    </div>
+
+    <main
+      class="main"
+      id="about-us"
+    >
+      <div class="main__content">
+        <h2 class="title title--secondary">Move Free</h2>
+        <p class="main__paragraph">
+          Shift your ride, not gears. Find the fastest way to move in the city
+          as the bike adapts intuitively to power the speed you need.
+        </p>
+      </div>
+
+      <section
+        class="section compare-bikes__section"
+        id="compare-bikes"
+      >
+        <div class="container">
+          <h2 class="title title--section">Compare Bikes</h2>
+
+          <div class="compare-bikes__row">
+            <article class="bike">
+              <img
+                class="bike__photo"
+                src="images/greenbike-mobil.jpg"
+                alt="Sporty 4 - green bike"
+              />
+              <h3 class="bike__type">Sporty 4</h3>
+              <p class="bike__description">
+                The iconic frame brought to a new performance height as a
+                sporty, active ride.
+              </p>
+              <p class="bike__price">$ 2 590</p>
+            </article>
+
+            <article class="bike">
+              <img
+                class="bike__photo"
+                src="images/greybike-mobil.jpg"
+                alt="Ride in town ST - grey bike"
+              />
+              <h3 class="bike__type">Ride in town ST</h3>
+              <p class="bike__description">
+                An open frame for an upright riding position as the most
+                comfortable ride in town.
+              </p>
+              <p class="bike__price">$ 2 590</p>
+            </article>
+
+            <article class="bike">
+              <img
+                class="bike__photo"
+                src="images/whitebike-mobil.jpg"
+                alt="Agile ride 3 - white bike"
+              />
+              <h3 class="bike__type">Agile ride 3</h3>
+              <p class="bike__description">
+                The lightweight frame that has earned its street tread as a
+                sleek, agile ride.
+              </p>
+              <p class="bike__price">$ 2 090</p>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <section
+        class="section main__section"
+        id="details"
+      >
+        <div class="container">
+          <h2 class="title title--section">The Details</h2>
+          <article class="details">
+            <div class="images">
+              <img
+                class="images__item images__item--big"
+                src="images/image1-desktop.jpg"
+                alt="image1-desktop"
+              />
+              <img
+                class="images__item images__item--small"
+                src="images/image2-desktop.jpg"
+                alt="image2-desktop"
+              />
+            </div>
+            <h3 class="title title--tertiary">Auto Unlock</h3>
+            <p class="details__paragraph">
+              The app senses when you're nearby to unlock automatically. GPS
+              tracking so you know where your bike is and can track it anytime.
+            </p>
+          </article>
+
+          <article class="details">
+            <div class="images">
+              <img
+                class="images__item images__item--big"
+                src="images/image3-desktop.jpg"
+                alt="image3-desktop"
+              />
+              <img
+                class="images__item images__item--small"
+                src="images/image4-desktop.jpg"
+                alt="image4-desktop"
+              />
+            </div>
+            <h3 class="title title--tertiary">Range & Integrated lights</h3>
+            <p class="details__paragraph">
+              The removable battery has up to 70km battery autonomy and weighs
+              only 2.4 kg. Lights integrated into the frame give you always-on
+              visibility day and night.
+            </p>
+          </article>
+
+          <article class="details">
+            <div class="images">
+              <img
+                class="images__item images__item--small"
+                src="images/image5-desktop.jpg"
+                alt="image5-desktop"
+              />
+              <img
+                class="images__item images__item--big"
+                src="images/image6-desktop.jpg"
+                alt="image6-desktop"
+              />
+            </div>
+            <h3 class="title title--tertiary">
+              Hydraulic disc brakes & Lightweight
+            </h3>
+            <p class="details__paragraph">
+              Brakes with total stopping power the second you make contact. The
+              removable battery has up to 70km battery autonomy and weighs only
+              2.4 kg. Lights integrated into the frame give you always-on
+              visibility day and night.
+            </p>
+          </article>
+        </div>
+      </section>
+      <div class="container">
+        <a
+          href="#"
+          class="button button__explore"
+        >
+          Explore
+        </a>
+      </div>
+      <section
+        class="section main__section"
+        id="contacts"
+      >
+        <div class="container">
+          <h2 class="title title--section">Contact us</h2>
+          <div class="contact">
+            <form class="form contact__form">
+              <div class="form__item">
+                <label
+                  for="name"
+                  class="form__label"
+                >
+                  Name
+                </label>
+                <input
+                  id="name"
+                  name="name"
+                  class="form__input"
+                  type="text"
+                  placeholder="Name"
+                  required
+                />
+              </div>
+
+              <div class="form__item">
+                <label
+                  for="email"
+                  class="form__label"
+                >
+                  Email
+                </label>
+                <input
+                  id="email"
+                  name="email"
+                  class="form__input"
+                  type="email"
+                  placeholder="Email"
+                  required
+                />
+              </div>
+
+              <div class="form__item">
+                <label
+                  for="message"
+                  class="form__label"
+                >
+                  Message
+                </label>
+                <textarea
+                  id="message"
+                  name="message"
+                  class="form__textarea"
+                  placeholder="Message"
+                  required
+                ></textarea>
+              </div>
+
+              <button
+                type="submit"
+                class="button button--primary button__send"
+              >
+                Send
+              </button>
+            </form>
+
+            <address class="address contact__address">
+              <h3 class="address__label">Phone</h3>
+              <p class="address__value">
+                <a
+                  class="phone phone__link"
+                  href="tel:+1 234 555-55-55"
+                >
+                  +1 234 5555-55-55
+                </a>
+              </p>
+              <h3 class="address__label">Email</h3>
+              <p class="address__value">hello@miami.com</p>
+              <h3 class="address__label">Address</h3>
+              <p class="address__value address__spacing">
+                <a
+                  class="address__nap-link"
+                  href="https://www.google.com/maps/search/?api=1&query=400+first+ave+Minneapolis+MN+55401"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  400 first ave.
+                  <br />
+                  suite 700
+                  <br />
+                  Minneapolis, MN 55401
+                </a>
+              </p>
+            </address>
+          </div>
+        </div>
+      </section>
+    </main>
+    <footer class="footer"></footer>
+
+    <script>
+      const form = document.querySelector('.contact__form');
+
+      form.addEventListener('submit', function (event) {
+        event.preventDefault();
+
+        if (!form.checkValidity()) {
+          form.reportValidity();
+          return;
+        }
+
+        form.reset();
+      });
+
+      window.addEventListener('hashchange', () => {
+        if (window.location.hash === '#menu') {
+          document.body.classList.add('page__body--with-menu');
+        } else {
+          document.body.classList.remove('page__body--with-menu');
+        }
+      });
+    </script>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
index 5cfe8293fe..18368717ae 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,8 +13,9 @@
         "@linthtml/linthtml": "^0.9.6",
         "@mate-academy/bemlint": "latest",
         "@mate-academy/linthtml-config": "latest",
-        "@mate-academy/scripts": "^2.1.2",
+        "@mate-academy/scripts": "^2.1.3",
         "@mate-academy/stylelint-config": "latest",
+        "cross-env": "^10.1.0",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "prettier": "^3.3.2",
@@ -64,6 +65,7 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.9.tgz",
       "integrity": "sha512-5e3FI4Q3M3Pbr21+5xJwCv6ZT6KmGkI0vw3Tozy5ODAQFTIWe37iT8Cr7Ice2Ntb+M3iSKCEWMB1MBgKrW3whg==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.24.7",
@@ -617,6 +619,7 @@
           "url": "https://opencollective.com/csstools"
         }
       ],
+      "peer": true,
       "engines": {
         "node": "^14 || ^16 || >=18"
       },
@@ -639,6 +642,7 @@
           "url": "https://opencollective.com/csstools"
         }
       ],
+      "peer": true,
       "engines": {
         "node": "^14 || ^16 || >=18"
       }
@@ -698,6 +702,13 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/@epic-web/invariant": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@epic-web/invariant/-/invariant-1.0.0.tgz",
+      "integrity": "sha512-lrTPqgvfFQtR/eY/qkIzp98OGdNJu0m5ji3q/nJI8v3SXkRKEnWiOxMmbvcSoAIzv/cGiuvRy57k4suKQSAdwA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.10",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.10.tgz",
@@ -1572,9 +1583,9 @@
       "dev": true
     },
     "node_modules/@mate-academy/scripts": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.2.tgz",
-      "integrity": "sha512-gUXFdqqOfYzF9R3RSx2pCa5GLdOkxB9bFbF+dpUpzucdgGAANqOGdqpmNnMj+e3xA9YHraUWq3xo9cwe5vD9pQ==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.3.tgz",
+      "integrity": "sha512-a07wHTj/1QUK2Aac5zHad+sGw4rIvcNl5lJmJpAD7OxeSbnCdyI6RXUHwXhjF5MaVo9YHrJ0xVahyERS2IIyBQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1636,22 +1647,19 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "node_modules/@mate-academy/stylelint-config/node_modules/balanced-match": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-2.0.0.tgz",
       "integrity": "sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "node_modules/@mate-academy/stylelint-config/node_modules/camelcase": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
       "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -1664,7 +1672,6 @@
       "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-7.0.2.tgz",
       "integrity": "sha512-Rjs1H+A9R+Ig+4E/9oyB66UC5Mj9Xq3N//vcLf2WzgdTi/3gUu3Z9KoqmlrEG4VuuLK8wJHofxzdQXz/knhiYg==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "camelcase": "^6.3.0",
         "map-obj": "^4.1.0",
@@ -1683,7 +1690,6 @@
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz",
       "integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "import-fresh": "^3.3.0",
         "js-yaml": "^4.1.0",
@@ -1710,7 +1716,6 @@
       "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-5.0.1.tgz",
       "integrity": "sha512-VfxadyCECXgQlkoEAjeghAr5gY3Hf+IKjKb+X8tGVDtveCjN+USwprd2q3QXBR9T1+x2DG0XZF5/w+7HAtSaXA==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -1723,7 +1728,6 @@
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-7.0.2.tgz",
       "integrity": "sha512-TfW7/1iI4Cy7Y8L6iqNdZQVvdXn0f8B4QcIXmkIbtTIe/Okm/nSlHb4IwGzRVOd3WfSieCgvf5cMzEfySAIl0g==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "flat-cache": "^3.2.0"
       },
@@ -1736,7 +1740,6 @@
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
       "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "locate-path": "^6.0.0",
         "path-exists": "^4.0.0"
@@ -1753,7 +1756,6 @@
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
       "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "flatted": "^3.2.9",
         "keyv": "^4.5.3",
@@ -1768,7 +1770,6 @@
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-5.0.0.tgz",
       "integrity": "sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -1781,7 +1782,6 @@
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
       "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "argparse": "^2.0.1"
       },
@@ -1800,7 +1800,6 @@
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
       "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "p-locate": "^5.0.0"
       },
@@ -1816,7 +1815,6 @@
       "resolved": "https://registry.npmjs.org/meow/-/meow-10.1.5.tgz",
       "integrity": "sha512-/d+PQ4GKmGvM9Bee/DPa8z3mXs/pkvJE2KEThngVNOqtmljC6K7NMPxtc2JeZYTmpWb9k/TmxjeL18ez3h7vCw==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@types/minimist": "^1.2.2",
         "camelcase-keys": "^7.0.0",
@@ -1843,7 +1841,6 @@
       "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
       "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "p-limit": "^3.0.2"
       },
@@ -1859,7 +1856,6 @@
       "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz",
       "integrity": "sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=12.0"
       },
@@ -1876,7 +1872,6 @@
       "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
       "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -1889,7 +1884,6 @@
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-6.0.0.tgz",
       "integrity": "sha512-X1Fu3dPuk/8ZLsMhEj5f4wFAF0DWoK7qhGJvgaijocXxBmSToKfbFtqbxMO7bVjNA1dmE5huAzjXj/ey86iw9Q==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@types/normalize-package-data": "^2.4.0",
         "normalize-package-data": "^3.0.2",
@@ -1908,7 +1902,6 @@
       "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-8.0.0.tgz",
       "integrity": "sha512-snVCqPczksT0HS2EC+SxUndvSzn6LRCwpfSvLrIfR5BKDQQZMaI6jPRC9dYvYFDRAuFEAnkwww8kBBNE/3VvzQ==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "find-up": "^5.0.0",
         "read-pkg": "^6.0.0",
@@ -1926,7 +1919,6 @@
       "resolved": "https://registry.npmjs.org/redent/-/redent-4.0.0.tgz",
       "integrity": "sha512-tYkDkVVtYkSVhuQ4zBgfvciymHaeuel+zFKXShfDnFP5SyVEP7qo70Rf1jTOTCx3vGNAbnEi/xFkcfQVMIBWag==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "indent-string": "^5.0.0",
         "strip-indent": "^4.0.0"
@@ -1943,7 +1935,6 @@
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
       "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=14"
       },
@@ -1956,7 +1947,6 @@
       "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-4.0.0.tgz",
       "integrity": "sha512-mnVSV2l+Zv6BLpSD/8V87CW/y9EmmbYzGCIavsnsI6/nwn26DwffM/yztm30Z/I2DY9wdS3vXVCMnHDgZaVNoA==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "min-indent": "^1.0.1"
       },
@@ -2113,7 +2103,6 @@
       "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-4.1.1.tgz",
       "integrity": "sha512-jRKj0n0jXWo6kh62nA5TEh3+4igKDXLvzBJcPpiizP7oOolUrYIxmVBG9TOtHYFHoddUk6YvAkGeGoSVTXfQXQ==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -2126,7 +2115,6 @@
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-1.4.0.tgz",
       "integrity": "sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -2139,7 +2127,6 @@
       "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-5.0.1.tgz",
       "integrity": "sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "imurmurhash": "^0.1.4",
         "signal-exit": "^4.0.1"
@@ -2189,7 +2176,6 @@
       "integrity": "sha512-P4YJBPdPSpWTQ1NU4XYdvHvXJJDxM6YwpS0FZHRgP7YFkdVxsWcpWGy/NVqlAA7PcPCnMacXlRm1y2PFZRWL/w==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">= 20"
       }
@@ -2220,7 +2206,6 @@
       "integrity": "sha512-hoYicJZaqISMAI3JfaDr1qMNi48OctWuOih1m80bkYow/ayPw6Jj52tqWJ6GEoFTk1gBqfanSoI1iY99Z5+ekQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@octokit/types": "^14.0.0",
         "universal-user-agent": "^7.0.2"
@@ -2234,8 +2219,7 @@
       "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-25.1.0.tgz",
       "integrity": "sha512-idsIggNXUKkk0+BExUn1dQ92sfysJrje03Q0bv0e+KPLrvyqZF8MnBpFz8UNfYDwB3Ie7Z0TByjWfzxt7vseaA==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@octokit/endpoint/node_modules/@octokit/types": {
       "version": "14.1.0",
@@ -2243,7 +2227,6 @@
       "integrity": "sha512-1y6DgTy8Jomcpu33N+p5w58l6xyt55Ar2I91RPiIA0xCJBXyUAhXCcmZaDWSANiha7R9a6qJJ2CRomGPZ6f46g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@octokit/openapi-types": "^25.1.0"
       }
@@ -2254,7 +2237,6 @@
       "integrity": "sha512-j1nQNU1ZxNFx2ZtKmL4sMrs4egy5h65OMDmSbVyuCzjOcwsHq6EaYjOTGXPQxgfiN8dJ4CriYHk6zF050WEULg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@octokit/request": "^10.0.2",
         "@octokit/types": "^14.0.0",
@@ -2269,8 +2251,7 @@
       "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-25.1.0.tgz",
       "integrity": "sha512-idsIggNXUKkk0+BExUn1dQ92sfysJrje03Q0bv0e+KPLrvyqZF8MnBpFz8UNfYDwB3Ie7Z0TByjWfzxt7vseaA==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@octokit/graphql/node_modules/@octokit/types": {
       "version": "14.1.0",
@@ -2278,7 +2259,6 @@
       "integrity": "sha512-1y6DgTy8Jomcpu33N+p5w58l6xyt55Ar2I91RPiIA0xCJBXyUAhXCcmZaDWSANiha7R9a6qJJ2CRomGPZ6f46g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@octokit/openapi-types": "^25.1.0"
       }
@@ -2288,8 +2268,7 @@
       "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-26.0.0.tgz",
       "integrity": "sha512-7AtcfKtpo77j7Ts73b4OWhOZHTKo/gGY8bB3bNBQz4H+GRSWqx2yvj8TXRsbdTE0eRmYmXOEY66jM7mJ7LzfsA==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@octokit/plugin-paginate-rest": {
       "version": "2.21.3",
@@ -2358,7 +2337,6 @@
       "integrity": "sha512-V6jhKokg35vk098iBqp2FBKunk3kMTXlmq+PtbV9Gl3TfskWlebSofU9uunVKhUN7xl+0+i5vt0TGTG8/p/7HA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@octokit/endpoint": "^11.0.0",
         "@octokit/request-error": "^7.0.0",
@@ -2376,7 +2354,6 @@
       "integrity": "sha512-KRA7VTGdVyJlh0cP5Tf94hTiYVVqmt2f3I6mnimmaVz4UG3gQV/k4mDJlJv3X67iX6rmN7gSHCF8ssqeMnmhZg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@octokit/types": "^14.0.0"
       },
@@ -2389,8 +2366,7 @@
       "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-25.1.0.tgz",
       "integrity": "sha512-idsIggNXUKkk0+BExUn1dQ92sfysJrje03Q0bv0e+KPLrvyqZF8MnBpFz8UNfYDwB3Ie7Z0TByjWfzxt7vseaA==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@octokit/request-error/node_modules/@octokit/types": {
       "version": "14.1.0",
@@ -2398,7 +2374,6 @@
       "integrity": "sha512-1y6DgTy8Jomcpu33N+p5w58l6xyt55Ar2I91RPiIA0xCJBXyUAhXCcmZaDWSANiha7R9a6qJJ2CRomGPZ6f46g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@octokit/openapi-types": "^25.1.0"
       }
@@ -2408,8 +2383,7 @@
       "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-25.1.0.tgz",
       "integrity": "sha512-idsIggNXUKkk0+BExUn1dQ92sfysJrje03Q0bv0e+KPLrvyqZF8MnBpFz8UNfYDwB3Ie7Z0TByjWfzxt7vseaA==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@octokit/request/node_modules/@octokit/types": {
       "version": "14.1.0",
@@ -2417,7 +2391,6 @@
       "integrity": "sha512-1y6DgTy8Jomcpu33N+p5w58l6xyt55Ar2I91RPiIA0xCJBXyUAhXCcmZaDWSANiha7R9a6qJJ2CRomGPZ6f46g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@octokit/openapi-types": "^25.1.0"
       }
@@ -2622,7 +2595,6 @@
       "integrity": "sha512-8o6yDfmoGJUIeR9OfYU0/TUJTnMPG2r68+1yEdUeG2Fdqpj8Qetg0ziKIgcBm0RW/j29H41WP37CYCEhp6GoHQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@octokit/openapi-types": "^26.0.0"
       }
@@ -3781,8 +3753,7 @@
       "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-4.0.0.tgz",
       "integrity": "sha512-q6tR3RPqIB1pMiTRMFcZwuG5T8vwp+vUvEG0vuI6B+Rikh5BfPp2fQ82c925FOs+b0lcFQ8CFrL+KbilfZFhOQ==",
       "dev": true,
-      "license": "Apache-2.0",
-      "peer": true
+      "license": "Apache-2.0"
     },
     "node_modules/bl": {
       "version": "4.1.0",
@@ -3836,6 +3807,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001640",
         "electron-to-chromium": "^1.4.820",
@@ -4204,6 +4176,24 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
+    "node_modules/cross-env": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-10.1.0.tgz",
+      "integrity": "sha512-GsYosgnACZTADcmEyJctkJIoqAhHjttw7RsFrVoJNXbsWWqaq6Ym+7kZjq6mS45O0jij6vtiReppKQEtqWy6Dw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@epic-web/invariant": "^1.0.0",
+        "cross-spawn": "^7.0.6"
+      },
+      "bin": {
+        "cross-env": "dist/bin/cross-env.js",
+        "cross-env-shell": "dist/bin/cross-env-shell.js"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -4810,8 +4800,7 @@
           "url": "https://opencollective.com/fastify"
         }
       ],
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
@@ -5391,7 +5380,6 @@
       "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-4.0.0.tgz",
       "integrity": "sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -7248,6 +7236,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -7326,6 +7315,7 @@
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.1.tgz",
       "integrity": "sha512-b4dlw/9V8A71rLIDsSwVmak9z2DuBUB7CA1/wSdelNEzqsjoSPeADTWNO09lpH49Diy3/JIZ2bSPB1dI3LJCHg==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -7704,7 +7694,6 @@
       "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
       "deprecated": "Rimraf versions prior to v4 are no longer supported",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "glob": "^7.1.3"
       },
@@ -7830,6 +7819,7 @@
       "integrity": "sha512-t+YPtOQHpGW1QWsh1CHQ5cPIr9lbbGZLZnbihP/D/qZj/yuV68m8qarcV17nvkOX81BCrvzAlq2klCQFZghyTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "chokidar": "^4.0.0",
         "immutable": "^5.0.2",
@@ -8160,8 +8150,7 @@
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz",
       "integrity": "sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "node_modules/stylelint": {
       "version": "16.7.0",
@@ -8500,6 +8489,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -8648,8 +8638,7 @@
       "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-7.0.3.tgz",
       "integrity": "sha512-TmnEAEAsBJVZM/AADELsK76llnwcf9vMKuPz8JflO1frO8Lchitr0fNaN9d+Ap0BjKtqWqd/J17qeDnXh8CL2A==",
       "dev": true,
-      "license": "ISC",
-      "peer": true
+      "license": "ISC"
     },
     "node_modules/universalify": {
       "version": "2.0.1",
@@ -8830,6 +8819,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -9178,21 +9168,6 @@
       "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
       "dev": true
     },
-    "node_modules/yaml": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz",
-      "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==",
-      "dev": true,
-      "license": "ISC",
-      "optional": true,
-      "peer": true,
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14.6"
-      }
-    },
     "node_modules/yargs": {
       "version": "17.7.2",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
diff --git a/package.json b/package.json
index e1ec547e1a..4dd53f35c0 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
     "init": "mate-scripts init",
     "start": "mate-scripts start",
     "style-format": "npx stylelint 'src/**/*.scss' --fix --allow-empty-input",
-    "format": "prettier --ignore-path .prettierignore --write './src/**/*.{html,css,scss}'",
+    "format": "prettier --ignore-path .prettierignore --write ./*.html css/**/*.css styles/**/*.scss",
     "lint": "npm run style-format && npm run format && mate-scripts lint",
     "test:only": "mate-scripts test",
     "build": "mate-scripts build",
@@ -23,8 +23,9 @@
     "@linthtml/linthtml": "^0.9.6",
     "@mate-academy/bemlint": "latest",
     "@mate-academy/linthtml-config": "latest",
-    "@mate-academy/scripts": "^2.1.2",
+    "@mate-academy/scripts": "^2.1.3",
     "@mate-academy/stylelint-config": "latest",
+    "cross-env": "^10.1.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "prettier": "^3.3.2",
diff --git a/src/fonts/Roboto-Regular-webfont.woff b/src/fonts/Roboto-Regular-webfont.woff
deleted file mode 100755
index 8aa07d7310..0000000000
Binary files a/src/fonts/Roboto-Regular-webfont.woff and /dev/null differ
diff --git a/src/images/cross.svg b/src/images/cross.svg
deleted file mode 100644
index 08f1f27cea..0000000000
--- a/src/images/cross.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M20.5923 3.55619C21.1856 2.96288 21.1856 2.00093 20.5923 1.40762C19.999 0.814306 19.037 0.814306 18.4437 1.40762L10.9999 8.85143L3.55611 1.40762C2.9628 0.814305 2.00085 0.814306 1.40754 1.40762C0.814226 2.00093 0.814226 2.96288 1.40754 3.55619L8.85135 11L1.40754 18.4438C0.814225 19.0371 0.814226 19.9991 1.40754 20.5924C2.00085 21.1857 2.9628 21.1857 3.55611 20.5924L10.9999 13.1486L18.4437 20.5924C19.037 21.1857 19.999 21.1857 20.5923 20.5924C21.1856 19.9991 21.1856 19.0371 20.5923 18.4438L13.1485 11L20.5923 3.55619Z" fill="white"/>
-</svg>
diff --git a/src/images/crown.svg b/src/images/crown.svg
deleted file mode 100644
index 962d90e9ca..0000000000
--- a/src/images/crown.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="20" height="13" viewBox="0 0 20 13" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9.99996 3.69335L0.356822 9.67337L0 9.68518L3.06273 0.00012207L5.13652 0.28737L3.33903 5.68315L9.8777 1.8054H9.99996H10.1222L12.1553 3.0111L11.4422 4.55334L9.99996 3.69335ZM10.0647 13.0002L9.84945 12.9999L6.5883 6.34887L8.33968 5.30703L9.98037 8.78887L11.9235 4.84353L11.9222 4.84265L12.6544 3.30719L16.661 5.68315L14.8635 0.28737L16.9374 0.00012207L20 9.68518L19.6433 9.67337L13.6381 5.91607L10.0647 13.0002Z" fill="#00AAEF"/>
-</svg>
diff --git a/src/images/favicon.png b/src/images/favicon.png
deleted file mode 100644
index 0e04c361e1..0000000000
Binary files a/src/images/favicon.png and /dev/null differ
diff --git a/src/images/logo.png b/src/images/logo.png
deleted file mode 100644
index 9b6a4dd7d4..0000000000
Binary files a/src/images/logo.png and /dev/null differ
diff --git a/src/images/menu.svg b/src/images/menu.svg
deleted file mode 100644
index 5d6b5a0b38..0000000000
--- a/src/images/menu.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 14.6667C0 15.403 0.596954 16 1.33333 16H22.6667C23.403 16 24 15.403 24 14.6667C24 13.9303 23.403 13.3333 22.6667 13.3333H1.33333C0.596954 13.3333 0 13.9303 0 14.6667ZM0 8C0 8.73638 0.596954 9.33333 1.33333 9.33333H22.6667C23.403 9.33333 24 8.73638 24 8C24 7.26362 23.403 6.66667 22.6667 6.66667H1.33333C0.596954 6.66667 0 7.26362 0 8ZM1.33333 0C0.596954 0 0 0.596954 0 1.33333C0 2.06971 0.596954 2.66667 1.33333 2.66667H22.6667C23.403 2.66667 24 2.06971 24 1.33333C24 0.596954 23.403 0 22.6667 0H1.33333Z" fill="white"/>
-</svg>
diff --git a/src/images/menu_hover.svg b/src/images/menu_hover.svg
deleted file mode 100644
index 39263b75bc..0000000000
--- a/src/images/menu_hover.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 14.6667C0 15.403 0.596954 16 1.33333 16H10.6667C11.403 16 12 15.403 12 14.6667C12 13.9303 11.403 13.3333 10.6667 13.3333H1.33333C0.596954 13.3333 0 13.9303 0 14.6667ZM0 8C0 8.73638 0.596954 9.33333 1.33333 9.33333H22.6667C23.403 9.33333 24 8.73638 24 8C24 7.26362 23.403 6.66667 22.6667 6.66667H1.33333C0.596954 6.66667 0 7.26362 0 8ZM1.33334 0C0.596956 0 0 0.596954 0 1.33333C0 2.06971 0.596954 2.66667 1.33333 2.66667H16C16.7364 2.66667 17.3333 2.06971 17.3333 1.33333C17.3333 0.596954 16.7364 0 16 0H1.33334Z" fill="white"/>
-</svg>
diff --git a/src/images/phone.svg b/src/images/phone.svg
deleted file mode 100644
index 0c2c52cb54..0000000000
--- a/src/images/phone.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M22.68 16.5067C21.04 16.5067 19.4533 16.24 17.9733 15.76C17.5067 15.6 16.9867 15.72 16.6267 16.08L14.5333 18.7067C10.76 16.9067 7.22667 13.5067 5.34667 9.6L7.94667 7.38667C8.30667 7.01333 8.41333 6.49333 8.26667 6.02667C7.77333 4.54667 7.52 2.96 7.52 1.32C7.52 0.6 6.92 0 6.2 0H1.58667C0.866667 0 0 0.32 0 1.32C0 13.7067 10.3067 24 22.68 24C23.6267 24 24 23.16 24 22.4267V17.8267C24 17.1067 23.4 16.5067 22.68 16.5067Z" fill="white"/>
-</svg>
diff --git a/src/images/photos/1.jpg b/src/images/photos/1.jpg
deleted file mode 100644
index f796f55605..0000000000
Binary files a/src/images/photos/1.jpg and /dev/null differ
diff --git a/src/images/photos/2.jpg b/src/images/photos/2.jpg
deleted file mode 100644
index d9053b6a20..0000000000
Binary files a/src/images/photos/2.jpg and /dev/null differ
diff --git a/src/images/photos/3.jpg b/src/images/photos/3.jpg
deleted file mode 100644
index 5e40be94d2..0000000000
Binary files a/src/images/photos/3.jpg and /dev/null differ
diff --git a/src/images/photos/4.jpg b/src/images/photos/4.jpg
deleted file mode 100644
index de64313343..0000000000
Binary files a/src/images/photos/4.jpg and /dev/null differ
diff --git a/src/images/photos/5.jpg b/src/images/photos/5.jpg
deleted file mode 100644
index aad06bff54..0000000000
Binary files a/src/images/photos/5.jpg and /dev/null differ
diff --git a/src/images/photos/6.jpg b/src/images/photos/6.jpg
deleted file mode 100644
index 104ff18faa..0000000000
Binary files a/src/images/photos/6.jpg and /dev/null differ
diff --git a/src/scripts/lib/.gitkeep b/src/scripts/lib/.gitkeep
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/scripts/main.js b/src/scripts/main.js
deleted file mode 100644
index ad9a93a7c1..0000000000
--- a/src/scripts/main.js
+++ /dev/null
@@ -1 +0,0 @@
-'use strict';
diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss
deleted file mode 100644
index 45cdd54008..0000000000
--- a/src/styles/_fonts.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@font-face {
-  font-family: Roboto, Arial, Helvetica, sans-serif;
-  src: url('../fonts/Roboto-Regular-webfont.woff') format('woff');
-  font-weight: normal;
-  font-style: normal;
-}
diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss
deleted file mode 100644
index 1837eb46e2..0000000000
--- a/src/styles/_typography.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-h1 {
-  @extend %h1;
-}
diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss
deleted file mode 100644
index 3280c3fe10..0000000000
--- a/src/styles/_utils.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import 'utils/vars';
-@import 'utils/mixins';
-@import 'utils/extends';
diff --git a/src/styles/main.scss b/src/styles/main.scss
deleted file mode 100644
index fb9195d128..0000000000
--- a/src/styles/main.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@import 'utils';
-@import 'fonts';
-@import 'typography';
-
-body {
-  background: $c-gray;
-}
diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss
deleted file mode 100644
index d7201e7b3e..0000000000
--- a/src/styles/utils/_extends.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-%h1 {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-}
diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss
deleted file mode 100644
index 80c79780dc..0000000000
--- a/src/styles/utils/_mixins.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@mixin hover($_property, $_toValue) {
-  transition: #{$_property} 0.3s;
-  &:hover {
-    #{$_property}: $_toValue;
-  }
-}
diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss
deleted file mode 100644
index aeb006ffbb..0000000000
--- a/src/styles/utils/_vars.scss
+++ /dev/null
@@ -1 +0,0 @@
-$c-gray: #eee;
diff --git a/styles/blocks/address.scss b/styles/blocks/address.scss
new file mode 100644
index 0000000000..b451be1dfb
--- /dev/null
+++ b/styles/blocks/address.scss
@@ -0,0 +1,40 @@
+.address {
+  color: #ffffff;
+
+  &__label {
+    font-family: Poppins;
+    font-weight: 400;
+    font-style: Regular;
+    font-size: 14px;
+    line-height: 140%;
+    letter-spacing: 0px;
+    margin-bottom: 8px;
+  }
+
+  &__value {
+    font-family: Poppins;
+    font-weight: 500;
+    font-style: Medium;
+    font-size: 16px;
+    line-height: 140%;
+    letter-spacing: 0px;
+    margin-bottom: 24px;
+
+    &:hover {
+      color: #ffcc00;
+    }
+  }
+
+  &__spacing {
+    margin-bottom: 120px;
+  }
+
+  &__nap-link {
+    color: #ffffff;
+    text-decoration: none;
+
+    &:hover {
+      color: #ffcc00;
+    }
+  }
+}
diff --git a/styles/blocks/bike.scss b/styles/blocks/bike.scss
new file mode 100644
index 0000000000..2cad880c65
--- /dev/null
+++ b/styles/blocks/bike.scss
@@ -0,0 +1,54 @@
+@use '../utils/mixins.scss' as *;
+
+.bike {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+
+  &__photo {
+    max-width: 100%;
+    height: auto;
+    margin-bottom: 32px;
+
+    &:hover {
+      transform: scale(1.05);
+      transition: transform 0.3s ease-in-out;
+      cursor: pointer;
+    }
+  }
+
+  &__type {
+    font-family: Poppins;
+    font-weight: 700;
+    font-style: Bold;
+    font-size: 24px;
+    line-height: 140%;
+    letter-spacing: 0px;
+    margin-bottom: 8px;
+  }
+
+  &__description {
+    font-family: Poppins;
+    font-weight: 400;
+    font-style: Regular;
+    font-size: 16px;
+    line-height: 140%;
+    letter-spacing: 0px;
+    margin-bottom: 16px;
+  }
+
+  &__price {
+    font-family: Poppins;
+    font-weight: 700;
+    font-style: Bold;
+    font-size: 24px;
+    line-height: 140%;
+    letter-spacing: 0px;
+    padding-bottom: 40px;
+    margin-top: auto;
+
+    @include Ipad-744() {
+      padding-bottom: 48px;
+    }
+  }
+}
diff --git a/styles/blocks/burger.scss b/styles/blocks/burger.scss
new file mode 100644
index 0000000000..a993fa2f15
--- /dev/null
+++ b/styles/blocks/burger.scss
@@ -0,0 +1,55 @@
+@use '../utils/mixins.scss' as *;
+
+.burger {
+  &::before {
+    content: '';
+    background-image: url('../images/menu-vector.svg');
+    background-size: cover;
+    display: inline-block;
+    width: 18px;
+    height: 12px;
+
+    @include Ipad-744() {
+      width: 24px;
+      height: 16px;
+    }
+
+    @include Desktop-1260() {
+      width: 24px;
+      height: 16px;
+    }
+  }
+
+  &::after {
+    display: none;
+    content: '';
+    background-image: url('../images/menu-vector--hover.svg');
+    background-size: cover;
+    width: 18px;
+    height: 12px;
+
+    @include Ipad-744() {
+      width: 24px;
+      height: 24px;
+    }
+
+    @include Desktop-1260() {
+      width: 24px;
+      height: 16px;
+    }
+  }
+
+  &:hover {
+    &::before {
+      display: none;
+    }
+
+    &::after {
+      display: inline-block;
+    }
+  }
+
+  &__label {
+    @include visually-hidden();
+  }
+}
diff --git a/styles/blocks/button.scss b/styles/blocks/button.scss
new file mode 100644
index 0000000000..6e7b81918d
--- /dev/null
+++ b/styles/blocks/button.scss
@@ -0,0 +1,59 @@
+@use '../utils/mixins.scss' as *;
+
+.button {
+  border-radius: 40px;
+  background-color: white;
+  color: #1d1d1d;
+  text-decoration: none;
+  height: 56px;
+  font-family: Poppins;
+  font-weight: 700;
+  font-style: Bold;
+  font-size: 16px;
+  line-height: 56px;
+  letter-spacing: 0px;
+  text-align: center;
+  display: block;
+
+  &--primary {
+    font-family: Poppins;
+    font-weight: 700;
+    font-style: Bold;
+    font-size: 16px;
+    line-height: 27px;
+    letter-spacing: 0px;
+    text-align: center;
+    color: #1d1d1d;
+    margin-bottom: 28px;
+
+    &:hover {
+      background-color: #ffffff;
+      box-shadow: 1px 4px 16px 0px #e8e8f066;
+    }
+
+    @include Ipad-744() {
+      margin-bottom: 120px;
+    }
+
+    @include Desktop-1260() {
+      margin-bottom: 180px;
+    }
+  }
+
+  &__explore {
+    margin-bottom: 80px;
+
+    @include Ipad-744() {
+      margin: 0 102px 120px;
+    }
+
+    @include Desktop-1260() {
+      margin: 0 348px 180px;
+    }
+
+    &:hover {
+      background-color: #ffffff;
+      box-shadow: 1px 4px 16px 0px #e8e8f066;
+    }
+  }
+}
diff --git a/styles/blocks/contact.scss b/styles/blocks/contact.scss
new file mode 100644
index 0000000000..07b488d953
--- /dev/null
+++ b/styles/blocks/contact.scss
@@ -0,0 +1,31 @@
+@use '../utils/mixins.scss' as *;
+
+.contact {
+  padding: 0 0;
+
+  @include grid();
+
+  &__form {
+    grid-column: span 2;
+
+    @include Ipad-744() {
+      grid-column: span 3;
+    }
+
+    @include Desktop-1260() {
+      grid-column: 1 / 6;
+    }
+  }
+
+  &__address {
+    grid-column: span 2;
+
+    @include Ipad-744() {
+      grid-column: span 3;
+    }
+
+    @include Desktop-1260() {
+      grid-column: -6 / -1;
+    }
+  }
+}
diff --git a/styles/blocks/container.scss b/styles/blocks/container.scss
new file mode 100644
index 0000000000..3cf9fafefc
--- /dev/null
+++ b/styles/blocks/container.scss
@@ -0,0 +1,17 @@
+@use '../utils/mixins.scss' as *;
+
+.container {
+  max-width: 320px;
+  margin: 0 auto;
+  padding: 0 20px;
+
+  @include Ipad-744() {
+    padding: 0 72px;
+    max-width: 644px;
+  }
+
+  @include Desktop-1260() {
+    max-width: 1020px;
+    padding: 0 120px;
+  }
+}
diff --git a/styles/blocks/details.scss b/styles/blocks/details.scss
new file mode 100644
index 0000000000..9399d9b8da
--- /dev/null
+++ b/styles/blocks/details.scss
@@ -0,0 +1,26 @@
+@use '../utils/mixins.scss' as *;
+
+.details {
+  &__paragraph {
+    font-family: Poppins;
+    font-weight: 400;
+    font-style: Regular;
+    font-size: 16px;
+    line-height: 140%;
+    letter-spacing: 0px;
+    margin: 0 0 40px;
+
+    @include Ipad-744() {
+      margin: 0 0 48px;
+    }
+
+    @include Desktop-1260() {
+      margin: 0 0 48px;
+      width: 672px;
+    }
+  }
+  &__content {
+    @include Desktop-1260() {
+    }
+  }
+}
diff --git a/styles/blocks/footer.scss b/styles/blocks/footer.scss
new file mode 100644
index 0000000000..f077b557b8
--- /dev/null
+++ b/styles/blocks/footer.scss
@@ -0,0 +1,22 @@
+@use '../utils/mixins.scss' as *;
+
+.footer {
+  height: 200px;
+  background-image: url('../images/footer-image--desktop.jpg');
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-position-x: 83%;
+  box-sizing: border-box;
+
+  @include Ipad-744() {
+    height: 480px;
+  }
+
+  @include Desktop-1260() {
+    height: 555px;
+  }
+}
diff --git a/styles/blocks/form.scss b/styles/blocks/form.scss
new file mode 100644
index 0000000000..26993e30d6
--- /dev/null
+++ b/styles/blocks/form.scss
@@ -0,0 +1,59 @@
+@use '../utils/mixins.scss' as *;
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  &__input {
+    border-radius: 40px;
+    background-color: #f8f8fa;
+    height: 48px;
+    line-height: 48px;
+    border: 0;
+    width: 100%;
+    padding-left: 16px;
+    box-sizing: border-box;
+
+    &::placeholder {
+      font-family: Poppins;
+      font-weight: 400;
+      font-style: Regular;
+      font-size: 14px;
+      line-height: 20px;
+      letter-spacing: 0px;
+      color: #7e7e83;
+    }
+    &:hover::placeholder {
+      color: #292929;
+    }
+  }
+
+  &__textarea {
+    border-radius: 16px;
+    background-color: #f8f8fa;
+    border: 0;
+    width: 100%;
+    box-sizing: border-box;
+    padding-left: 16px;
+    line-height: 48px;
+    height: 148px;
+
+    &::placeholder {
+      font-family: Poppins;
+      font-weight: 400;
+      font-style: Regular;
+      font-size: 14px;
+      color: #7e7e83;
+    }
+    &:hover::placeholder {
+      color: #292929;
+    }
+  }
+
+  &__label {
+    &:not(:focus):not(:active) {
+      @include visually-hidden();
+    }
+  }
+}
diff --git a/styles/blocks/header.scss b/styles/blocks/header.scss
new file mode 100644
index 0000000000..6ffdf10d1e
--- /dev/null
+++ b/styles/blocks/header.scss
@@ -0,0 +1,39 @@
+@use '../utils/mixins.scss' as *;
+
+//   background-position-x: 87%;
+
+.header {
+  background-image: url('../images/header-320.jpg');
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  background-color: black;
+  width: 100%;
+
+  min-height: 100vh;
+  box-sizing: border-box;
+  padding: 0 clamp(20px, 5vw, 80px) 88px;
+  display: flex;
+  flex-direction: column;
+
+  @include Ipad-744() {
+    background-image: url('../images/header-744.jpg');
+    padding: 0 clamp(72px, 5vw, 100px) 130px;
+  }
+
+  @include Desktop-1260() {
+    background-image: url('../images/header-1260.jpg');
+    padding: 0 clamp(120px, 5vw, 200px) 203px;
+  }
+
+  &__navigation {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-top: 24px;
+  }
+
+  &__title {
+    margin-top: auto;
+  }
+}
diff --git a/styles/blocks/images.scss b/styles/blocks/images.scss
new file mode 100644
index 0000000000..4efe4cd32e
--- /dev/null
+++ b/styles/blocks/images.scss
@@ -0,0 +1,50 @@
+@use '../utils/mixins.scss' as *;
+
+.images {
+  display: grid;
+  gap: 16px;
+  padding: 0;
+  box-sizing: border-box;
+  margin-bottom: 16px;
+
+  @include grid();
+
+  @include Ipad-744() {
+  }
+  @include Desktop-1260() {
+  }
+
+  &__item {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.3s ease-in-out;
+
+    &:hover {
+      transform: scale(1.05);
+      cursor: pointer;
+    }
+
+    &--small {
+      grid-column: span 1;
+
+      @include Ipad-744() {
+        grid-column: span 2;
+      }
+      @include Desktop-1260() {
+        grid-column: span 4;
+      }
+    }
+
+    &--big {
+      grid-column: span 1;
+
+      @include Ipad-744() {
+        grid-column: span 4;
+      }
+      @include Desktop-1260() {
+        grid-column: span 8;
+      }
+    }
+  }
+}
diff --git a/styles/blocks/links.scss b/styles/blocks/links.scss
new file mode 100644
index 0000000000..0642602127
--- /dev/null
+++ b/styles/blocks/links.scss
@@ -0,0 +1,28 @@
+.links {
+  margin-bottom: 8px;
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+  }
+
+  &__link {
+    display: inline-block;
+    font-family: Poppins;
+    font-weight: 600;
+    font-style: SemiBold;
+    font-size: 22px;
+    line-height: 22px;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    border-bottom: 1px solid transparent;
+    color: #1d1d1d;
+    text-decoration: none;
+    padding-bottom: 8px;
+
+    &:hover {
+      border-bottom: 1px solid #1d1d1d;
+    }
+  }
+}
diff --git a/styles/blocks/main.scss b/styles/blocks/main.scss
new file mode 100644
index 0000000000..2133e4972b
--- /dev/null
+++ b/styles/blocks/main.scss
@@ -0,0 +1,48 @@
+@use '../utils/mixins.scss' as *;
+
+.main {
+  padding-top: 60px;
+  font-family: Poppins;
+  font-weight: 500;
+  font-style: Medium;
+  font-size: 23px;
+  line-height: 140%;
+  letter-spacing: 0px;
+  background-color: #1d1d1d;
+  color: white;
+
+  @include Ipad-744() {
+    padding-top: 120px;
+  }
+  @include Desktop-1260() {
+    padding-top: 120px;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 32px;
+    margin: 0 clamp(20px, 8vw, 80px) 92px;
+
+    @include Ipad-744() {
+      flex-direction: row;
+      justify-content: space-between;
+      gap: 60px;
+      margin: 0 clamp(72px, 8vw, 160px) 132px;
+    }
+
+    @include Desktop-1260() {
+      flex-direction: row;
+      justify-content: space-between;
+      gap: 88px;
+      margin: 0 clamp(120px, 10vw, 200px) 164px;
+    }
+  }
+
+  &__paragraph {
+    font-size: 23px;
+    line-height: 140%;
+    flex: 2;
+  }
+}
diff --git a/styles/blocks/menu.scss b/styles/blocks/menu.scss
new file mode 100644
index 0000000000..c2ee340b49
--- /dev/null
+++ b/styles/blocks/menu.scss
@@ -0,0 +1,91 @@
+@use '../utils/mixins.scss' as *;
+
+.menu {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  transform: translateX(-100%);
+  transition: transform 0.3s ease-in-out;
+  background-color: #c2c2c2;
+  box-sizing: border-box;
+  overflow-y: auto;
+  padding: 0 clamp(20px, 5vw, 80px) 88px;
+
+  display: grid;
+  justify-content: center;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 12px;
+
+  &:target {
+    transform: translateX(0);
+  }
+
+  &__contact-box,
+  &__navigation,
+  &__links,
+  &__paragraph {
+    grid-column: span 2;
+  }
+
+  &__contact-box {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &__paragraph {
+    white-space: nowrap;
+    font-family: Poppins;
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 27px;
+    text-transform: uppercase;
+    color: #1d1d1d;
+  }
+
+  &__call-link {
+    font-family: Poppins;
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 24px;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    color: #1d1d1d;
+    text-decoration: none;
+    border-bottom: 1px solid transparent;
+
+    &:hover {
+      border-bottom: 1px solid #1d1d1d;
+    }
+  }
+
+  @include Ipad-744() {
+    grid-template-columns: repeat(6, 1fr);
+    row-gap: 16px;
+
+    &__contact-box,
+    &__navigation,
+    &__links,
+    &__paragraph {
+      grid-column: span 6;
+    }
+  }
+
+  @include Desktop-1260() {
+    grid-template-columns: repeat(12, 1fr);
+    row-gap: 20px;
+
+    &__contact-box,
+    &__navigation,
+    &__links,
+    &__paragraph {
+      grid-column: span 12;
+    }
+  }
+}
+
+.page__body--with-menu {
+  overflow: hidden;
+}
diff --git a/styles/blocks/navigation.scss b/styles/blocks/navigation.scss
new file mode 100644
index 0000000000..89ca7f036b
--- /dev/null
+++ b/styles/blocks/navigation.scss
@@ -0,0 +1,37 @@
+@use '../utils/mixins.scss' as *;
+
+.navigation {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  &__icons {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+  }
+
+  &__close-icon {
+    height: 16px;
+
+    @include Ipad-744() {
+      height: 21px;
+    }
+
+    @include Desktop-1260() {
+      height: 21px;
+    }
+  }
+
+  &__logo {
+    height: 38px;
+
+    @include Ipad-744() {
+      height: 56px;
+    }
+
+    @include Desktop-1260() {
+      height: 56px;
+    }
+  }
+}
diff --git a/styles/blocks/phone.scss b/styles/blocks/phone.scss
new file mode 100644
index 0000000000..bdc1800ebd
--- /dev/null
+++ b/styles/blocks/phone.scss
@@ -0,0 +1,50 @@
+@use '../utils/mixins.scss' as *;
+
+.phone {
+  &__label {
+    font-family: Poppins;
+    font-weight: 700;
+    font-style: Bold;
+    font-size: 12px;
+    line-height: 16px;
+    letter-spacing: 2px;
+    text-align: right;
+    vertical-align: middle;
+    text-transform: uppercase;
+    text-decoration: none;
+    white-space: nowrap;
+
+    color: #ffffff;
+    position: absolute;
+    transform: translateX(calc(-100% - 20px)) translateY(5px);
+    transition: color 0.3s ease;
+  }
+
+  &__link {
+    color: #ffffff;
+    text-decoration: none;
+
+    &:hover {
+      color: #ffcc00;
+    }
+  }
+
+  &__icon {
+    height: 18px;
+    width: 18px;
+
+    @include Ipad-744() {
+      width: 24px;
+      height: 24px;
+    }
+
+    @include Desktop-1260() {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  &:not(:hover) &__label {
+    @include visually-hidden();
+  }
+}
diff --git a/styles/blocks/section.scss b/styles/blocks/section.scss
new file mode 100644
index 0000000000..19c36221ed
--- /dev/null
+++ b/styles/blocks/section.scss
@@ -0,0 +1,18 @@
+@use '../utils/mixins.scss' as *;
+
+.compare-bikes__row {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  padding: 0 0 52px;
+
+  @include Ipad-744() {
+    padding: 0 104px 80px;
+  }
+
+  @include Desktop-1260() {
+    flex-direction: row;
+    gap: 24px;
+    padding: 0 0 104px;
+  }
+}
diff --git a/styles/blocks/title.scss b/styles/blocks/title.scss
new file mode 100644
index 0000000000..afc95290f5
--- /dev/null
+++ b/styles/blocks/title.scss
@@ -0,0 +1,92 @@
+@use '../utils/mixins.scss' as *;
+
+.title {
+  font-family: Poppins;
+  font-weight: 700;
+  font-style: Bold;
+  font-size: 36px;
+  line-height: 100%;
+  letter-spacing: -1.5px;
+  color: white;
+  text-align: center;
+
+  @include Ipad-744() {
+    font-size: 64px;
+    line-height: 100%;
+    letter-spacing: -1.5px;
+    vertical-align: middle;
+  }
+
+  @include Desktop-1260() {
+    font-size: 80px;
+    line-height: 100%;
+    letter-spacing: -1.5px;
+    vertical-align: middle;
+  }
+
+  &--secondary {
+    font-family: Poppins;
+    font-weight: 500;
+    font-style: Medium;
+    font-size: 32px;
+    line-height: 100%;
+    letter-spacing: -1.5px;
+    color: white;
+    text-align: left;
+
+    @include Ipad-744() {
+      font-size: 48px;
+      line-height: 100%;
+      letter-spacing: -1.5px;
+    }
+
+    @include Desktop-1260() {
+      font-size: 64px;
+      line-height: 100%;
+      letter-spacing: -1.5px;
+    }
+  }
+
+  &--section {
+    font-family: Poppins;
+    font-weight: 500;
+    font-style: Medium;
+    font-size: 32px;
+    line-height: 32px;
+    letter-spacing: -1.5px;
+    text-align: center;
+    text-transform: capitalize;
+    color: white;
+    margin-bottom: 48px;
+
+    @include Ipad-744() {
+      font-size: 48px;
+      line-height: 100%;
+      letter-spacing: -1.5px;
+    }
+
+    @include Desktop-1260() {
+      font-size: 64px;
+      line-height: 100%;
+      letter-spacing: -1.5px;
+    }
+  }
+
+  &--tertiary {
+    font-family: Poppins;
+    font-weight: 700;
+    font-style: Bold;
+    font-size: 24px;
+    line-height: 140%;
+    letter-spacing: 0px;
+    text-align: left;
+    margin-bottom: 8px;
+    margin: 0 0 8px;
+
+    @include Ipad-744() {
+    }
+
+    @include Desktop-1260() {
+    }
+  }
+}
diff --git a/styles/main.scss b/styles/main.scss
new file mode 100644
index 0000000000..d5e7c7035f
--- /dev/null
+++ b/styles/main.scss
@@ -0,0 +1,24 @@
+@import './utils/reset';
+
+html {
+  scroll-behavior: smooth;
+}
+
+@import './blocks/title';
+@import './blocks/header';
+@import './blocks/main';
+@import './blocks/bike';
+@import './blocks/details';
+@import './blocks/images';
+@import './blocks/button';
+@import './blocks/form';
+@import './blocks/section';
+@import './blocks/address';
+@import './blocks/footer';
+@import './blocks/navigation';
+@import './blocks/menu';
+@import './blocks/links';
+@import './blocks/contact';
+@import './blocks/burger';
+@import './blocks/phone';
+@import './blocks/container';
diff --git a/styles/utils/mixins.scss b/styles/utils/mixins.scss
new file mode 100644
index 0000000000..cb7598aa19
--- /dev/null
+++ b/styles/utils/mixins.scss
@@ -0,0 +1,38 @@
+@mixin Ipad-744() {
+  @media (min-width: 744px) {
+    @content;
+  }
+}
+
+@mixin Desktop-1260() {
+  @media (min-width: 1260px) {
+    @content;
+  }
+}
+
+@mixin grid() {
+  display: grid;
+  justify-content: center;
+  grid-template-columns: repeat(2, minmax(50px, 1fr));
+  gap: 20px;
+
+  @include Ipad-744() {
+    grid-template-columns: repeat(6, minmax(80px, 1fr));
+    gap: 24px;
+  }
+
+  @include Desktop-1260() {
+    grid-template-columns: repeat(12, 1fr);
+    gap: 24px;
+  }
+}
+
+@mixin visually-hidden() {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
diff --git a/styles/utils/reset.scss b/styles/utils/reset.scss
new file mode 100644
index 0000000000..d971da6765
--- /dev/null
+++ b/styles/utils/reset.scss
@@ -0,0 +1,129 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}