React Website Tutorial - Beginner React JS Project Fully Responsive

yo what is up everybody so today i'm going to show you how i created this website using react so right now as you can see we have this background video playing right now and also we have this hover animation on the buttons we got the nav bar up here and then when i go scroll down we'll see some more components i created so down here we got some card components and we can pretty much reuse this anywhere on the website and you can see when we hover over it has a little animation effect and right now it's a little slow because i'm also recording so i might lag a little bit but um when you create this you probably won't have to worry about that and then also down here we got the nice clean little footer and this is all mobile responsive which i'll show you in just a second but right now we're mainly going to be using react router and react hooks so for instance if i were to click on this card anywhere on here it will lead you to the specific page also on the nav menu it goes here too as well so you can see here then also even the icon does it and then pretty much everything right there goes and then also if i were to scroll down on here and yeah right now yeah my computer's overheating trying to load this up but basically if i were to scroll down you can see it switches right here and these are all responsive so if i go back and then go like this we have the hamburger menu icon also up here let me just show you we can shrink this here and then we go down also we can see it that they all nice and snug fitting and then also the footer is looking nice here so let me just show you what happens with the footer so basically footer goes shrinks it everything fits perfectly like this and then we shrink it down like that and then last but not least is the mobile hamburger menu obviously we got that going on here and also when we click on any of these they switch the page and they close out the menu and then like for instance even if i click on the home icon it does like this and one thing i want to show you that's pretty cool too is we don't have to use a video so for instance let me just go over to let's just show this watch this so if i go here actually let me show you another video first that's a little cooler than this one i think at least so let's change it up here and then i go over here and refresh it and we can see that we can add this video to and i'll also uh link all these files to you so you can use these or you can use your own and then if you're like yo i don't want to use a video i want to put a picture we can just go here and basically let me uncomment this line out save it boom we scroll out and now we have it here so this is my original design i had beforehand but i want to get a little fancier with the videos but you can see this fits sort of the um the travel theme here and right now the video technically it's like in the background because i still have it in my code but ideally this is what it looks like and it's lagging just because i'm recording at the same time so on your actual uh browser this probably would not happen but yeah this we're going to create today so without further ado let's hop into our code editor and let's get started all right so here i am on my terminal so the very first thing is we're going to create a react app so i'm going to go ahead and make sure you're in the place where you want your files to be created so here i am in mind and then i'm going to go to npx create dash react app and then i'm going to name this react website yt for youtube and put one and then i press enter and then as this loads up once it is done then we can go ahead and get started and also depending on your computer it might be super quick or it might be super slow so just pause the video and then once it is completed i'll see you on the other side alright so now i have it all downloaded so now i'm going to go and cd into the file we just created so whatever you named it type in cd and then the file name so mine is react dash website dash yt-1 and if you don't have yarn then you're going to type in mpm start so you do like this which most people starting off would use but if you have yarn obviously you would do it so whatever yours says on the second line that's what you type in but before uh i do that i want to actually go into my code editor so i'm just going to go ahead and type in code dot and then press enter and they'll automatically open up vs code if you have that set up then you should have the same thing here but if not simply just google how to set up code dot to open up your code editor and there'll be a bunch of uh websites or uh people think on stack overflow you can find and basically tell you exactly how to do it and now we're here on the actual vs code so right now i'm going to go ahead and command j or just open up your terminal and then here i'm actually going to type in yarn start so if you have npm then type in just npm start and then press enter and then what's going gonna happen this keeps happening for me so what i need to do if you do have this error just go over to this left side and let's create a new file let's call this en so dot emv and then let me just copy this code right here and then save and then let's go back to terminal and just do yarn start again or mpm star depending on which one you have and already have the website loaded in the background so i'm just going to type yes yours would automatically load as long as you don't have another react app open so boom now we are here which if you've already made react apps and you definitely know this so it's not too crazy and now let's go ahead and start deleting some stuff so let's get rid of let's get rid of this setup test don't need this i don't need the logo or the service worker so i'm gonna get rid of these so i just hold shift and click on both of them dot app.tests.js i do not need and let's go to index let's get rid of these comments let me get rid of strict mode for this and i'm gonna save mine here and then i'm gonna get rid of service worker let's see let's get rid of index.css2 so let's delete this and just leave these three files and go to app.js go to here get rid of everything in here and then be like yo save and then we gotta get rid of this logo imports and then let's see um what's what is it saying right now am i missing import reacts let's see index side css this one needs to go on the index and there we go all right perfect and then after css i'm going to command a get rid of everything and save it here and now we can go ahead and get started alright so the first thing we're going to do is create a components folder so let's go ahead and click on the src right click go to new folder and let's just say com components and then inside of the components let's start creating the nav bar first so right click components new file let's do navbar.js and then i'm going to create a css file for this too so right click and then you file and then that bar dot css and then let's go ahead and let's just get started with that first i have a completely separate tutorial for a custom navbar but this one's very almost identical it's just there's less stuff to it and then also in terms of the starter files so i have images and videos that i had for this actual site that you saw beginning so if you want to get those basically i have the github link i'll put it in the uh other github link i'll put it in the description you should be able to find it basically you go here on starter branch and then just click on the public file and then we have images and videos so in case you could just pretty much go here to code and just download the zip or you could clone it but uh basically just go public and then get the images and videos i have a bunch of images that you can choose from because i was using it for another thing but i don't think we used that many in this tutorial but once you get the image and videos downloaded then drag those into your public folder so or just download or just replace i guess the public folder since you're copying it so i have mine set here so i'm just going to drag these over and i don't know why it's not showing up oh there it is wait is that it no it's not hold on all right this should work this time all right doing copy forwarders yeah so let's do just copy the folders boom and i if yours didn't drag properly i dragged them from my finder on back because i was trying to drive from vs code but it wasn't working but basically i have these videos here now you don't have to do this right now but i mean since i already showed you might as well and that way you have to go back in the next uh like you know hour or so trying to find these but basically those are all the images so now let's go ahead and start editing our nav bar all right so what would happen what did i just click on let me get rid of this and let's get rid of this all right so first thing again also if you don't have this extension you can go here and type in um es7 or react snippets and then click here and you can install this one and depending sometimes it doesn't work for me but some usually it will see if it does this time but basically we can go here and just type in rfce and i can press enter and then automatically import to react from react we got a function with the name of the page and we got to export it so it's pretty clean and essentially what i want to do here is let's go to the top and i'm going to be utilizing use state for right now so let's do use state and then also i'm going to be creating a button component eventually so we can do that imports we can do i see let's wait on that because i want to start the actual um jsx first so let's go here and pretty much let's start writing this out so let's create get rid of the divs let's just make them fragments i'll just create a nav so i'm gonna go ahead and say nav dot nav bar and that creates the class name with nav bar enter in here and i want to create a div and call this navbar container let's just go ahead and say dot nav bar dash container now in here so we're going to be utilizing react router actually so since we're here this might as well command j in the terminal and then do control c so it stops the app and then pretty much what we're going to do here is going to do mpm or for you yes do npm install react router dom and then let's just press enter now this can take quite a while depending on your computer so while we're actually waiting for this let's start adding some more of the jsx so within here let me do command b so you guys see what's going on basically once that is done we're going to import the links so let's just go ahead and type it out since we're loading so let's type in l i n k and then press tab and then inside of the link i want to say the path equal to just slash and then let's do class name and link essentially it replaces the a tag so if you never use react router then that's essentially would be this would be an a tag instead of link normally and then let's do navbar dash logo for this and then i want to create a function but we'll do that later once we have everything done but this is essentially the logo obviously you use an image instead of a link normally but i don't have an image so i'm just typing it out and also if you did actually um let's see one more thing too let me show you really quick so here i am on font awesome so that's the way i utilize this little icon right here it's not necessary but if you want to copy everything i have just make an account at funaustom.com sign up and then go to your profile click on font awesome cdn and then scroll down here and then basically copy this link and then you would just go to the public folder in index.html scroll under just right here within the head tag anywhere copy it and then save it so now we have that fun awesome cdn here and then if i were to actually let's go back to the app next to the travel i just did i dot f a b dot f a dash t t y p o so type o three then press tab this creates the icon right here for us and when i save this right now we're gonna get an error actually we're not because we we paused the app so let's go back and do um let me just do yarn start or npm start for you and then once this loads up so i have two apps right now so it's gonna say yes but um basically it's gonna reload and then you're going to see nothing because the link has not been imported so it's mostly going to show let's see yeah nothing's happening right now so let's actually go up here to the top and imports link from and then quote say react dash router dash dom let's save this and right now you can't see anything because we have not actually added this to our app so let's go to app.js and then over here within the h1 let's just do let's add the navbar components and what i like to do is at the end of it i like to press enter and sometimes it works so let me see yeah right now my vs code is going super slow for some reason maybe because i'm recording but let me just add the component there and then just import it uh manually for now so imports nav bar from dot slash let me do dot slash yeah nav bar save this and what happened oh yeah i forgot forgot to add the components folder completely looked over that so slash nav bar and this one should be yeah it should be like that save this and now it's saying you should not use link outside of a router so right now since we do have react router we're gonna have to import a bunch of stuff to get this working and once we have all this import is gonna be easy sailing so let's import here i'm going to go ahead and say browser router as router and then we have switch and then i have routes i'm going to say from react router dom so let's save that and then around the actual uh let's see let's get rid of these divs first and then let's put a fragment here and then also below this and then i'm going to say save that right now and then under that i need to put router so this essentially is going to contain all of our routes or our pages or paths basically and then within that under the nav bar i'm going to have the switch statements here and then within the switch is where we have actual routes so i'm going to say routes and then let's do path equals slash and then say exact because i want this this is going to be essentially the home and then when i'm pretty much let's just put um let's see if it shows the error yet all right no it's not showing the area yet now this would be the home component but we don't have that created yet but pretty much now you can see everything works when we click on this nothing happens because we are going to the slash so that's basically everything set up and also you can see the icons there so let's go back and let's go back to the navbar.js and let's continue with this navbar creation so now underneath this link tag so the icon or the logo i guess you can call it i'm gonna say dot menu dash icon and i don't know why sometimes it works sometimes it doesn't and let's do let's just create the div since my uh vs code does not want to auto complete this for me so let's do dot so class names equal to menu dash icon and then here let's close this out and then let me make this a little bigger so it's just easier to see and then within the menu that icon this we're going to set the hamburger menu so essentially where you saw this uh this thing right here and we're basically going to create a we'll set or use state basically to change it from my x to a hamburger menu so in here if you have fun awesome imported i'm gonna say i class names equal to curly braces we're gonna create state with click we're gonna call it click and essentially if click the value basically if you click on the icon then i want to change the class to fas space fa-times and if you clicked again on it i wanted to be changed back to essentially the bars and then it'll be a pretty much toggle so it's going to go from right now if it's not clicked it's going to be the hamburger menu and then once you click it it's going to be the bar so right now if you see it's gonna say click is not defined so we're gonna have to go here to the bottom right here under function and we have to say cons i'm gonna set state now so this hence the use state that we imported up here i'm gonna say click and then essentially we say set whatever you named it so set click and this is basically what's going to update the state and essentially change it from whatever it was to whatever you want to change it to so let's say use state and then i want the initial value to be false so i save this right now nothing happens because we don't have a function that actually updates this so right now i want to go here to menu icon and i'm going to add this on click and set that equal to curly braces to a function that we're going to create right after this called handle click so now under here i'm going to say const handle click and then i'm going to set that equal to an arrow function and then essentially what i'm going to do is say set click so all this function does is it sets the click and the value i want it to be the opposite i want it to set whatever click is here false i want it to just reverse it so essentially it's false true false true so if i save this you can see here now when i click it it switches because now it went from i didn't click it so now it's hamburger now boom that's not the bars and then reverse so it's just basically reversing the state here so pretty simple nothing crazy here and then let's go and continue creating this and this is again wrapped around this handle click div and now let's go ahead and go underneath this and let's do ul and let's press tab and i don't know why my thing is not working right now i'm at the refresh my uh vs code but since i'm recording might as well keep it here but within the ul let's go inside of and say class name equal to curly braces and then i'm going to say again a setting the click value so you clicked it or if it's true i want it just to be nav dash menu space active and then else nav dash menu so let me close this out here so you can see this is what i have here and then essentially you'll see this is when we were on the mobile right like this whenever you click it i want the nav menu basically to disappear which that's what that line is supposed to be doing right now so that's basically the same thing right there so that's what that line right here is supposed to do and then let's go and create our li and i don't know why my my tabs aren't working right now but let's do li class name equal to nav dash item and then in here we're basically just going to create another link tag so let's just say link to equals slash class name equals to nav dash links and then on click i'm going to create this and it's essentially called a close the mobile menu so i'm going to say curly braces close mobile menu and then close it out with the tag right there and then inside you can just say home so if i save this right now we're probably gonna get an error because closed mode menu is not defined so now we have to go up here and create this function so basically it's going to just say const close mobile menu and i said that you go to the arrow function and basically we're going to say set click equal to false and then let's save this and right now we have it here so nothing happens yet because we need to add more things to our navbar but let's go under here now and these are pretty much gonna be the same so we can just go ahead and go here just copy this the li with the link paste this and then we can just change the middle to services or whatever you want and we'll keep everything here so i'll save it here check is there and then go under command paste it again and then let's just do uh products also the links let's change the links to whatever you named your thing so services here and then products there and then underneath that link we're gonna do another one so it's gonna be the sign up button and this one's gonna have a different class name because at least the way i did it this disappears and only shows up on the mobile menu and it was just much easier for me to style in terms of the component versus having it like hard coded but you'll see in a second but basically the class name is going to be dash nav links mobile and this is the sign up right here so sign up and then let's go ahead and change yeah it looks like it's let's save this and i've pretty installed so that's why it auto saves like this so now we got the four menus over here and then the ul outside the closing ul tag is where the budding component would go so since we're here let's might as well import that so let's go to components and right click and then go new file and just say button dot js and then also right click new file button dot css now in the button.js this one is going to be pretty much reusable across the website so let's go ahead and do let's see i'm just gonna do imr and see if that works yeah i guess it's i think it's because my um my vs code i think it's because i stopped let me try something really quick one second all right so basically i just closed out vs code and restarted it and essentially now when i do the shortcut snippets i can basically just type them out and press enter so if you dot download button dot css and then lastly we'll have to import link so it's imports curly brace link from react router dom save it and then let's comment be this you can see this so right now let's create the button so i'm going to automatically export it so export cons button i'm going to set this equal to parentheses and then inside of here the curly braces i'm basically going to pass in properties in here that you'll see the point of this in just a second basically let's do uh children type on click button style so this essentially the class and this is what i'm calling it here and then a button size and then outside of the curly brace and outside this parenthesis we're going to say arrow function here and then we're going to set it equal to basically some logic so within this logic let me actually save this and see how it looks right so here press enter we're going to create this button style function so const check button style and i want to set equal to styles dot includes button style now all this all this is going to make sense once i finish it out you see how we implement this and basically here let me show you real quick let me make this bigger if the gutting component has a button style then if that is true then i want it just to be whatever the button style that we created for it and if it's not true i want to set the value to styles the first option in our styles array so we're going to actually create this above and here we're going to say const styles is equal to an array and these are essentially our css classes that i'm automatically creating right here so i'm going to say btn-primary and then comma btn-outline so this was this is the outline version that gets started and then the this one's primary because you can see it the actual background and these are all css classes that get automatically applied depending on how you um what products you pass in and i can say cons sizes so now this is whether it's big or large and then it's going to say button dash dash medium and then we're going to say button dash dash large and let me say that really quick now right now here it's going to say styles that includes so you put a bun style which i'll show you once we have the button component created then it's going to apply whatever that is right so it's either going to be button primary or button outline but if you don't have any of the classes applied to it it's automatically by default gonna apply styles the first position which would be button primary by default so that's why these this is by default but then i had to add the outline style this one so that it gets applied to it and you'll understand this once we get done to uh coding so go inside at the end of styles and press enter because we're still in the curly braces and then we're gonna basically just say the same exact thing for check uh so let's say cons check button size and we're going to set it equal to sizes dot includes it's going to be button size so that has a button size then change it to that so it'd either be medium or large whichever you put and if you don't put anything then it's going to default to the first position which would be butted medium now underneath this we're basically going to return and parentheses let me scroll up real quick and i want to return a link i'm going to say 2 equals quotes and i want this just to go to sign up doesn't really matter where you put it i want the class name equal to btn-mobile and then inside this link we're going to have the button and let's just close the tags there really quick and inside of the button i'm going to pass in curly braces and the children so essentially what this does is whatever you put inside of the button it's basically going to render that so like for instance get started so if this was another component it would be like button and then i would say get started and that's that's the children so whatever i pass in here it'll automatically display that as a component which you'll see later on and that's basically whatever we put here and then let's go and on the actual button let's add a bunch of uh things here so let's say class name i'm set equal to curly braces i'm going to do the backticks i'm going to say btn is the default class space dollar sign curly braces and then here we're going to say check button style and then dollar sign curly brace is going to say check button size so that's the class name so that's why we can update these whatever we like and then on click we're gonna set that to on click and then type we're just gonna set that to type now this pretty much is the button component so let me save this and then let's go into our blend.css and let's start adding the css so here i'm going to say colon roots and then i want to set the primary color to just white so this way we can actually update it at the top instead of having to go through every single one individually i'm going to say btn i'm going to set the padding to 8 pixels by 20 pixels border dash radius to be 2 pixels outline going to be none border going to be none and then cursor will be pointer and then let's do dot btn dash dash primary so now this is the css class that we created back in the button component so this is what we're adding now the styles so here's going to say background color let's just say ver so var dash dash primary so that's going to be white and then color so the text hashtag 2f242424 and then let's do border 1 pixel solid 4 dash dash primary and then under here let's do btn outline now so btn outline should be double dash we're gonna say same let's you know let's do background color transparent and then the actual font color to be white padding will be 8 pixels by 20 pixels and then border we can actually keep the board the same so let's just copy this code here and i just want transition not transfer transition to be all 0.3 s e's dash out so save that there and i'll just do the sizes now so pretty much the btn dash medium and here we're going to say padding to be eight pixels by 20 pixels and then font size to be 20 pixels and then we can say that btn dash so they should be double dash just keep forgetting btn large and now we're going to say padding to be 12 pixels by 26 pixels and then font size to be 20 pixels and last but not least let's just create the hover so let me just copy this down here and just say colon hover and i'm going to say comma then copy the btn large colon hover and it's a spacing here and basically i want the background to be hashtag white and there's the background color and color i want it to be colon not colon uh hashtag two four two four two four and then transition 250 ms oh that's trans yeah transition should be position 250 ms actually we can just add this here let's just do this let's copy this make it easier save that so now we're pretty much done with the button component so now let's go to our navbar.js and let's actually implement what we just put in here so now under the ul let me go back to my actual app here so i save save there's nothing happens but under this ul in the navbar component we're going to say curly braces and i'm going to say button which we're going to create i don't think we have the c i created up here yeah so we haven't created this yet but we can create some state and essentially we're going to put if button is true then we're automatically this is a shortcut where you do double and it's going to just straight up return whatever is after this so if it's true return the button component so the capital letter b and let's pass in sign up so right now if i save this nothing's going to happen but this is essentially the children we're passing inside of that that's what signup is and then here's where we created the button style so i'm going to say button style i want this equal to btn-outline so if i save that this is automatically making the sign up on outline because by default if it includes a button size or that's a bunch style it's going to be whatever the style i put which was here btn outline so it's going to make it the class of this button btn outline now if i didn't put that style code right here this bcns this button style b10 outline then it automatically defaults back to style of zero which would be the btn primary so this is where this comes in in case you're confused about that so let's go back to the top up here and let's just create some states let's say cons and then pretty much the passing in we're going to say button and then just set button i'm going to say equal to use state and i'm going to say true and then now all i need to do now is go up down here let's see right here underneath this and this is essentially a function that is going to display the button on mobile or actually removes it and then displays it depending on the screen size so i'm going to say show button so that equal to the arrow function curly brace here and i'm gonna say if window dot inner width is less than or equal to 960. you have to put less than or equal because if you just put less than at exactly 960 it's gonna show up i want this button so i'm gonna set the button to false and then if not if the window is much bigger than that then just basically or it's just as long as it's not 960. it's bigger than that it's going to set the button to true i'm gonna say there's nothing's gonna happen because we have to actually invoke this function here and then also so we're gonna go underneath this and i'm gonna add window dot add event listener and pass in resize so whenever i resize the screen i want to get show button to basically work for me so now i can't see anything yet because we haven't added the actual css the nav bar so let's actually add that and then pretty much let's go ahead and type this in so there's the easy way and there's the hard way so the easy way is we could just straight up copy and paste this into the code and that's probably what i'm going to do since this is more react based but if you wanted me to actually go line by line i could but i feel like if i did that for every single thing would take like a century so i'm just going to copy this in and paste this css right here and now if i save this i need to go actually go back to and also you're wondering where did i get this code it's on the github so i have the starter and then i also have the master branch so you can see all of the css so you can go to master branch and go basically to let me see let's shrink out really quick you can go to the src go to components and then go down let's see to navbar.css go to raw command a command c and then just straight up paste that in and boom now you have all of this code here so that saves you literally that's going to take me like probably like 20 minutes to go through so i'd rather not and then go over to navbar and let's import this let's go import dot slash nav boar dot css save that and let's actually let's go to my app now and why is it not working looks like i think command j yeah actually i don't even think i'm running my app because i restarted i forgot that was what happened yeah it's going crazy i was like why is my my screen looking way different all right so right now you probably run into this to see button is not defined so basically all we need to do is import button from the button component folder so i can just go i'm gonna go here at the end hopefully this works this time control space and then see how it has the button i just press enter and what happens is it auto import it for me and also after you type it i also press enter too if it doesn't work for you just type this line here import button from button we'll save this and now you can see we have a pretty looking nav bar right now but basically here you can see that it looks like this and then we have to add some global styles to this but pretty much what happens is when i shrink it you can see here the button disappears and that's because of this code the window is 960 or less so it's basically toggling and resizing the button and then when i go back a toggle between here and then we also have this right here so the difference is the app.css actually is missing some style so let's go here back to our github and let's add in those app.css styles because this does not look as nice as what i showed you so let's go back to the uh src go to app.css and then go to raw and let's command a command c and then command v and these are the additional pages so you won't probably notice these yet and then also we need to import this font so we can go to google font and actually do that or i could just straight up take it from my file that's probably the easiest way so let's actually do that since we're here pretty much let's go into public folder go into nxhtml and then let's see once it loads up i want to take my google font right here so this one between line 19 and 22 command c this go to index html or you could import whatever google font you want but this is the one i use for this site and let's see how the site looks now all right so now it looks much much much better to me and then we can see you have most of our stuff here so now this is pretty much the nav bar is nothing crazy and then you can see everything's working here fine and then when you click it everything it basically set up so right now the only difference is the logo looks like it's not doing what it needs to do so i should add some code there but let me actually have all of this really quick so now this this is a little thing that um took me a while to realize but basically you won't notice this until i um refresh the page but right now what's happening is when i shrink when i resize the screen right the button you see the side up button it it disappears but the minute i refresh it's there again so i'm going to resize it but every time i refresh it's there so the problem is how are we going to write logic to get rid of this well we have this amazing hook and react so let's just say import use effect and basically it's going to allow it to just render that one time and then it's basically not going to show up anymore so when i say use effect pass in empty parentheses arrow function and then curly braces and i want to pass in the show button function here and then inside these curly braces pass in an empty array then when i save it now you can see looks like this i can refresh the page once i'm in mobile or tablet view and nothing shows up so that basically we're utilizing use effect for that so that it doesn't basically show up every single time i refresh and then boom that's how we do it there so now the only thing that looks like i need to do is add a on yeah close mobile menu function to my my logo icon here so i'm going to say on click is equal to curly braces of close mobile menu and i'm going to save this so now if i close or open this all of these work so far they should just make sure i check everything and then if i click on the actual logo aka the right there it closes as well which is what this function does here so i think we're pretty much set on the actual nav bar it should be good so let's go ahead and start creating the uh actual i would say the hero section i guess you want to call it so let's let's shrink this and then let's go to components right click here and let's go to new file and let's type in hero section you can type you name whatever you want to put this and then let's create a hero section css so new file here hero section dot css so now let's go to the hero section.js file and let's do rfce press enter and we have our function created and then let's go ahead and start importing and adding the jsx so here let's go inside of these divs and let me just add a class name equal to hero dash container and then inside of this this is essentially where i put the video so if you don't want a video then you could ignore this line but if you wanted to follow along and you can see how you can update it then you can so let's just do video src is equal to code slash video slash video dash 2.mp4 and that's in the public folder basically this video second right here and then let's put auto and since it's react we have to say auto capital p with play i want to loop and i want it to be muted then under the video is where i have h1 and let's just put adventure awaits and then p tag and say what are you waiting for now underneath the p tag i'm going to create a hero buttons so basically i'm saying div so dot hero btns and then inside here is we're going to pass in the button component and so i'm going to say the button component so i'm going to press tab and it automatically imported as you see in the top and then i'm gonna say class name equal to btns then i want to set the button style to btn btn-outline because i want this left one to be the outline and then i want to say let's press enter here i'm gonna say actually yeah button size i want this to be btn-large and then i'm gonna close it out and then i by default it automatically has the closing tag i'm gonna say get started then i save it here and you probably can't see anything because it's currently there's no css so let's go ahead and let's add the hero section css so let's go over here and i might actually type this one out it's a little shorter but i feel like it's going to be more beneficial if i show you this because if i just copy and paste it what makes sense if you the navbar videos i have the first one i have without using hooks or router that i do the entire css from scratch the second drop down i just copy it but this one if you want to see the exact css me explain everything and just type it out then that's on my other uh video but for here let's just go and just type this out so the object dash fit wants to be cover and then let's say width i want to set this to a hundred percent i want to set the height to 100 percent position i want it to be fixed so that it essentially stays in a spot and i want to set the c index to negative one just so that it ensures it's not covering any of my other stuff so let's target the hero dash container and then in here so this is essentially where you put your image if you weren't using a video this is where at least i put it and i put background url and then you would pass in the images whatever your folder is and then the uh picture that you're trying to import and then i'm gonna center it so this little shortcut with um background essentially having everything instead of saying like background size background position etc you can just do it all on this one line and then repeat and i save it nothing's going to show up yet so i'm going to say heights 100 viewport heights with 100 percent let's do display flex not i'm going to separate flex let's do flex direction column and then align item center i want the box shadow to be inset 0 0 0 1 000 pixels rgb a 0 0 zero comma zero point two and then object fit contain so i should go back to the hero section let's complete everything first and then we can add the actual uh css so that everything makes sense and also i need to import this too so let's do import close dot slash hero section dot css and then looks like i need to import also app.css i think yeah let's just import this just to make sure i have all my styles app.css now normally you would make uh like a global file and you have everything separate but since the way i did it i have these like default things i just want to make sure everything's set in there but um again you can organize your files however you want right now nothing is showing up yet so let's go and finish this up so now let me go and let's go and create so copy this button paste it and then let's change the button style to primary and then button large so keep it there so technically we could leave off that since it's defaulted to primary but let's just keep it there just in case we end up adding additional um css classes and then let's do underneath this last button actually yeah within this button saying get started let's say watch trailer and then let's add the class so let's see class name equals two f a r f a dash play dash circle and then it's closing tag here so save this now right now we're not going to see anything because we haven't created our home page so let's go and go to components right click this and then go to new folder and i'm going to call this pages and within the pages i'm going to go new file i'm going to say home.js now within here i'm going to import multiple things from imports dot slash dot slash app dot css import we don't have cards yet so let's just import hero section from dot dot slash hero section and then let's go ahead and just say function home and then we're going to return i should put some fragments here i'm gonna say let's import the hero section here and let me save this and then we need to do is go to app.js and i want this to say component equals two home if i save this i don't know why it's not auto completing for me but basically we need to import the home component so i'm just going to go here and just say import home from coast dot slash components slash pages slash home save this and it looks like we need to default export on home so oh yeah i forgot to put that so at the bottom exports defaults home save it and import react from react is very important one we need so let's just say imr enter space or let's see let's see and looks like one other thing it's saying that can't find the dot slash so let's see if that's on the uh hero section css so since i think since i have the video right now it's running into an error so let's actually comment this out for now and right now if you save it the video that we're currently have set in the hero section video two is currently playing and this is currently what it looks like right now so nothing crazy but we're getting somewhere so all we do now is actually just fix the css style here and also you're wondering what we do earlier so basically just to recap we created the pages so this is just a home page so right now everything you see on this front of this site is i put that as a home and then i went to the app.js and passed in the slash pass so basically the every time you go to slash essentially it's going to open up the home component which basically is the front page and that's why we have this right here and then we'll create more rust you'll see it makes more sense but um let's go back to the hero segment css and let's finish up this so that it makes more sense so now let's do dot hero container and then basically it's going to target the h1 inside of it set the color to white font size to 100 pixels margin dash top to be negative 100 pixels so i save that there and then let's go and right now it's not um it's currently i have to add more css because right now it looks really crazy but let's go ahead and add the dot hero container going for the p tag now i want to say margin dash top 8 pixels color to be white font size to be 32 pixels and then let's do a font family so this is a let's see if i can type this out for you font family and let's do t i just put it to trip boucher i can't even pronounce that and that's the default one so you can just do that there and let's let that misspell something h1 all right let's go back to yeah let's go here oh yeah one thing is let's add inside of the hero container let's do justify content center and it looks like yeah it looks much much much better now all right so now if i scroll it out it's like this so now we just need to finish up some more it's all more almost done this part let's do dots hero dash btns and it's going to say margin dash top to be 32 pixels save it so out of this one i can do dot hero btns and then dot btn and let's just say margin six pixels it's a little spacing in between them right there and then let's just target the little uh icons of fa play dash circle and let's just set that equal to margin dash left of 4 pixels so now i'm going to say at media screen and max width of 960 pixels and then i'm just going to target the h1 let me just go up here and copy this to save time and then i just want to change the to get rid of this color we can because it already passes in by default and then we'll say font size to be 70 pixels and then margin to be 150 and then underneath this let's do at media screen and max width to be 768 pixels and then let's just say copy it again and i want to change the font size to 50 pixels and then martin top 100 that looks good to me and then everything yeah so everything will be in this midi query so underneath that but still in the brackets we'll do dot hero container the p tags underneath it let's say font size 30 pixels and then let's do dot ptn-mobile display block and then let's do text decoration none and then let's do btn let's do width to be 100 so now you can see here we go so pretty much we're set there and this is what it currently looks like so now let's create the next section which was the card components so i'm gonna go here to components and basically i'm gonna right click and change click on new file and i'm gonna type in card item so these are the individual cards that i created here and then i'm gonna create a cards component so that's going to hold all the cards so basically say cards dot js and again you can name this however you like and then let's create the card ess or cards dot css i'm gonna keep all the css within this one but they're also gonna cover basically the car item too so for the cart item let's go ahead and do rfce and then above this let's import link from react router dom so now i'm going to go ahead and just take these turn them into fragments and then i'm going to say li i'm going to put i'm going to utilize a different styling for class names just for this just just to make a little different but um using double underscore so bem styling and then we say class name cards underscore item and then we say link dot card underscore underscore item under underscore link tap it in there and then within the actual link tag so let's go ahead and drag this out i'm going to pass in this is basically the image and the description so we're going to wrap it with figure actually let me do figure dots cards item pick wrap so press tab so we have the class name card and pick a wrap and then this is going to have a data category which will add all that stuff later but um here we have image and it's going to have the class of cards underscore underscore item on underscore image press tab here the src we will actually update that in a second but here i'm just going to say travel image now we could also pass in the alts in props but for this for this tutorial i'll just show you this way just because it's much easier and it gets the point across too but let's go and outside the figure press enter now and then we're going to say credit div for cards info let's say dot cards underscore underscore item underscore underscore info press tab and then we're going to do it again for the h5 this time so h5 dot cards underscore underscore item underscore underscore text now right now if i save this nothing's gonna really happen because there's no card data that we're passing in so now i need to go to cards now make sure i default yeah i have everything exported and go to cards and i'm going to show you so this makes more sense so basically let's do the rfce and then pretty much here we're going to have the div with the class name equal to cards and that h1 i'm gonna just say check out these epic destinations now we're gonna have the cards container now so this is essentially wrapping all of the allies with the ul and also the cards wrapper container which we'll see just saying so i'm going to say dots cards underscore underscore container press enter then it'll say dot cards under underscore wrapper press tab there and then we have the ul dot cards under underscore items so now inside of this is where we will pass in the actual li aka the card component that we just created right here so that's the way i did it i'm sure there's different ways to do it but basically you're going to say card item so that's the name of the component we just created i'm gonna press enter so it imports this now here if i self close this and save it you're not gonna nothing's gonna show up but you can see also we do need to uh add this cards.js to home so you can see it so i'm gonna go here and basically add under the hero section cards and i'll save this and now i save it right now you can see we have these check out these epic destinations so let me actually um let's add a css because right now you can't see anything so let's go ahead and add the css really quick now there's actually a ton of um yeah i don't want to actually go in and have it type in every single thing so i'm just going to go and copy the css from the github and then just save it and then basically you can see here let's actually add this to so go ahead go back to the um the github let's see right here react run the master branch again and then pretty much let me pull this out src components and then go to the cards.css click on raw command a command c and then paste it into cardo css and then now let's go and think i need to import this here so let's do imports dot slash cards dot css let's save this let's see our app looks now all right so it looks much better so now it looks like we need to add in some properties so that our actual card shows up so we're going to do is actually pass in some props and they're going to do this first by setting the values on the cards component and then we're going to pass props from the actual we're going to pass it in on the cards item so basically here what i'm going to do is we're going to set the current image link and we're going to say images slash let's just put img-9.jpg and then let's do text equals to explore the hidden water fall deep inside the amazon jungle and then label is going to equal to adventure and then let's do the path so the link it leads to let's just put slash services now if i save this nothing's going to happen because we have to go to cart item and we actually have to pass in those properties so what we're going to do is go to the cart item parentheses and just type in props and then here we're going to go for the link i want to say set the two which is how you do it in react router and so the quotes and we're going to say that code is going to say equal to curly braces and then we're going to pass in props dot path so this is essentially taking whatever we added on the cards property aka the the path right here and it's going to pass it down to this component which is going to display on the screen so then we're gonna do for the figure so let's let me comment because you can see more for the figure i'm gonna say data category equals to props dot label so right now this is the uh let's actually just type everything out then i'll explain it after so image src curly braces props dot src and then for the text it's just going to be it shouldn't be a self-closing tag so let's close this out should be like this and then i pass in props dot text and then curly brace so if i save this now you can see you have a nice little clean card and basically if you go to card js all this properties that we passed in are showing up on here so this is the label which is the um adventure right here and then in the css if i scroll down most of the stuff is typical you know flexbox but this is where this uh little adventure blue css here and basically the content it's set equal to data category which when i go to card what happened in my card i'm gonna go to cart item we set it equal to data category so that's basically how we did it over there and now we can do is pretty much just copy and paste this entire card item component and then just update the properties so now if i save this here we have the second one and then i want to change this image to number two now you can see we can easily do it right here in the car's component and we don't have to sit there and copy and paste it like a million times doing everything else here and then we can basically just go ahead and change the everything else so for the text we can just say uh travel through the islands of bali in a private cruise and then also we can change the label so let's say luxury and then path here will update again will be let's just keep the services so now you can see my scroll both the tech everything updates we got all the css added so now basically you can just sit here and i'm just gonna straight up copy and paste the um actually no i'm not gonna copy it i'm gonna show you what i did so when you saw the video the intro there was two like this and then i had three on the bottom so you can't just copy another three underneath you have to wrap it around this ul tag this ul text will mix it to where it separates so if i go like this and just copy two in and then show it in desktop it's basically showing like this so now let me just add a third one here this and save it and then now when we scroll it out it's basically like this so now i'm just going to go into my original code and just copy in what i had for this third section just to um save time but you feel free to customize these whatever you like whatever they say it's basically the same thing i just updated all the images in the text so now it's pretty much uh you can see here so it looks like this it's basically the car component so wasn't too crazy so if i were to actually go here and shrink it now you can see that they change and they basically are more responsive and that's pretty much from css which you can go through line by line and check it out and play around with the code in case you're confused and then this is the little this is the code to make it hover so if you're wondering how i did that this is basically just scaling making it bigger and zooming in and then this is just immediate query so these basically are reversed so it's going from uh like min width for these so it's only displaying it if the screen is this size so once i get to here it's going to increase the splits like that so go feel free to play around with this card css to see what it's like but we're pretty much good i think on the cards section so now let's go ahead and let's finish up and create some pages now just because i want to um when i click stuff like if i click here nothing happens so let's go ahead and um go to our pages now right click hit new file and then just do products.js and then let's just do we pretty much let's see i can copy in let's just go here let me do this once then we can do this over and over so let's just do import react from reacts import dot dot or quotes dot dot slash dot dot slash app.css export default function products and then return h1 dot products with products inside so save this so now if i were to actually go let me just copy all this now and then pretty much make a new file and just do services.js copy everything in here just change the thing to say services and then here will be services then products will be service well i should just do save that there and then let's do one more page let's just say sign up dot js and then i can just say sign up sign dash up and then it should be sign up save that now and if we go actually let's go to our app.js now and we're going to need to do is import the remaining path so that whenever you click on these uh links so basically work so pretty much let me type about the first one for you route i want to set the pat equal to slash services and then i want the component to pop up will be the services component which we were you just created in the pages and then we just have to import this pretty much so let me just so what i did is put alt shift down arrow and it copies that line and then let's just say services from home services and let me do it two more times because we're gonna do the product so you can highlight the word and do command d so highlights all of it let's just do products and then do the same thing here say products we're not product sign up and then we can basically just copy these links again and then let me just change this to products products and then here we can put a sign dash up and then we have sign up which was the page point that we created so now if everything is working out services should show up and it looks like um let me see i'm missing on my app.css right so let me go and check the uh see services should be service alright so perfect so now that looks like it's good so then i click on products looks like it's good here and then sign up home also here and then i can check these buttons here so these basically the this one goes to sign up same here and then also let's check out these cards so i think this one yeah they're pretty much all services i believe yeah so pretty much good looks like everything's working and in terms of everything in terms of mobile looks like we're looking good right now so now we just need to do is create the footer and then we'll pretty much finish off this website design so let's go back actually to our code editor and let's start coding so now let's go over to the components right click and let's do new file and let's just type in footer.js and then let's create another file and let's just call it footer.css now the footer i'm gonna put all of the jsx inside of it because i'm not really planning on reusing it like a car component but again you can separate this make it have you like but let's go ahead and let's just do rfce and then let's go and inside this top div i'm gonna say class name equal to photodash container now in here i'm gonna create a section and this is going to be where the little uh email signup was so i'm gonna say section dots and sometimes it does this so let me get rid of this for a second and let's just do section dots footer dash subscription press tab and let's press enter let me command b so you can see this and now let's create the p tags i'm gonna say p dot footer dash subscription dash heading press tab then inside here i'm gonna say join the adventure newsletter to receive our best vacation deals and then underneath this i'm going to do another p tags i'm saying dots or no p dots footer dash subscription text and then here i'm going to say you can on sub unsub scribe at any time and then outside of this we're going to say input area so dots input dash areas press tab then create this form let's get rid of this action i don't need right now essentially what this form wrapping in the input tag so basically whenever you press enter it automatically will submit so let's say input dot footer dash input type will be email name will be email and then place holder will be your email and then underneath this input tag it's still inside of the uh form we're going to pass in the button component and it looks like it imports automatically i'm going to set the button style equal to btn-outline and then we're just going to say subscribe so i'm gonna save this now and basically nothing shows up so let's go over to the pages home and let's import this footer save this here and now we got this little footer action now you can see right now we got this crazy like video show in the background but we're gonna cover that with the um the css eventually so as i should go over to here and i'm actually going to uh type out actually let me see if i can add something for now just to get this covered up so let's do go to foot cs dot footer dash container and i'm actually going to go through this one because in terms of responsiveness it might not make sense if you just copy and paste it so i want to explain stuff i did so let's just do background color hashtag two four two four two four padding will be four ram zero two ram zero display flex flex direction to be column justify content center and then let's do a line item center and then we try to import that in the top so let's do imports dot slash footer.css and right now you can see we got our little thing right here so now let's go back to adding some more of our footer jsx so this should complete the section tab here so underneath this section i'm going to say i'm gonna put dot footer dash links and then i'm gonna say dot footer dash link dash wrapper and then i'm going to say dot footer dash link dash item so the actual items now so these are the links so in here i'm going to put an h2 let's say about us now under this h2 we're going to add a bunch of links let's just say link tab how it works and let's just put two equals to slash sign up this is just it's not necessary but it's just to show you like if you click it it works and then we can just link again and just put you know testimonials and then set the path equal to the slash and then you basically just rinse and repeat and copy this so i'm just going to go and copy this from my code so we have the three here so i'll save that and right now it's gonna save links not defined so i can click on the end of link control space press enter save that and now we've got these like links down here so now you pretty much can just copy and paste this over and over again so what you could do is copy this entire footer items did with the links paste it and then paste it again and then basically paste it again so now you have the entire footer links set up here so you can do that then you can edit them individually to whatever you want and then whatever you want to hear so let's put like contact us now to save me some time i'm just going to straight up copy my original footer just because it's it's going to take way too long for me to sit here and type all of this stuff out when it already makes pretty much the most sense so let me get my uh now one thing no let me actually command z because there's there's a specific code that i have that i forgot i put so basically here if i go here this is the footer link item and then we have this footer wrapper so i can't copy like i did i have to wrap the footer wrapper my best so it has to be this whole thing with the wrapper here that you need to copy and then paste that underneath because if you don't do this when you do a more responsive is going to be a pain and it's going to be really annoying because it's not doing what you want it to do so now i'm going to go back to now in my code and basically copy the same code i have you can get in the github you want copy that and let's make sure i have all my divs properly providing because if i have a missed type it's gonna be really annoying so let me save this and it looks like everything's looking good all right perfect so go ahead and just feel free to edit this just make sure you have the first two within the wrapper because if you don't then the columns will look weird on mole responsiveness so now we're done with this section so now under this third div i'm gonna press enter and then here is basically going to create the last thing which is the social media icons let's just say section dot social dash media and then let's do dot social media wrap and then dots footer dash logo so now footer logo i want to pass in a link so let's do link dot social logo within here i just want to put t r v l now pass in actually i dot f a b oh no f a b dot f a dash type o three and then in the link to i want to set it equal to just put uh just a slash let me save there for now you can see we've got a little travel logo link here and then underneath this div we're going to say small dot website rights and this is basically just going to say trvl and i have the copyright logo you don't have to put it but you can just say like whatever year and then under here we're going to do dot social dash icons i'm going to add a link again with a class of social dash icon dash link now you can customize it by adding facebook to it too but it's not necessary for this take but i'll just keep it like this for now to show you options and then basically if i press enter i want to pass in i dot f a b dot f a dash facebook dash f tab it and then pretty much go inside of the link and add additional properties so class name i want to say two equals two slash i'm gonna set target equals to underscore blank so this allows it to basically open up into another window and then aria label this is just an accessibility thing so put facebook here save that and pretty much now you just copy and paste this link and then you would just update this with um whatever you want so let's just say instagram change this to instagram here this will be let's see f a dash instagram save that here and then we can check our icons below make sure you can see them they're like super tiny but yeah they're working right there now to save some time it's going to go and copy and paste the rest in so just three more so you can either copy and paste this or you can also it looks like i didn't change this one so it could be linked in i'll save that and then basically we have it here and now we're pretty much set with the actual uh jsx or html i guess you want to call it since we're doing react it's technically jsx now let's um zoom back out now let's go to the footer css and let's complete this now reason i wanted to go through this with you is because it wouldn't it would be easier if i show you like what we're doing so let's see footer subscription and let's do display flex as you can see now the actual um see if i can make this smaller so that you can see more of it because right now it's kind of hard to see and see how it's like yeah like this all right i think that's good we know and let's do flex direction now to be column so now you can see they turned here actually this might be a little too much let me let me shrink it down more let me say justify content to be center let's do align items center text align center margin bottom will be 24 pixels and then padding 24 pixels and then let's do the color will be just white so now you can see it looks like this and then let's do footer subscription let's target the p tag this is an alternative way to do it or you can add your own class to it and let's do font family t which is this one here so that basically changes that font there and then let's do footer dash subscription dash heading let's do margin dash bottom to be 24 pixels font size to be 24 pixels and then let's do um [Music] dot footer dash subscription dash text and then let's do keep the margin bottom the same 24 pixels but i want the font size to be a little smaller so 20 pixels and then the footer input is next so let's do dot footer dash input let's say padding to be eight pixels by 20 pixels border dash radius to be two pixels margin dash rights to be 10 pixels outlines going to be none border is going to be none font size 18 pixels and then let's do margin dash bottom to be 16 pixels here and lastly let's see border call let's see one pixel solid hashtag fff and now you can see we got a little input action going on here now let's target the footer links so four dash links with i want that to be a hundred percent then let's do max with so i wanted to not surpass a thousand pixels display flex and then just like content center so now we got that going on here and see these are the wrappers it's basically keeping it in two different um columns and let's do footer dash link dash wrapper let's just display flex here and then let's do dot footer dash link dash items display flex flex direction column and then let's do align items flex start let's do margin 16 pixels text align to be left width to be 160 pixels which would be right here and then box sizing border box so now we're starting to get a little looking like a footer now and that was targets dot footer dash link dash items h2 let's do margin bottoms these are the titles right here so let's put 16 pixels see a little gap and now let's do dot footer dash link dash items less than h2 let's do color to be colon fff and then let's do dot footer dash link dash items a color to be f text decoration to be none and then margin dash bottom to be 8 pixels and then we can go here this is the hover effect so let me just copy this actually colon hover let me scroll up a little bit and let's just say color to be it's just like a slider white so e white e 99 and then let's do transitions not transform transition to b zero point three s e's out and let's do dot footer dash email dash form h2 let's do margin dash bottom two beats do 32 pixels and then let's do uh dot footer dash inputs colon colon placeholder so now we're targeting the um the email thing i should put these up there we're basically doing it here and let's just change the your email the little input color let's just make it like a lighter gray so hashtag b1 b1 b1 as you can see it turned lighter gray and then here essentially the social icon so let me just put social icons you understand here let's do dot social dash icon dash link and let's just put the color to be fff and then font size to be 24 pixels dot social media let's make it the max with a thousand pixels and then went to be a hundred percent and then let's do dot social dash media dash wrap let's do display flex justify content space between align item center width is 90 max width 1000 pixels and then margin 40 pixels auto zero auto so now you can see you got a nice little clean set up here and then let's do dot social dash icons display flex let's do justify content space between align item center and then i put a width of 240 pixels so that they space out like that and in case you're like what is going on basically if i put a background of red that's what we just did right there so i set the width to 40 so that it spaces it out with it just like content and let's do uh see that social dash logo and you know if you're still watching this video right now hit that like button just so i know who's staying strong i know this video is quite long so let's go color here fff let's do justify self i put self here let's just say start margin dash left to be 20 pixels cursor pointer text decoration to be none let's do font size v2 ram display flex align items to be the center and then margin bottom to be 16 pixels okay get in there we're getting there and let's do the last one before we do the mobile responsive parts website writes color to be bytes margin dash bottom to be 16 pixels and now let's start editing the mobile part which is really really basic but i did it here so let's do at media screen and and most of the code is already like set so the media queries i have mine breaks at 820 pixels but depending on your screen i'm gonna say dot footer dash links to be padding dash top of two ram and then dots footer dash inputs to be width of a hundred percent dot btn is going to be width of 100 dot footer dash link dash wrapper will be flex direction column so this is essentially what makes it mobile pretty much so this is where you see that and then dot social dash media dash wrap same thing um flex direction column so we have that nice little mobile responsiveness and then we shrink everything down it pretty much let me shrink this looks like this and we're pretty much set to go in terms of more responsiveness and everything so now let's just check out the sites and also let me show you uh ooh something looks like it looks like uh i guess this would be outside over there so let me make sure let me check make sure my um code's right all right so i realized it was on the top footer container should be a line items not self making me go crazy for that but basically we have it where's like this and everything shrinks make sure shrink it down and look at nice and clean all right so now let's go ahead and go check the menu so let's go back and let me show you how i added the image in case you're like i don't want a video so let's go back really quick and let's check out the home section css let me go here let me uncomment this out and then right now it's going to say something like this so let's see so the reason it's saying this is because i just need to add a slash in front of it and boom now we basically have a picture image and also you can see that the um the network still there and then all you would do is basically delete this video code here and then go here you can just delete this code here or you can just comment it out and basically you can see that the video now the background is not there anymore nice and clean and then if you ever want to switch out the video again just video one here go to section do this comment this out and boom so this pretty much completes the video for today so if you did enjoy this definitely it will help a lot if you go down below and give this video a thumbs up share this video with your friends or anyone that you think will find value in this comment down below what you think also feel free to refactor the code make it better because at the end of the day i'm just documenting myself learning code and showing you guys what i'm building and if you haven't already you'll go down below hit that subscribe button comment down any other video ideas i should work on and aside from that i will see you in the next video peace

Channel: Brian Design

Views: 720,864

Keywords: react website, react website tutorial, beginner react js project, build a react website, how to make a react website, react website tutorial for beginners, react website project, react website from scratch, react website example, react website design, react website portfolio, react website development, react tutorial for beginners, react js, react js project, reactjs tutorial, react js full course, react js website, reactjs for beginners, react js project from scratch

Id: I2UBjN5ER4s

Length: 102min 16sec (6136 seconds)

Published: Tue Aug 11 2020