diff --git a/src/App.jsx b/src/App.jsx index 0f7914d..c429710 100644 --- a/src/App.jsx +++ b/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 (
+
} /> diff --git a/src/assets/icons/burger.svg b/src/assets/icons/burger.svg new file mode 100644 index 0000000..6486852 --- /dev/null +++ b/src/assets/icons/burger.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/assets/icons/close.svg b/src/assets/icons/close.svg new file mode 100644 index 0000000..f5fafb8 --- /dev/null +++ b/src/assets/icons/close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/styles/_dataChart.scss b/src/assets/styles/_dataChart.scss index 8a0a400..4f67d9f 100644 --- a/src/assets/styles/_dataChart.scss +++ b/src/assets/styles/_dataChart.scss @@ -1,6 +1,6 @@ .chart { padding: 8rem 0; - background: #272727; + background: $base-blue; width: 100%; } diff --git a/src/assets/styles/_documentLink.scss b/src/assets/styles/_documentLink.scss index 0b5f4c1..7ed9748 100644 --- a/src/assets/styles/_documentLink.scss +++ b/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; + } +} diff --git a/src/assets/styles/_documents.scss b/src/assets/styles/_documents.scss index 98b64d9..3195ddd 100644 --- a/src/assets/styles/_documents.scss +++ b/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; + } +} diff --git a/src/assets/styles/_footer.scss b/src/assets/styles/_footer.scss index 7357721..f517a0c 100644 --- a/src/assets/styles/_footer.scss +++ b/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; + } +} diff --git a/src/assets/styles/_general.scss b/src/assets/styles/_general.scss index a5374d3..89b4dcc 100644 --- a/src/assets/styles/_general.scss +++ b/src/assets/styles/_general.scss @@ -35,3 +35,6 @@ a { color: $base-black; text-decoration: none; } + +@media (max-width: 768px) { +} diff --git a/src/assets/styles/_header.scss b/src/assets/styles/_header.scss index fdc197b..2048a24 100644 --- a/src/assets/styles/_header.scss +++ b/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; + } +} diff --git a/src/assets/styles/_hero.scss b/src/assets/styles/_hero.scss index 61f0e0e..c3bdf80 100644 --- a/src/assets/styles/_hero.scss +++ b/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; + } +} diff --git a/src/assets/styles/_news.scss b/src/assets/styles/_news.scss index b9da7b2..da1eb49 100644 --- a/src/assets/styles/_news.scss +++ b/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; + } } diff --git a/src/assets/styles/_newsPost.scss b/src/assets/styles/_newsPost.scss index 84b8ab1..6c8f8c1 100644 --- a/src/assets/styles/_newsPost.scss +++ b/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; + } +} diff --git a/src/assets/styles/_subPageStyles.scss b/src/assets/styles/_subPageStyles.scss index d440c21..a6c0124 100644 --- a/src/assets/styles/_subPageStyles.scss +++ b/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; } diff --git a/src/assets/styles/_ticker.scss b/src/assets/styles/_ticker.scss index 0dec0c8..cf0eeb9 100644 --- a/src/assets/styles/_ticker.scss +++ b/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; diff --git a/src/assets/styles/_videoPlayer.scss b/src/assets/styles/_videoPlayer.scss index a7da108..8b5bb0e 100644 --- a/src/assets/styles/_videoPlayer.scss +++ b/src/assets/styles/_videoPlayer.scss @@ -2,4 +2,5 @@ background: $base-gray; height: 100%; width: 100%; + overflow: hidden; } diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 94cff64..c0fc36b 100644 --- a/src/components/Header.jsx +++ b/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 (
+ {/* Nav top */} + {/* Nav top ================== */} + + {/* Nav bottom */} + {/* Nav bottom ================== */} + + {/* Nav mobile */} +
+
+
+ + logo + +
+ +
+
+
+
+ + + {/* Nav mobile ================== */}
); }; diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx index 166d03e..0915a2f 100644 --- a/src/components/Hero.jsx +++ b/src/components/Hero.jsx @@ -9,10 +9,10 @@ const Hero = () => {
- Перейти на торговую
площадку + Перейти на торговую площадку - Подать документы
онлайн + Подать документы онлайн
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index e98a87c..a858087 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -14,15 +14,9 @@ import arrow from '../assets/icons/arrow.svg'; const Home = () => { return (
-
- {/* Hero section */} - - {/* Hero section ./ =========== */} - - {/* Ticker section */} - - {/* Ticker section ./ =========== */} -
+ {/* Hero section */} + + {/* Hero section ./ =========== */} {/* About section */}