Merge pull request #90 from Sokilskill/welcome-bgd

Welcome bgd
Sokilskill · Jan 25, 2024 · 1675572 · 1675572
2 parents 33da367 + c72fc6b
commit 1675572
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 101 deletions.
diff --git a/src/components/WelcomeLayout/WelcomeLayout.jsx b/src/components/WelcomeLayout/WelcomeLayout.jsx
@@ -1,19 +1,14 @@
 import StatisticsInfo from '../StatisticsInfo/StatisticsInfo';
 import css from './WelcomeLayout.module.css';
 
-
 const WelcomeLayout = ({ children }) => {
   return (
     <>
       <section className={css.welcome_section}>
-        <div className={css.container}>
-          <div className={css.page_part}>
-            <div className={css.insert_part}>{children}</div>
-            <div className={css.welcome_bgd}>
-
-              <StatisticsInfo />
-
-            </div>
+        <div className={`${css.container} ${css.welcome_container}`}>
+          <div className={css.insert_part}>{children}</div>
+          <div className={css.ststistics}>
+            <StatisticsInfo />
           </div>
         </div>
       </section>

diff --git a/src/components/WelcomeLayout/WelcomeLayout.module.css b/src/components/WelcomeLayout/WelcomeLayout.module.css
@@ -1,83 +1,92 @@
 @import '../../index.css';
 
-.page_part {
-  position: relative;
-  padding-top: 180px;
-}
-.insert_part {
-  position: absolute;
-  top: 66px;
-}
-
-.welcome_bgd {
-  max-width: 298px;
-  height: 100%;
-  margin-left: auto;
-  margin-right: -20px;
-  padding: 319px 20px 40px 44px;
+.welcome_section {
   background-image: url(../../assets/Welcome/images/people-training-gym-mob.webp),
     var(--bg-gradient);
   background-repeat: no-repeat;
-  background-size: cover;
+  background-size: 298px;
+  background-position: bottom right;
 }
 @media (min-device-pixel-ratio: 2),
   (min-resolution: 192dpi),
   (min-resolution: 2dppx) {
-  .welcome_bgd {
+  .welcome_section {
     background-image: url(../../assets/Welcome/images/people-training-gym-mob-2x.webp),
       var(--bg-gradient);
+    background-repeat: no-repeat;
   }
 }
+.welcome_container {
+  position: relative;
+  padding-top: 180px;
+  padding-bottom: 40px;
+}
+.insert_part {
+  position: absolute;
+  top: 66px;
+}
+.ststistics {
+  max-width: 254px;
+  margin-left: auto;
+  margin-top: 320px;
+}
 
 @media (min-width: 768px) {
-  .page_part {
-    padding-top: 48px;
-  }
-  .insert_part {
-    top: 105px;
-  }
-
-  .welcome_bgd {
-    max-width: 437px;
-    padding: 583px 32px 48px 0;
-    margin-right: -32px;
+  .welcome_section {
     background: url(../../assets/Welcome/images/people-training-gym-tab.webp),
       var(--bg-gradient);
+    background-repeat: no-repeat;
+    background-size: 437px;
+    background-position: bottom right;
   }
   @media (min-device-pixel-ratio: 2),
     (min-resolution: 192dpi),
     (min-resolution: 2dppx) {
-    .welcome_bgd {
+    .welcome_section {
       background-image: url(../../assets/Welcome/images/people-training-gym-tab-2x.webp),
         var(--bg-gradient);
-      background-repeat: no-repeat;
-      background-size: cover;
     }
   }
-}
-@media (min-width: 1440px) {
-  .page_part {
-    padding-top: 0;
+  .welcome_container {
+    padding-top: 48px;
+    padding-bottom: 48px;
   }
   .insert_part {
-    top: 200px;
+    top: 105px;
+  }
+  .ststistics {
+    max-width: 436px;
+    margin-top: 582px;
   }
-  .welcome_bgd {
-    max-width: 670px;
-    margin-top: -84px;
-    margin-right: -96px;
-    padding: 384px 32px 172px 0;
+}
+@media (min-width: 1440px) {
+  .welcome_section {
     background-image: url(../../assets/Welcome/images/people-training-gym-desk.webp),
-      var(--bg-desk-gradient);
+      var(--bg-gradient);
+    background-repeat: no-repeat;
+    background-size: 670px;
+    background-position: bottom right;
   }
   @media (min-device-pixel-ratio: 2),
     (min-resolution: 192dpi),
     (min-resolution: 2dppx) {
-    .welcome_bgd {
+    .welcome_section {
       background-image: url(../../assets/Welcome/images/people-training-gym-desk-2x.webp),
         var(--bg-desk-gradient);
-      background-repeat: no-repeat;
-      background-size: cover;
+    }
+    .welcome_container {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+    .insert_part {
+      top: 200px;
+    }
+    .ststistics {
+      max-width: 670px;
+      margin-top: -84px;
+      margin-right: -64px;
+      padding-top: 384px;
+      padding-bottom: 172px;
     }
   }
 }
diff --git a/src/pages/ErrorPage/ErrorPage.jsx b/src/pages/ErrorPage/ErrorPage.jsx
@@ -10,6 +10,7 @@ import {
   SectionContainer,
   LogoWrap,
   Container,
+  ErrorSection,
 } from './ErrorPage.styled';
 import { useDispatch } from 'react-redux';
 import { setErrorPage } from '../../redux/errorPage/err-slice';
@@ -33,32 +34,33 @@ const ErrorPage = () => {
 
   return (
     <>
-      <SectionWrapper
+      <ErrorSection
         bgi={[bg_mod_1, bg_mod_2, bg_tab_1, bg_tab_2, bg_desk_1, bg_desk_2]}
-        className="container section-wrapper"
       >
-        <BackgroundColor>
-          <Container className="container">
-            <LogoWrap>
-              <Logo colorWhite="true" />
-            </LogoWrap>
-            <SectionContainer>
-              <ContentBox>
-                <Title>404</Title>
-                <Text>
-                  Sorry, you have reached a page that we could not find. It
-                  seems that you are lost among the numbers and letters of our
-                  virtual space. Perhaps this page went on vacation or decided
-                  to disappear into another dimension. We apologize for this
-                  inconvenience.
-                </Text>
+        <SectionWrapper className="container section-wrapper">
+          <BackgroundColor>
+            <Container className="container">
+              <LogoWrap>
+                <Logo colorWhite="true" />
+              </LogoWrap>
+              <SectionContainer>
+                <ContentBox>
+                  <Title>404</Title>
+                  <Text>
+                    Sorry, you have reached a page that we could not find. It
+                    seems that you are lost among the numbers and letters of our
+                    virtual space. Perhaps this page went on vacation or decided
+                    to disappear into another dimension. We apologize for this
+                    inconvenience.
+                  </Text>
 
-                <Link to="/">Go Home</Link>
-              </ContentBox>
-            </SectionContainer>
-          </Container>
-        </BackgroundColor>
-      </SectionWrapper>
+                  <Link to="/">Go Home</Link>
+                </ContentBox>
+              </SectionContainer>
+            </Container>
+          </BackgroundColor>
+        </SectionWrapper>
+      </ErrorSection>
     </>
   );
 };

diff --git a/src/pages/ErrorPage/ErrorPage.styled.jsx b/src/pages/ErrorPage/ErrorPage.styled.jsx
@@ -1,62 +1,58 @@
 import styled from '@emotion/styled';
 import { NavLink } from 'react-router-dom';
 
-export const SectionWrapper = styled.div`
-  // position: relative;
-  padding: 0;
-
-
+export const ErrorSection = styled.section`
   background-image: url(${(props) => props.bgi[0]}),
     var(--bg-gradient);
+    background-size: 298px;
   background-repeat: no-repeat;
-  background-position: 107px 240px;
+  background-position: bottom right;
 
   @media (min-device-pixel-ratio: 2),
   (min-resolution: 192dpi),
   (min-resolution: 2dppx) {
-    max-width: 447px,
     background-image: url(${(props) => props.bgi[1]}),
       var(--bg-gradient);
-       background-repeat: no-repeat;
-  background-position: 107px 240px;
-}
 
   @media screen and (min-width: 768px) {
     background-image: url(${(props) => props.bgi[2]}),
       var(--bg-gradient);
+      background-size: 437px;
     background-repeat: no-repeat;
-    background-position: 330px 130px;
+    background-position: bottom right;
   
   @media (min-device-pixel-ratio: 2),
     (min-resolution: 192dpi),
     (min-resolution: 2dppx) {
-      max-width: 670px,
       background-image: url(${(props) => props.bgi[3]}),
         var(--bg-gradient);
-      background-repeat: no-repeat;
-     background-position: 330px 130px;
     }
   }  
 
   @media screen and (min-width: 1440px) {
-     height: 800px;
     background-image: url(${(props) => props.bgi[4]});
       var(--bg-gradient);
+       background-size: 670px;
     background-repeat: no-repeat;
-    background-position: right top;
+    background-position: bottom right;
  
-   @media (min-device-pixel-ratio: 2),
-    (min-resolution: 192dpi),
-    (min-resolution: 2dppx) {
-      max-width: 670px,
-      background-image: url(${(props) => props.bgi[5]}),
-        var(--bg-desk-gradient);
-      background-repeat: no-repeat;
-      background-position: right top;
+  //  @media (min-device-pixel-ratio: 2),
+  //   (min-resolution: 192dpi),
+  //   (min-resolution: 2dppx) {
+  //     max-width: 670px,
+  //     background-image: url(${(props) => props.bgi[5]}),
+  //       var(--bg-desk-gradient);
+  //     background-repeat: no-repeat;
+  //     background-position: right top;
     }
   }
 `;
 
+export const SectionWrapper = styled.div`
+  // position: relative;
+  padding: 0;
+`;
+
 export const SectionContainer = styled.div`
 padding-top: 250px ;
 padding-bottom: 250px;
@@ -96,6 +92,7 @@ export const BackgroundColor = styled.div`
 
   @media screen and (min-width: 1440px) {
     width: 669px;
+    height: 800px;
   }
 `;
 

diff --git a/src/pages/SignInPage/SignInPage.module.css b/src/pages/SignInPage/SignInPage.module.css
@@ -39,6 +39,9 @@
 }
 
 @media (min-width: 768px) {
+  .signin_part {
+    background: none;
+  }
   .text_box {
     min-width: 496px;
     margin-bottom: 32px;

diff --git a/src/pages/SignUpPage/SignUpPage.module.css b/src/pages/SignUpPage/SignUpPage.module.css
@@ -35,6 +35,9 @@
 }
 
 @media (min-width: 768px) {
+  .signup_part {
+    background: none;
+  }
   .text_box {
     min-width: 496px;
     margin-bottom: 32px;