adapt

1 h

src/App.js

@@ -12,12 +12,14 @@ import PageLand from "./pages/page_land";
 import PageUpload from "./pages/page_upload";
 
 
+
 function App() {
   return (
 
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<PageUpload />} />
+        <Route path="/land" element={<PageLand />} />
         {/* <Route path="/reg" element={<PageReg />} />
         <Route path="/land" element={<PageLand />} /> */}
       </Routes>

src/components/Community/style.css

@@ -3,6 +3,7 @@
   justify-content: space-between;
   padding-right: 78px;
   margin-top: 88px;
+  gap: 40px;
 }
 
 .community-left {

src/components/CoubBackground/style.css

@@ -83,3 +83,9 @@ z-index: 4;
   left: 771.44px;
   top: 512.38px;
 }
+
+@media (max-width: 1024px) {
+  .background {
+    min-height: 540%;
+  }
+}

src/components/Footer/style.css

@@ -5,6 +5,7 @@
   padding-bottom: 56px;
   display: flex;
   justify-content: space-between;
+  gap: 20px;
 }
 .footer p {
   font-weight: 400;

src/components/Header/index.jsx

@@ -13,6 +13,7 @@ function Header() {
       <img src={DeCast_logo} alt="" className="footer-logo" />
       <p>DeCast</p>
       </a>
+      {/* <label for="menu-checkbox" class="toggle-button" data-open="Menu" data-close="Close" onclick></label> */}
       <nav className='nav'>
         <div className='nav__item'>Menu1</div>
         <div className='nav__item'>Menu1</div>
@@ -23,6 +24,7 @@ function Header() {
           {/* <img className='authorize__mask white-fox' src={white_fox} alt='' /> */}
           <p className='authorize__text'>Authorize</p>
         </button>
+
       </nav>
     </div>
   );

src/components/Header/style.css

@@ -1,11 +1,10 @@
 .header {
   border-bottom: 1px solid white;
-
   margin: 0;
   padding: 20px 0px;
-
   display: flex;
   justify-content: space-between;
+  gap: 20px;
 }
 .header__logo-block {
   font-weight: 700;
@@ -19,7 +18,6 @@
 .nav {
   display: flex;
   gap: 24px;
-
   align-items: center;
 }
 
@@ -57,3 +55,39 @@
   line-height: 20px;
   background: none;
 }
+
+#menu-checkbox {
+  /* чекбокс скрыт */
+  position: absolute;
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+.toggle-button {
+  text-align: center;
+  display: block;
+  /* не забываем явно указать каким должен быть курсор */
+  cursor: pointer;
+  background-color: #333;
+  color: #fff;
+}
+.toggle-button:after {
+  /* получаем данные из атрибута data-open в html */
+  content: attr(data-open);
+  display: block;
+  margin: 10px 0;
+  padding: 10px 30px;
+}
+#menu-checkbox:checked + nav[role="navigation"] .main-menu {
+  /* когда чекбокс активен меню становится видимым */
+  position: static;
+}
+#menu-checkbox:checked + nav[role="navigation"] .toggle-button:after {
+  content: attr(data-close);
+}
+@media screen and (min-width: 640px) {
+  .toggle-button {
+    /* label скрыт */
+    position: absolute;
+    clip: rect(1px, 1px, 1px, 1px);
+  }
+}

src/components/Main-land/style.css

@@ -39,4 +39,8 @@ a,a:visited {
     /* background: #3a86ff; */
     color: #ffffff;
   }
-
+  @media (max-width:768px) {
+    .content {
+      padding: 0 5%;
+    }
+  }