.footer{
margin-top: 1rem;
padding: 1rem;
background-color: rgb(235, 195, 64);
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
import React from "react";
import {
Box,
Container,
Row,
Column,
FooterLink,
Heading,
} from "./FooterStyles";
const Footer = () => {
return (
<Box>
<h1 style={{ color: "green",
textAlign: "center",
marginTop: "-50px" }}>
GeeksforGeeks: A Computer Science Portal for Geeks
</h1>
<Container>
<Row>
<Column>
<Heading>About Us</Heading>
<FooterLink href="#">Aim</FooterLink>
<FooterLink href="#">Vision</FooterLink>
<FooterLink href="#">Testimonials</FooterLink>
</Column>
<Column>
<Heading>Services</Heading>
<FooterLink href="#">Writing</FooterLink>
<FooterLink href="#">Internships</FooterLink>
<FooterLink href="#">Coding</FooterLink>
<FooterLink href="#">Teaching</FooterLink>
</Column>
<Column>
<Heading>Contact Us</Heading>
<FooterLink href="#">Uttar Pradesh</FooterLink>
<FooterLink href="#">Ahemdabad</FooterLink>
<FooterLink href="#">Indore</FooterLink>
<FooterLink href="#">Mumbai</FooterLink>
</Column>
<Column>
<Heading>Social Media</Heading>
<FooterLink href="#">
<i className="fab fa-facebook-f">
<span style={{ marginLeft: "10px" }}>
Facebook
</span>
</i>
</FooterLink>
<FooterLink href="#">
<i className="fab fa-instagram">
<span style={{ marginLeft: "10px" }}>
Instagram
</span>
</i>
</FooterLink>
<FooterLink href="#">
<i className="fab fa-twitter">
<span style={{ marginLeft: "10px" }}>
Twitter
</span>
</i>
</FooterLink>
<FooterLink href="#">
<i className="fab fa-youtube">
<span style={{ marginLeft: "10px" }}>
Youtube
</span>
</i>
</FooterLink>
</Column>
</Row>
</Container>
</Box>
);
};
export default Footer;
import React from 'react';
import {
MDBFooter,
MDBContainer,
MDBIcon,
MDBBtn
} from 'mdb-react-ui-kit';
//this is a react Footer Component , try it..
export default function Footer(){
return(<>
<div className="footer">
<MDBFooter className='bg-dark text-center text-white'>
<MDBContainer className='p-4 pb-0'>
<section className='mb-4'>
<MDBBtn
floating
className='m-1'
style={{ backgroundColor: '#3b5998' }}
href='#!'
role='button'
>
<MDBIcon fab icon='facebook-f' />
</MDBBtn>
<MDBBtn
floating
className='m-1'
style={{ backgroundColor: '#55acee' }}
href='#!'
role='button'
>
<MDBIcon fab icon='twitter' />
</MDBBtn>
<MDBBtn
floating
className='m-1'
style={{ backgroundColor: '#dd4b39' }}
href='#!'
role='button'
>
<MDBIcon fab icon='google' />
</MDBBtn>
<MDBBtn
floating
className='m-1'
style={{ backgroundColor: '#ac2bac' }}
href='#!'
role='button'
>
<MDBIcon fab icon='instagram' />
</MDBBtn>
<MDBBtn
floating
className='m-1'
style={{ backgroundColor: '#0082ca' }}
href='#!'
role='button'
>
<MDBIcon fab icon='linkedin-in' />
</MDBBtn>
<MDBBtn
floating
className='m-1'
style={{ backgroundColor: '#333333' }}
href='#!'
role='button'
>
<MDBIcon fab icon='github' />
</MDBBtn>
</section>
</MDBContainer>
<div className='text-center p-3' style={{ backgroundColor: 'rgba(0, 0, 0, 0.2)' }}>
© 2020 Copyright:
<a className='text-white' href='https://mohammadsh96.github.io/portfoilo/'>
Mohammad ALshraideh
</a>
</div>
</MDBFooter>
</div>
</>)
}