Add videos section
This commit is contained in:
123
pages/index.tsx
123
pages/index.tsx
@ -415,6 +415,7 @@ export default function Home() {
|
|||||||
<Flex alignItems='center' className='video-title' transition={'200ms'}>
|
<Flex alignItems='center' className='video-title' transition={'200ms'}>
|
||||||
<VideoIcon style={{ width: '18px', height: '18px', color: '#9c9c9c' }} />
|
<VideoIcon style={{ width: '18px', height: '18px', color: '#9c9c9c' }} />
|
||||||
<Text as='span' ml='7px'>Creating a React App</Text>
|
<Text as='span' ml='7px'>Creating a React App</Text>
|
||||||
|
<Badge variant='subtle' colorScheme='purple' ml='10px'>Pro</Badge>
|
||||||
</Flex>
|
</Flex>
|
||||||
<Text as='span' fontWeight={500} color='gray.400' fontSize='12px' ml='10px'>15 minutes</Text>
|
<Text as='span' fontWeight={500} color='gray.400' fontSize='12px' ml='10px'>15 minutes</Text>
|
||||||
</Link>
|
</Link>
|
||||||
@ -462,6 +463,128 @@ export default function Home() {
|
|||||||
</Flex>
|
</Flex>
|
||||||
<Text as='span' fontWeight={500} color='gray.400' fontSize='12px' ml='10px'>15 minutes</Text>
|
<Text as='span' fontWeight={500} color='gray.400' fontSize='12px' ml='10px'>15 minutes</Text>
|
||||||
</Link>
|
</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'>→</Text>
|
||||||
|
</Link>
|
||||||
|
</Box>
|
||||||
</VStack>
|
</VStack>
|
||||||
</Container>
|
</Container>
|
||||||
</Box>
|
</Box>
|
||||||
|
Reference in New Issue
Block a user