CubeBackground: Landing page background

Made landing page background Made a separated blocks in aboutus section Fixed anchor for more button
fet1sov · Apr 15, 2024 · f45d164 · f45d164
1 parent 99abec6
commit f45d164
Show file tree

Hide file tree

Showing 9 changed files with 270 additions and 106 deletions.
diff --git a/_styles/_css/index.css b/_styles/_css/index.css
@@ -32,6 +32,35 @@ div.description-block h2 {
     margin-right: 50px;
 }
 
+#aboutusBlock div.description-block.offer-block {
+    display: flex;
+    flex-direction: column;
+}
+
+#aboutusBlock div.offers-block {
+    display: flex;
+    flex-direction: row;
+}
+
+#aboutusBlock div.offers-block div {
+    margin: 10px;
+    background-color: var(--secondary-color-04);
+
+    border-radius: 10px;
+    padding: 15px;
+}
+
+#aboutusBlock {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+#aboutusBlock a {
+    position: absolute;
+    top: -20px;
+}
+
 @media (max-width: 600px) {
     #contactForm {
         display: flex;
@@ -49,4 +78,10 @@ div.description-block h2 {
     form.primary-form {
         margin-top: 50px;
     }
+}
+
+@media (max-width: 820px) {
+    #aboutusBlock div.offers-block {
+        flex-direction: column;
+    }
 }
diff --git a/_styles/_css/styles.css b/_styles/_css/styles.css
@@ -48,7 +48,7 @@ section {
     justify-content: center;
     align-items: center;
 
-    height: 100vh;
+    min-height: 100vh;
 }
 
 span.red-text {
@@ -91,6 +91,8 @@ header {
 header nav.navigation {
     position: fixed;
 
+    z-index: 9999;
+
     right: 0;
     left: 0;
 

diff --git a/data/locales/en-US.json b/data/locales/en-US.json
@@ -45,16 +45,21 @@
     },
     "aboutusDescription": {
         "aboutusBlockName": "What We Offer",
-        "aboutusmainDescription1": "1. Integrated Marketing Campaigns:",
-            "aboutussecondDescription1": "Development and implementation of multi-channel advertising campaigns, including online and offline media.",
-        "aboutusmainDescription2": "2. Digital Marketing and SEO:",
-             "aboutussecondDescription2": "Increasing online visibility through search engine optimization, contextual advertising, and social media marketing.",
-        "aboutusmainDescription3": "3. Creativity and Branding:",
-            "aboutussecondDescription3": "Creation of corporate identity, logo, and brand book. Development of creative concepts and visual solutions for advertising.",
-        "aboutusmainDescription4": "4. Analytics and Strategic Planning:",
-            "aboutussecondDescription4": "Market research, data analysis, and formulation of marketing strategies aimed at achieving business goals.",
-        "aboutusmainDescription5": "5. PR and Corporate Communications:",
-            "aboutussecondDescription5": "Management of public relations, event organization, media interaction, and crisis communication management."
+
+        "aboutusmainDescription1": "Integrated Marketing Campaigns:",
+        "aboutussecondDescription1": "Development and implementation of multi-channel advertising campaigns, including online and offline media.",
+
+        "aboutusmainDescription2": "Digital Marketing and SEO:",
+        "aboutussecondDescription2": "Increasing online visibility through search engine optimization, contextual advertising, and social media marketing.",
+
+        "aboutusmainDescription3": "Creativity and Branding:",
+        "aboutussecondDescription3": "Creation of corporate identity, logo, and brand book. Development of creative concepts and visual solutions for advertising.",
+
+        "aboutusmainDescription4": "Analytics and Strategic Planning:",
+        "aboutussecondDescription4": "Market research, data analysis, and formulation of marketing strategies aimed at achieving business goals.",
+
+        "aboutusmainDescription5": "PR and Corporate Communications:",
+        "aboutussecondDescription5": "Management of public relations, event organization, media interaction, and crisis communication management."
     },
     "userMenu": {
         "settings": "Settings",

diff --git a/data/locales/ru-RU.json b/data/locales/ru-RU.json
@@ -43,18 +43,23 @@
         "secondaryDescription": "Давайте вместе создадим катализатор для вашего успеха и приведем ваш бизнес к новым высотам. Доверьте нам свою рекламу.",
         "formBlockName": "Всё ещё не уверены? <br> Свяжитесь с нами"
     },
-    "abotusDescription":{
-    "aboutusBlockName": "Что мы предлагаем",
-            "aboutusmainDescription1": "1. Интегрированные Маркетинговые Кампании:",
-                "aboutussecondDescription1":  "Разработка и реализация мультиканальных рекламных кампаний, включая онлайн и офлайн медиа.",
-            "aboutusmainDescription2": "2. Цифровой Маркетинг и SEO:",
-                "aboutussecondDescription2":  "Повышение онлайн-видимости через поисковую оптимизацию, контекстную рекламу и маркетинг в социальных сетях.",
-            "aboutusmainDescription3": "3. Креатив и Брендинг:",
-                "aboutussecondDescription3":  "Создание фирменного стиля, логотипа и брендбука, разработка креативных концепций и визуальных решений для рекламы.",
-            "aboutusmainDescription4": "4. Аналитика и Стратегическое Планирование:",
-                "aboutussecondDescription4":  "Исследование рынка, анализ данных и формирование маркетинговых стратегий, ориентированных на достижение бизнес-целей.",
-            "aboutusmainDescription5": "5. PR и Корпоративные Коммуникации:",
-                "aboutussecondDescription5":  "Управление общественными связями, организация мероприятий, взаимодействие со СМИ и кризисное коммуникационное управление."
+    "aboutusDescription":{
+        "aboutusBlockName": "Что мы предлагаем",
+
+        "aboutusmainDescription1": "Интегрированные Маркетинговые Кампании:",
+        "aboutussecondDescription1":  "Разработка и реализация мультиканальных рекламных кампаний, включая онлайн и офлайн медиа.",
+
+        "aboutusmainDescription2": "Цифровой Маркетинг и SEO:",
+        "aboutussecondDescription2":  "Повышение онлайн-видимости через поисковую оптимизацию, контекстную рекламу и маркетинг в социальных сетях.",
+
+        "aboutusmainDescription3": "Креатив и Брендинг:",
+        "aboutussecondDescription3":  "Создание фирменного стиля, логотипа и брендбука, разработка креативных концепций и визуальных решений для рекламы.",
+
+        "aboutusmainDescription4": "Аналитика и Стратегическое Планирование:",
+        "aboutussecondDescription4":  "Исследование рынка, анализ данных и формирование маркетинговых стратегий, ориентированных на достижение бизнес-целей.",
+
+        "aboutusmainDescription5": "PR и Корпоративные Коммуникации:",
+        "aboutussecondDescription5":  "Управление общественными связями, организация мероприятий, взаимодействие со СМИ и кризисное коммуникационное управление."
     },
     "userMenu": {
         "settings": "Настройки",

diff --git a/frontend/components/cubeback.php b/frontend/components/cubeback.php
@@ -0,0 +1,99 @@
+<style>
+.cube {
+    position: absolute;
+    top: 80vh;
+    left: 45vw;
+    width: 10px;
+    height: 10px;
+    border: solid 1px var(--primary-color-01);
+    transform-origin: top left;
+    transform: scale(0) rotate(0deg) translate(-50%, -50%);
+    -webkit-animation: cube 12s ease-in forwards infinite;
+            animation: cube 12s ease-in forwards infinite;
+}
+
+.cube:nth-child(2n) {
+    border-color: var(--primary-color-01);
+}
+
+.cube:nth-child(2) {
+    -webkit-animation-delay: 2s;
+    animation-delay: 2s;
+    left: 25vw;
+    top: 40vh;
+}
+
+.cube:nth-child(3) {
+    -webkit-animation-delay: 4s;
+    animation-delay: 4s;
+    left: 75vw;
+    top: 50vh;
+}
+
+.cube:nth-child(4) {
+    -webkit-animation-delay: 6s;
+    animation-delay: 6s;
+    left: 90vw;
+    top: 10vh;
+}
+
+.cube:nth-child(5) {
+    -webkit-animation-delay: 8s;
+    animation-delay: 8s;
+    left: 10vw;
+    top: 85vh;
+}
+
+.cube:nth-child(6) {
+    -webkit-animation-delay: 10s;
+    animation-delay: 10s;
+    left: 50vw;
+    top: 10vh;
+}
+
+@-webkit-keyframes cube {
+    from {
+        transform: scale(0) rotate(0deg) translate(-50%, -50%);
+        opacity: 0.5;
+    }
+
+    to {
+        transform: scale(6) rotate(960deg) translate(-50%, -50%);
+        opacity: 0;
+    }
+}
+
+@keyframes cube {
+    from {
+        transform: scale(0) rotate(0deg) translate(-50%, -50%);
+        opacity: 0.5;
+    }
+
+    to {
+        transform: scale(6) rotate(960deg) translate(-50%, -50%);
+        opacity: 0;
+    }
+}
+</style>
+
+<? if (!isset($cubeAmount)) { ?>
+    <div class="cube"></div>
+    <div class="cube"></div>
+    <div class="cube"></div>
+    <div class="cube"></div>
+    <div class="cube"></div>
+    <div class="cube"></div>
+    <div class="cube"></div>
+    <div class="cube"></div>
+    <div class="cube"></div>
+    <div class="cube"></div>
+    <div class="cube"></div>
+    <div class="cube"></div>
+    <div class="cube"></div>
+    <div class="cube"></div>
+    <div class="cube"></div>
+<? } else { ?>
+    <? for($i = 0; $i < $cubeAmount; $i++) { ?>
+        <div class="cube"></div>
+    <? } ?>
+<? } ?>
diff --git a/frontend/components/layout.php b/frontend/components/layout.php
@@ -14,9 +14,11 @@
         Renderer::includeTemplate($GLOBALS["wtfFrontend"]["componentsPath"] . "elems/header.php", []);
     ?>
 
-    <?php
-        Renderer::includeTemplate($layout_path, $layout_data);
-    ?>
+    <div class="container">
+        <?php
+            Renderer::includeTemplate($layout_path, $layout_data);
+        ?>
+    </div>
 </body>
 
 <footer>

diff --git a/routes/auth/auth.view.php b/routes/auth/auth.view.php
@@ -1,3 +1,7 @@
+<?php
+    Renderer::includeTemplate("frontend/components/cubeback.php", []);
+?>
+
 <link href="_styles/_css/auth.css" rel="stylesheet" />
 
 <section>