github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add responsive footer

Browse Source
pull/1331/head
Kamran Ahmed 3 years ago
parent d3ee830e26
commit 8bb36c1451
1 changed files with 27 additions and 9 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 26
      components/footer.tsx

26
components/footer.tsx
Unescape View File

@ -1,10 +1,9 @@
import { Box, Container, Flex, Image, Link, Stack, Text } from '@chakra-ui/react';
export function Footer() {
function NavigationLinks() {
return (
<Box bg='gray.900' p='40px 30px'>
<Container maxW='container.md'>
<Stack isInline color='gray.400' fontWeight={600} spacing='30px'>
<>
<Stack isInline d={['none', 'none', 'flex']} color='gray.400' fontWeight={600} spacing='30px'>
<Link _hover={{ color: 'white' }} href='#'>Roadmaps</Link>
<Link _hover={{ color: 'white' }} href='#'>Guides</Link>
<Link _hover={{ color: 'white' }} href='#'>Videos</Link>
@ -13,6 +12,25 @@ export function Footer() {
<Link _hover={{ color: 'white' }} href='#'>YouTube</Link>
</Stack>
<Stack d={['flex', 'flex', 'none']} color='gray.400' fontWeight={600} spacing={0}>
<Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }} href='#'>Roadmaps</Link>
<Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }} href='#'>Guides</Link>
<Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }} href='#'>Videos</Link>
<Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }} href='#'>Podcasts</Link>
<Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }} href='#'>Thanks</Link>
<Link py='7px' borderBottomWidth={1} borderBottomColor='gray.800' _hover={{ color: 'white' }} href='#'>About</Link>
<Link py='7px' _hover={{ color: 'white' }} href='#'>YouTube</Link>
</Stack>
</>
);
}
export function Footer() {
return (
<Box bg='gray.900' p='40px 0'>
<Container maxW='container.md'>
<NavigationLinks />
<Box my='50px' maxW='500px'>
<Flex spacing={0} alignItems='center' color='gray.400'>
<Link d='flex' alignItems='center' fontWeight={600} _hover={{ textDecoration: 'none', color: 'white' }}

Write Preview
Loading…
Cancel
Save