Update banner and new video link

pull/1657/head
Kamran Ahmed 4 years ago
parent 90004e69a6
commit 013522148a
  1. 30
      components/sponsor-banner/index.js
  2. 16
      components/sponsor-banner/style.js
  3. 120
      pages/watch.js

@ -1,26 +1,24 @@
import React from 'react';
import { BannerWrap, CloseSponsor, EmojiWrap, SponsorLogo } from './style';
import { BannerWrap, CloseSponsor, SponsorLogo } from './style';
export function SponsorBanner({ onCloseBanner = () => null }){
export function SponsorBanner({ onCloseBanner = () => null }) {
return (
<div className='row'>
<div className='col p-0'>
<BannerWrap
href={`https://www.youtube.com/channel/UCA0H2KIWgWTwpTFjSxp0now?sub_confirmation=1`}
target='_blank'
className='alert alert-info'
href={`https://www.youtube.com/channel/UCA0H2KIWgWTwpTFjSxp0now?sub_confirmation=1`}
target='_blank'
className='alert alert-info'
>
<SponsorLogo src='/sponsors/youtube.svg' />
We now have a youtube channel
<EmojiWrap src={'/sponsors/heart-eyes.svg'} />
<span className='d-none d-sm-inline-block'>Subscribe for the video content.</span>
<CloseSponsor
onClick={(e) => {
e.preventDefault();
onCloseBanner();
}}
className='close'>&times;</CloseSponsor>
<SponsorLogo src='/sponsors/youtube.svg' />
We now have a youtube channel. <span className='d-none d-sm-inline-block'>Subscribe for the video content.</span>
<CloseSponsor
onClick={(e) => {
e.preventDefault();
onCloseBanner();
}}
className='close'>&times;</CloseSponsor>
</BannerWrap>
</div>
</div>

@ -2,8 +2,11 @@ import styled from 'styled-components';
export const BannerWrap = styled.a`
margin-bottom: 0;
background: #101010;
color: white;
//background: #101010;
//color: white;
background: #ffe0b2;
color: #d8362a;
font-weight: 600;
border: 0;
border-radius: 0;
padding: 10px 15px;
@ -12,7 +15,8 @@ export const BannerWrap = styled.a`
transition: all 200ms;
&:hover {
color: white;
background: #ffd698;
color: #bd2015;
text-decoration: none;
}
`;
@ -32,14 +36,14 @@ export const EmojiWrap = styled.img`
`;
export const CloseSponsor = styled.span`
color: white;
text-shadow: none;
margin-right: 15px;
position: relative;
top: -2px;
color: #101010;
&:hover {
opacity: 1;
color: white;
color: #101010;
}
`;
`;

@ -14,77 +14,83 @@ const WatchList = () => (
<DefaultLayout>
<Helmet title='Watch' desciption='List of videos published on our youtube channel so far' />
<SiteNav />
<div className="container">
<div className='container'>
<PageHeader
title={'Watch'}
subtitle={'List of videos published on our youtube channel so far'}>
<BadgesList className="mt-4">
<BadgeLink href='https://www.youtube.com/channel/UCA0H2KIWgWTwpTFjSxp0now?sub_confirmation=1' target="_blank">
<BadgesList className='mt-4'>
<BadgeLink href='https://www.youtube.com/channel/UCA0H2KIWgWTwpTFjSxp0now?sub_confirmation=1' target='_blank'>
<SecondaryBadge>
<FontAwesomeIcon icon={faYoutube}/>
<FontAwesomeIcon icon={faYoutube} />
YouTube Channel
</SecondaryBadge>
</BadgeLink>
<BadgeLink href="/signup">
<BadgeLink href='/signup'>
<PrimaryBadge>
<FontAwesomeIcon icon={faEnvelope}/>
<FontAwesomeIcon icon={faEnvelope} />
Send me Updates
</PrimaryBadge>
</BadgeLink>
</BadgesList>
</PageHeader>
</div>
<div className="pt-5 pb-5 bg-light border-top">
<div className="container">
<div className="row">
<RowBlock
openExternal
title={ 'Scaling an Application' }
subtitle='Learn how to scale an unscalable application and how to tackle the issues in production.'
url='https://www.youtube.com/watch?v=a2rcgzludDU'
/>
<RowBlock
openExternal
title={ 'All about Promises in JavaScript' }
subtitle='Everything you need to know to about writing asynchronous code with Promises.'
url='https://www.youtube.com/watch?v=BvrkobaCVVE'
/>
<RowBlock
openExternal
title={ 'GitHub Actions' }
subtitle='Learn what is CI/CD and how to automate your workflows with GitHub actions.'
url='https://www.youtube.com/watch?v=nyKZTKQS_EQ'
/>
<RowBlock
openExternal
title={ 'Dependency Injection' }
subtitle='Learn how to write testable and maintainable code with Dependency Injection.'
url='https://www.youtube.com/watch?v=0yc2UANSDiw'
/>
<RowBlock
openExternal
title={ 'CSS Variables' }
subtitle='Learn how to write maintainable CSS using CSS Variables with a simple project based lesson.'
url='https://www.youtube.com/watch?v=lgaxU7CRmxU'
/>
<RowBlock
openExternal
title={ 'All about DOM' }
subtitle='Learn and understand the differences between the DOM, Shadow DOM and the Virtual DOM.'
url='https://www.youtube.com/watch?v=7Tok22qxPzQ'
/>
<RowBlock
openExternal
title={ 'Creating a React App' }
subtitle='Learn how to build a react application with this project based video series.'
url='https://www.youtube.com/watch?v=NyG7YJWJd6s&list=PLkZYeFmDuaN3NDLnBG01-sH2-nwn43mYu'
/>
<RowBlock
openExternal
title={ 'Arrays and Objects in JavaScript' }
subtitle='Learn how to manipulate arrays and objects in JavaScript with built-in JavaScript methods.'
url='https://www.youtube.com/watch?v=n3NKGsM3iEw'
/>
<div className='pt-5 pb-5 bg-light border-top'>
<div className='container'>
<div className='row'>
<RowBlock
openExternal
title={'JavaScript Fetch API'}
subtitle="Learn how to make API calls with vanilla JavaScript using browser's builtin Fetch API."
url='https://www.youtube.com/watch?v=a2rcgzludDU'
/>
<RowBlock
openExternal
title={'Scaling an Application'}
subtitle='Learn how to scale an unscalable application and how to tackle the issues in production.'
url='https://www.youtube.com/watch?v=a2rcgzludDU'
/>
<RowBlock
openExternal
title={'All about Promises in JavaScript'}
subtitle='Everything you need to know to about writing asynchronous code with Promises.'
url='https://www.youtube.com/watch?v=BvrkobaCVVE'
/>
<RowBlock
openExternal
title={'GitHub Actions'}
subtitle='Learn what is CI/CD and how to automate your workflows with GitHub actions.'
url='https://www.youtube.com/watch?v=nyKZTKQS_EQ'
/>
<RowBlock
openExternal
title={'Dependency Injection'}
subtitle='Learn how to write testable and maintainable code with Dependency Injection.'
url='https://www.youtube.com/watch?v=0yc2UANSDiw'
/>
<RowBlock
openExternal
title={'CSS Variables'}
subtitle='Learn how to write maintainable CSS using CSS Variables with a simple project based lesson.'
url='https://www.youtube.com/watch?v=lgaxU7CRmxU'
/>
<RowBlock
openExternal
title={'All about DOM'}
subtitle='Learn and understand the differences between the DOM, Shadow DOM and the Virtual DOM.'
url='https://www.youtube.com/watch?v=7Tok22qxPzQ'
/>
<RowBlock
openExternal
title={'Creating a React App'}
subtitle='Learn how to build a react application with this project based video series.'
url='https://www.youtube.com/watch?v=NyG7YJWJd6s&list=PLkZYeFmDuaN3NDLnBG01-sH2-nwn43mYu'
/>
<RowBlock
openExternal
title={'Arrays and Objects in JavaScript'}
subtitle='Learn how to manipulate arrays and objects in JavaScript with built-in JavaScript methods.'
url='https://www.youtube.com/watch?v=n3NKGsM3iEw'
/>
</div>
</div>
</div>

Loading…
Cancel
Save