styling and optmize
This commit is contained in:
parent
36599e4639
commit
1f7cc6ea81
Binary file not shown.
Before Width: | Height: | Size: 187 KiB After Width: | Height: | Size: 177 KiB |
Binary file not shown.
After Width: | Height: | Size: 177 KiB |
|
@ -10,12 +10,16 @@ import {
|
||||||
const ContainerPadded = styled(Container)`
|
const ContainerPadded = styled(Container)`
|
||||||
padding: 7% 15%;
|
padding: 7% 15%;
|
||||||
|
|
||||||
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const WhiteSection = styled.footer`
|
const WhiteSection = styled.footer`
|
||||||
background: ${ props => props.background || "white"};
|
background: ${ props => props.background || "white"};
|
||||||
`;
|
|
||||||
|
|
||||||
|
`;
|
||||||
|
const ContainerCentered = styled.div`
|
||||||
|
text-align: center;
|
||||||
|
`;
|
||||||
const FacebookIcon = styled(Facebook)`
|
const FacebookIcon = styled(Facebook)`
|
||||||
margin: 20px 10px;
|
margin: 20px 10px;
|
||||||
width: 16px;
|
width: 16px;
|
||||||
|
@ -43,6 +47,7 @@ const Footer = (props) => {
|
||||||
return (
|
return (
|
||||||
<WhiteSection>
|
<WhiteSection>
|
||||||
<ContainerPadded fluid>
|
<ContainerPadded fluid>
|
||||||
|
<ContainerCentered>
|
||||||
<FacebookIcon />
|
<FacebookIcon />
|
||||||
<TwitterIcon />
|
<TwitterIcon />
|
||||||
<InstagramIcon />
|
<InstagramIcon />
|
||||||
|
@ -51,6 +56,7 @@ const Footer = (props) => {
|
||||||
<p>© Copyright 2020 Locaft</p>
|
<p>© Copyright 2020 Locaft</p>
|
||||||
<p><a href="/tc">Terms and Conditions</a></p>
|
<p><a href="/tc">Terms and Conditions</a></p>
|
||||||
<p><a href="/pp">Privacy Policy</a></p>
|
<p><a href="/pp">Privacy Policy</a></p>
|
||||||
|
</ContainerCentered>
|
||||||
</ContainerPadded>
|
</ContainerPadded>
|
||||||
</WhiteSection>
|
</WhiteSection>
|
||||||
)
|
)
|
||||||
|
|
|
@ -19,8 +19,8 @@ import { Bullseye } from "@styled-icons/fa-solid";
|
||||||
import { StyledIconBase } from '@styled-icons/styled-icon'
|
import { StyledIconBase } from '@styled-icons/styled-icon'
|
||||||
const IconStyler = styled.div`
|
const IconStyler = styled.div`
|
||||||
${StyledIconBase} {
|
${StyledIconBase} {
|
||||||
width: ${props => props.w ? props.w : 26}px;
|
width: ${props => props.width ? props.width : 26}px;
|
||||||
height: ${props => props.height ? props.height : 26}px;
|
height: ${props => props.height ? props.height : 26};
|
||||||
color: ${ props => props.color ? props.color: "white"};
|
color: ${ props => props.color ? props.color: "white"};
|
||||||
|
|
||||||
|
|
||||||
|
@ -146,19 +146,22 @@ export default function HomePage() {
|
||||||
|
|
||||||
<Row>
|
<Row>
|
||||||
<FeatureCol lg="4">
|
<FeatureCol lg="4">
|
||||||
<IconStyler width={100} height= {100} color="#66bfbf"><CheckCircle /></IconStyler>
|
<IconStyler color="#66bfbf" width={50} height={50}><CheckCircle /></IconStyler>
|
||||||
|
<br/>
|
||||||
<FeatureTitle>Easy to use.</FeatureTitle>
|
<FeatureTitle>Easy to use.</FeatureTitle>
|
||||||
<p>Get relocated.We'll take care of everything.</p>
|
<p>Get relocated.We'll take care of everything.</p>
|
||||||
</FeatureCol>
|
</FeatureCol>
|
||||||
|
|
||||||
<FeatureCol lg="4">
|
<FeatureCol lg="4">
|
||||||
<IconBullseye />
|
<IconStyler color="#66bfbf" width={50} height={50}><Bullseye /></IconStyler>
|
||||||
|
<br />
|
||||||
<FeatureTitle>Efficient</FeatureTitle>
|
<FeatureTitle>Efficient</FeatureTitle>
|
||||||
<p>Get highest number of services for lowest cost possible.</p>
|
<p>Get highest number of services for lowest cost possible.</p>
|
||||||
</FeatureCol>
|
</FeatureCol>
|
||||||
|
|
||||||
<FeatureCol lg="4">
|
<FeatureCol lg="4">
|
||||||
<IconHeart />
|
<IconStyler color="#66bfbf" width={50} height={50}><Heart /></IconStyler>
|
||||||
|
<br />
|
||||||
<FeatureTitle>Relax</FeatureTitle>
|
<FeatureTitle>Relax</FeatureTitle>
|
||||||
<p>Sit back , we'll do the dirty work.</p>
|
<p>Sit back , we'll do the dirty work.</p>
|
||||||
</FeatureCol>
|
</FeatureCol>
|
||||||
|
|
Loading…
Reference in New Issue