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