fix(client): footer: use react-bootstrap, simplify layout, correct links
This commit is contained in:
Valeriy S
Stuart Taylor
@ -1,13 +1,21 @@
|
||||
footer {
|
||||
position: absolute;
|
||||
.footer {
|
||||
background-color: #e0e0e0;
|
||||
color: #555555;
|
||||
background-size: cover;
|
||||
font-size: 0.9em;
|
||||
width: 100%;
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
footer b {
|
||||
.footer .col-header {
|
||||
padding-bottom: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.footer a:not([class*='inline']) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.footer .external-link-icon {
|
||||
margin-left: 5px;
|
||||
color: #6d6d6d;
|
||||
}
|
||||
|
||||
@ -1,13 +1,44 @@
|
||||
/* eslint-disable max-len*/
|
||||
import React from 'react';
|
||||
import { Link as GatsbyLink } from 'gatsby';
|
||||
import { Grid, Row, Col } from '@freecodecamp/react-bootstrap';
|
||||
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
|
||||
import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
import './footer.css';
|
||||
|
||||
const ColHeader = ({ children, ...other }) => (
|
||||
<div className='col-header' {...other}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
const Link = ({ children, to, external, ...other }) => {
|
||||
if (!external && (/^\/(?!\/)/).test(to)) {
|
||||
return (
|
||||
<GatsbyLink to={to} {...other}>
|
||||
{children}
|
||||
</GatsbyLink>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<a href={to} {...other} rel='noopener noreferrer' target='_blank'>
|
||||
{children}
|
||||
<FontAwesomeIcon
|
||||
className='external-link-icon'
|
||||
icon={faExternalLinkAlt}
|
||||
size='xs'
|
||||
/>
|
||||
</a>
|
||||
);
|
||||
};
|
||||
|
||||
function Footer() {
|
||||
return (
|
||||
<footer className='pt-5 pb-4 footer' id='contact'>
|
||||
<div className='container'>
|
||||
<div className='row'>
|
||||
<div className='col-lg-5 col-md-6 col-sm-6 '>
|
||||
<footer className='footer'>
|
||||
<Grid>
|
||||
<Row>
|
||||
<Col lg={5} sm={6}>
|
||||
<p>
|
||||
freeCodeCamp is a donor-supported tax-exempt 501(c)(3) nonprofit
|
||||
organization (United States Federal Tax Identification Number:
|
||||
@ -18,52 +49,68 @@ function Footer() {
|
||||
this by creating thousands of videos, articles, and interactive
|
||||
coding lessons - all freely available to the public. We also have
|
||||
thousands of freeCodeCamp study groups around the world.
|
||||
</p><p>
|
||||
</p>
|
||||
<p>
|
||||
Donations to freeCodeCamp go toward our education initiatives, and
|
||||
help pay for servers, services, and staff. You can
|
||||
<a className='underline white' href='https://donate.freecodecamp.org'>make a tax-deductible donation here</a>.
|
||||
<Link className='inline' href='https://donate.freecodecamp.org'>
|
||||
make a tax-deductible donation here
|
||||
</Link>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
<div className='col-lg-2 col-md-2 col-sm-2 col-xs-6'>
|
||||
<div className='row'>
|
||||
<b className='paddingLow font-weight-bold col-xs-12'>Our Nonprofit</b>
|
||||
<a className=' col-xs-12' href='https://about.freecodecamp.org'>About </a>
|
||||
<a className=' col-xs-12' href='https://donate.freecodecamp.org'>Donate</a>
|
||||
<a className=' col-xs-12' href='https://shop.freecodecamp.org'>Shop</a>
|
||||
<a className=' col-xs-12' href='https://sponsors.freecodecamp.org'>Sponsors</a>
|
||||
<a className=' col-xs-12' href='mailto:team@freecodecamp.org'>Contact email</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className='col-lg-2 col-md-2 col-sm-2 col-xs-6'>
|
||||
<div className='row'>
|
||||
<b className='paddingLow font-weight-bold col-xs-12'>Our Community</b>
|
||||
<a className=' col-xs-12' href='https://www.linkedin.com/school/free-code-camp/people/'>Alumni Network </a>
|
||||
<a className=' col-xs-12' href='https://study-group-directory.freecodecamp.org'>Study Groups </a>
|
||||
<a className=' col-xs-12' href='https://www.freecodecamp.org/forum'>Forum </a>
|
||||
<a className=' col-xs-12' href='https://gitter.im/FreeCodeCamp/home'>Gitter </a>
|
||||
<a className=' col-xs-12' href='https://github.com/freeCodeCamp/'>GitHub</a>
|
||||
<a className=' col-xs-12' href='https://support.freecodecamp.org'>Support </a>
|
||||
<a className=' col-xs-12' href='https://code-of-conduct.freecodecamp.org'>Code of Conduct </a>
|
||||
<a className=' col-xs-12' href='https://privacy.freecodecamp.org'>Privacy Policy</a>
|
||||
<a className=' col-xs-12' href='https://terms-of-service.freecodecamp.org'>Terms of Service </a>
|
||||
</div>
|
||||
</div>
|
||||
<div className='col-lg-3 col-md-2 col-sm-2 col-xs-12'>
|
||||
<div className='row'>
|
||||
<b className='paddingLow font-weight-bold col-xs-12'>Our Learning Resources</b>
|
||||
<a className=' col-xs-12' href='https://learn.freecodecamp.org'>Curriculum </a>
|
||||
<a className=' col-xs-12' href='https://guide.freecodecamp.org'>Guide </a>
|
||||
<a className=' col-xs-12' href='https://www.youtube.com/freecodecamp'>Youtube </a>
|
||||
<a className=' col-xs-12' href='https://podcast.freecodecamp.org'>Podcast </a>
|
||||
<a className=' col-xs-12' href='https://twitter.com/freecodecamp'>Twitter </a>
|
||||
<a className=' col-xs-12' href='https://medium.freecodecamp.org'>Medium </a>
|
||||
<a className=' col-xs-12' href='https://instagram.com/freecodecamp'>Instagram </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
<Col sm={2} xs={6}>
|
||||
<ColHeader>Our Nonprofit</ColHeader>
|
||||
<Link to='https://about.freecodecamp.org'>About</Link>
|
||||
<Link to='https://donate.freecodecamp.org'>Donate</Link>
|
||||
<Link to='https://shop.freecodecamp.org'>Shop</Link>
|
||||
<Link to='https://sponsors.freecodecamp.org'>Sponsors</Link>
|
||||
<Link to='mailto:team@freecodecamp.org'>Contact email</Link>
|
||||
</Col>
|
||||
<Col sm={2} xs={6}>
|
||||
<ColHeader>Our Community</ColHeader>
|
||||
<Link external={true} to='/news'>
|
||||
News
|
||||
</Link>
|
||||
<Link to='https://www.linkedin.com/school/free-code-camp/people/'>
|
||||
Alumni Network
|
||||
</Link>
|
||||
<Link to='https://study-group-directory.freecodecamp.org'>
|
||||
Study Groups
|
||||
</Link>
|
||||
<Link external={true} to='/forum'>
|
||||
Forum
|
||||
</Link>
|
||||
<Link to='https://gitter.im/FreeCodeCamp/home'>Gitter</Link>
|
||||
<Link to='https://github.com/freeCodeCamp/'>GitHub</Link>
|
||||
<Link to='https://support.freecodecamp.org'>Support</Link>
|
||||
<Link to='https://code-of-conduct.freecodecamp.org'>
|
||||
Code of Conduct
|
||||
</Link>
|
||||
<Link to='https://privacy.freecodecamp.org'>Privacy Policy</Link>
|
||||
<Link to='https://terms-of-service.freecodecamp.org'>
|
||||
Terms of Service
|
||||
</Link>
|
||||
</Col>
|
||||
<Col lg={3} sm={2} xs={12}>
|
||||
<ColHeader>Our Learning Resources</ColHeader>
|
||||
<Link target='_blank' to='/learn'>
|
||||
Curriculum
|
||||
</Link>
|
||||
<Link target='_blank' to='/guide'>
|
||||
Guide
|
||||
</Link>
|
||||
<Link to='https://www.youtube.com/freecodecamp'>Youtube</Link>
|
||||
<Link to='https://podcast.freecodecamp.org'>Podcast</Link>
|
||||
<Link to='https://twitter.com/freecodecamp'>Twitter</Link>
|
||||
<Link to='https://medium.freecodecamp.org'>Medium</Link>
|
||||
<Link to='https://instagram.com/freecodecamp'>Instagram</Link>
|
||||
</Col>
|
||||
</Row>
|
||||
</Grid>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
Footer.displayName = 'Footer';
|
||||
export default Footer;
|
||||
|
||||
Reference in New Issue
Block a user