Merge pull request #14 from ViktorSvertoka/exersises-page

Feat(Exercises) Added new functionality
ViktorSvertoka · Sep 16, 2023 · 48ddc20 · 48ddc20
2 parents b7bf051 + 6e99a92
commit 48ddc20
Show file tree

Hide file tree

Showing 2 changed files with 200 additions and 1 deletion.
diff --git a/src/pages/ExercisesPage/ExercisesPage.jsx b/src/pages/ExercisesPage/ExercisesPage.jsx
@@ -1,5 +1,58 @@
+import { Container } from '../../styles/container';
+import { ExercisesTitle,  ExercisesItem, Wrap, ExercisesNavList, ImageList, Image, ImageItem} from './ExercisesPage.styled';
+
 const ExercisesPage = () => {
-  return <div>ExercisesPage</div>;
+  return (
+    <Container>
+      <Wrap>
+      <ExercisesTitle>Exercises</ExercisesTitle>
+      <ExercisesNavList>
+        <ExercisesItem>Body parts</ExercisesItem>
+        <ExercisesItem>Muscules</ExercisesItem>
+        <ExercisesItem>Equipment</ExercisesItem>
+      </ExercisesNavList>
+      </Wrap>
+      <ImageList>
+        <ImageItem>
+          <Image src="/src/images/0-default.jpg" alt="image" />
+        </ImageItem>
+        <ImageItem>
+          <Image src="/src/images/0-default.jpg" alt="image" />
+        </ImageItem>
+        <ImageItem>
+          <Image src="/src/images/0-default.jpg" alt="image" />
+        </ImageItem>      
+        <ImageItem>
+          <Image src="/src/images/0-default.jpg" alt="image" />
+        </ImageItem>      
+        <ImageItem>
+          <Image src="/src/images/0-default.jpg" alt="image" />
+        </ImageItem>      
+        <ImageItem>
+          <Image src="/src/images/0-default.jpg" alt="image" />
+        </ImageItem>
+          <ImageItem>
+          <Image src="/src/images/0-default.jpg" alt="image" />
+        </ImageItem>
+          <ImageItem>
+          <Image src="/src/images/0-default.jpg" alt="image" />
+        </ImageItem>
+          <ImageItem>
+          <Image src="/src/images/0-default.jpg" alt="image" />
+        </ImageItem>
+          <ImageItem>
+          <Image src="/src/images/0-default.jpg" alt="image" />
+        </ImageItem>
+          <ImageItem>
+          <Image src="/src/images/0-default.jpg" alt="image" />
+        </ImageItem>
+
+
+
+      </ImageList>
+
+    </Container>
+  );
 };
 
 export default ExercisesPage;
diff --git a/src/pages/ExercisesPage/ExercisesPage.styled.jsx b/src/pages/ExercisesPage/ExercisesPage.styled.jsx
@@ -0,0 +1,146 @@
+import styled from 'styled-components';
+
+// const Container = styled.div`
+//   background-color: #000000;
+//   width: 1440px;
+//   margin: 0 auto;
+
+// `;
+
+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;
+  }
+`;
+
+const ExercisesTitle = styled.h2`
+  @media screen and (min-width: 375px) and (max-width: 767.99px) {
+    background-color: #000000;
+    width: 375px;
+    padding-top: 40px;
+    padding-left: 20px;
+    font: Robot-Bold;
+    font-size: 24px;
+    color: #efede8;
+  }
+   @media screen and (min-width: 768px) and (max-width: 1440px) {
+    padding-top: 72px;
+     font: Robot-Bold;
+     font-size: 32px;
+    color: #efede8;
+  
+`;
+
+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;
+`;
+
+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;
+
+    &::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;
+    font-size: 16px;
+  }
+`;
+
+const ImageList = styled.ul`
+  @media screen and (min-width: 375px) and (max-width: 768px) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 20px;
+    width:375px;
+
+    margin: 0 auto;
+    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;
+  }
+`;
+const ImageItem = styled.li`
+   display:block;
+   @media screen and (min-width: 768px) and (max-width: 1440px) {
+   flex-basis: calc((100% - 2 * 16px) / 3);
+
+  }
+   
+      
+`;
+
+const Image = styled.img`
+  display:block
+  max-width: 100%;
+  height: auto;
+  border: 1px #efede8;
+  border-radius: 12px;
+`;
+
+export {
+  ExercisesTitle,
+
+  ExercisesItem,
+  Wrap,
+  ExercisesNavList,
+  ImageList,
+  Image,
+  ImageItem,
+};