Skip to content

Refactor Footer for JSX compliance and accessibility #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Refactor Footer for JSX compliance and accessibility #39

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 35 additions & 28 deletions src/components/Footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ import { Link } from 'react-router-dom';

function Footer() {
return (
<div className='footer-container'>
<section className='footer-subscription'>
<p className='footer-subscription-heading'>
<footer className='footer-container'>
<section className='footer-subscription' aria-labelledby='newsletter-heading'>
<p id='newsletter-heading' className='footer-subscription-heading'>
Join the Adventure newsletter to receive our best vacation deals
</p>
<p className='footer-subscription-text'>
Expand All @@ -20,22 +20,24 @@ function Footer() {
name='email'
type='email'
placeholder='Your Email'
aria-label='Email address'
/>
<Button buttonStyle='btn--outline'>Subscribe</Button>
</form>
</div>
</section>
<div class='footer-links'>

<div className='footer-links'>
<div className='footer-link-wrapper'>
<div class='footer-link-items'>
<div className='footer-link-items'>
<h2>About Us</h2>
<Link to='/sign-up'>How it works</Link>
<Link to='/'>Testimonials</Link>
<Link to='/'>Careers</Link>
<Link to='/'>Investors</Link>
<Link to='/'>Terms of Service</Link>
</div>
<div class='footer-link-items'>
<div className='footer-link-items'>
<h2>Contact Us</h2>
<Link to='/'>Contact</Link>
<Link to='/'>Support</Link>
Expand All @@ -44,76 +46,81 @@ function Footer() {
</div>
</div>
<div className='footer-link-wrapper'>
<div class='footer-link-items'>
<div className='footer-link-items'>
<h2>Videos</h2>
<Link to='/'>Submit Video</Link>
<Link to='/'>Ambassadors</Link>
<Link to='/'>Agency</Link>
<Link to='/'>Influencer</Link>
</div>
<div class='footer-link-items'>
<div className='footer-link-items'>
<h2>Social Media</h2>
<Link to='/'>Instagram</Link>
<Link to='/'>Facebook</Link>
<Link to='/'>Youtube</Link>
<Link to='/'>YouTube</Link>
<Link to='/'>Twitter</Link>
</div>
</div>
</div>
<section class='social-media'>
<div class='social-media-wrap'>
<div class='footer-logo'>

<section className='social-media'>
<div className='social-media-wrap'>
<div className='footer-logo'>
<Link to='/' className='social-logo'>
TRVL
<i class='fab fa-typo3' />
TRVL <i className='fab fa-typo3' />
</Link>
</div>
<small class='website-rights'>TRVL © 2020</small>
<div class='social-icons'>
<small className='website-rights'>TRVL © {new Date().getFullYear()}</small>
<div className='social-icons'>
<Link
class='social-icon-link facebook'
className='social-icon-link facebook'
to='/'
target='_blank'
rel='noopener noreferrer'
aria-label='Facebook'
>
<i class='fab fa-facebook-f' />
<i className='fab fa-facebook-f' />
</Link>
<Link
class='social-icon-link instagram'
className='social-icon-link instagram'
to='/'
target='_blank'
rel='noopener noreferrer'
aria-label='Instagram'
>
<i class='fab fa-instagram' />
<i className='fab fa-instagram' />
</Link>
<Link
class='social-icon-link youtube'
className='social-icon-link youtube'
to='/'
target='_blank'
aria-label='Youtube'
rel='noopener noreferrer'
aria-label='YouTube'
>
<i class='fab fa-youtube' />
<i className='fab fa-youtube' />
</Link>
<Link
class='social-icon-link twitter'
className='social-icon-link twitter'
to='/'
target='_blank'
rel='noopener noreferrer'
aria-label='Twitter'
>
<i class='fab fa-twitter' />
<i className='fab fa-twitter' />
</Link>
<Link
class='social-icon-link twitter'
className='social-icon-link linkedin'
to='/'
target='_blank'
rel='noopener noreferrer'
aria-label='LinkedIn'
>
<i class='fab fa-linkedin' />
<i className='fab fa-linkedin' />
</Link>
</div>
</div>
</section>
</div>
</footer>
);
}

Expand Down