adaptyvness finished

src/App.jsx

@@ -15,10 +15,12 @@ import Finance from './pages/Finance';
 import Normative from './pages/Normative';
 import Trade from './pages/Trade';
 import Register from './pages/Register';
+import Ticker from './components/Ticker';
 
 const App = () => {
   return (
     <div className="App">
+      <Ticker />
       <Header />
       <Routes>
         <Route index element={<Home />} />

src/assets/icons/burger.svg

@@ -0,0 +1,12 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_637_2317)">
+<path d="M26.7333 14.6665H5.26667C4.56711 14.6665 4 15.2336 4 15.9332V16.0665C4 16.7661 4.56711 17.3332 5.26667 17.3332H26.7333C27.4329 17.3332 28 16.7661 28 16.0665V15.9332C28 15.2336 27.4329 14.6665 26.7333 14.6665Z" fill="#05172D"/>
+<path d="M26.7333 21.3335H5.26667C4.56711 21.3335 4 21.9006 4 22.6002V22.7335C4 23.4331 4.56711 24.0002 5.26667 24.0002H26.7333C27.4329 24.0002 28 23.4331 28 22.7335V22.6002C28 21.9006 27.4329 21.3335 26.7333 21.3335Z" fill="#05172D"/>
+<path d="M26.7333 8H5.26667C4.56711 8 4 8.56711 4 9.26667V9.4C4 10.0996 4.56711 10.6667 5.26667 10.6667H26.7333C27.4329 10.6667 28 10.0996 28 9.4V9.26667C28 8.56711 27.4329 8 26.7333 8Z" fill="#05172D"/>
+</g>
+<defs>
+<clipPath id="clip0_637_2317">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/icons/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g data-name="Layer 2"><g data-name="close"><rect width="24" height="24" transform="rotate(180 12 12)" opacity="0"/><path d="M13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29-4.3 4.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l4.29-4.3 4.29 4.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"/></g></g></svg>

src/assets/styles/_dataChart.scss

@@ -1,6 +1,6 @@
 .chart {
   padding: 8rem 0;
-  background: #272727;
+  background: $base-blue;
   width: 100%;
 }
 

src/assets/styles/_documentLink.scss

@@ -34,3 +34,14 @@
   font-size: 1.8rem;
   line-height: 150%;
 }
+
+@media (max-width: 1024px) {
+  .document-title {
+    font-size: 1.6rem;
+  }
+}
+@media (max-width: 400px) {
+  .document-title {
+    font-size: 1.8rem;
+  }
+}

src/assets/styles/_documents.scss

@@ -10,7 +10,15 @@
 
 .documents-links-wrapper {
   display: grid;
-  grid-template-columns: repeat(3, auto);
+  grid-template-columns: repeat(auto-fill, minmax(47.7rem, 1fr));
   column-gap: 4rem;
   row-gap: 2.4rem;
 }
+
+@media (max-width: 1540px) {
+  .documents-links-wrapper {
+    grid-template-columns: repeat(auto-fill, minmax(30.2rem, 1fr));
+    column-gap: 2.4rem;
+    row-gap: 2.4rem;
+  }
+}

src/assets/styles/_footer.scss

@@ -59,3 +59,19 @@
     color: $base-white;
   }
 }
+
+@media (max-width: 500px) {
+  .footer-top-content {
+    grid-template-columns: 1fr;
+  }
+
+  .footer-bottom,
+  .footer-top {
+    padding: 3.2rem 0;
+  }
+
+  .footer-nav-list {
+    grid-template-columns: 1fr;
+    row-gap: 2.4rem;
+  }
+}

src/assets/styles/_general.scss

@@ -35,3 +35,6 @@ a {
   color: $base-black;
   text-decoration: none;
 }
+
+@media (max-width: 768px) {
+}

src/assets/styles/_header.scss

@@ -49,6 +49,98 @@
   }
 }
 
+.mobile-nav {
+  display: none;
+  background: $base-light-blue;
+  padding: 1.6rem 0;
+  position: fixed;
+  width: 100%;
+  z-index: 999;
+}
+
+.burger {
+  width: 4rem;
+  height: auto;
+  cursor: pointer;
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.close-burger {
+  width: 4rem;
+  height: auto;
+  fill: #fff;
+  position: absolute;
+  top: 2rem;
+  right: 2rem;
+}
+
+.mobile-nav-content {
+  position: fixed;
+  right: 0;
+  top: 0;
+  height: 100vh;
+  background: $base-blue;
+  z-index: 500;
+  width: 80%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.3s linear;
+  transform: translateX(100%);
+  z-index: 1000;
+}
+
+.active {
+  transform: translateX(0%);
+
+  .mobile-nav-list {
+    opacity: 1;
+  }
+}
+
+.mobile-nav-list-item {
+  display: flex;
+  align-items: center;
+  a {
+    color: $base-white;
+    font-size: 1.8rem;
+    padding: 0.8rem;
+    display: inline-block;
+    width: 100%;
+  }
+}
+
+.mobile-nav-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 100%;
+  width: 100%;
+}
+
+.mobile-nav-list {
+  height: 80%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  height: 70%;
+  opacity: 0;
+  transition: all 1.5s ease;
+}
+
+@keyframes nav-anim {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 @media (max-width: 1024px) {
   .nav-top-list-item a {
     font-size: 1.4rem;
@@ -74,3 +166,14 @@
     }
   }
 }
+
+@media (max-width: 768px) {
+  .nav-top,
+  .nav-bottom {
+    display: none;
+  }
+
+  .mobile-nav {
+    display: block;
+  }
+}

src/assets/styles/_hero.scss

@@ -21,7 +21,6 @@
 }
 
 .hero-button {
-  // display: block;
   width: 34.8rem;
   height: 11rem;
   font-size: 2rem;
@@ -31,6 +30,7 @@
   align-items: center;
   text-transform: uppercase;
   line-height: 150%;
+  padding: 0 5rem;
 
   &:first-child {
     background: $base-blue;
@@ -42,3 +42,41 @@
     color: $base-black;
   }
 }
+
+@media (max-width: 768px) {
+  .hero-button {
+    width: 24rem;
+    height: 8rem;
+    font-size: 1.6rem;
+    padding: 1.6rem;
+  }
+
+  .hero {
+    margin-top: 8.5rem;
+  }
+}
+
+@media (max-width: 500px) {
+  .hero-button {
+    width: 20rem;
+    height: 8rem;
+    font-size: 1.4rem;
+  }
+}
+
+@media (max-width: 425px) {
+  .buttons-wrapper {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    align-items: center;
+    position: absolute;
+    left: 0;
+  }
+  .hero-button {
+    width: 100%;
+    padding: 0.8rem;
+    height: 7rem;
+    font-size: 1.4rem;
+  }
+}

src/assets/styles/_news.scss

@@ -7,4 +7,12 @@
 .news-post-wrapper {
   display: flex;
   justify-content: space-between;
+  flex-wrap: wrap;
+  row-gap: 2.4rem;
+}
+
+@media (max-width: 1160px) {
+  .news-post-wrapper {
+    gap: 2.4rem;
+  }
 }

src/assets/styles/_newsPost.scss

@@ -7,7 +7,7 @@
 }
 
 .news-post-img {
-  max-width: 47.7rem;
+  max-width: 100%;
   width: 100%;
   overflow: hidden;
 
@@ -58,3 +58,79 @@
     text-decoration: underline;
   }
 }
+
+@media (max-width: 1500px) {
+  .news-post {
+    max-width: 32%;
+  }
+
+  .news-post-title {
+    font-size: 2rem;
+  }
+}
+
+@media (max-width: 1160px) {
+  .news-post {
+    // max-width: 48%;
+    gap: 0.8rem;
+  }
+
+  .news-post-date {
+    margin-bottom: 0;
+    font-size: 1.4rem;
+  }
+
+  .news-post-title {
+    font-size: 1.6rem;
+  }
+}
+
+@media (max-width: 1160px) {
+  .news-post {
+    max-width: 48%;
+    gap: 0.8rem;
+  }
+
+  .news-post-date {
+    margin-bottom: 0;
+    font-size: 1.4rem;
+  }
+
+  .news-post-title {
+    font-size: 1.6rem;
+  }
+}
+
+@media (max-width: 1160px) {
+  .news-post {
+    max-width: 48%;
+    gap: 1.6rem;
+  }
+
+  .news-post-date {
+    margin-bottom: 0.8rem;
+    font-size: 1.6rem;
+  }
+
+  .news-post-title {
+    font-size: 2rem;
+  }
+}
+
+@media (max-width: 800px) {
+  .news-post {
+    max-width: 100%;
+    gap: 1.6rem;
+  }
+}
+
+@media (max-width: 400px) {
+  .news-post-date {
+    margin-bottom: 0.8rem;
+    font-size: 1.6rem;
+  }
+
+  .news-post-title {
+    font-size: 1.8rem;
+  }
+}

src/assets/styles/_subPageStyles.scss

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   gap: 2.4rem;
-  margin-top: 4.8rem;
+  margin-top: 13.3rem;
   margin-bottom: 8rem;
 }
 

src/assets/styles/_ticker.scss

@@ -1,5 +1,5 @@
 .ticker {
-  margin-top: 2.4rem;
+  // margin-top: 2.4rem;
   padding: 1.6rem 0;
   background: $base-blue;
   color: $base-white;

src/assets/styles/_videoPlayer.scss

@@ -2,4 +2,5 @@
   background: $base-gray;
   height: 100%;
   width: 100%;
+  overflow: hidden;
 }

src/components/Header.jsx

@@ -3,10 +3,22 @@ import { Link } from 'react-router-dom';
 
 // Icons
 import logo from '../assets/icons/logo.svg';
+import burger from '../assets/icons/burger.svg';
+import { ReactComponent as Close } from '../assets/icons/close.svg';
+import { useState } from 'react';
 
 const Header = () => {
+  // States
+  const [navActive, setNavActive] = useState(false);
+
+  // Functions
+  const togleNav = () => {
+    setNavActive(!navActive);
+  };
+
   return (
     <header className="header">
+      {/* Nav top */}
       <nav className="nav-top">
         <div className="container">
           <div className="nav-top-wrapper">
@@ -38,6 +50,9 @@ const Header = () => {
           </div>
         </div>
       </nav>
+      {/* Nav top ================== */}
+
+      {/* Nav bottom */}
       <nav className="nav-bottom">
         <div className="container">
           <div className="nav-bottom-wrapper">
@@ -58,6 +73,57 @@ const Header = () => {
           </div>
         </div>
       </nav>
+      {/* Nav bottom ================== */}
+
+      {/* Nav mobile */}
+      <div className="mobile-nav">
+        <div className="container">
+          <div className="mobile-nav-wrapper">
+            <Link to={'/'} className="logo">
+              <img src={logo} alt="logo" />
+            </Link>
+            <div className="burger" onClick={togleNav}>
+              <img src={burger} />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <nav className={`mobile-nav-content ${navActive ? 'active' : null}`}>
+        <div className="close-burger" onClick={togleNav}>
+          <Close />
+        </div>
+        <ul className="mobile-nav-list">
+          <li className="mobile-nav-list-item" onClick={togleNav}>
+            <Link to={'/gtsbt'}>ГТСБТ</Link>
+          </li>
+          <li className="mobile-nav-list-item" onClick={togleNav}>
+            <Link to={'/norm'}>Нормативная база</Link>
+          </li>
+          <li className="mobile-nav-list-item" onClick={togleNav}>
+            <Link to={'/'}>Новости</Link>
+          </li>
+          <li className="mobile-nav-list-item" onClick={togleNav}>
+            <Link to={'/'}>Мультимедия</Link>
+          </li>
+          <li className="mobile-nav-list-item" onClick={togleNav}>
+            <Link to={'/'}>Контакты</Link>
+          </li>
+          <li className="mobile-nav-list-item" onClick={togleNav}>
+            <Link to={'/trade'}>Биржевые торги</Link>
+          </li>
+          <li className="mobile-nav-list-item" onClick={togleNav}>
+            <Link to={'/fin'}>Финансовый мониторинг</Link>
+          </li>
+          <li className="mobile-nav-list-item" onClick={togleNav}>
+            <Link to={'/register'}>Регистрация договоров</Link>
+          </li>
+          <li className="mobile-nav-list-item" onClick={togleNav}>
+            <Link to={'/trade'}>Тарифы и сборы</Link>
+          </li>
+        </ul>
+      </nav>
+      {/* Nav mobile ================== */}
     </header>
   );
 };

src/components/Hero.jsx

@@ -9,10 +9,10 @@ const Hero = () => {
         <div className="hero-wrapper">
           <div className="buttons-wrapper">
             <Link to={'/'} className="hero-button">
-              Перейти на торговую <br /> площадку
+              Перейти на торговую площадку
             </Link>
             <Link to={'/'} className="hero-button">
-              Подать документы <br /> онлайн
+              Подать документы онлайн
             </Link>
           </div>
         </div>

src/pages/Home.jsx

@@ -14,15 +14,9 @@ import arrow from '../assets/icons/arrow.svg';
 const Home = () => {
   return (
     <main className="home-main">
-      <div>
+      {/* Hero section */}
-        {/* Hero section */}
+      <Hero />
-        <Hero />
+      {/* Hero section ./ =========== */}
-        {/* Hero section ./ =========== */}
-
-        {/* Ticker section */}
-        <Ticker />
-        {/* Ticker section ./ =========== */}
-      </div>
 
       {/* About section */}
       <section className="about">