gaspersic/developer-roadmap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add videos section

Browse Source
This commit is contained in:
Kamran Ahmed
2021-08-04 00:20:16 +02:00
parent c44fc62e8a
commit 46f1034163
1 changed files with 123 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
pages/index.tsx
View File

@ -415,6 +415,7 @@ export default function Home() {
<Flex alignItems='center' className='video-title' transition={'200ms'}>
<VideoIcon style={{ width: '18px', height: '18px', color: '#9c9c9c' }} />
<Text as='span' ml='7px'>Creating a React App</Text>
<Badge variant='subtle' colorScheme='purple' ml='10px'>Pro</Badge>
</Flex>
<Text as='span' fontWeight={500} color='gray.400' fontSize='12px' ml='10px'>15 minutes</Text>
</Link>
@ -462,6 +463,128 @@ export default function Home() {
</Flex>
<Text as='span' fontWeight={500} color='gray.400' fontSize='12px' ml='10px'>15 minutes</Text>
</Link>
<Link
fontSize='15px'
p='10px'
d='flex'
fontWeight={500}
color='gray.600'
alignItems='center'
justifyContent={'space-between'}
_hover={{
textDecoration: 'none',
color: 'blue.400',
'& .video-title': {
transform: 'translateX(10px)'
}
}}
>
<Flex alignItems='center' className='video-title' transition={'200ms'}>
<VideoIcon style={{ width: '18px', height: '18px', color: '#9c9c9c' }} />
<Text as='span' ml='7px'>Content Delivery Networks</Text>
</Flex>
<Text as='span' fontWeight={500} color='gray.400' fontSize='12px' ml='10px'>15 minutes</Text>
</Link>
<Link
fontSize='15px'
p='10px'
d='flex'
fontWeight={500}
color='gray.600'
alignItems='center'
justifyContent={'space-between'}
_hover={{
textDecoration: 'none',
color: 'blue.400',
'& .video-title': {
transform: 'translateX(10px)'
}
}}
>
<Flex alignItems='center' className='video-title' transition={'200ms'}>
<VideoIcon style={{ width: '18px', height: '18px', color: '#9c9c9c' }} />
<Text as='span' ml='7px'>Load Balancers in Depth</Text>
</Flex>
<Text as='span' fontWeight={500} color='gray.400' fontSize='12px' ml='10px'>15 minutes</Text>
</Link>
<Link
fontSize='15px'
p='10px'
d='flex'
fontWeight={500}
color='gray.600'
alignItems='center'
justifyContent={'space-between'}
_hover={{
textDecoration: 'none',
color: 'blue.400',
'& .video-title': {
transform: 'translateX(10px)'
}
}}
>
<Flex alignItems='center' className='video-title' transition={'200ms'}>
<VideoIcon style={{ width: '18px', height: '18px', color: '#9c9c9c' }} />
<Text as='span' ml='7px'>DNS and How does it Work?</Text>
</Flex>
<Text as='span' fontWeight={500} color='gray.400' fontSize='12px' ml='10px'>15 minutes</Text>
</Link>
<Link
fontSize='15px'
p='10px'
d='flex'
fontWeight={500}
color='gray.600'
alignItems='center'
justifyContent={'space-between'}
_hover={{
textDecoration: 'none',
color: 'blue.400',
'& .video-title': {
transform: 'translateX(10px)'
}
}}
>
<Flex alignItems='center' className='video-title' transition={'200ms'}>
<VideoIcon style={{ width: '18px', height: '18px', color: '#9c9c9c' }} />
<Text as='span' ml='7px'>JavaScript Fetch API</Text>
</Flex>
<Text as='span' fontWeight={500} color='gray.400' fontSize='12px' ml='10px'>15 minutes</Text>
</Link>
<Box position='relative' textAlign='center' bottom='10px'>
<Box
opacity={1}
pointerEvents='none'
position='absolute'
bottom={0}
height='200px'
width='100%'
background='linear-gradient(180deg, transparent, #e6fffa)'
/>
<Link
rounded='20px'
display='inline'
bg='green.600'
color='white'
p='7px 20px'
href={'#'}
fontWeight={800}
fontSize='11px'
textTransform='uppercase'
my='25px'
position='relative'
_hover={{
textDecoration: 'none',
'& .forward-arrow': {
transform: 'translateX(3px)'
}
}}>
View all Videos
<Text d='inline-block' as='span' transition='200ms' ml='4px' className='forward-arrow'>&rarr;</Text>
</Link>
</Box>
</VStack>
</Container>
</Box>