Implement redesigned Footer
See original GitHub issueFeature
Why is this feature being added?
✨ There’s a new design coming to OperationCode.org and we have to implement it ✨
What should your feature do?
-
Please use the
<Button>
component as is. We’ll redesign it later. -
Please use a simple unconnected input for the newsletter form. We’ll implement it later.
-
On tablet (below 769px screen width), content should shape vertically in this order:
- Logo and social media icons
- 4 columns of links
- Newsletter form
- Copyright + Legal links
-
On mobile (below 577px screen width), content should shape vertically in this order:
- Logo and social media icons
- 2 columns of links
- 2 columns of links
- Newsletter form
- Copyright + Legal links
Mock
Issue Analytics
- State:
- Created 5 years ago
- Comments:6 (6 by maintainers)
Top Results From Across the Web
Footer Design – Best Practices Together with 6 Examples
Zorro Design – Agency Footer Design. Agencies generally use their websites for two purposes: Showcase their work; Generate new leads. US-based ...
Read more >Website Footer Design Best Practices: 27 Things to Put at the ...
Website footer design is about choosing what to include, with the intention of helping visitors. Here are 27 website footer design best practices...
Read more >Web Page Footers 101: Design Patterns and When to Use Each
Footers can be found at the bottom of almost every web page, and often take many forms, depending on the type of content...
Read more >Website Footer Design Best Practices + 7 Real-world Examples
The truth is, your website footer is pretty important. People use them at a really high rate to get information they need quickly....
Read more >Website Footer Design: 7 Best Practices to Follow | HostGator
The website footer is often overlooked, but it's an important piece ... a bunch of new internal links, so use the space you've...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Got it. Adding “Copyright 2018 Operation Code™. Operation Code is a 501©(3) nonprofit, EIN 47-4247572.” instead of the “2018 Operation Code”. Since this is kind of long, it might be placed on its own separate line (vs the mockup design where it’s on the same line as the legal links).
This is exciting! I’m looking forward to contributing to other newly mocked pages.