Transcript for:
Creating a Netflix Clone with HTML and CSS

Guys, in today's video we are going to make a Netflix clone. This website which you are seeing, we are going to make from scratch using HTML and CSS. You guys are going to enjoy a lot in this video. This video is a part of my Sigma web development course. So you guys like this video and write Sigma batch op in the comment section below. Let's go to the computer screen. Let's roll the intro. Intro So let's see the demo first, what are we going to make? So see this is netflix.com and this is the website that we have made in this video. I am recording this later, the video portion is made from scratch, nothing has been copied and pasted from anywhere, every line code is written see these videos are running as it is running on the Netflix website. And this video is also running as it is running here. And if you are thinking that is it responsive or not? Yes, it is responsive. So if I show you, then see this. It is responsive just like Netflix.com is responsive. So it is going to be a lot of fun to make this website. And I will tell you the technique How to copy a font If you are cloning a website Then you have to copy You are looking so beautiful So let's not waste time and start Before starting the video I want to tell you that in this video We will cover the aspect of hosting And if you want to host a website In today's date on minimum cost and in reliability if you want to host a professional website then use hostinger because their service is very good plus the pricing, I don't think there is any hosting in today's date currently their black friday sale is also going on so I thought this is a good time to host our Netflix loan which we are going to make in this video so you guys here on claim deal as soon as you click on the claim deal here, you can buy a suitable plan which you can use to host your multiple websites, for example, let's say I want to host a single website or let's say I want to host a premium website, so I can host 100 websites for Rs.129 per month and I will get 100 GB storage, I will also get an email like if I want to make a portfolio website then I will get an email like harryatthere8ofcodewithharry.com so this is a very good thing, I will click on add to cart and as soon as I click on add to cart, I will come here on Paytm and sign in with Google first and as soon as I sign in on Google, I have signed in here and sign in with Google first and as soon as I sign in with Google I have already signed in and now I will make a payment whether it is from UPI or Paytm let's say I will do it from Paytm and I will click on submit secure payment I have chosen this 48 month plan I will continue with Paytm and it's as simple as scanning the QR and I will finish the payment here as you can see and our payment is complete and I will get the hosting so as you can see I will click on start now and I will tell that I am creating for myself and I will say that I am building it myself now tell them what kind of website is this or if you want to skip this experience, you can do that too. I'm not a beginner, I know what I'm doing. And here you can also use their AI builder, which is a very good product. I have also made a video about it. I will select create a new website here. And I'll start from scratch. I will click on it, I will claim it in a free domain. And let's say I see here that is sigma web development express dot is available or not so I will get that, if it is available then or if I want to know if sigmawebdevelopment.com is available or not so I can also check that and this is also available sigmawebdevelopment.com is a good domain so I will continue and I can claim a free domain we have to fill some details and I have clicked on finish registration so that I can register my domain I will click on finish setup and my hosting is getting initialized now let's go to computer screen and make a netflix clone and when it is done we will come back and host this website on sigmawebdevelopmentexpress.com It will be fun, let's go and let's get started with building the clone So guys I have come here in my computer screen and here we are going to clone Netflix So if you go to netflix.com, you will see some kind of website like this The goal is to make a clone of this, okay And to make a clone of this, we will definitely have to download all the resources and assets now let me make one thing really very clear and that is whenever you will make a website like this then you will get a figma file and you have to observe that figma file very well because we are not doing any practice right now this is not a practice set that you guys think that we will practice yes ok we can make it like this, we can make it like that, no, now we are making a real website and we are taking our business very seriously right now, so we have to make a website whose code is maintainable, we have got a pigma file and we will see all the things now so that whatever steps we take, we will take them right, so this should be your mindset you guys should idly inspect and here you can see the responsiveness of it so you will say yes, this is fine the background image is there the center of it the background position is the center so I will make it small and big it is looking like this and along with that the logo is coming here and here you can see the English button is coming here, the you can see that this English button is coming here is the sign in button and it will be made from the flags box then after that it will also be responsive because when I will make it small I don't even need to read any media query in it because everything is happening on its own here I just have to set some things and I guess we are good to go so let's start making it with that said and before that I have to download all the assets so this is one image, if I show you this is one image, okay and if you drag it, you will see this image oh wow, okay so this is one image see I have dragged it, so you can see this image can you see this image this is the image, there is a video running in it so how will this video be downloaded so I have to download all these assets will be downloaded so if i show you here so you can see here these assets, here i can see the link so this is the link this is my png, this is rajma chawal but this video is also playing in this so let's see, ok i got it. Here is our video which is running in the rajma rice png and the video inside it is that oh wow here is the link right click open a new tab here is that video which I can download and use. I will use the video tag and I will make the controls disappear. Yes I know what to do and I will auto play it and I will also loop it. If I loop it, it will keep running again and again. and it will keep on running everything is fine and it is coming from CDN because of which it is very fast so it is very important to strategize if you don't strategize see it came down see they have made this flex box and did like this then it came down in mobile so everything is fine everything is fine see it is centered in mobile and it was on the side so yes media queries will be there media queries will be there, frequently asked questions, all these things will be from javascript so I will not make it special, see they have put transition, maybe they have increased its height and great, great, so we can do all these things and now we start making it, so I do one thing, I will download all these assets and I will open project 1 in this folder which I have made in the name of video 53 and it will open like this, as you can see and here first of all I will make a folder and I will name it assets and let me populate all these assets I will get images in assets so it will be made in the name of IMG IMG and then I will make a folder named videos see I am telling you the whole process how to plan a website clone I made videos and why not name it images I put images, videos, okay. And why should I name it as images? I have put images, videos, what else can I download? I can't see anything else, but if I see, I will make more folders in it. So let's do one thing, that this is the logo of Netflix, open image in new tab, this is my Netflix, okay, so this background is here. If I see the logo of Netflix here, the logo of Netflix is a SVG, very good, it is a SVG, by right-clicking, I will say copy, and I will say copy element, and I have copied my SVG, and I will save this SVG in this way, I will show you, I will make a new file here, and I will do logo.svg, and I will paste SVG in this also, okay, good, so now if I show you this SVG, then it looks like this, right click. And great! This SVG is running very well. Great! Okay! And if I try to view it, then am I able to view this SVG? Yes, I am able to do it. Very good! I just have to make its color red. I will do that. That will be done. Okay! Not a big deal. I will close it. So now if I show you the other things that I am going to collect I have collected this logo, this background image I have collected, did I collect this video no, maybe I didn't collect this video so I will save them one by one so I will save it as images and I will put it in assets and I will name it bg.jpg bg.jpg jpg or jpeg, I don't know I hope I have saved it correctly I guess it is jpg or jpeg, I don't know, I hope I have saved it correctly, I guess it is jpg only, now I will save it, right click, here it will be download, and by downloading this video, where will I put it, I will put this video in my assets folder, so I will put this video which is downloaded in mkv, I will put its name it video 1, video 1 and I am doing a little bit of naming according to my own, these people have done it according to their own, so I have put this video, I have to bring this image and video, so this image will come, this image will also come and this video will also come, how about I use their link of the video, so I will will do it but it's always a good idea to keep your local copy So we will keep our local copy of all these things So I am very excited Let's start the work, we will collect the assets on the fly, first of all I will make the layout and put a background image First work, first work I am going to do this first work So I will start working here and will make index.html and I will make index.html outside the assets, so I will start working here and will make index.html and I will make index.html outside of assets so here I will make index.html and it is made inside assets, what is new? it is not made inside assets I hope it is not made inside assets yes it is not made inside assets, this is assets folder, this is my index.html great, I will put a boilerplate template inside index.html and here I will put a boilerplate template in index.html and here I will start the main directly and here I will write a style.css so I will say style style.css and in this style.css I will include my styles and I will include these styles with the help of link.css and here what I will do that my main I will put it with the help of CSS and here what I will do that my main I will put the background image inside it I will say that the main the background image you are going to put inside it you come inside assets first use the URL you come inside assets come inside images see how easy our VS code makes our work simple we can do everything within VS code let's work so easy we can do everything simple within VS code let's see what happened this is not there, what is this drama this is drama that you have not decided the height of main yet so what i will do 80vh i will say 80vh for main height so let's make height 80vh and as soon as i will make height 80vh you see here the background image is like this, one more thing I want to do one more thing and that is by putting a star by the way I am not looking from anywhere it's not like I am sitting and writing a code on the fly, it's live I just want to make sure that you know this that whatever I am thinking of making this loan you will see here whatever mistake I do will be in front of you so here you can see that we have reached to a lot of extent we have put the background but the opacity of this background I have to change it now I have to reduce the opacity of this background we will get back to that soon we will get back to that but for now what i will do is let's say i will put div in it and i will say div.box and the box which is going to be in main i will say that in main the box what you do is you make its height 80vh width 100% opacity will be 0.2 and the background color to black let's go, let's see what this does and I just want to see where my box is so the width of the box I have set the width div class is equal to box inside main of the box div class is equal to box inside the main I have done all these things with the dot box let's see what happens so this box looks like this, I have set the opacity to 0.2 but this box we have to see where is this box so if I increase its opacity let's say 0.8 so it looks like this, it's a little dark 0.44 looks pretty good I guess we have achieved what we wanted to achieve 0.44 let's go so the background was on this but I have put a dummy box in it to give its opacity like this, because bro, text will not be visible on it if I do not do this, now I can put text in it, so whatever I have written here, dot box, whatever I will write in it, or if I do this thing directly here, if I do it in the main, then how will it be, that could also be done, okay, that can also be done but for now we will put content in it and the content in it is this so first of all I will put a div and first of all I will make a flex box here so I will copy it first and I will write that do one thing or let's do one thing, first let's make this new bar let's do all the work one by one, so see I have made the main, but what I will do here is that I will make my nav and I will write here I am nav and by doing this, what will happen that I am nav will come here, so I want I am nav to come inside it, so I have to put this navbar inside, so I have to put the newspaper inside so i have my header so i have done this in main how about i do it with body or if i do it in div.main then how it will be, because this is not technically main, so i don't want to use the wrong semantic tags so i am doing this div.main, and my main i will make it dot main I will make it dot main I will make it dot main and things will not change because I don't want to use semantics tags wrongly and now what I will do I will make a nav bar in main and I will write I am nav I have written I am nav and you can see I am nav and this is different because this box is below so I can do one thing I can say that the dot main position should be relative and its position should be absolute its position should be absolute absolute and after that top should be 0 top 0 top 0 top 0 and after this let's see what happens and IMNav, see it's here so IMNav its background, I will do one thing I will give style here and background color red, I will remove it I will remove it, don't take tension of it at all, but I will remove it obviously, I will remove it, okay, don't take tension at all, but I want that my Netflix logo comes inside it and then this English and sign in, two buttons, okay, these two buttons came English and this sign in, okay, so I will make two buttons and here I will make two buttons, I will write nav, first of all I will write im, let's do one thing, let's put image only, slc is equal to assets, images and logo.svg ok, let's see if logo.svg is coming or not, yes it is coming but it is not too big, yes it is, let's do it how will we do it, width is equal to 23, once we do 23 it will be too small, but ok so if it is too small, then do 53 ok, we will see, we will make it bigger, no problem for now, let's keep this much, I have put one span here and I am going to put one more span and I will make flexbox again, ok and here I will put span or div, when I have to make flexbox only, so here I will make div and after making div, I will write button button ok, I will do one more thing here, after putting this button I will write English and sign in in it and I will do this style later, here I will write English and here I will write sign in ok, I have written sign in here, sign in and English is written, sign in and write English sign in and after this let's do one thing let's see how it is, first of all we will make a flex box or let's do one thing, let's give it class is equal to flex, ok I guess class is equal to flex, I have to give it to nav to nav display flex and justify content center, align item center and let me do one thing, after doing word wrap, you must be thinking that why I don't do this, so let me do it, it's like that, so I did this, now let's see, it came like this, so I have centered everything, I shouldn't have centered justify content by the way, but I want to do one more thing I am going to give max width in this and that is 80bw I am going to give 80bw max width and by doing margin auto this will come in the center margin auto and margin margin auto by doing margin auto this came in the center and you see here also something like this and obviously I will remove center of justify content and I will say justify content space around ok, so it is looking like this are you seeing, it is looking like this or can I do something like this can I do something like this can I make justify content space between yes let's make it space between because it will be good if they both are in the corner then when we scale it in this way then also it will be responsive great great great now I have to do one more thing background position has to be center center so let's make it space between first space between and where i have put background background position center center ok now if i resize it, you will see things will be in center can you see? and we have to make background repeat none ok, we have to make background repeat none no repeat, it is no repeat's not none, it's no repeat so now you can see it's coming like this so the background is like this and this background size background size I have to do it background size will be width will be 100vw so that it resizes like this and it will hide its auto so you can see it will look like this, if I make it like this then it will look like this here also it looks like this, you can see it looks like this and when I make it like this then it looks like this, see if I make it small then I don't want it to be like this, see I will make it smaller so I don't want it to be like this one minute, so now we have to play a little game here, we have to see that it doesn't happen like this, so if it is happening like this then we want it to zoom in, so if its background size is 100vw then I say maximum of 1000 pixels means 1000 pixels and whatever 1000 pixels and 100 vw so by doing this what will happen I will resize it like this, see whatever is bigger than 100 vw and 1000 pixels, it is resizing itself see it is resizing itself and I just want that the 100 vw sorry 1000 pixels, if I increase it to 1200 pixels, will it be like this, yes, so what I was thinking is happening so great, so see this is the zoom effect we have achieved here now the work we are going to do one thing that we will increase the height of this where our Netflix is written where is our Netflix written? our Netflix is written inside the nav bar let's also wrap the word here so that everything can be seen where is our Netflix written? our Netflix is written inside the nav so we have to increase the height of the nav so to increase the height of the nav what we will do? we will increase the height to 102 pixels. I am doing trial and error. Maybe it will be too big or too small. I will make it half. 62 pixels. How is this? Yes, this looks pretty good. And I will increase the size of the logo too. And I will increase the background from here. My work is done. See, I put the background because it is my habit. And it is a good habit. I check which things are where. I also put borders sometimes. I also put background. People will say use dev tools. But yes, using dev tools is good. But it becomes a little easy to put in this way. I am going to make its color red. Okay, so I make its color red. So I have to put the fill here in SVG. So I will make its color to red. So I have to put the fill here in SVG. So I will change fill to red. And hopefully this will turn red. Okay. It's red. Yes, it's red. So I changed fill to red. So it's red now. And how is the logo of Netflix? It's also red. But they have made it more black. So we will also make it black. It's more in the center. So we will have to see this so we will do that for now let's leave it like this, rest I just want to increase the height of this image so the width if I make it 34 pixels and increase it maybe I will increase it to 84 pixels 84 pixels is too small I will increase it to 114 pixels Because this is a little big We will have to increase it So I have done this After this I want to keep Netflix dark So I will give it position relative and z-index 1 So if I give it position relative and z-index 1 so if I give it position relative and z-index let us say I make it 10, so what will happen, it will come out of everything see it has popped out, means Netflix has come out of this background and we have to do the same thing with English and sign in so we have to do the same thing with English and sign in, so I will say in the buttons of nav, also give it position relative and z-index 10 so that it pops out so we have made it to a large extent the only thing that is bothering me right now is that if I make it 60bw then it will come to the center we have come to this point to a large extent so we have made it to a large extent so if I inspect it I just want to see why it is not centered. So if I look at my navbar, then everything is centered. Okay, so everything is centered, looks pretty clean right now. Great, great, okay. So everything is going great right now. Now we have to add these three things, we have to add this text. Let's copy, let's copy and paste so I am putting this text in this box and I am going to color it white and this color is not visible, did you see? why did this happen? because it is at the top and I have to put it at the center of the box now let's try to understand the layout that we made this was our main flex box, it had nav and this was the box now let's try to understand the layout this was our main, main was a flex box, it had a nav and this was a box why is this box going up? did we give position relative to the nav? we didn't, still why is this box running? so let me do one thing, this box this is our nav, main is here, nav is here, ok and this box is our full, ok, the width of this box is very big and if we put anything inside this box, then it will be ok so let's do one thing, so this text, we have to keep it separate because the box is our layer, ok, so we just want to make sure that it comes like this and we will keep its height more so that it comes in height so I will put div.hero and after putting div.hero I will give height 100% to hero class is its parent height set? ask yourself because its parent height is set so we can set its height in percentage so if I write here .hero's height 100% so it will be justified can I display .hero flex? yes I can so I will say display its flex align items center and justify content also center and justify content center and along with that what will you do for flex direction you will make a column because I don't want a row I want a column and I will put them in a span so I will make three clones of span and I will cut this and put it here I will cut this and put it here and I will cut this and put it here and I will cut this and put it here and I will cut this and put it here now let's see what happens, and I will have to make the color white and I will increase the font size too, so the color of the hero is going to be white and see here, this thing is here and obviously it is not looking good we will have to work on it along with that I will have to make the hero's position relative so that it pops out so I will give it position relative so that it pops out so that this box which we made of black color it doesn't cover it so we made it like this so you can see here that it has come like this, now obviously I have to choose a font, so there is an extension called whatfont, so what does the extension called whatfont do, it tells approximately which font it is, so I will add to chrome, Let me see I can find out I used this extension long back Let's see, I hope it will work So if I select it and do what font I hope what font works still What font works, how it works we will have to see So here, I think it will tell only by hovering Will it tell by hovering? I don't know I will reload the page I guess I had to click here yes, Netflix sense so there is a font called Netflix sense ok, let's see if we can find it, google fonts Netflix sense I, martel sense, i didn't get netflix sense i got martel sense, i didn't get netflix sense, so i got this martel sense, which is pretty similar to netflix sense so let's import this semi bold one and put's import it and put it in our CSS style sheet at the top Ok, I have imported it at the top and I will use it by copying it So I have taken popins and martelsense So I am going to put martelsense in my hero So in hero, martelsense will come and I will do popins by starting because I don't want to see default fonts, I want to see pop ins, keep doing format document by right clicking so that whatever you are doing looks good, you can find out fonts from word font to a large extent but this is not it, this is my Netflix clone, by the way, I will tell you that I have not changed the title of this so that I can know which one is mine and which one is Netflix's So, great, now everything is looking good Now what I will do is, I will bold the font size of this I have to take it out from the word font So, see this, it has a size of 48 pixels and the weight is 900 So, I will make the font weight is 900 so I will make font weight 900 I will say, the first child of hero what should I do for hero's first child font weight 900 and font size 48 pixels ok, let's do it, 48 pixels, see how it is looking yes, it is looking like this, great how much font weight should I have done, 900 font weight 900 is done but it is looking, yes, it is looking like this, great, okay, how much font weight was to be done, 900 was to be done, font weight 900 is done but it is not that bold, okay, font weight 900 is done, if I make it bolder then how will it look, I just want to see, yes, it is looking good, okay, it is looking good, along with that, now see here that this font is being used in this way, Netflix Sans, Helvetica and COGY, so if I do this, I just want to see, I am just experimenting and seeing that will it make it better and if I use Helvetica and use Martel Sans, then also it looks like this, okay, we get exact fonts whenever we do coding. If we convert a figma design, we will get it already. But that's fine, let's do one thing, let's make this first, then we will talk about all these things, copying exact things, so it's good. I am pretty happy with how it is looking, but one thing is bothering me, do you know what it is? That why this font weight is not working, so I am changing its font weight it's kind of not working, so I bolded it, so it became bold, so this font is like this, so if I bold it, I will bold it for now I have bolded it, this font is a little thin type, so we will maybe replace it in other font in future but for now I will keep it like this, let's make the layout first then we will talk then after this I want to, the hero, I have done this as its first child I will do one more thing, I will set the gap of 23 pixels, I am just checking if it will be too much no, it won't be too much but yes it will be fine so if I see this so this is netflix sense font weight 400 and 24 pixels so .hero's second child or nth child and if I make nth child 1 or 2 so I will font weight 700 and font size to 24 pixels 24 pixels, I hope I am correct font weight 400 and let's see join today, cancel anytime did it work or not? is it 24 pixels? font size, not font That's why I am saying why is my font size so small You can tell by looking at it And same goes for this one, 20 pixels So the third child is mine Not mine, this one Hero's How much? 20 pixels So 20 pixels, so 20 pixels, font weight will be 400, good and yes, it is looking pretty good but we have to make it little higher, so to make it little higher, what I have to do is, first I have to bring this thing, I will close this, I have opened many, I will just reload it, so first I to bring the input here and get started button here so I have to bring two things, so I will bring one more div here and the spans I have put here can be div too but that's fine, I will write div and in this div, first of all, an input will come, type is equal to text and its placeholder is going to be, what is going to be its placeholder of this ready to watch, no email address email address and get started button get started ok that's good, it's not too big yes it's big, but did I 1,2, 3, 4? Why is it looking so big? First child, nth child 2, nth child 3. Let's make it a little consistent. Let's make it nth child 1. It's not going to make a difference but I am just giving it consistency format document, it looks good in code now I am seeing that why the font size is so big here 1, 2, 3, 1, 2, 3, 1, 2, 3 why is this so big in the fourth one, I just want to see why it is so big it is a little too big ok, so this input I said inside dot hero, oh I see, so I have said that first child, ok so this is my parent's first child, ok so I have to do like this, that immediate first child is only talking about that immediate and child is talking, so I have put this here, greater than symbol, now it will not be applied, email on get started, ok so these are my buttons of this type and with that here is the Netflix logo I will not get any email or get started. So these are my buttons and along with it here is the Netflix logo this is also centered, looks pretty good, just looking like a wow. What will I do with the body that the body I will make the body background color black ok, the background color of the body is black yes, it is looking pretty good so till here I have done the clone up to this point ok, I have done it up to a great extent now I will do one more thing, I will reduce its height a little I think its height is a little more, I will not do 80vh I will still do 60vh I will do 60vh, I guess 60vh will be less I will do 70vh ok, I will do 70vh and I will have to do 70vh for this will have to change it to 70bh as well because I want to keep both of them same, dot main and yes, ok so see it is looking like this, we have cloned it to a sufficient extent let's see what is the responsiveness of this, if you take it into account then you will be in benefit, now see here I have to put media query and give padding to it or maybe what I will do is without media query I will give padding and I have to give text align center who will have to give text align center see it is better to make things responsive with hands so I will give padding in dot hero I will give padding in dot hero it will be 23 pixels, let's see what's left and I'll text align center text align center for this and text align center for this I'll do text align center for this first then text align center for this, I hope this will also have text align center yes, text align center and I've given gap I need gap in ready to watch so I am not sure if they have given a lot of gap nothing much maybe not 23 pixels 29 pixels or 30 pixels I think 29-30 pixels is fine great, so I will put text align center in all three here, here and here text align center, I have done text align center then one more thing is happening that it is running from its height you can see it is running from its height, so we have to do something about this too see it is not running from its height, its height is automatically adjusting you can see, they have done something like this and the height is automatically adjusted see this so we have to fix this later we will fix it later so fixing this is not that difficult I can increase the height maybe see how much it will go out if I see it in iPhone 12 pro max so what I will do the 80bh I did Did I do the height of the nav? Did I do 60bw for max width? Sorry not bw I did the box 70bh If I increase the box and the hero here By the way, where did I give the background? Did I give the background? Did I give the background to the nav or to the main? I think I gave the background to the main. I gave the background image to the main. So where did my main go? Div.main is missing. So I did this 70vh, maybe I will increase it a little. Then it will cover it a little. So see, I will increase it. But here I am increasing the height of it, so it is running down to a limit only, maybe I will make the font size a little smaller, if it stays the same in 12 Pro, so this is the problem that we have to solve, we will solve it, for now let it be like this, I will reload it, I will make the rest, so this Netflix clone has been made to a large extent, now we just have to do the button styling and i will write 2 classes one is btn which will be on all the buttons in that we will give background and then i will make a red btn and like this we can make more buttons but this line i will make a div with the name div.line so this hero section is complete format document ok, now I'll write here div.line ok, here I've written div.separation now what I'll do is I'll give the height to 11px I'll give the a height of 11 pixels and a background color of grey ok it's a little too big and why is it coming like this my hero section came till here and padding I don't want padding from top to bottom padding should be from top to bottom in hero so I want 0 padding from top bottom padding is not needed from top bottom I want 0 padding from top bottom and it is looking like this, where is padding coming from? where is padding coming from? where is padding coming from? ok, so hero's height is 100% hero's height is 100% ok so it is happening because of hero's is 100% height of hero is 100% ok so hero's height is 100% so here we have 62 pixels nav bar and this hero is taking 100% of its parent, ok so what I have to do, the height of hero the height of hero I will say 100% minus 62 pixels, ok and in CSS there is a calc function which calculates this thing and I think we should be good now because I have minus the height of navbar 62 pixels and yes and yes and yes we have done it we have done it okay see see see see everything is fine I can do one thing you know what I can say that let it not overflow if I do something like this, 14 Pro Max, I think we are good now, we don't need to solve that problem again. And obviously, if it stays like this, it will look like this, okay? So it will look great on the phone too. But we can put media queries, that should be fine, okay? For now, let's get back to work. And here I hope that I haven't ruined the background opacity I hope I haven't ruined the background opacity, it was 0.44 if I increase it a little more, maybe reduce it or increase it, okay, I'll make it 0.94, no, I'll make it 0.74 I'll make it 0.64, I'll make it 0.74, I'll make it 0.7, okay yes, I'll make it 0.74 I'll make it 0.7 because I don't want it to look too much so I'll make it 69, so the background opacity we made it 69, great, and I'll make the height of this a little less, opacity also we'll make it less, opacity will be less so we can do that also, so the height we have chosen for separation let's do it 7 pixels, and the grey color we can take it to darker side so this grey color can be taken to darker side I have taken it to darker side and see we have matched it to a good extent so it is made the top to the bottom. One thing I really want to do is that it is the first child, although if I do this, it will not become a clone, it will be a little different. But I want to put pop-ins here. So I want to put pop-ins in font family. So I want to put poppins here and I want to make it font-weight is bolder. Okay, so it will look like this, I think it is quite right. So I made it poppins but why it didn't poppins, let me see. Font-family I made it poppins, I want this font family. By the way, this font family was Poppins. Poppins and... Do you know which one I want? I want a dark Poppins. So let's do one thing. Poppins. Poppins. Here comes Poppins. A dark one of Poppins. This one. Semi Bold 700. This one. I will add poppins and make it a dark one I will add all the styles I will take bold 700 I will copy and paste it in the import folder I will add poppins and serif I will remove it I will add poppins and Serif here. And its font weight is bolder. Yes, now it is coming, now it is coming, now it is coming. So this rupee symbol is looking a little weird in Poppins, but I think this is looking pretty clean now. This rupee symbol is different from theirs, mine is different, but it's looking pretty clean and we have done the clone to a great extent, now this email address portion is the get started portion, I have to do that now I am seeing how to merge this, now I want to make a class named redbtn, redbtn class and I want to make a class named btn, first of all I will make a class named btn and that dot btn will be a basic button which will give styling to it so class will be equal to btn and I'll give redsm in this and in this I'll give redbtn, btn red and btn redsm btn redsm and btn red btnredsm and btnredsm and btnredsm btnredsm getstarted is btnredsm and btnredsm so we don't have to do much first of all we have to give a padding of 8 pixels and we have to give a padding less than top and bottom 3 pixels and 8 pixels, let's see how much it looks and we have to give padding less than top and bottom 3 pixels to 8 pixels so that it looks like this and then the font weight inside it should be bold ok, font weight is bold color should be red, background color should be white ok, but the background color should be red background color should be white ok but btn btn red and btn red sm btn btn dash red dash sm, is this right? yes, it is so let's do one thing we will change the background color to red and do the same thing here ok, same thing here red red and we will do color white where ever there is red I have to make it color white as well. Color white. Ok. Ok. Not looking very good. I don't know why. I will make it color white. I want to make it transparent. Ok. I want to make a transparent button. So I will change the background color let me fix this first and I will give a border radius I will increase the padding and I will increase the get started one so I will do one thing I will bring the padding from here I will right click and inspect and I will give the padding from here, I will right click and inspect and I will give the padding from here 3 pixels, 3 pixels, I will increase it from here then I will increase it from here, ok? No, I will not increase it from here, ok from here I will increase its font size, I will increase its font size font size, 20 pixels won't be more, No, it's just a big button. And border radius, 7 pixels. In fact, less than 7 pixels. It's just a little bit curvy. 4 pixels, 4 pixels border radius. So this is our BTN red. Okay, got it btnRed btnRed will come and along with that in main in .main give input also like this ok so what is this give input also in .main so i said in input to .mean to the same classes but it will be red what should I do? I will remove it, we will do .mean input separately don't use shortcut, let's do format document the input of .mean the input of .mean the input of .mean what we will do to that we need padding in that also and we need font size that's why it will match otherwise it won't match looking good now ok wow this looks good yes I have to make the background transparent. So, to make the background transparent, what should I do? I'll write here. Background. Color. And I'll type RGBA. And let's say I'll type 23, 23, 23, 0.3 yes, this is looking good so I can give it a background color by doing RGBA and this is pretty much done so I will copy this by the way I have guessed this 23, 23, 23 but it's good background background color rgb a 23 23 23 23 why it didn't come? background color rgb a rgb a rgb a yes ok good now I have to do one thing GBA Yes, fine, great Now I have to do one thing, it is selected so it looks like this And this is how it looks without being selected Great, great Very good, very good Yes, I have to reduce the font size inside it Such a big font size will not work inside it But if I make the font size inside it smaller Then I have to give padding So I have to make the font size smaller so I have to give padding so I have to increase the padding and I have to increase the padding from top to bottom so that it matches so that it matches ok so here I have to face some challenges I want the email address email address is font size less padding more so I increased the padding and font size should be less and padding should be more so padding is increased and font size is less ok but by doing this you know what is the problem that they are not sitting together so I have to take the help of flexbox ok so I have to take the help of flexbox ok, never mind, I will take it so I will do one thing here first of all I let me do this first let me put display flex on this one and align item center, justify content center let me give a gap of 3 pixels I can also increase it a little so let me do one thing here buttons, ok, I will give a class named hero buttons hero buttons and in hero buttons I will do this so my hero buttons will come here ok now I will reload and see it came like this now i can do all these things in it i will say font size make it small and increase this what should i increase make it like this and i can increase this also if i want to make it width so i can do this ok great so I can do this, ok, great the input inside the dot main, do it like this the input inside the dot main, do it like this ok, great so we have made it to a great extent it is looking like this, see it is looking like this maybe I should do one thing here and that is, its padding I have to correct it padding from all four directions. So if I do this here, 0 pixels and here 0 pixels, okay. So I have to do 9 pixels here too. And if I do this too, 9 pixels. So I have to reduce these 35 pixels. And I have to reduce the size of the pentas pixels and I have to reduce this a little bit this is the top bottom this is our this one, I will reduce this a little bit more ok and I will increase this a little bit yes I will increase this a little bit by the way yes this is ok bro, padding ok so you can do everything here you can do everything here to a large extent and this button is a little big, so I have to increase the padding, I have to increase the padding a little, I'm sorry I will have to increase it to say this much and along with this, we have to make the color of this white but the placeholder's color is not white, the placeholder's color is not white, how do I the placeholder color to white but placeholder color is not white placeholder color is not white how do I make placeholder color change so I have to change font weight and do something I will give 900 900 yes, this color white is already there ok ok, I will do this much first then I will see I will do this much first this much first and by doing this much i can achieve perfection in this so i will do one thing here i will increase the alpha value to 0.7 so that the text will be bright and i will also give a border border 1 pixel solid RGBA I will use this one and let's see how this border looks I want white, so I will do one thing white color but opacity will be less so that it looks like this, yes good so I will reduce its opacity a little more let's see 0.3, 0. is reduced a little bit, 0.4 or 0.5, 0.5 looks pretty clean, great so we have cloned it to a great extent, okay exact clone will also be done, if I keep one on top of another but it looks good, what do you say? tell me in the comment section below, what do you think about it so far so here you can see that by resizing it one thing that I have not done here is that I will fit it, fit to window we have to work on its responsiveness its responsiveness is getting worse, if I see their responsiveness they have made it quite small, so we have to do something like that font size should be less when resizing so if I make it responsive, then see font size is getting very less when resizing so that will be done, we will add media queries, see they have also used media queries we will add that, that will be done so now what we will do is, after doing this, we will make the rest of the part below this is a flex box, I will make this layout only once and here, here and here I will make the rest of the part this is a flex box, I will make this layout only once and here, here and here, and here and here also then there is FAQs, after FAQs this box will be made, this will be replicated that's about it everything is easy after this and according to me, you can make this very easily and try out but I will make this for you before that, what I will do is, to get a little more but I will make it for you, before that what I will do is to take a little more feel I will inspect here, in fact I was going to go to view page source, right click and view page source view page source and view page source, I will just copy the description or title copy the title and paste it here. and you go to netflix.com favicon.ico so a favicon will be downloaded, save it save images not search image, save images and save it, where will you save it? save it here in media53 folder now you will reload it, no earth is visible here then this icon will be visible now you will reload it you can see earth here, no? then you will see this icon I will show you by pressing ctrl shift r and see this, by pressing ctrl shift r, netflix oh bro, it cloned it and yes I know that for now our, where is netflix.com netflix.com, oops so if I bring you to netflix.com? netflix.com, oops So if I bring you to netflix.com then you will see one thing that we are not cloning these two buttons properly and I don't like its bold nature. I want to do its background RGBA. So let's do the cloning properly. So the button I have given whose color I have made white and in this I have given background color So there were two buttons, one was red and the other was sm, I want to keep them side by side And I want to do the format document So after doing this, I just want to make sure that the one I of the BTN is not white it should be RGBA I want to use RGBA I will make the opacity less and this one ok let me see what is the scene ok so I have made a mistake in RGBA no problem man no problem did I make a mistake in RGBA now it is ok now it is ok, I have to make it RGBA less I have to reduce the alpha of RGBA alpha needs to be reduced yes, now it is fine now I will make the color white in BTN ok, now the color is white and the background is like this ok, you can see the alpha of this I have reduced it alpha of this line so this is how our button looks like and what you can do is that you can make the border 1 pixel solid white and we will reduce the alpha of this white if we don't like it but it is not necessary and I will give a border radius of 4 pixels by copying this line I gave a border radius of 4 pixels so that it looks good and we will also give a cursor pointer cursor pointer, okay if we wanted we could have used it like an anchor tag, if we had written anchor tag then the cursor pointer would have come automatically but this is also a cursor pointer, if we put event listeners in it, then we can put. Now I have bolded the font weight of this. I don't want that. I don't want to bold the font weight in this. Font weight is good, but at the same time, I will... 400. 400. Let's see how much is 400, okay 400 is also fine, sign in should be like this also, but if you bring the exact font, it will look better. So, you can download a lot of fonts. So, if you include this regular 400 here and then copy it here, then you can do something like this and I guess by doing 400, your 400 will also work so I have done 400 font-fit in BTN yes, I have done 400 font-fit it is looking quite good, I am feeling it is right see, the more you run after perfection, the more time it will take you you will run after perfection it will take that much time so if I bring it here so 400 is here then 700 is here 400 is here 700 is here 400 is pretty good, keep it at 400 and you can increase the padding you can also add icons all this will be done to add here, this is add icons all this will be done here this is actually a select I will keep it like this just for the sake of time and rest of it is done we have to bold get started and after that we have to put this, so the get started that we have written after this I have to put m%lt semicolon sorry gt semicolon greater than symbol and it will look like this and we have to bold it you can download more styles and this font weight you can do as you like 400 will be 400 I will make it 400, font weight font weight 400 and you can go as much as you want to perfection try to make it as exact as possible, take exact font and it will be exact but let's move further and moving ahead we will, one more thing, I have blacked the color of the input I don't want that, I want its color to be white, so this is also important it should be visible to anyone who writes so you can do this, font width I have set to 900 that is also not looking good if anyone writes an email, I don't want font-weight to be 900. So, till now it has become very good, I am enjoying it a lot. Now let's move ahead and see what things can be done. So guys, now I want to tell you that all the websites that we have made, if you want to host it, then how will you do it? So I will click on manage site here, and after clicking on manage site, I will come to my account, I have come to the dashboard as you can see, I will go to file manager, this is my sigmawebdevelopment.com domain on which I have not done anything yet so what I will do is I will go to file manager, see this is static website, we are deploying a static website so where I will upload the file in public html, so here you don't have to upload anything, there is a public html so you don't have to upload anything here there is a folder of public html which you have to use to upload this default.php which is a default file you can ignore it and upload your whole website here so now what I will do is I will make these sections here so to make these sections I will use a section tag here and I will say section and here I will keep its name here class is equal to first so I will make its first section and in my first section I will put a div in which I will put this text so I will put a div in it and in this what I will do that I will put a div and put this text and after that I will put this image, I will put another div in which this image will be there so I will copy this image address and here I will write div.image ok, I will make secImg means section image and here img src is equal to this, let's see what is made, so here this image is complete, I know that I have't done anything yet so I will make the first one a flex box so I will say the dot first display it as flex justify coordinate as center and you know what to do with max width just make it 50bw don't make it too wide and don't forget to auto the margin so I did all these things so that it will come to the center and color white, color white, color white so that this text can be seen otherwise it will not appear so let's see what scene is made here so see this is our flex box, this is our text and after that as you can see this image has created some problems so to fix these image problems I will first make it 70 pixels I will make it VW and after this this secimg secimg.sec make the width of the img let us say 30bw what do you say? 30bw good, 30bw is good and along with that I will center the text in this div how will I center this? maybe I will give some padding in it or what else can I do, if I center justify content here, center align items then it will be very centered and I think I am there, I am there, ok so justify center, justify content center and align item center and see it came here. Now I have to run a video in it, I know how to run it, so what I will do is I will take the video link and to take the link of this video I will click on inspect and I will bring this video. So the source data of this video open a new tab and here I have the tab and here I have video and here I will use video tag to run this video, so I will come here and here my img is here, here my video tag is here src is equal to this, now the image in secimg first of all the secimg you have to do its position what you have to do the position of IMG, what you have to do? absolute, sorry relative, you have to do relative and the IMG of this, you leave it like this but the video of .secimg you have to do the position of that, what you will do? you will do relative, ok or we will do absolute position let's see what happened here, first that video should also come, so here it is that video, but after this video comes I want, see here is my image, here is my video, ok, so this is my image, I have to do its position absolute which I did, now see it's overlapped, okay. Okay, so this was my div, I have made its position relative. How about I make its position absolute too, but again, it's not working as a flex box, it's not entering the justify content, so I'm a little stuck here, how do I fix this challenge. So I have stuck here, how to fix this challenge. So I have made a box named SECIMG, in which I have this image and this video. I have made the position of this video relative, I have made the top 0. And in this also, what I will do position relative I will make top 0 but this img is inside this ok, this img is inside the secimg and this is a video why am I not able to do this so if I do this from top and along with that I make right 0 oh yes, I am able to achieve what I wanted to achieve so the video of secimg, put this in it, okay. So, I put position absolute, top 51 pixels and put this in the right. And here I had put position relative, okay. Now I have to do something like this, that my video, first of all, it should be auto-play, okay. So, we will do auto- that, this video of mine, first of all it should be auto play, okay. So we will do auto play of this video. Let's go. Auto play loop, okay. Is it playing? It is not playing, bro. Play, bro. Why are you not playing? Why is this play not happening, bro? What is the problem with this gentleman, bro? Why is this play not happening? Is this an image or a video? Open video in a new tab. Okay, so this video is like this. Why is this video not playing? If I reload it. This video is not playing. I don't know why. Should I put controls in it? Let me put controls and see what happens. So this video is not playing. I have also auto-played it. I have auto-played it, why is it not playing even after that? This is a question, man. If I play it, it is playing, okay. So why is it not auto-playing? Okay, so what happens is that the Chrome, until you mute it, it does not let the video be auto-played. So see, now it is letting it be auto-played. I will remove its controlsed let me remove the controls and now we have to do the width and height like this first of all the z-index of this image this is its z-index so let's give it position relative and z-index will be 10 and now see it is looking good ok, so see it is inside this tv and first of all I will do this, position relative and z-index what I will do is, this section in img and along with that I should do top 51 pixels, right I should I do some splash with this, I guess not everything looks good it looks exactly like Netflix India's page see their gap is also coming here my gap is also coming here which means I am good okay, I have cloned it I will use what font again and here I will use popins only I will just bring font size from here because see what happens this is a font of Netflix sense I will download it, okay what I will bring font size, because see what happens, this is a font of Netflix sense, I will download it ok, here what I will do is, see this is 48 pixels and this is 48 pixels and 24 pixels so 48 pixels and 24 pixels, so I will put a span here here I will put a span here also one is 48 pixels and one is 24 pixels ok, so here my class is first, dot first in dot first, the immediate div is ok, its first child is ok in first child, font size you make it 48 pixels ok and font weight you do bolder and now what you will do, second child you will do, means nth child 2 so that will be 24 pixels ok 24 pixels enjoy on tv watch on ok so i have made it 24 pixels let me document this first why is it not 24 pixels? why both of them became 48 pixels? watch on, ok, so div is div's first child, first child of div inside first and this is second child, so where is the problem, let's see so I have to give a space here, so I have given a space that if this is the first child inside div then 48px boulder and I will not make it a boulder, so it will look something like this and obviously I will make this section's div display flex so I will make it display flex and as soon as I make it display flex, I will make it flex direction column, by the way it is not required if I would have used div instead of span but that should be fine, column, by the way it is not required if I use div instead of span but that should be fine, I am good, I am good, I am fine like this, so you see here I have made it exactly like this, and similarly I will make it below, so I made this, now I will use my partition line, separation, I will say use my separation, div class is equal to separation, and here this separation line will use this, I will say that my separation I will use this, ok, div class is equal to separation and here this separation line will come down ok, so the separation line didn't come let me see what is wrong here, ok, so I will put it here outside the section, because I have made the section flexbox, so see this line came down, after this I will make one more box like this, only image will come in it, this thing will come later so let's go and after this what is there, after this there is same thing so first of all i will duplicate this section i will just change the links, so i will duplicate this first and then i will duplicate it twice, i will duplicate it once more so this is my third section i will keep it first only and in this i will put third like it and I will put second in it and here because I have made some classes from first so I will keep it as it is and now you can see here, so see enjoy your TV, enjoy your TV, it came like this now I will do the image first and the logo of that image, sorry the link of image by opening image in new tab I can also copy image address but that's fine image is first, section image is first, this is later in second section image is first, this is later so I can do something like this section image is first and video is not there, ok remove video remove video and do this and what is text text? see the text download is this, text so replace the text like this and do this ok and after doing this, it looks like this and yes obviously you have to put this too div class is equal to separation, so you have to put it here you have to put it here too, now it's here so this is here, enjoy on your TV is here, download your favorite shows, this is here then after this, the image and logo here are different then after this, this is the create profiles one, okay, the image is different here so if I copy image address, okay and after copying image address I will copy and paste second one ok, separation came twice and after doing this I will replace the link here so I will do ctrl v and here I have put the image and here see the last one came here I have to this image and here you can see the last one I just have to change the text here instead of download your shows, create profiles for kids so I have to create profiles for kids in LUTs and along with that I have to do this just a little copy paste which you have to do, you can't escape from this so you have to do this, copy watch everywhere then where is watch everywhere watch everywhere is where our second last video is here is where the video is second last watch everywhere, watch everywhere, it will be pasted here watch everywhere and after this this thing will come here, copied and pasted from here something like this, ok so it is pasted, ok then I have to change the link of the video because I guess we are using the same link of love stories, we are using the same video watch everywhere but the link of the video is something else and that is this, I will copy it and here the second one, M4V, I will replace it with this and if I am not replacing the text then you can do it, I will replace the second one, M4V with this. And if I am not replacing the text, then you can do it. I will do it, I will make sure that we replace the text properly. See, enjoy on your TV has come, this has come, this has come, and these videos are also running, they are fit properly. And after doing all this, I guess we are good right now. And after this, we have to do simply, we have to make frequently asked questions. So I will write here div.faq So I will come and write section.faq and in this I will write h2 and I will write frequently asked questions. I will copy it from here. So I will write here frequently asked questions and here I will write div.box and in this box I will put these questions, for example I have put what is Netflix, now I am not using these icons but you can do it so I will put here what, I will put expand and put what is Netflix and let's say I put an icon here so I will do one thing I will go to huge icons ok, I will go to huge icons and go to their examples I will go to icons viewer, sorry you can take it from anywhere, wherever you get it free, I will go to stroke and write plus I think it is ok, so I will copy its SVG I have copied their SVG and I will copy the SVG I have copied their SVG, and I will put their SVG here Then what I will do here is, my dot box Ok, and I will do one thing, I will write its name as FAQ box Here I will put the dot box inside dot FAQ I will just call it dot FAQ box, I guess I have already used the name box So how about we call it faqbox so the faqbox make it a flexbox display flex background color grey padding 34 pixels and rest I will do here so this is faqbox it came like this and why is the background color white background color is grey of the FAQ box so I will do the format document and see what is going on here so the class is equal to FAQ I made I made this section then I made this why is the background white, I don't understand why its background is white How did its background become white? I made a div, we will make the width of this div 100vw Ok, its width is 100vw, so let's make it 100% The scroll bar is coming in 100% also, let me see what's wrong here How did its background become white first of all? let me see what's wrong here how is the background white so first of all i want to see background why it's not black and color white first of all i have to do this and before that i have to put separation so i will do one thing, this is my .faq box in this i will keep background black and color white so i have the background black inside it, I will keep the color white, so I have kept the background black, I have kept the color white inside the FAQ box and you guys see here that this is how it looks like, so if I do something like this, then this is its background gray, where did I put the background where? Let me see I have put it in FAQ box directly I had to put this background black in FAQ I had to put it in FAQ, see frequently asked questions came up and along with that I have not put separation here, I did wrong I should have put a separation here right before FAQ, okay? I have put a separation right before FAQ and after put a separation right before FAQ and after this frequently asked question this h2, means .FAQ's .FAQ's h2 in that I will text align center text align center and see this is center is it center here, yes it is and above there is padding also top also, so the FAQ this is mine, in this I will give padding of 34 pixels, I need this padding I will make it exactly like this, you don't take tension I will take the font size as it is, for now I will keep it like this, now this what is Netflix is written, this box of mine which I have called FAQ box, this is section FAQ I have given padding more in this, so I will reduce its padding ok and its max width I will make it 40vw not 400 ok and margin auto ok I will put this in FAQ box I put this in FAQ box, so this is mine and I will also put margin top in this left right is auto and I put little more, I know 34px is a bit too much I think it's not bit too much, it's fine ok justify content space between ok, I justify content space between I will make space between, so it will be like this as you can see, then I will make copies of it and my work is done, ideally when such things happen, they come from database but that's fine, now what you have to do is replace the questions here, so it's made like this, by the way this I will also apply hover effect and also cursor pointer so in FAQ box, cursor pointer is to be done ok and then we will also apply hover effect that will also be done, ok so it is like this I want to hover on this, so it has changed a bit if you want the exact color of this, you can take that too. So all these things happen. Now the frequently asked question, let's see what font it is, what is its size. So its size is 48 pixels. So I will change the font size of my h2. Font size 48 pixels. Okay, I have made it 48 pixels. And it looks like this now. Sorry, it looks like this now and it is going out a little bit so I did 40, I did 34bw and 40bw max width, I did 40bw let's make it 60bw and see how it looks it is looking good to a large extent I will have to increase the padding a little more and I will have to increase the font size so let's see what font size it has, 24 pixels, okay it will work 24 pixels, so let's do one thing let's make the font size 24 pixels okay, and I have to do this in the FAQ box so that it looks as big as it is here so I can copy all these questions, what is Netflix how much does Netflix cost So I can copy all these questions What is Netflix? How much does Netflix cost? I can copy all these questions. So if I inspect this and copy it from here, then my second question will be How much does Netflix cost? This is done, then after this I will copy this question and paste it here then after this I will copy this question, where can I watch? and you can do it for all, I will do it for all or not, I will do it I don't want to waste much time, to be honest, all these things are easy I am here to teach you how to make a clone. And here what we can do, see its size is getting impacted, which is a problem. How are they handling this? Ok, there is no plus in this. There is no plus in this. How much does Netflix cost? Ok, I put it wrong. I put this watch Netflix on portion wrong. I put this question wrong. So let me add some other question. I have put the watch netflix on portion wrong I have put this question wrong so let me add some other question how do I cancel sorry I will copy this and paste it here, that's it it's done, it's done it's looking good, yes it's looking good and after this you can run it I will also add a hover effect that if someone does a hover on it ok, so I can do something like this is my FAQ box ok, so I will add this hover effect and I will say that if someone does a hover on it then its background color should be red, so let's say I do something like this ok, so I will not make its hover effect like this I will come here and I will make the hover effect like this, I will come here and make it like this hover, ok and I will write here background color grey and I will change it let us say I will do it like this so if I do it on this, it will be like this now I will do transition all nothing happened by doing transition all I will have to put transition all in FAQ box and I will have to put transition duration also so I will have to use the function in the FAQ box and I have to put the duration of the transition so I have to use the syntax of the transition properly and I will go to MDN reference for this I don't do anything half-hearted so I will do this, all one second is out copy it, ok all one second is out is it working? yes it is working all, one second is a little less, so I will do one thing, first of all I will bring the color of this, we are doing clone, clone means clone, so whenever you want to choose any color, so what you do, anywhere this color property, or you come here directly, in element.style, write color, write red, ok, suppose you have written red, now you click here, you want any color of the screen, ok, now click on pencil and choose, which color do you want, do you want this color, here is your color, ok, so the color you were saying gray, it was not gray, it was this, ok, where is the FAQ box, it was not gray, it was this, ok, so now see, the color is matched matched now we have to white it, ok so, my colour of this will be oh bro, colour white ok, so its colour is white why it is not white whose colour I have white I have white the section first div nth child white, what am I doing? I have to make color white of this, everyone's color is white, because the background is dark in this, I have to make color white of this SVG basically, so fill is equal to none, so I have to make fill is equal to white in this, so in this fill is equal to none, I have to make fill is equal to white, otherwise I won to make fill is equal to white so in this svg, I have to make fill is equal to white otherwise I won't be able to change the color but why is it not changing? why is it fill is equal to none? I have made a lot of copies of it so I have to make fill is equal to none white ok, if I would have used this file it would have been more useful, I am doing it wrong by copying so I would have saved it in a file in the name of plus.svg. Then it would have been better. But that's fine. That's fine. I just wanted to mention that you have to do it like this. Now here fill is equal to white is done. Even after that, this svg hmm... that's a problem. Even after that, this svg did not change its color. Color is not changing from white. Color is not changing from white to fill is equal to white. What is the problem here? We will have to see. Fill is equal to white. Fill is equal to red. Still nothing is happening. So, fill is equal to white is not working because stroke is black. So, if I make it white, it will work. White, white. work see it worked otherwise I will tell you another way to do it it is a little fancy, I will tell you see learn it like this now suppose I don't want to bother you much I will write here filter invert 1 it is done, I will invert the whole image I mean I can do it, I am just telling you so I can say that in this FAQ invert any SVG so I can do it like this, FAQ box, I will not do this that why you have to invert, but I am saying one thing, that you can say that in FAQ box, any SVG invert it, filter, invert 1, all white, see, all white, and then make it on javascript, this hover effect is applied ok i have not applied hover effect on this if i show you, then at the time of hover the color is this, so what i will do is, i will activate hover class ok, i will inspect this element then i will activate hover class on this, so the color will be this ok, is the color done? so i did hover on this, so done? so I hovered on this so why hover class is not active on this? so I have to do it on this, I have to activate hover class on h3 so the color of this hover has changed, okay? now I want to know the color of this so I will click on pencil and I will click on this pencil and take the color okay? where are you color? this is RGBA color I will copy this color this is the color 4141 so this is the color, let's copy it and put it in hover ok so now we have made exactly what we wanted you can see the hover effect is also there ok these are are FAQs now what is left now footer so let's make footer also now email address this is footer, there is nothing much in this, you know so see this is our now after this we will make footer we will put separation and make footer now how will you make this, I will make it with grade I will make it with grade because I will also make it responsive if I make it responsive so see I will convert it to 2 see it became 4, it was 4 before and now it is 2 so I will use grade in it you can do it as you want want I will use grid in it so I will do one thing first I will bring separation here I will bring separation how can I bring separation I will copy this div and bring it here and after this I will make footer my CSS grid will be footer so I will say footer displays grid grid template columns 1fr 1fr not 1ft 1fr 1fr again 1fr and again 1fr 4 columns and these 4 columns I will write them in div and here I will put FAQs so I will do one thing I will use A and I will say Ahrf is equal to FAQ and I will write FAQ and I will write FAQ here and then I will write FAQ here and then I will write something else here Now they have made a URL here, I clicked the link They have made an unordered list, you can also make an unordered list They have not used grid but I was seeing a very good use case of grid But no problem, it's their wish, they must be saying that don't teach us, let us make it as we are making it, after this I will write investor relations here, ok, I will write investor relations, and after writing investor relations, I will replicate it a little, ok, because first I will make the layout, then I will bore you again and again I am joking, I will fast forward ok, I will try to not bore you and always try to make interesting videos now see here when I did it below so this div I will put a class in it footer item ok, I will say that in footer in footer item in footer item, ok, I will say that in footer in footer item display flex and flex direction column, ok so see our columns will look like this and in footer color white, max width 60vw margin auto ok 1,2 rest 4 so i will replicate this ok 4 are here 1fr 1fr 1fr so this is my footer now this question part I can write it with div I will put a div here or because I have made footer as a grid so maybe I will put it here, questions call like this, so you can put a separate line see this is how it is and then you can start your grid so maybe instead of saying that inside footer, I will make div.footer, means I will make a class named footer now I will tell you what I am doing, don't get confused I have no intention of confusing you here the work I was doing on footer, I will do it on dot footer and here my footer means footer element, this is footer element and this is footer class in this I will color it white so let's see how it is done and now you see the question thing is here and I will do one thing the question mark the span which is written here I will put it inside the span first of all and the span inside the footer the span inside the footer what I will do to that is I will give margin I will give margin 2 pixels from top bottom and from left right I will give 30 bw and text line will be center let's see how far it came it came here, it came a little more here so maybe I will try to keep it here so let's do one thing the 60 bw I did, I will put it on footer and the margin I have auto-created, I will do footer of 60w and I will do footer of margin auto and I will remove margin from here and I will remove text align center from here and now you will see that it came here but let, so in this I have my footer div class is equal to footer it has taken the full width and how much width it has taken ok so the width is not applied so I have given max width 60bw to it max width is given 60bw, let me see what is wrong here There is something wrong here So in footer, did I give class="footer", or footer? But I can't see the max width, so I can see color white in footer I can see color white in footer, oh I put it in footer span, I should have put it in footer Not in footer span not in footer span now let's see what's the scene done done what will I do now in my footer in any form I will do text decoration none and color will be white so it will come like this, you can see investor relation, this and this, ok this is here by the way, their underline text decoration is not none so maybe I will remove its text decoration font size I will do 10 pixels but let's see how much font size it has so let's go to word font and click on it, how much is it? 14 pixels 14 pixels and they have given a lot of gap so let's give gap of flex 23 pixels and in footer I will also give padding of 34 pixels in footer and if we see now, it looks like this this question thing came and then this came so we have to give margin in the top and bottom of the question I guess I have given a little more gap I will make a 14 pixel gap and the span of my footer which I had just put I will give padding top or bottom to this footer span 34 pixels and 0 pixels from left and right so it looks like this why it didn't come on this? I gave padding from top and bottom why it didn't come on this? star padding oh I see what's wrong here so in total why this padding is not fitting on this we will have to see, where is this element here is this element this is our max width I am giving padding on this so this padding is not fitting ok, so this div class is equal to footer display created so this is happening is equal to footer display create so this is happening because this is inline element so i will have to make it div inside footer i have to make it div so here i will document the format so i will do one thing div class is equal to questions ok and i will say that i will do it in the dot question so instead of saying that I will say in dot questions give 34 pixels I think we are good now, now it is looking very good so we have made our Netflix clone which looks like this videos are also running, everything is going very well and hover effect is also running fine and you can clone it to a large extent in the interest of time, I am not going to go to the exact clone but you got the point that we have made it to a large extent, now one thing that is bothering me is that I will increase its size and give a padding from above, so let's do that too, so our image is the image of Netflix the size of it, let me the size of our Netflix and the size of our nav I will do it from here, ok? I will inspect it whenever you want to correct your website, you can do it from here ok, the nav here, I can give margin I have given left and right auto I can give some 3 pixels for top and bottom, ok? and I can increase it, if, I have given left right auto I can give top bottom 3 pixels, ok and I can increase this, if I want to make it fall down, I can increase it but again, I am facing a problem here, I will not do it like this instead of doing like this, I will I will give padding in the items inside our nav so if I give padding of 3 pixels and from top to bottom I can give padding or not So I will do one thing I will give padding to my nav instead of margin Now it's fine So from top to bottom 16 pixels and from left to right 0 pixels Now it's looking good now. So can I give this? Can I give this on nav? Yes, padding. 16 pixels, let's give this on nav. Okay, but then if I give this padding then it will get a little worse. I think we are good here. It's fine like this. This spacing and this spacing will be fine when I increase the size of the image. So let's increase the size of this image. So the width I have made it 114, maybe I will make that width 130. So I will make it 130, so it is looking very good. So I will make the width 130, ok So I will make the width of the image 130 Where is it? 130 Where is the width of the image? Where did I put it? Here it is So I will make it 130, ok And it has become quite big now But if you have thought that I want to give padding on it so if you want to give padding on it then let me tell you how you will give this is my navbar, I will increase the size of the navbar first of all I will increase its height, padding will come automatically now I have made its height 100 pixels where it was 62 pixels, I will have to make it 100 pixels so I used 62px here I used calc function here if you remember I will make it 100px I will make it 100px I used calc function I made it 100px so see it looks like this but what happened here what happened here what is the problem with the separation? I want to see this the separation here get started and then this is our separation ok so I guess it is a little hidden, so I will see what is the problem here why is separation is not visible if we do position relative and increase z index I will increase z index to 20 so basically it was hiding behind so dot separation where is dot separation, position relative was index I increased it, now it is looking good, so you see here now your website is looking like this, we have cloned the whole website, this is called cloning the whole website if you have seen the video till here then write in the comment below what you have written, you have given a chip, you have copied it you have cloned it, so in this way you can clone the website now see, I have cloned it so well that it is fun to do it, when you will make such websites then you will get a good satisfaction, now let's come to responsiveness which is a little challenging so you see that it's condition is bad when I am resizing it it's condition is bad so I have to work on responsiveness in this first of all what I will do see this is already responsive I am not facing any problem in responsiveness I am not facing any problem if I show you here in 12 pro max it is looking like this I will correct its size, so it will be better. But if I talk about its overall responsiveness, then I will have to work on it. So the biggest problem I am seeing here in responsiveness is that this thing is completely useless. And I made a mistake in this that I took VW units. So if I make it 555 pixels, style load CSS line number 146. I will define it in pixels, so it will be better for me. Wow, 555 is fixed so well. I mean I am lazy, that's why I wrote 555. It is fixed now. 146, in line number 146, I have to make 555 pixels. Yes, now it's fine. Now what I have to do is as soon as I reduce its width at a time, first of all, this flex box, this first flex box, I have to wrap flex wrap so I will wrap it as soon as, one minute, this wrap is not wrapped, why is this not wrapped, let's see, so I have to do flex wrap here, because there is a div inside this, so I have to wrap the flex wrap inside this, okay, yes, it's fine, but again, when I am making it bigger and then I am making it smaller, so it looks a little weird, there is a little padding in it, there is nothing on top, there is no padding on top in this thing So this thing which is written Enjoy on TV This flex We have to give padding on top Line number 159 159 and we have to give padding I will give it from top, 34px, 0 from left right Ok, now let's see How is it going Now I will do like this and when I will give flex wrap in this flex box in this flex box means in section class is equal to first means in CSS line number 132 flex wrap and when I will do like this then I want it to look like this ok, so I will flex wrap only when and when I do this, I want it to look like this. So I will do flex wrap only when it hits a certain width. Because it will work to a large extent. So I will reload it first and put a media query here. And I have to do flex wrap, where I had to do it, line number 132. One minute, where is line number 132, here it is so what I will do is I will put a media query here I will say media screen and here I will write and and I will write max width and I will write 500 pixels here, ok and to be very honest I will tell you that no one remembers the syntax of media query ok? so you can go to MDN reference, ok? I am not taking it to MDN reference, we will google it no problem, so I will do one thing, if I say make the background color of the body red so let's see what happens with this so after a certain hit wait, see the background color is red so I want till here it is looking good I can see till where it is looking good? till 1300 so I will make it 1300 but after that in dot first I need one thing added which is flex wrap and that is wrap ok, so see this is wrap, ok and now I will remove background color I was putting it to check, ok, it is my habit, I put it, don't know why ok, and here you see, ok see one thing here this image is overflowing little bit, see here image is overflowing, so in this one thing we do that in here let's put overflow in section image overflow hidden ok so nothing happened even by doing overflow hidden let's see what's the problem so this video which is running hmm nothing happened even by doing overflow hidden so why not define the width of this video ok so I have given the width of this video ok so I have given the width of this video no I have not given any width I have given the width of this image by the way so I will reduce the width of this video because I think this width is a little more so let's do it so here what I will do is hmm here I have given the width of the image first of all I want to see this I have given the width I want to see this first I have given image width as 555 pixels so if I give width of video as 555 pixels I will say width or if I give 400 pixels or I will give 555 only 555 pixels now it is not overflowing so in line no. 160 I have to put width 555 pixels, now it's not overflowing, so in line number 160 I have to put width 555 pixels 555 pixels, so I FAQs are also done, yes, just one thing to do, this grid, I have to do this grid in such a way that, this grid has to be done in such a way that my grid template, first of all I will bring media query from above I will copy it, I will copy it why not, it is my code ok, here max-fit 1300p I will say the footer in that do 1fr 1fr ok, do 1fr 1fr and rest everything is fine rest everything is same so it will be like this, ok now press 1fr 1fr and everything else is fine so it will be like this so it will look like this in phone you can see there is no leak so it will look like this in phone and you can see the rest it is like this, it is responsive and you can see two columns here so it will look like this in phone so I want to do one more thing, if I open it in iPhone 12 Pro then see it is broken, and do you know the reason for breaking it? the reason for breaking it is that the font I have used is too big, so I have to fix the font, so here if I show you so how do I fix it in the phone see this is fine, this is also fine and I will like to put a padding on this so I will inspect this section img so I will like to put a padding on this, left right also so I gave 34 pixels 0, so I will make it 34 pixels if I make it 43 pixels and put padding, still it is not working why it is not working, because I have fixed the width of the image to 455 pixels I will also make the video 401 px I will make the video 401 px and you will see it will look like this I have reduced the width of the image and I have reduced this too if I want to reduce it more I will make it 274 px so I can do that too I will show you how this is line number 154 ok, come to this is line number 154 come to line number 154 come to line number 154 and I will bring this in my media query and in fact let me do one thing, let me put this in this media query let me mix both of them here, so I have made position relative in fact I wanted to change this thing so I will change this and I will say that I want to change section img to 305px ok which was 555px earlier and I want to change section video to same ok, we are just changing one property but rest everything is same ok, so let me show you and here you can see everything is going great ok, so let me show you this and here you can see everything is going great, ok so if I show you reloading then see reload why it didn't work so it didn't work because I have to take the media query down, so I have to take the media query down, ok, so I take it down there is no problem with media query and now if will show you so it looks like this i have fixed the bottom one and this is also good, investor relation i will do one more thing, i will increase the gap the gap of the grid i will say i need more gap i need 55px gap I will say that I want a little more gap I want a gap of 55 pixels so see I have increased the grid gap I think I have become a little more aggressive with the grid gap I will correct the grid gap where is my grid, where is my footer where is my grid, here is my grid I will reduce the grid gap a little, yes this much is fine 29 pixels, yes fine, how much was the gap before? I didn't give any gap, I will make it 29 pixels, fine, great, fine, so see 29 pixels, in fact, let's make it 20 pixels, let's make it 25 pixels, fine, should be fine, should be fine, fine, great, now this thing, I will have to make the font size of the hero section small, so in the hero, the font size I am using, the font size that I am using, where is font size, where is font size of hero, I have taken out font size of this I have not taken out font size of this, so I have said first child font size 48 pixels, this is 48 pixels font size but what are they doing? this is also important to see what are they doing? how much font size are they doing in mobile? 32 pixels, ok they are doing 32 pixels in phone so let's do this thing, ok 32 pixels this has 32 pixels and if I show you, I will close this I will close this, how much is it? 32 pixels and 18 pixels, come on we will do 32 pixels and 18 pixels of second child, ok so what we have to do is we have to take this, ok and it has to come down and after this, the media query, I will keep only one I will keep only one so this is 32 pixels then how much was much? 18 pixels so 2 was 18 pixels 18 pixels and 3 was let's see, I will keep it exact that's also 18 pixels 3 is also 18 pixels I will give space and format document 18 pixels of 2, 18 pixels of 3 I'll give space, format document so that my code looks good and yes you can see here now what is the problem with this, let's see what the problem is see here the nav bar, I had put a max width in the nav bar now I have to increase that max width to 90 I have to increase that max width to 90 so I'll simply put the max width of the nav i will say max width of the nav i will call it 90 bw and now my side is responsive now this button is giving me problem the font size i have declared it somewhere in pixel, you can see so the BTN red font size I have declared in pixel so I don't have to declare it in pixel or I can make the email address input which is my main input, I will make it a little smaller so everything will be fine so if I do like this and I copy this and I put it in my media query, then it should work, okay? It should work. Let's see. Yes, I can still see this get started a little big. So let me see what is happening here. I will reload this. And their get started came down. Okay, that's interesting. So we have to drop get started so what I did now I think there was no need to do this drop get started so this hero buttons was flex it's simple bro it's simple it's very simple why am I complicating things so much it's simple that change flex direction make it column ok make it column that's it it's done, it's looking good, it's clean, ok, so it's fun to make this website, who enjoyed it, tell me in the comment section below, because I enjoyed it a lot, ok, this website is visible in the phone, FAQs, here, they might have changed the size of FAQs, frequently asked questions, so whatfont is very useful, 32 pixels, I will also change the size of FAQs, 32 pixels, I will do 32 pixels, so I will make it 32 pixels, 32 pixels, and in modern CSS there are so many good things that you will't have any tension when you will do the work, so we have done the clone and it is here, I am enjoying it a lot so I want to do one more thing that I have given a little more grid gap and I want to fix this grid gap, let me see what can I do, can I finish its padding, I have given a padding in it I have given in footer or footer element, I think I should reduce the padding of footer element margin is auto, it is getting centered, max width should be increased, 90 BW should be done, so footer's max width should be 90 BW, computer, footer's max width should be 90 BW, this was it, right? Yes, this was it, this was it, fine, great, I think we are good now, it was fun, it's looking good, now the site is looking good, are you seeing this, now one thing I can see that it's not center, it's not center, it's center only, it's center, I think it's not center, so you can do one thing, do you know what, justify content center and align item center, one minute, what is the problem here why am I not able to center footer item I did justify content center and align item center still why footer item is not in center so this is anchor tag ok so these anchor tags are taking their full space full space anchor tags so what I have to do to fix this if I want to center them individually so I will make footer item align item center so the footer item which is a flex box which I have made I will make it align item center so the style.css has 300 in fact dot footer item align item center align item center click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click click nd guys enjoyed making this website Overall pretty responsive website And a website that gives a good feel And a Netflix website, Netflix clone I hope you guys are enjoying the Sigma web development course Now I will host this on Hostinger Like I just showed you guys how to host it, I will update it So now that we have made this website, you can update it in hosting. And you can host it. And also, how did you like it, do tell me in the comment section below. If you want to see more projects like this, then do comment. And after writing sigma batch op in the comment, I have completed this project. All the people who will write, I have completed this project. I will know how many people have completed it project. Because if you have completed this project. Then it is a good achievement for you. So I hope you enjoyed it. So that's it for this video. I will update the source code. Thank you so much for watching this video. And I will see you next time. Outro