Skip to content

Commit 48ddc20

Browse files
ViktorSvertokaViktorSvertoka
authored
Merge pull request #14 from ViktorSvertoka/exersises-page
Feat(Exercises) Added new functionality
2 parents b7bf051 + 6e99a92 commit 48ddc20

File tree

2 files changed

+200
-1
lines changed

2 files changed

+200
-1
lines changed

‎src/pages/ExercisesPage/ExercisesPage.jsx

Lines changed: 54 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,58 @@
1+
import { Container } from '../../styles/container';
2+
import { ExercisesTitle, ExercisesItem, Wrap, ExercisesNavList, ImageList, Image, ImageItem} from './ExercisesPage.styled';
3+
14
const ExercisesPage = () => {
2-
return <div>ExercisesPage</div>;
5+
return (
6+
<Container>
7+
<Wrap>
8+
<ExercisesTitle>Exercises</ExercisesTitle>
9+
<ExercisesNavList>
10+
<ExercisesItem>Body parts</ExercisesItem>
11+
<ExercisesItem>Muscules</ExercisesItem>
12+
<ExercisesItem>Equipment</ExercisesItem>
13+
</ExercisesNavList>
14+
</Wrap>
15+
<ImageList>
16+
<ImageItem>
17+
<Image src="/src/images/0-default.jpg" alt="image" />
18+
</ImageItem>
19+
<ImageItem>
20+
<Image src="/src/images/0-default.jpg" alt="image" />
21+
</ImageItem>
22+
<ImageItem>
23+
<Image src="/src/images/0-default.jpg" alt="image" />
24+
</ImageItem>
25+
<ImageItem>
26+
<Image src="/src/images/0-default.jpg" alt="image" />
27+
</ImageItem>
28+
<ImageItem>
29+
<Image src="/src/images/0-default.jpg" alt="image" />
30+
</ImageItem>
31+
<ImageItem>
32+
<Image src="/src/images/0-default.jpg" alt="image" />
33+
</ImageItem>
34+
<ImageItem>
35+
<Image src="/src/images/0-default.jpg" alt="image" />
36+
</ImageItem>
37+
<ImageItem>
38+
<Image src="/src/images/0-default.jpg" alt="image" />
39+
</ImageItem>
40+
<ImageItem>
41+
<Image src="/src/images/0-default.jpg" alt="image" />
42+
</ImageItem>
43+
<ImageItem>
44+
<Image src="/src/images/0-default.jpg" alt="image" />
45+
</ImageItem>
46+
<ImageItem>
47+
<Image src="/src/images/0-default.jpg" alt="image" />
48+
</ImageItem>
49+
50+
51+
52+
</ImageList>
53+
54+
</Container>
55+
);
356
};
457

558
export default ExercisesPage;

‎src/pages/ExercisesPage/ExercisesPage.styled.jsx

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
import styled from 'styled-components';
2+
3+
// const Container = styled.div`
4+
// background-color: #000000;
5+
// width: 1440px;
6+
// margin: 0 auto;
7+
8+
// `;
9+
10+
const Wrap = styled.div`
11+
@media screen and (min-width: 375px) and (max-width: 767.99px) {
12+
display: flex;
13+
flex-direction: column;
14+
15+
}
16+
17+
@media screen and (min-width: 768px) and (max-width: 1440px) {
18+
display: flex;
19+
flex-direction:row;
20+
padding-left: 32px;
21+
padding-top: 78 px;
22+
}
23+
`;
24+
25+
const ExercisesTitle = styled.h2`
26+
@media screen and (min-width: 375px) and (max-width: 767.99px) {
27+
background-color: #000000;
28+
width: 375px;
29+
padding-top: 40px;
30+
padding-left: 20px;
31+
font: Robot-Bold;
32+
font-size: 24px;
33+
color: #efede8;
34+
}
35+
@media screen and (min-width: 768px) and (max-width: 1440px) {
36+
padding-top: 72px;
37+
font: Robot-Bold;
38+
font-size: 32px;
39+
color: #efede8;
40+
41+
`;
42+
43+
const ExercisesNavList = styled.ul`
44+
45+
display: flex;
46+
flex-direction:row;
47+
48+
@media screen and (min-width: 768px) and (max-width: 1440px) {
49+
padding-top: 78px;
50+
margin-left:auto;
51+
margin-right:32px;
52+
color: #efede8;
53+
gap:32px;
54+
`;
55+
56+
const ExercisesItem = styled.li`
57+
@media screen and (min-width: 375px) and (max-width: 767.99px) {
58+
position: relative;
59+
display: flex;
60+
61+
62+
padding-top: 20px;
63+
padding-left: 20px;
64+
font-family: Robot-Regular;
65+
font-size: 14px;
66+
line-height: 1, 29;
67+
color: #efede8;
68+
69+
&::after {
70+
content: '';
71+
position: absolute;
72+
bottom: -3px;
73+
width: 100%;
74+
height: 4px;
75+
background-color: var(--orange-color);
76+
77+
78+
}
79+
}
80+
@media screen and (min-width: 768px) and (max-width: 1440px) {
81+
font-family: Roboto;
82+
font-size: 16px;
83+
}
84+
`;
85+
86+
const ImageList = styled.ul`
87+
@media screen and (min-width: 375px) and (max-width: 768px) {
88+
display: flex;
89+
flex-direction: column;
90+
align-items: center;
91+
justify-content: center;
92+
gap: 20px;
93+
width:375px;
94+
95+
margin: 0 auto;
96+
padding-left:20px;
97+
padding-right:20px;
98+
padding-top: 40px;
99+
padding-bottom: 134px;
100+
}
101+
102+
@media screen and (min-width: 768px) and (max-width: 1440px) {
103+
display: flex;
104+
105+
flex-wrap: wrap;
106+
align-items: center;
107+
justify-content: center;
108+
gap: 16px;
109+
width:768px;
110+
margin-left: auto;
111+
margin-right: auto;
112+
113+
padding-left: 32px;
114+
padding-right: 32px;
115+
padding-top: 64px;
116+
padding-bottom: 134px;
117+
}
118+
`;
119+
const ImageItem = styled.li`
120+
display:block;
121+
@media screen and (min-width: 768px) and (max-width: 1440px) {
122+
flex-basis: calc((100% - 2 * 16px) / 3);
123+
124+
}
125+
126+
127+
`;
128+
129+
const Image = styled.img`
130+
display:block
131+
max-width: 100%;
132+
height: auto;
133+
border: 1px #efede8;
134+
border-radius: 12px;
135+
`;
136+
137+
export {
138+
ExercisesTitle,
139+
140+
ExercisesItem,
141+
Wrap,
142+
ExercisesNavList,
143+
ImageList,
144+
Image,
145+
ImageItem,
146+
};

0 commit comments

Comments
 (0)