Merge pull request #16 from ViktorSvertoka/exercises-page

Feat(Exercises) Added new functionality
ViktorSvertoka · Sep 16, 2023 · aab429e · aab429e
2 parents 49d7cdb + a0ef9d3
commit aab429e
Show file tree

Hide file tree

Showing 2 changed files with 108 additions and 57 deletions.
diff --git a/src/pages/ExercisesPage/ExercisesPage.jsx b/src/pages/ExercisesPage/ExercisesPage.jsx
@@ -1,16 +1,24 @@
 import { Container } from '../../styles/container';
-import { ExercisesTitle,  ExercisesItem, Wrap, ExercisesNavList, ImageList, Image, ImageItem} from './ExercisesPage.styled';
+import {
+  ExercisesTitle,
+  ExercisesItem,
+  Wrap,
+  ExercisesNavList,
+  ImageList,
+  Image,
+  ImageItem,
+} from './ExercisesPage.styled';
 
 const ExercisesPage = () => {
   return (
     <Container>
       <Wrap>
-      <ExercisesTitle>Exercises</ExercisesTitle>
-      <ExercisesNavList>
-        <ExercisesItem>Body parts</ExercisesItem>
-        <ExercisesItem>Muscules</ExercisesItem>
-        <ExercisesItem>Equipment</ExercisesItem>
-      </ExercisesNavList>
+        <ExercisesTitle>Exercises</ExercisesTitle>
+        <ExercisesNavList>
+          <ExercisesItem>Body parts</ExercisesItem>
+          <ExercisesItem>Muscules</ExercisesItem>
+          <ExercisesItem>Equipment</ExercisesItem>
+        </ExercisesNavList>
       </Wrap>
       <ImageList>
         <ImageItem>
@@ -21,36 +29,29 @@ const ExercisesPage = () => {
         </ImageItem>
         <ImageItem>
           <Image src="/src/images/0-default.jpg" alt="image" />
-        </ImageItem>      
-        <ImageItem>
-          <Image src="/src/images/0-default.jpg" alt="image" />
-        </ImageItem>      
+        </ImageItem>
         <ImageItem>
           <Image src="/src/images/0-default.jpg" alt="image" />
-        </ImageItem>      
+        </ImageItem>
         <ImageItem>
           <Image src="/src/images/0-default.jpg" alt="image" />
         </ImageItem>
-          <ImageItem>
+        <ImageItem>
           <Image src="/src/images/0-default.jpg" alt="image" />
         </ImageItem>
-          <ImageItem>
+        <ImageItem>
           <Image src="/src/images/0-default.jpg" alt="image" />
         </ImageItem>
-          <ImageItem>
+        <ImageItem>
           <Image src="/src/images/0-default.jpg" alt="image" />
         </ImageItem>
-          <ImageItem>
+        <ImageItem>
           <Image src="/src/images/0-default.jpg" alt="image" />
         </ImageItem>
-          <ImageItem>
+        <ImageItem>
           <Image src="/src/images/0-default.jpg" alt="image" />
         </ImageItem>
-
-
-
       </ImageList>
-
     </Container>
   );
 };

diff --git a/src/pages/ExercisesPage/ExercisesPage.styled.jsx b/src/pages/ExercisesPage/ExercisesPage.styled.jsx
@@ -11,15 +11,17 @@ const Wrap = styled.div`
   @media screen and (min-width: 375px) and (max-width: 767.99px) {
     display: flex;
     flex-direction: column;
-    
   }
 
   @media screen and (min-width: 768px) and (max-width: 1440px) {
     display: flex;
-    flex-direction:row;
     padding-left: 32px;
     padding-top: 78 px;
   }
+
+  @media screen and (min-width: 1440px) {
+    display: flex;
+  }
 `;
 
 const ExercisesTitle = styled.h2`
@@ -28,58 +30,93 @@ const ExercisesTitle = styled.h2`
     width: 375px;
     padding-top: 40px;
     padding-left: 20px;
-    font: Robot-Bold;
+    font: Roboto-Bold;
     font-size: 24px;
+    line-height: 1,16;
     color: #efede8;
   }
    @media screen and (min-width: 768px) and (max-width: 1440px) {
     padding-top: 72px;
-     font: Robot-Bold;
-     font-size: 32px;
+    font: Roboto
+    font-size: 32px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 1,37;
     color: #efede8;
+  }
+
+  @media screen and (min-width: 1440px)  {
+    color: #EFEDE8;
+    font: Roboto-Bold;
+    font-size: 32px;
+   
+    font-weight: 700;
+    line-height: 1,37;
+    padding-top:72px;
+    padding-left:96px;
+ 
+  }
   
 `;
 
 const ExercisesNavList = styled.ul`
-  
-   display: flex;
-   flex-direction:row;
-
-    @media screen and (min-width: 768px) and (max-width: 1440px) {
-       padding-top: 78px;
-       margin-left:auto;
-       margin-right:32px;
-       color: #efede8;
-       gap:32px;
+  display: flex;
+  flex-direction: row;
+
+  @media screen and (min-width: 768px) and (max-width: 1440px) {
+    padding-top: 78px;
+    margin-left: auto;
+    margin-right: 32px;
+    color: #efede8;
+    gap: 32px;
+  }
+
+  @media screen and (min-width: 1440px) {
+    color: #efede8;
+    gap: 32px;
+    margin-left: auto;
+    padding-right: 96px;
+    padding-top: 78px;
+  }
 `;
 
 const ExercisesItem = styled.li`
   @media screen and (min-width: 375px) and (max-width: 767.99px) {
     position: relative;
     display: flex;
-    
 
     padding-top: 20px;
     padding-left: 20px;
-    font-family: Robot-Regular;
-    font-size: 14px;
-    line-height: 1, 29;
-    color: #efede8;
-
+    color: #EFEDE8;
+    font-family: Roboto, sans-serif;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;  
+    line-height: 1,28;
+    color: #EFEDE8;
     &::after {
       content: '';
       position: absolute;
       bottom: -3px;
       width: 100%;
       height: 4px;
       background-color: var(--orange-color);
-      
-      
     }
+
+  
+  @media screen and (min-width: 768px) and (max-width: 1440px) {
+    font-family: Roboto, sans-serif;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1,5;
   }
   @media screen and (min-width: 768px) and (max-width: 1440px) {
     font-family: Roboto;
     font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1,5;
   }
 `;
 
@@ -90,40 +127,54 @@ const ImageList = styled.ul`
     align-items: center;
     justify-content: center;
     gap: 20px;
-    width:375px;
+    width: 375px;
 
     margin: 0 auto;
-    padding-left:20px;
-    padding-right:20px;
+    padding-left: 20px;
+    padding-right: 20px;
     padding-top: 40px;
     padding-bottom: 134px;
   }
 
   @media screen and (min-width: 768px) and (max-width: 1440px) {
     display: flex;
-   
+
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
+    width: 768px;
+    margin-left: auto;
+    margin-right: auto;
+
+    padding-left: 32px;
+    padding-right: 32px;
+    padding-top: 64px;
+    padding-bottom: 134px;
+  }
+
+  @media screen and (min-width: 1440px) {
+    display: flex;
+
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     gap: 16px;
-    width:768px;
+    width: 1440px;
     margin-left: auto;
     margin-right: auto;
-         
+
     padding-left: 32px;
     padding-right: 32px;
     padding-top: 64px;
     padding-bottom: 134px;
   }
 `;
 const ImageItem = styled.li`
-   display:block;
-   @media screen and (min-width: 768px) and (max-width: 1440px) {
-   flex-basis: calc((100% - 2 * 16px) / 3);
-
+  display: block;
+  @media screen and (min-width: 768px) and (max-width: 1440px) {
+    flex-basis: calc((100% - 2 * 16px) / 3);
   }
-   
-      
 `;
 
 const Image = styled.img`
@@ -136,7 +187,6 @@ const Image = styled.img`
 
 export {
   ExercisesTitle,
-
   ExercisesItem,
   Wrap,
   ExercisesNavList,