Uh elephants today in this live stream, we will be building a another popular website Glow
So basically we will be looking at pay TMUP I payment gateway home page
So everybody uh has used Pay TM for payments. So basically this is the home page of pay TM
If you go to pay tm.com, you will simply see this homepage
So we need to clone this home page you can see here. So this will be built in entirely html and CS S we will
not be using any sort of uh external framework to build this
You can see that this is the official website here of PTM
So we need to replicate this website. You can see that this is a scroll bar that you see here
which is just one scroll bar, which is sky blue color. So all the design and all the colors you can just see
This is a logo. This is the header portion. This is a button, this is just uh this header portion
This is all these images that you see inside. This is the heading, all the color scheme you can see
This is a button here and the sky blue color, this dark blue color
this grayish color. So we will try to replicate this design base and uh in entirely in a ST in CS S
So for this, you will not require bootstrap or tail and CS S
It is entirely in native TC SS. So many people want to replicate this design
so we will be looking at how to do it. So if you're watching it for the very first time
then please hit the like button and subscribe to the channel. So for this, I have written a complete blog post on my tutorial website
coded section. So the link will be there inside the description of this live stream
So simply you can copy, paste all the source code. So you can see this is a PTM clone here
This is U I which is ready, ready made inside HTML and CS S this is the header portion that we will make here
So now let's get started by building this ATM clone guys U I home page
So I will just make it side by side so that you guys fully understand how we code here
So this is my visual studio port. So I will here create a new file which is pay TM dot htf
So basically here I will give a title which is uh pay TM home page du Ilo
at html at CS S. So just give this title. And after those guys
we also need to include a style sheet file which will be pay TM dot CS S
So just create this file also in the root directory, pay TM dot CS S
So right here uh inside the body guys, first of all, we will write the html step by step
So now basically we will now first of all design this logo and then this heter section and the button
So for that, we will move to the HTML part here. And the very first thing which comes inside this PTM clone is the class
D which will have the class of NPA. And inside navigation part
we have this left portion inside this. We will show this image that you can see which is a pa tum logo
You can just use any logo of your choice. Basically, it's a SVG image that we are taking it from the internet
simply paste it. And now if I open this with live server
you will now see this is a logo that you see inside ATM up I payment gateway
you will see that it is looking quite big. So we need to style it using CS S
So let me just write the full section. So after this image
we will have another section which will come in the middle position
So middle and here we will have a various uh links, sub links inside paragraph
sorry hetero section. So this is for pay TM for consumer. So in this manner we will have
this full PTM for business. The next link will be for company
this will be for investor relations and next one is for career
So now you can see all these menu items are now showing here
So all these will be having a common class attached to it
which is sub links. So simply give this class to all the paragraph texts
So just give this sub link classes. So if you're watching it for the very first time
please hit the like button, subscribe to the channel as well. And after disguise
we will have a right section. And inside this right section, we will have a class of account where you will be simply
having a button to sign it. Add after this, we will have a simple image
check source will be equal to this image that we will be using for avatar image
So simply we need to copy this sir Avatar image should simply copy this inside
paste it inside the source attribute. And also we need to give this image a class which is avatar
that's it. All these classes. We will style it in sight. You can now see this is a logo for avatar image
So after this, I think this completes the navigation part. So now as you can see that this
completes the navigation part. After this, you will have a paragraph which will have a glass of KYC
Basically it's just a mini section. So here, you will have a bold track and it will have a glass of wallet and
here you will say no wallet, ok, which is required s simply write this and this is the emoji that
you need to pay paste here. So let me just copy this after
this, you need to paste it. That's it. So that's all the stable guide for the header section
So now we move to the pay TM dot CS S file to style our five style the navigation part
So the very first thing we will do inside this, we will import the Google font that we will use for this specific website
This is entirely up to you guys, whichever Google font you need to use
Basically the way by which you include this line which is import statement
Basically go to fonts.google.com, choose your favorite font, whichever font for this application
we are using this Poppins font. So still simply select this. And basically you can add either by this link tag or by import statement
So simply copy this import statement like this, copy it. That's it
In this way you can do it. And here we have copy, pasted the import statement like this
And now we need to apply the font. It's very easy. We need to target the body type and here we will change
first of all, remove the margin to zero. So now you will see the margin will be removed
And also we need to change the font family, which will be poets and
sensor if you will now see that phones have been successfully changed here
So it's looking nice here. So after this, we need to now target the navigation bar which we have configured in the html
So first of all, we will change the height of the navigation to 85 pixel and the width to 100%
So this will make sure that it has got full width display
we will change to flex. So now you will see all this will be coming in the horizontal direction
And after this, we will target the left section here which is the left class which we have given
So here we will put the width to 15% and the height to 100%
So you can now see this is a logo that we are studying and here we change the display property to flex and
justify content to center, align items to also center. So now you can see and also we need to give padding
from the left position which is 50 pixel. So it will have some space from the left position
After this, we will target the middle section. And here we will give a width of 65% and a height of 100% can
now see. And here you change display to again flex and justified content to space evenly and
we will align the items in the center position you can now see and we would give padding from the left position
Again, 8080 bit can now see. And now we will align the right section which
contains this avatar image and the button 20% and a height of 100%
We can now see again, we will change display to flex nine items to center justify content to also center
So you can see that. So now we will style these sub links that appear here which is the sub class and
we will change their font size to 20 pixel and the font weight to bolt
So now they are now bigger and also they are bold in text
Now we will target this account avatar image that you see here
So here this section. First of all, you will change to flex display justify content to center
align items to also center. So now you can see that also we need to change its background color to this color
which KTM uses, which is 00 BF two, this is a color sky blue color
So now you can see background the stage and we also need to give padding two pixel
two pixel, two pixel and two pixel. Sorry, this needs to be 20 last one
So now you can see and also we need to change the border radius to 20 bits
So it will be round color text color. We need to change to white font
we to also bold and font size, we need to change to 20 pixel
So if I now show you the button is styled here, you can now see this is a button and almost this section is complete
And also we need to style the avatar image. So we will simply say avatar and give margin from the left position which will be
10 pixel like this. So that's it guys. This is the header section which is complete
The logo is styled, this is the navigation bar, this is a button
So if you're watching it for the very first time, then please hit the like button, subscribe the channel as well
Why do you have to do live streams? Always can't you record all those videos
live stream is very much fun little experience because you love to interact with the audience
you do live coding. So this increases your confidence as well. So I think it's a very good opportunity to diet code
And now basically we will style the KYC section, right, which is very simple dot KYC
And here we will simply increase the height to 50 pixel and the wit 200%
And basically we will change the display property to flex and justify content to also center align items to also center
you'll see that and then we will change the background color to again F six F six F six
this is a color and light gray color form size. You will change to 18 pixel
So now you can see that guys, this section is all complete here
this header section and this KYC section you will now see it is looking exactly like this using the pay TM website
You can see that this is Pay tm.com and they also use the same design that we have designed here
So after this section, we will now design this section which is actual image and this is the image that you see
So for doing this, it's very easy. We will now first of all, write the html which is required for this
So we will have now section two after this paragraph. So de
which have a class of section two, it will have a great left section plus inside this
we will have a image which will have a class of logo
So this is the image that we are using base. So simply you can pasted this image
This is the address inside S paste it. So this is the image
And basically after this image, we will have a H one T heading T which will have a glass of head and
it will simply say India's most loved. Huh? Uh payment
sir. So now you can see her India's
most love f sir. So then after these guys, we will have a simple paragraph
Did you have a glass of P? And this is a text here
Basically my copy is a text so that I don't need to waste your time
right? So simply copy and paste here. So you can also see
And after this guise, you will have a simple button. Basically, this is the button to download its app
Android app, apple app. So it will have a class of BTM and basically the text will be download PAYTM app like
it. And inside this, you will show this simple logo would
be best. So now you can see that guys, this is
the button here which is showing this, this
is a uh apple icon that you can see here. This is SVG image
And also after this, we also need to copy another SPG. Basically SVG
are special images that are built inside the browser paste to the gift
So this will be for the Android you can see that. So this section is complete guys
you can see the dep and dep after this section, this is the left section
Now we come to the right section inside the right section. We will have other image which will have the class
of right logo. So you
can see this is the image that we are having this, this is the same image that is used inside here
Also, you can see that it has this copy image address. You can also use these images right here
simply copy and paste it if you see it is the same image that we are also using
So after this, so this section is complete guys, which is this section
two. Now we need to simply style the section, go to ATM dot CS S file
We will go to the CS S and right here when we left inside
I think we left here, which is dot KYC. So after this
basically, we will be go to the dot wallet
class and also need to give margin from the right position which is five pixel
And now basically, we will target the section two class guides where we are designing this section two
So basically here we need to give a width of 100% and a height of 700% in housing
I'm ready to change display to flex. So now what will happen now this to these two
all these images will come in the horizontal probe, this logo image and this mobile image
That's exactly what we want. And if after this, we will now style the left section by its class
give it fixed bid to it of 50% and a height of 100%
And again, we will use display to flex. I justify content to center and align items to also center
And also in we will do it for the same right section as well with 56% height is
again, 100% and display again, we need to flex justify
content. In this case, will be flex and uh padding is 100 pixel and padding from the right position would be zero
So now if you do this, so basically you can now see this is t here this right section
So now we come to the next section which is for the scroll bar. So if you want to add a scroll bar guys
it's very easy. Don't write the web kit, scroll bar and you need to change its width to five pixel
So now basically you will no longer have that wide score bar
You will just have this very short little scroll bar which is very low
We also need to change its color background color to match the theme of PM
So web kit scroll bar, thumbnail. So we need to change the background color of the thumbnail to this color
which is 4 69 1 F four. This is a colored sky blue color and also we need to make it round 10 pixel
So if you see the scroll bar now you will see and I
think we haven't attached this class here yet. That's why it is not show you first of all need to
attach its class. So if you make a change, so
if you're watching it for the very first time guys, then please hit the like button. Subscribe the channel as well
I am saying that people are not liking the content. 47 4 people watching the screen
please hit the like button, subscribe the channel as well. So here after
this, we will now sign the logo. So we will give you the height of 80 pixel and the width of 80
weeks. So now I can see we will also target the head section
So this will be font size 55 pixel phone weight will be bold
Then we will target the paragraph lo so this is a paragraph that
you see guys I make it night is now we need to target this paragraph
First of all, we will change its phone size to 20 pixel
The font will be increased font weight. We also need to change to 500 weight will be increased to 450
weeks sir. Line height, basically line height, we need to change to uh
30 big soup like this. After this guise, we will now target this button which is download PAYTM app
So for this button guys, the styles are very simple. First of all need to change its background color to black color
We need to change it to white. We need to give it padding from 15 pixel 24 pixel
15 pixel 24 pixel. You can see that now we need to make it round
So border radius, you will see that it is 40 pixel. We also need to remove its border to zero
So now no border will be there. We need to change the display to flags
After this, you will simply say a line items to center, justify content to center
And also we need to give margin from the top position 20 pixel
So like this also, we will style these icons, SVG icons that you see here inside the button
So SVG we need to give a margin from the left position 10 pixel
So now you can see it has some space, then we will target the logo
which is the right logo which you see inside your screen. Let me make it slightly
white here if you see here what I am talking about. So
this is the right logo guys. So basically here we need to give it a fixed height and the width height of 528 pixel and
a bit of also 528 pix. So now you can see it has got now a thick swift
and I you can see that almost this section is also complete
Uh Yeah, I think the se section is complete guys which so this header section is complete
KYC section is complete and this is the second section. Second is also complete
This heading header image. This is a button, basically the landing page for pay tm.com
So if you're watching it for the very first time, please hit that like button
Subscribe the channel as well. I see only one people have liked the stream
So please hit the like the button. If you're new to this channel, please subscribe the channel as well
So now we come to the next section wise, which is very simple this is the re recharge section
recharge section. This will be inner section, each one have the class of heading
So here we simply say recharge and pay bills on be DEV
RC. So here we need to paste
the image which we will be using for this logo. Simply we need to paste it inside
the source attribute. So after
disguise, we also need to have inside this, we will have another dip which will have a class
of inner di inside this, we will have three items. First for the recharge
then prepaid and then post it started to swim
The third one is like this. So also guys for this, we will also be using phone toss
So inside this simply you need to include the script tag for phone toss CD
And so right here at the very top, the link will be there inside description of this live stream
So after this head end, simply paste it phone toss icon. So also now you will now see the phone toss icon showing if
I do this, you can now see this is the icon that you see after this guy
uh you will have different images. So
basically where it ends. So P type DEV DEV, so this section is over
So now we move to the next section, a chance simply paste
this much number of times this is some more static stream that we are copy pasting into
Now see, so now we simply need to style these simply. So if you're watching it for the very first
time guys, then please hit the like button, subscribe the channel as well. Here we are building paytm clone UI homepage inside HTML and CS
S. So right here you now go to PAYTM dot CS S and
after this now target the recharge section that you see right here
recharge section dot recharge section. You can simply change the
width to 100% guys and a background color too. This color which is 00 BF two sky
blue color. You will change the color to white margin from the bottom position
We will remove to zero and display, we will change to flex
So now you can see this is the background, you can see that. So inside now guys
what we need to do, we need to target the inner section loss
We need to provide a fixed width of 70% margin of auto
So I go see we also need to target this heading which is present inside this section
So we need to change its form T to 26 ft soon padding from the top to 70 pixel survive
and seek. And then basically we will target RC child P charge section
child change display to flex justify content to space between sweet
So now all these items will come side by side, you can see that. And also here
we will be giving margin from the top 250 pixel and padding from the bottom position will be 50%
So now you can see that. So after disguise, we will now
target the logo recharge logo height. We will change to 64% like this
and the wi also to 6 to 4. So now I guess so
after this guys, you will now target in a you need to give line height to 10 pixels
I won't wait too good. So now you can see the text has been changed to bolt and lion height has
been changed. So you can now see this is exactly how it looks like
So after disguise, we now target the book section. I think this class I have given or not
Let me check. This is a class gu you can now see this is the book section
So what section we will target? So here book section. So
here we simply give the width of 100% and a background color of this 10 F four
F four A eight. This is a color dark blue color. So color white margin
top to zero display to flex. So now you can see that guys
this is dark blue color. This is the uh color scheme that pay TM uses the sky blue color and the dark blue color
You also see it in their logo as well. Pay starts from Hawa dark blue and TMS have a sky blue
background. This is a color scheme that PAYTM uses. So if you're watching it for the very first time
then please hit the like button, subscribe the channel with. So
after this guys, what we need to say, we need to now target book heading class
we need to change its phone size to 36 and padding from the top position is 70
pixel. This needs to meet
paddy. No, basically
now we will target the class which is in sight de you
will say 9921 pixel phone size even change to large for it
to go. So now you can see. So
now we haven't given this cards class. So now we need to make more STM
This is also completed. You can now see almost this website is complete
You can now see this is an official pay TM website. We just need to have these cards here
which is showing here. So after this guys, you again need to move to stable
If you're watching it for the very first time guys, please hit the like button. Subscribe the channel as well
If you're watching it for the very first time, I
think we have given the Ells. So you can see that we have given this cards class
So now you can see after this section ends here, uh
12345133 food for. So after this section there, we have another
section which for the cards simply paste it. So
paste it here. So if you now paste the vegetable, now guys, you can now see this is the table which is required here
So simply what we will say, we'll need to style this now. So we will now go to pay TM dot CS s and basically
we will now style it. So basically we have uh innovative
bookshelf. So now we will style the cards class for styling. These guys
it's very easy. Wait, we will change to 100% uh background color changed to
PB E ce. This is the color display to flex flex column
flex direction to column. So now you can see that we also need to target the card heading
This is the margin, 100 pixel, 250 pixel, 35 pixel and 250 pixel
And also we need to change its phone size to 48 sir, phone 8 to
700 902 52. So
after this guys, you will now see that is now standing here perfectly
Now we need to style the first car that you see right here, which is box foot
Wait, we will have 1000 pics, eight of 500 pigs, background color to white margin to auto
margin, bottom to 50 pixel. You
pour a radius and fix it. God knows. So basically now have
we have the first card, the first car driving chain display
flex justify content to left. So
I see will come side by side these cards which you can see here
So now you will target the title margin left to zero pixel and
first plan image 84 66 8 when
is 529 pizza. So now you can see the logo is now styled here
card head phone sizes 35 6 four
F will be changed to both. So similarly, we will have
the pla for boxing which is appearing on the right hand side. So 2000 background is wiped
And for its image also, we will give a fixed filter height which is 400 pixel
500 pixel. You can see that. So now you can see it is successfully styled here right here and see that
Then we will have this card content class displays flex. You now display is flex and
for the logo, it is very simple. We will again change the display to flex
We will provide fixed width which is 8080 pixel in spice target
the image of the text inside T should I tell you can see moves up
So this is a car button that you see guys, this is a lifestyle
he simply past it and not. So now you can see that guys
this is now styled here successfully like this. So in this way
you can build out a PTM blow UI inside a stimulus CS S
So if you're watching it for the very first time there, then please hit the like button and subscribe to the channel
And now if you have any sort of questions you can ask in the comment section
I will definitely reply to those questions. So
if you're watching it for the very first time guys, then please hit the like button, subscribe the channel as well
Thank you. Oh, ok
Yeah, let's
see. Is that Yeah
yeah, about two days and
start looking. Ok. Is
that ok? Ok
Yeah. Ok
Can