diff --git a/components/contact.vue b/components/contact.vue
new file mode 100644
index 0000000..1a93e00
--- /dev/null
+++ b/components/contact.vue
@@ -0,0 +1,123 @@
+<template>
+  <div class="box">
+    <div class="contact">
+      <div class="div">Свяжитесь с нами</div>
+      <p class="team-hawk-so-t-me">
+        <span class="text-wrapper">
+          Чтобы начать сотрудничество или получить больше информации, напишите нам на
+        </span>
+        <span class="span"> team@hawk.so</span>
+        <span class="text-wrapper"> или в телеграм </span>
+        <span class="span"> t.me/hawk-support</span>
+        <span class="text-wrapper">.</span>
+        <br /> <!-- Переносим текст на новую строку -->
+        <span class="text-wrapper">
+          Либо оставьте почту:
+        </span>
+      </p>
+      <div class="bottom-container">
+        <div class="frame">
+          <input class="input-style" type="text" placeholder="dev@yourproduct.ru" />
+        </div>
+        <div class="div-wrapper">
+          <div class="text-wrapper-3">Получить информацию</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.box {
+  width: 560px;
+  display: flex;
+  justify-content: center;
+  margin: 20px auto;
+}
+
+.contact {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start; /* Выравнивание по левому краю */
+  text-align: left; /* Выравнивание текста по левому краю */
+  width: 100%; /* Занимает всю ширину родительского блока */
+}
+
+.team-hawk-so-t-me {
+  display: inline; /* Обычное поведение текста */
+  font-family: "Roboto-Regular", Helvetica;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 23px;
+  color: #f2f6ff;
+  margin-bottom: 20px;
+  word-break: break-word; /* Позволяет переносить длинные слова */
+}
+
+.text-wrapper,
+.span {
+  display: inline; /* Устанавливаем inline, чтобы они вели себя как обычный текст */
+}
+
+.text-wrapper {
+  color: #f2f6ff;
+}
+
+.span {
+  color: #379fff;
+}
+
+.div {
+  color: #f2f6ff;
+  font-family: "Roboto-Bold", Helvetica;
+  font-size: 26px;
+  font-weight: 700;
+  margin-bottom: 20px;
+  white-space: nowrap;
+}
+
+.bottom-container {
+  display: flex;
+  justify-content: space-between; /* Размещает элементы на одной строке */
+  width: 100%;
+  margin-top: 10px; /* Небольшой отступ между frame и div-wrapper */
+}
+
+.frame {
+  align-items: center;
+  background-color: #242832; /* Цвет фона для frame */
+  border-radius: 8px;
+  display: flex;
+  margin-right: 10px;
+  gap: 10px;
+  flex: 1; /* Растягивает элемент до максимальной ширины */
+}
+
+.div-wrapper {
+  align-items: center;
+  background-color: #0d75d4; /* Цвет фона для div-wrapper */
+  border-radius: 8px;
+  display: inline-flex;
+  gap: 10px;
+  padding: 10px 12px;
+  flex: 1; /* Растягивает элемент до максимальной ширины */
+}
+
+.input-style {
+  background-color: #242832; /* Цвет фона для input */
+  color: #ffffff4c; /* Цвет текста для input */
+  border: none;
+  border-radius: 8px;
+  padding: 10px 16px;
+  font-size: 16px;
+  flex: 1; /* Занимает все доступное пространство внутри frame */
+}
+
+.text-wrapper-3 {
+  color: #f2f6ff;
+  font-family: "Roboto-Regular", Helvetica;
+  font-size: 16px;
+  font-weight: 400;
+  white-space: nowrap;
+}
+</style>
diff --git a/components/site-header-ru.vue b/components/site-header-ru.vue
new file mode 100644
index 0000000..bad418c
--- /dev/null
+++ b/components/site-header-ru.vue
@@ -0,0 +1,189 @@
+  <template>
+  <div
+    class="site-header"
+    :class="{
+      'site-header--menu-showed': mobileMenuShowed
+    }"
+  >
+    <div class="site-header__inner">
+      <span class="site-header__menu-toggler" @click="toggleMobileMenu">
+        Menu
+      </span>
+
+      <a
+        class="site-header__logo"
+        href="/"
+      >
+        <img
+          src="~/assets/images/hawk-logo.png"
+          alt="Hawk.so logo"
+        >
+        Hawk
+      </a>
+      <div class="site-header__menu">
+        <a href="https://docs.hawk.so/">Документация</a>
+        <button
+        class="download-button"
+        href="/download">Локализованная версия</button>
+<!--        <a href="/pricing">Pricing</a>-->
+      </div>
+
+      <a class="site-header__signin" href="//garage.hawk.so">
+        <icon-sign-in />
+        To Garage
+      </a>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import IconSignIn from '~/assets/svg/sign-in.svg?inline';
+
+export default Vue.extend({
+  components: {
+    IconSignIn,
+  },
+  data() {
+    return {
+      /**
+       * Visibility state of menu that is hidden on mobile devices by default
+       */
+      mobileMenuShowed: false,
+    };
+  },
+  methods: {
+    /**
+     * Shows/Hides the mobile menu
+     */
+    toggleMobileMenu(): void {
+      this.mobileMenuShowed = !this.mobileMenuShowed;
+    },
+  },
+});
+</script>
+
+<style lang="postcss">
+  .site-header {
+    height: 50px;
+    background: var(--color-bg-header);
+    color: var(--color-text-main);
+    font-size: 15px;
+    font-weight: 500;
+
+    @media (--screen-mobile) {
+      height: auto;
+    }
+
+    a {
+      color: inherit;
+      text-decoration: none;
+    }
+
+    &__inner {
+      display: flex;
+      align-items: center;
+      height: 100%;
+      max-width: var(--layout-main-col-width);
+      margin: 0 auto;
+      padding: 0 var(--layout-paddings-horisontal);
+
+      @media (--screen-mobile) {
+        flex-direction: column;
+        align-items: flex-start;
+      }
+    }
+
+    &__logo {
+      display: flex;
+      align-items: center;
+      margin-right: 55px;
+      font-weight: 900;
+      font-size: 15px;
+      color: #FFFFFF !important;
+      letter-spacing: 0.38px;
+      text-align: left;
+
+      @media (--screen-mobile) {
+        margin-right: 0;
+        padding: 15px 0;
+      }
+
+      img {
+        width: 24px;
+        margin-right: 7px;
+      }
+    }
+
+    &__download-button {
+      width: 227px;
+      height: 32px;
+      border-radius: 35px;
+      padding: 1px 13px;
+      gap: 10px;
+      background: linear-gradient(248.21deg, #0075FF 25.68%, #B56BFF 107.97%);
+
+    }
+
+    &__menu {
+      @media (--screen-mobile) {
+        display: none;
+      }
+
+      ^&--menu-showed & {
+        @media (--screen-mobile) {
+          display: block;
+        }
+      }
+
+      a {
+        display: inline-block;
+        margin-right: 30px;
+
+        @media (--screen-mobile) {
+          display: block;
+          padding: 10px 0;
+          margin-right: 0;
+        }
+      }
+
+      &-toggler {
+        display: none;
+
+        position: absolute;
+        right: 10px;
+        height: calc(24px + 15px * 2);
+        align-items: center;
+        padding: 10px;
+
+        @media (--screen-mobile) {
+          display: flex;
+        }
+      }
+    }
+
+    &__signin {
+      display: flex;
+      align-items: center;
+      margin-left: auto;
+
+      @media (--screen-mobile) {
+        display: none;
+        margin-left: 0;
+        padding: 10px 0;
+        margin-bottom: 10px;
+        margin-top: 10px;
+      }
+
+      ^&--menu-showed & {
+        @media (--screen-mobile) {
+          display: flex;
+        }
+      }
+
+      svg {
+        margin-right: 6px;
+      }
+    }
+  }
+</style>
diff --git a/components/site-header.vue b/components/site-header.vue
index 8079a91..43139ac 100644
--- a/components/site-header.vue
+++ b/components/site-header.vue
@@ -1,4 +1,4 @@
-<template>
+  <template>
   <div
     class="site-header"
     :class="{
diff --git a/layouts/default-ru.vue b/layouts/default-ru.vue
new file mode 100644
index 0000000..d6a82ca
--- /dev/null
+++ b/layouts/default-ru.vue
@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <site-header-ru />
+    <Nuxt />
+    <site-footer />
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import SiteFooter from '~/components/site-footer.vue';
+
+export default Vue.extend({
+  components: {
+    SiteFooter,
+  },
+});
+</script>
+
+<style>
+html {
+  font-family: 'Roboto',
+    'Source Sans Pro',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    sans-serif;
+  font-size: 16px;
+  word-spacing: 1px;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  box-sizing: border-box;
+
+  background: var(--color-bg-main);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+}
+</style>
diff --git a/pages/ru.vue b/pages/ru.vue
new file mode 100644
index 0000000..77a7a23
--- /dev/null
+++ b/pages/ru.vue
@@ -0,0 +1,602 @@
+<template>
+  <NuxtLayout name="default-ru">
+    <div class="yard">
+      <div class="landing">
+        <illustration class="landing__illustration" />
+        <div class="landing__content">
+          <div class="landing__content-head">
+            <div class="landing__content-head-left">
+              <h1>
+                Трекер ошибок
+              </h1>
+
+              <div class="description">
+                Хоук улучшает качество продукта.<br/>
+                Он отлавливает ошибки в ПО и помогает их устранить.<br/>
+                Локализованная версия позволяет не зависеть от зарубежных сервисов.<br/>
+              </div>
+              <span>
+                <div>Сервера в России</div>
+                <div>Оплата по счету юр. лица</div>
+                <div>Помощь с интеграцией</div>
+              </span>
+            </div>
+          </div>
+          <div>
+          </div>
+          <div class="landing__content-preview" :style="`transform: translateY(${Math.max(0, 150 - scroll * 0.35)}px)`">
+            <img src="~/assets/images/hawk-desktop.png" alt="Hawk desktop preview">
+          </div>
+        </div>
+        <br/>
+        <Contact/>
+      </div>
+      <div class="section section--with-gradient">
+        <div class="section__content">
+          <h2 class="section__title">
+            Возможности
+          </h2>
+          <features :features="features" />
+        </div>
+      </div>
+
+      <div class="section">
+        <open-source />
+      </div>
+
+      <div class="section">
+        <div class="section__content">
+          <number
+            :value="'100 000 000'"
+            caption="events processed every day"
+          />
+        </div>
+      </div>
+
+      <div class="section section--small">
+        <div class="section__content">
+          <h2 class="section__title">
+            Tested by products
+          </h2>
+          <div class="section__description">
+            Hawk is used by several big well-known products. And by some small and unkown ones.
+          </div>
+          <used-by-table
+            :items="usedBy"
+          />
+        </div>
+      </div>
+
+      <div class="section section--small">
+        <div class="section__content">
+          <h2 class="section__title">
+            Supports your stack
+          </h2>
+          <div class="section__description">
+            Hawk has integrations for most of languages. And their count continuously increases.
+          </div>
+          <stack :items="stack" />
+        </div>
+      </div>
+
+  <!--  <div class="section section&#45;&#45;small">-->
+  <!--    <a href="https://www.producthunt.com/posts/hawk-2?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-hawk-2" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=333015&theme=light" alt="Hawk - Open-source errors tracker | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>-->
+  <!--  </div>-->
+    </div>
+  </NuxtLayout>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import Illustration from '~/assets/svg/flying-hawk.svg?inline';
+import IconSignIn from '~/assets/svg/sign-in.svg?inline';
+import IconDownload from '~/assets/svg/download.svg?inline';
+import Features, { Feature } from '~/components/features.vue';
+import Stack, { StackItem } from '~/components/stack.vue';
+import OpenSource from '~/components/open-source.vue';
+import Number from '~/components/number.vue';
+import UsedByTable, {UsedByItem} from '~/components/used-by-table.vue';
+import UiButton from '~/components/ui-button.vue';
+import Contact from '~/components/contact.vue';
+
+export default Vue.extend({
+  components: {
+    Illustration,
+    IconSignIn,
+    IconDownload,
+    Features,
+    Stack,
+    UiButton,
+    OpenSource,
+    Number,
+    UsedByTable,
+  },
+  data(): {
+    /**
+     * Features list description
+     */
+    features: Feature[],
+
+    /**
+     * Stack technologies
+     */
+    stack: StackItem[],
+
+    /**
+     * Scroll Y position
+     */
+    scroll: number,
+
+    /**
+     * Label for download app button,
+     * will be changed after page load to fit user platform
+     */
+    downloadButtonLabel: string,
+
+    /**
+     * Href for download app button,
+     * will be changed after page load to fit user platform
+     */
+    downloadButtonHref: string,
+
+    /**
+     * List of products to be displayed in 'Used by' section
+     */
+    usedBy: UsedByItem[];
+    } {
+    return {
+      /**
+       * Features list description
+       */
+      features: [
+        {
+          title: 'Отслеживайте ошибки',
+          description: 'Хоук покажет, что пошло не по плану в вашей программе',
+          picture: 'feature-list',
+        },
+        {
+          title: 'Исследуйте детали',
+          description: 'Хоук поможет понять и исправить причину проблемы',
+          picture: 'feature-event',
+        },
+        {
+          title: 'Следите за здоровьем ПО',
+          description: 'Оценивайте и улучшайте качество вашего продукта',
+          picture: 'feature-graph',
+          style: 'margin-bottom: -21px',
+        },
+        {
+          title: 'Оперативные уведомления',
+          description: 'Не пропустите важные события, оставаясь на связи в Slack, Telegram или на почте',
+          pictureComponent: 'features-be-notified',
+        },
+      ],
+
+      /**
+       * Stack technologies
+       */
+      stack: [
+        {
+          title: 'JavaScript',
+          icon: 'svg/javascript.svg',
+          url: 'https://github.com/codex-team/hawk.javascript',
+        },
+        {
+          title: 'Ruby',
+          icon: 'svg/ruby.svg',
+        },
+        {
+          title: 'PHP',
+          icon: 'svg/php.svg',
+          url: 'https://github.com/codex-team/hawk.php',
+        },
+        {
+          title: 'Go',
+          icon: 'svg/go.svg',
+          url: 'https://github.com/codex-team/hawk.go',
+        },
+        {
+          title: 'Node.js',
+          icon: 'svg/nodejs.svg',
+          url: 'https://github.com/codex-team/hawk.nodejs',
+        },
+        {
+          title: 'Scala',
+          icon: 'svg/scala.svg',
+          url: 'https://github.com/codex-team/hawk.scala',
+        },
+        {
+          title: 'Python',
+          icon: 'svg/python.svg',
+          url: 'https://github.com/codex-team/hawk.python',
+        },
+        {
+          title: 'Kotlin',
+          icon: 'svg/kotlin.svg',
+          url: 'https://github.com/codex-team/hawk.kotlin',
+        },
+        {
+          title: 'Java',
+          icon: 'svg/java.svg',
+        },
+        {
+          title: 'Swift',
+          icon: 'svg/swift.svg',
+        },
+      ],
+
+      /**
+       * Scroll Y position
+       */
+      scroll: 0,
+
+      /**
+       * Label for download app button,
+       * will be changed after page load to fit user platform
+       */
+      downloadButtonLabel: 'Download for Desktop',
+
+      /**
+       * Href for download app button,
+       * will be changed after page load to fit user platform
+       */
+      downloadButtonHref: 'https://github.com/codex-team/hawk.desktop',
+
+      /**
+       * List of products to be displayed in 'Used by' section
+       */
+      usedBy: [
+        {
+          title: 'TJ',
+          logo: 'svg/used-by/tj.svg',
+          url: 'https://tjournal.ru',
+        },
+        {
+          title: 'Coub',
+          logo: 'svg/used-by/coub.png',
+          url: 'https://coub.com',
+        },
+        {
+          title: 'DTF',
+          logo: 'svg/used-by/dtf.svg',
+          url: 'https://dtf.ru',
+        },
+        {
+          title: 'Heyka',
+          logo: 'svg/used-by/heyka.svg',
+          url: 'https://heyka.app',
+        },
+        {
+          title: 'vc.ru',
+          logo: 'svg/used-by/vc.svg',
+          url: 'https://vc.ru',
+        },
+        {
+          title: 'Editor.js',
+          logo: 'svg/used-by/editorjs.svg',
+          url: 'https://editorjs.io',
+        },
+      ],
+    };
+  },
+  mounted() {
+    window.addEventListener('scroll', () => {
+      this.scroll = window.scrollY;
+    }, { passive: true });
+
+    this.updateDownloadButtomWithPlatform();
+  },
+  methods: {
+    /**
+     * Returns the visitor OS
+     *
+     * @returns platform code name
+     */
+    getPlatform(): string {
+      const ua = window.navigator.userAgent.toLowerCase();
+
+      if (ua.includes('windows')) {
+        return 'Windows';
+      } else if (ua.includes('mac')) {
+        return 'macOS';
+      } else if (ua.includes('linux')) {
+        return 'Linux';
+      }
+
+      return 'Unknown';
+    },
+
+    /**
+     * Update label and href of the Download button
+     * corresponding by user platform
+     */
+    updateDownloadButtomWithPlatform(): void {
+      const platform = this.getPlatform();
+
+      switch (platform) {
+        case 'Windows':
+          this.downloadButtonLabel = 'Download for Windows';
+          break;
+        case 'macOS':
+          this.downloadButtonLabel = 'Download for macOS';
+          break;
+        case 'Linux':
+          this.downloadButtonLabel = 'Download for Linux';
+          break;
+        default:
+          this.downloadButtonLabel = 'Download for Desktop';
+          break;
+      }
+    },
+  },
+});
+</script>
+
+<style scoped lang="postcss">
+@import url('@/assets/styles/variables.pcss');
+
+@custom-media --screen-tall (min-height: 1200px);
+@custom-media --screen-middle (max-width: 1170px);
+
+.extra-indent_15px {
+  margin-top: 15px;
+}
+
+.yard {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  flex-direction: column;
+}
+
+.landing {
+  position: relative;
+  background: #080E20;
+
+  &__illustration {
+    width: 100%;
+    position: absolute;
+  }
+
+  &__content {
+    position: relative;
+
+    &-head {
+      width: 830px;
+      margin: 170px auto 50px;
+      padding: 0 var(--layout-paddings-horisontal);
+      display: flex;
+
+      @media (--screen-tall) {
+        margin: 170px auto;
+      }
+
+      @media (--screen-middle) {
+        padding: 0 40px;
+        margin: 130px auto 0;
+      }
+
+      @media (--screen-small) {
+        margin: 80px auto -50px;
+      }
+
+      @media (--screen-small) {
+        flex-direction: column;
+      }
+
+      &-left {
+        padding-right: 50px;
+        gap: 18px;
+        padding-bottom: 13px;
+        position: relative;
+
+        @media (--screen-mobile) {
+          padding-right: 0;
+        }
+
+        h1 {
+          color: #F2F6FF;
+          font-size: 89px;
+          font-weight: 700;
+          margin: 0 0 22px 0;
+
+          @media (--screen-small) {
+            font-size: 60px;
+            margin-bottom: 16px;
+          }
+
+          @media (--screen-mobile) {
+            font-size: 26px;
+          }
+        }
+
+        span {
+          display: flex;
+          justify-content: space-between;
+          color: #F2F6FF;
+          font-weight: 700;
+          width: 775px;
+          line-height: 30px;
+          font-size: 22px;
+          &div {
+            flex: 1 0 auto;
+            font-family: "Roboto-Bold", Helvetica;
+            left: 0;
+            letter-spacing: 0;
+            position: fixed;
+            top: 0;
+            white-space: nowrap;
+          }
+        }
+
+        .description {
+          font-weight: 500;
+          font-family: "Roboto-Medium", "Helvetica";
+          color: #dbe6ffce;
+          letter-spacing: 0.33px;
+          font-size: 20px;
+          line-height: 30px;
+          width: 830px;
+          padding-bottom: 13px;
+
+          @media (--screen-small) {
+            font-size: 18px;
+            line-height: 26px;
+          }
+
+          @media (--screen-mobile) {
+            font-size: 16px;
+            line-height: 22px;
+          }
+        }
+      }
+
+      &-right {
+        margin-left: auto;
+
+        .button {
+          display: flex;
+        }
+
+        @media (--screen-small) {
+          margin-left: 0;
+          margin-top: 30px;
+
+          .button {
+            display: inline-flex;
+            margin-right: 20px;
+            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .02)
+          }
+        }
+
+        @media (max-width: 560px) {
+          .button {
+            display: inline-flex;
+            width: 240px;
+          }
+        }
+
+        .button:not(:last-of-type) {
+          margin-bottom: 20px;
+        }
+      }
+    }
+
+    &-preview {
+      position: relative;
+      box-shadow: 0 12px 44px 0 rgba(0,0,0,0.50), inset 0 0 0 1px rgba(255,255,255,0.06);
+      border-radius: 7px;
+      overflow: hidden;
+      width: calc(var(--layout-main-col-width) * 1.1);
+      margin: 0 auto;
+      z-index: 1;
+      will-change: transform;
+
+      img {
+        width: 100%;
+        vertical-align: bottom;
+        background-image: linear-gradient(90deg, #1E202A 0%, #1E202A 4%, #242732 5%, #242732 24%, #2F3341 25%, #2F3341 100%);
+      }
+
+      @media (--screen-middle) {
+        width: var(--layout-main-col-width);
+      }
+
+      @media (max-width: 1080px) {
+        width: calc(var(--layout-main-col-width) * 0.95);
+      }
+
+      @media (--screen-tall) {
+        transform: none !important;
+      }
+
+      @media (--screen-small) {
+        width: 90%;
+      }
+    }
+  }
+}
+
+.section {
+  position: relative;
+  padding-top: 100px;
+  padding-bottom: 80px;
+
+  h2 {
+    font-family: Roboto;
+    font-size: 70px;
+    font-weight: 700;
+    line-height: 82.03px;
+    text-align: left;
+  }
+
+  &--with-gradient::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    transform: scaleY(-1);
+    background-image: linear-gradient(180deg, rgba(24,27,35,0.00) 0%, #080E20 100%);
+    height: 500px;
+    z-index: -1;
+  }
+
+  &__content {
+    max-width: var(--layout-main-col-width);
+    margin: 0 auto;
+    padding: 0 var(--layout-paddings-horisontal);
+  }
+
+  &__title {
+    font-weight: 800;
+    font-size: 70px;
+    color: #F2F6FF;
+    letter-spacing: 0;
+    margin-bottom: 50px;
+
+    @media (--screen-small) {
+      font-size: 40px;
+      margin-bottom: 30px;
+    }
+
+    @media (--screen-mobile) {
+      text-align: center;
+    }
+  }
+
+  &__description {
+    display: inline-block;
+    color: var(#DBE6FFCE);
+    width: 830px;
+    font-size: 18px;
+    line-height: 28px;
+    margin: 0 auto;
+    margin-bottom: 50px;
+    background-clip: text;
+    background-image: linear-gradient(270deg, #6781B4 1%, #BAD6FE 99%);
+    color: transparent;
+    font-weight: 500;
+
+     @media (--screen-mobile) {
+       font-size: 15px;
+       line-height: 1.5em;
+       margin-bottom: 30px;
+    }
+  }
+
+  &--small {
+    text-align: center;
+  }
+
+  &--small &__title {
+    font-size: 37px;
+    margin-bottom: 30px;
+
+    @media (--screen-mobile) {
+      font-size: 26px;
+      margin-bottom: 10px;
+    }
+  }
+}
+</style>