Skip to content

Commit 7139231

Browse files
katelovestocodekatelovestocode
committed
homePage facelift
1 parent 6944b13 commit 7139231

File tree

5 files changed

+89
-135
lines changed

5 files changed

+89
-135
lines changed

‎src/components/Header/Navigation/Navigation.styled.jsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ import styled from 'styled-components';
44
export const NavMobMenu = styled.div`
55
position: fixed;
66
right: 0;
7-
top: 60px;
7+
top: 59px;
88
width: 100vw;
99
height: 100vh;
1010
z-index: 2;
11+
overflow: auto;
1112
1213
text-align: center;
13-
z-index: 100;
1414
transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
1515
opacity: ${({ menuToggle }) => (menuToggle ? 1 : 0)};
1616
background-color: ${p => p.theme.colors.background};
@@ -20,7 +20,7 @@ position: fixed;
2020
flex-direction: column;
2121
2222
@media (min-width: 768px) {
23-
top: 72px;
23+
top: 71px;
2424
}
2525
2626
@media (min-width: 1280px) {
@@ -109,6 +109,7 @@ export const Image = styled.img`
109109
border-radius: 50%;
110110
width: 130px;
111111
margin-top: 20px;
112+
margin-bottom: 80px;
112113
113114
@media (min-width: 768px) {
114115

‎src/pages/Homepage/Homepage.jsx

+10-47
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,20 @@
1+
import { Main, Text, Background, SectionWrapper} from "./Homepage.styled"
2+
import { useMediaQuery } from 'react-responsive';
13

2-
import { Main, Text, Container, MobileWrapper, HeartWrapper, ImageWrapper, Image, SectionWrapper} from "./Homepage.styled"
3-
import girtWithDogMob1x from "./images/girlWithDog_1x-mobile-min.png"
4-
import girtWithDogMob2x from "./images/girlWithDog_2x-mobile-min.png"
5-
import girtWithDogTab1x from "./images/girlWithDog_1x-tablet-min.png"
6-
import girtWithDogTab2x from "./images/girlWithDog_2x-tablet-min.png"
7-
import girtWithDogDesk1x from "./images/girlWithDog_1x-desktop-min.png"
8-
import girtWithDogDesk2x from "./images/girlWithDog_2x-desktop-min.png"
9-
import heart from "./images/heart-min.png"
4+
const Homepage = () => {
105

6+
const isDesktop = useMediaQuery({ query: '(min-width: 1280px)' });
117

12-
const Homepage = () => {
138
return (
149
<Main>
15-
<Container>
16-
<SectionWrapper>
17-
<Text>Take good care of your small pets</Text>
18-
<ImageWrapper>
19-
20-
<picture>
21-
<source srcSet={`${girtWithDogDesk1x} 1x, ${girtWithDogDesk2x} 2x`}
22-
media="(min-width: 1280px)"/>
23-
<source
24-
srcSet={`${girtWithDogTab1x} 1x, ${girtWithDogTab2x} 2x`}
25-
media="(min-width: 768px)"/>
26-
27-
<Image
28-
src={girtWithDogMob1x}
29-
alt='Girl with a dog'
30-
width={645}
31-
/>
32-
<HeartWrapper> <img src={heart} alt="cute heart" width={92} /> </HeartWrapper>
33-
34-
</picture>
35-
</ImageWrapper>
36-
</SectionWrapper>
37-
38-
39-
<MobileWrapper>
40-
<picture>
41-
<source
42-
media="(min-width: 320px)"
43-
srcSet={`${girtWithDogMob1x} 1x, ${girtWithDogMob2x} 2x`}/>
4410

45-
<img
46-
src={girtWithDogMob1x}
47-
alt='Girl with a dog'
48-
width={320}
49-
/>
50-
</picture>
51-
</MobileWrapper>
52-
</Container>
11+
{isDesktop ? (<Background> <SectionWrapper>
12+
<Text>Take good care of your small pets</Text> </SectionWrapper> </Background>)
13+
:(<Background> <Text>Take good care of your small pets</Text> </Background>)
14+
}
15+
5316
</Main>
54-
17+
5518
)
5619
};
5720

‎src/pages/Homepage/Homepage.styled.jsx

+75-85
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,21 @@
11
import styled from 'styled-components';
22
import backgroundImageMob from './images/background-mobile-min.png';
33
import backgroundImageTablet from './images/background-tablet-min.png';
4-
import backgroundImageDesk from './images/background-desktopE5-min.png';
4+
import backgroundImageDeskV2 from './images/backgroundImageDesk-V2-1x.png';
5+
import backgroundImageDeskV22x from './images/backgroundImageDesk-V2-2x.png';
6+
7+
import girtWithDogMob1x from "./images/girlWithDog_1x-mobile-min.png"
8+
import girtWithDogMob2x from "./images/girlWithDog_2x-mobile-min.png"
9+
import girtWithDogTab1x from "./images/girlWithDog_1x-tablet-min.png"
10+
import girtWithDogTab2x from "./images/girlWithDog_2x-tablet-min.png"
11+
import girtWithDogDesk1x from "./images/girlWithDog_1x-desktop-min.png"
12+
import girtWithDogDesk2x from "./images/girlWithDog_2x-desktop-min.png"
13+
import heart from "./images/heart-min.png"
14+
515

616
export const Main = styled.main`
717
margin: 0 auto;
8-
9-
@media screen and (min-width: 1280px) {
10-
max-width: 1280px;
11-
margin-top: 30px;
12-
}
18+
width: 100%;
1319
`;
1420

1521
export const Text = styled.h1`
@@ -18,113 +24,97 @@ export const Text = styled.h1`
1824
line-height: 1.38;
1925
font-family: ${p => p.theme.fonts.body};
2026
padding: 60px 20px 60px 20px;
27+
max-width: 320px;
2128
2229
@media (min-width: 768px) {
2330
font-size: 68px;
2431
line-height: 1.47;
25-
padding: 88px 32px 118px 32px;
32+
padding: 88px 0px 118px 32px;
33+
max-width: 607px;
34+
margin-right: auto;
35+
max-width: 620px;
2636
}
2737
28-
@media screen and (min-width: 1024px) {
29-
padding: 32px 0 0 0;
30-
width: 100%;
38+
@media screen and (min-width: 1280px) {
39+
padding: 40px 0 0 16px;
40+
max-width: 604px;
41+
margin-right: auto;
3142
}
3243
`;
3344

34-
export const Container = styled.div`
35-
background: url(${backgroundImageMob});
36-
background-position: bottom -15px right calc(50vw - 375px);
37-
background-repeat: no-repeat;
45+
export const Background = styled.section`
46+
background: url(${girtWithDogMob1x}), url(${backgroundImageMob}) ;
3847
height: calc(100vh - 59px);
48+
background-position: bottom, bottom -10px right -200px;
49+
background-repeat: no-repeat;
3950
40-
display: flex;
41-
flex-direction: column;
42-
justify-content: flex-end;
51+
@media (min-device-pixel-ratio: 2),
52+
(min-resolution: 192dpi),
53+
(min-resolution: 2dppx) {
54+
background-image: url(${girtWithDogMob2x}), url(${backgroundImageMob});
55+
}
4356
4457
@media screen and (min-width: 768px) {
45-
flex-direction: column;
46-
background: url(${backgroundImageTablet});
47-
background-position: 22% calc(9vh + 100%);
58+
background-image: url(${girtWithDogTab1x}), url(${backgroundImageTablet});
59+
background-position: bottom, 22% calc(9vh + 100%) ;
4860
background-repeat: no-repeat;
49-
height: calc(100vh - 74px);
61+
height: calc(100vh - 75px);
62+
63+
64+
@media (min-device-pixel-ratio: 2),
65+
(min-resolution: 192dpi),
66+
(min-resolution: 2dppx) {
67+
background-image: url(${girtWithDogTab2x}), url(${backgroundImageTablet});
68+
}
69+
5070
}
5171
52-
@media screen and (min-width: 1024px) {
53-
padding-top: 40px;
54-
55-
background: url(${backgroundImageTablet});
56-
background-position: 60% calc(22vh + 100%);
72+
/* @media screen and (min-width: 1024px) {
73+
background: url(${girtWithDogTab1x}, url(${backgroundImageDeskV2});
74+
background-position: bottom, 60% calc(22vh + 100%);
5775
background-repeat: no-repeat;
5876
background-size: contain;
5977
height: calc(100vh - 99px);
78+
} */
6079
61-
display: flex;
62-
flex-direction: column;
63-
justify-content: flex-end;
64-
align-items: center;
65-
}
66-
@media screen and (min-width: 1180px) {
67-
padding-top: 40px;
68-
flex-direction: column;
69-
background: url(${backgroundImageDesk});
70-
background-position: 100% calc(10vh + 100%);
80+
@media screen and (min-width: 1280px) {
81+
margin-top: 60px;
82+
background: url(${girtWithDogDesk1x}), url(${backgroundImageDeskV2});
83+
background-position: bottom right, bottom -10px right -25px;
7184
background-repeat: no-repeat;
7285
background-size: contain;
86+
height: calc(100vh - 130px);
87+
88+
&:after {
89+
content: '';
90+
position: absolute;
91+
width: 92px;
92+
height: 89px;
93+
background-image: url(${heart});
94+
top: calc(50% - 200px);
95+
left: calc(50% + 80px);
96+
}
97+
98+
@media (min-device-pixel-ratio: 2),
99+
(min-resolution: 192dpi),
100+
(min-resolution: 2dppx) {
101+
background-image: url(${girtWithDogDesk2x}), url(${backgroundImageDeskV22x});
102+
}
73103
}
74-
`;
75-
export const ImageWrapper = styled.div`
76-
display: none;
77-
78-
@media (min-width: 768px) {
79-
display: flex;
80-
justify-content: center;
81-
position: relative;
82-
}
83-
`;
104+
`;
84105

85106
export const SectionWrapper = styled.div`
86-
display: flex;
87-
flex-direction: column;
88-
justify-content: flex-end;
89-
90-
@media screen and (min-width: 1024px) {
91-
flex-direction: row;
92-
padding: 0 16px;
93-
justify-content: flex-end;
94-
}
95-
`;
96-
97-
export const MobileWrapper = styled.div`
98-
justify-content: center;
99-
display: flex;
100-
101-
@media (min-width: 768px) {
102-
display: none;
103-
}
104-
`;
105-
export const Image = styled.img`
106-
display: flex;
107107
width: 100%;
108-
109-
@media (min-width: 768px) {
110-
max-width: 645px;
111-
width: 100%;
108+
margin-right: auto;
109+
margin-left: auto;
110+
@media screen and (min-width: 320px) {
111+
width: 320px
112112
}
113-
@media screen and (min-width: 1024px) {
114-
width: 590px;
113+
@media screen and (min-width: 768px) {
114+
width: 768px;
115115
}
116-
@media screen and (min-width: 1180px) {
117-
width: 590px;
116+
@media screen and (min-width: 1280px) {
117+
width: 1280px;
118118
}
119119
`;
120120

121-
export const HeartWrapper = styled.div`
122-
display: none;
123-
124-
@media screen and (min-width: 1180px) {
125-
display: flex;
126-
position: absolute;
127-
left: 48px;
128-
top: 43px;
129-
}
130-
`;

‎src/pages/Homepage/images/backgroundImageDesk-V2-1x.png

91 KB
Loading

‎src/pages/Homepage/images/backgroundImageDesk-V2-2x.png

333 KB
Loading

0 commit comments

Comments
 (0)