styles changed Footer and Layout

NataliaNazarenko · Oct 17, 2023 · 8a9542b · 8a9542b
1 parent 3b6e2df
commit 8a9542b
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 22 deletions.
diff --git a/src/components/FooterBar/FooterBar.styled.jsx b/src/components/FooterBar/FooterBar.styled.jsx
@@ -9,7 +9,7 @@ export const Container = styled.div`
   margin: 0 auto;
   width: 100%;
   max-width: 375px;
-
+  
   padding: 20px 50px;
 
   display: flex;

diff --git a/src/components/MainSection/MainSection.jsx b/src/components/MainSection/MainSection.jsx
@@ -16,15 +16,10 @@ export const MainSection = () => {
 
   return (
     <>
-      <main>
-
-        <Hero>
-          <Text>Travel worry-free and in comfort</Text>
-
-          <Button onClick={handleNav}>Your Comfort Now</Button>
-        </Hero>
-
-      </main>
+      <Hero>
+        <Text>Travel worry-free and in comfort</Text>
+        <Button onClick={handleNav}>Your Comfort Now</Button>
+      </Hero>
     </>
   );
 };

diff --git a/src/components/MainSection/MainSection.styled.jsx b/src/components/MainSection/MainSection.styled.jsx
@@ -16,6 +16,7 @@ export const Container = styled.div`
   }
 `;
 
+
 export const Hero = styled.div`
   margin: 0 auto;
   max-width: 1600px;
@@ -27,7 +28,7 @@ export const Hero = styled.div`
   background-size: cover;
   @media (min-width: 1440px) {
     padding: 200px 0px;
-    height: 800px;
+    
   }
 `;
 

diff --git a/src/layout/Layout.jsx b/src/layout/Layout.jsx
@@ -3,18 +3,22 @@ import { Outlet } from 'react-router-dom';
 import { Suspense } from 'react';
 import { FooterBar } from 'components/FooterBar';
 import { HeaderBar } from 'components/HeaderBar';
-// import { Main } from './Layout.styled';
+import { Container, MainContent, Footer } from './Layout.styled';
 
 export default function Layout() {
   return (
-    <>
+    <Container>
       <HeaderBar />
       <main>
-        <Suspense fallback={<div>Loading...</div>}>
-          <Outlet />
-        </Suspense>
+        <MainContent>
+          <Suspense fallback={<div>Loading...</div>}>
+            <Outlet />
+          </Suspense>
+        </MainContent>
       </main>
-      <FooterBar />
-    </>
+      <Footer>
+        <FooterBar />
+      </Footer>
+    </Container>
   );
 }
diff --git a/src/layout/Layout.styled.jsx b/src/layout/Layout.styled.jsx
@@ -1,7 +1,19 @@
 import styled from '@emotion/styled';
 
-export const Main = styled.main`
-  max-width: 960px;
-  margin: 0 auto;
-  padding: 0 16px;
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
 `;
+
+export const MainContent = styled.div`
+  flex-grow: 1;
+  
+`;
+
+export const Footer = styled.footer`
+  margin-top: auto;
+`;
+
+
+