лэндос по слайдам

8 months ago · e0da57f21a
parent 0e72e8a04e
commit e0da57f21a
2 changed files with 104 additions and 185 deletions
--- a/index.html
+++ b/index.html
@ -5,6 +5,8 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пространственные Системы</title>
+    <link rel="stylesheet" href="fullpage/fullpage.min.css">
+    <script src="fullpage/fullpage.js"></script>
    <link rel="stylesheet" href="style.css">
 </head>

@ -25,20 +27,16 @@
            </div>
        </div>
    </div>
-
-    <div id="first-container">
-        <div id="first-wrap">
-            <div id="first-title">
+    <div class="fullpage">
+        <div class="section">
+            <div class="hero">
                Разработка геоинформационных ML/AutoML систем
            </div>
+            <div class="arrow-down"></div>
        </div>
-    </div>
-
-    <div id="what-container">
-        <div id="what-wrap">
-            <div>
-                <div id="what-title">Наши особенности</div>
-                <div id="what-content">
+        <div class="section">
+            <div class="section-title">Наши особенности</div>
+            <div class="features">
                <div class="block-container">
                    <div class="block-title">True data driven</div>
                    <div class="block-text">В основе наших систем лежит предиктивная аналитика на базе
@ -53,28 +51,27 @@
                </div>
                <div class="block-container">
                    <div class="block-title">Реактивность</div>
-                        <div class="block-text">Наши системы оснащены инструментами симуляций, позволяющими пользователю
+                    <div class="block-text">Наши системы оснащены инструментами симуляций, позволяющими
+                        пользователю
                        перед принятием реального решения в режиме онлайн смоделировать целевую ситуацию и
                        оценить эффект её реализации</div>
                </div>
                <div class="block-container">
                    <div class="block-title">Прозрачность</div>
-                        <div class="block-text">Мы используем модели машинного обучения, позволяющие интерпретировать
-                            каждый прогноз и понять какие именно факторы и в какой степени повлияли на итоговое значение
-                        </div>
-                    </div>
+                    <div class="block-text">Мы используем модели машинного обучения, позволяющие
+                        интерпретировать
+                        каждый прогноз и понять какие именно факторы и в какой степени повлияли на итоговое
+                        значение
                    </div>
                </div>
            </div>
+            <div class="arrow-down"></div>
        </div>
-
-    <div id="trusted-container">
-        <div id="trusted-wrap">
-            <div>
-                <div id="trusted-title">
+        <div class="section">
+            <div class="section-title">
                Нам доверяют
            </div>
-                <div id="trusted-content">
+            <div class="partners">
                <div class="trusted-block">
                    <img src="partners_logo/autoru.png" />
                </div>
@ -101,16 +98,16 @@
                </div>
            </div>
        </div>
-            <!-- <div id="footer-container">
-                <div id="footer-title">
-                    Свяжитесь с нами
-                </div>
-                <a href="contacts.html" id="footer-link">
-                    Контакты
-                </a>
-            </div> -->
-        </div>
    </div>
+
+    <script>
+        new fullpage('.fullpage', {});
+        document.querySelectorAll('.arrow-down').forEach(
+            el => el.addEventListener('click', () => {
+                fullpage_api.moveSectionDown();
+            })
+        )
+    </script>
 </body>

 </html>
--- a/style.css
+++ b/style.css
@ -153,41 +153,24 @@ html {
  }
 }

+.section-title {
+  line-height: 40px;
+  font-size: xx-large;
+  text-transform: uppercase;

-/* Hero */
-#first-container {
-  display: flex;
-  position: relative;
-  flex-direction: column;
-  padding: 80px 30px 0;
-  width: 100%;
-
-  box-sizing: border-box;
+  color: var(--primary-text-color);

-  @media (max-width: 850px) {
-    padding-top: 170px;
-  }
+  mix-blend-mode: normal;
+  margin: 30px 0;
 }

-#first-wrap {
-  display: flex;
-  flex-direction: column;
+/* Hero */
+.hero {
  position: relative;
+  display: flex;
  justify-content: center;
  align-items: center;
-  width: calc(100vw - 60px);
-  min-height: calc(100vh - var(--header-height));
-  box-sizing: border-box;
-  padding: 60px 0 50px 0;
-
-  @media (max-width: 850px) {
-    min-height: calc(100vh - 170px);
-  }
-}
-
-#first-title {
-  line-height: calc(100vw / 23);
-  font-size: calc(100vw / 30);
+  font-size: 1.5rem;
  text-transform: uppercase;

  background-size: 100%;
@ -196,60 +179,35 @@ html {
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(55deg, rgb(255, 255, 255) 20%, rgba(245, 192, 192, 0.8) 100%);

-  margin-bottom: 30px;
-
  @media (max-width: 850px) {
-    max-width: 100%;
-    line-height: 33px;
-    font-size: 30px;
+    font-size: 1rem;
  }
 }

-/* Наши особенности */
-#what-container {
-  border-top: 1px solid #CCCCCC;
-  display: flex;
-  position: relative;
-  width: 100%;
-  background: var(--primary-color);
-  justify-content: center;
-  align-items: center;
-  box-sizing: border-box;
+.arrow-down {
+  position: absolute;
+  bottom: 20px;
+  right: 50%;
+  transform: translateX(50%);
+  display: block;
+  height: 30px;
+  width: 30px;
+  background: url("./svg/Arrow_to_bottom.svg") no-repeat center;
+  background-size: contain;
+  cursor: pointer;
 }

-#what-wrap {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  justify-content: space-between;
-  width: calc(100vw - 60px);
-  min-height: calc(100vh - var(--header-height));
-  /* min-height: inherit; */
-  box-sizing: border-box;
-  padding: 50px 0;
-
-  @media (max-width: 850px) {
-    min-height: inherit;
-  }
+.arrow-down:hover {
+  opacity: 0.5;
 }

-#what-title {
-  line-height: 40px;
-  font-size: xx-large;
-  text-transform: uppercase;
-
-  color: var(--primary-text-color);

-  mix-blend-mode: normal;
-  margin-bottom: 30px;
-}

-#what-content {
+.features {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-between;
-  margin-top: 60px;
 }

 .block-container {
@ -278,7 +236,7 @@ html {
 .block-text {
  max-width: 450px;
  line-height: 40px;
-  font-size: 28px;
+  font-size: 24px;
  padding-right: 50px;

  color: var(--accent-text-color);
@ -291,48 +249,11 @@ html {


 /* Нам доверяют */
-#trusted-container {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  justify-content: center;
-  align-items: center;
-}
-
-#trusted-wrap {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  justify-content: space-between;
-  width: calc(100vw - 60px);
-  min-height: calc(100vh - var(--header-height));
-  border-top: 1px solid #CCCCCC;
-  box-sizing: border-box;
-  padding: 50px 0;
-
-  @media (max-width: 850px) {
-    min-height: calc(100vh - 170px);
-  }
-}
-
-#trusted-title {
-  line-height: 40px;
-  font-size: 30px;
-  text-transform: uppercase;
-
-  color: #cccccc;
-
-  mix-blend-mode: normal;
-  margin-bottom: 30px;
-}
-
-#trusted-content {
+.partners {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-between;
-  margin-top: 60px;
-  margin-bottom: 60px;
 }

 .trusted-block {
@ -343,15 +264,16 @@ html {
  padding: 30px 0 90px;
  align-items: center;

-  img {
-    height: 45px;
-  }
-
  @media (max-width: 850px) {
    width: 50%;
  }
 }

+.trusted-block img {
+  height: 45px;
+  object-fit: contain;
+}
+
 #footer-container {
  display: flex;
  flex-direction: column;