hi everyone welcome back to our channel hope you guys are well so today in this tutorial i
am going to show you how you guys can make this amazing landing page using just html
and css and uh first let's see what we have in our website here you can see that in the left
top we have a discovery channel logo and here in the right we have our navigation bar and
if we hover on our navigation right here you can see that we have we have create a amazing
cover effect so you guys can see that this over effect is looking so cool
and yeah and now in the middle we have our title and some dummy text and here is our main button
which is load more so if we hover on this button you can see that this is also looking good
so yeah that's it for now i will show you how you guys can make this using just html and css
and before you start if you guys are new in my channel then please please subscribe my channel
like this video and press the bell icon for the future videos and if you guys
have any question about this video or any other video you guys can comment below and
let me know some of your opinion about our channel so yeah let's go to our text editor
so here in our html you have to just create a basic html structure and just give a title and
link your style sheet so now first in our website here you can see that we have our logo and our
navigation bar so i will first create our logo and our navigation bar so that's why create a div tech
and the class name of this div tag will be container that's it and inside this content
attack i will create another div tag for our logo so that's why class name will be also logo
and our logo is image so that's why create a image tag and inside this source section
we have to put our image file name so our image file name is logo.png that's it so after logo
i will create our navigation bar so that's why create another div tag and
the class name will be nav that's it and inside this snap class i will create another list
okay so and inside this another list i will create this text
and inside this list i will create anchor tag for our nav link so here will be hash and our
first nav link will be home so i will just copy this line and paste it here three times and
here you can see that our second one is about gathering contact so this will be about
and this will be gallery and this will be contact that's it if we now save and go our
website and refresh so here you can see that we can see our logo and here is our navigation links
so now i have to install this so first we have to give a background image so that's why go to
our style sheet and here first you have to create some basic setting and after here we have to now
write body tag that's it and here i will create our background image so that's why background
image and here in this url we have to put our background image name which is
back dot jpg that's it if we now save and go our website and refresh so here you can see that
this is our background image but it is not in a specific height and width so that's why
first we have to give a width and height so that's why which will be 100 percent and the
height will be 100 bh okay so and for background position it will be centered and background size
will be covered that's it if you now save and go website and refresh okay so now we have to give a
specific width and height to our logo so that's why i will go to our html file and here just
click container and copy this container class and paste it here and here you can see that in
this container class we have our two section first one is logo and second one is our nav
and now i want these two things in one row so that's why i will give display will be
flex and the flags direction will be row because i1 in one row and the justify content will be a
space between because i want a space from between that's why a space between and align items will be
center that's it if we now save our website and go and refresh so here you can see that
this is our logo and here is our nav links there is our nav links in one row now i have
to give a specific width and height to our logo so that's why copy this container class from here
paste it here now we have to grab our logo class from the html here logo copy this logo
and paste it here now here i will give a width of 13 percent
that's it and copy this container and logo class again and paste it here now this time i will grab
our image tag so that's why in image it will take hundred percent now if we go and refresh so here
you can see this is now in our logo in a specific width and height and our background is also in
position so here you can see that in the left side we have our logo and in the right side we have our
nav links so now i want to style these snap links and i want this nav links in one row now it is in
one column and i want this in one row so that's why again copy this container and paste it here
and grab this nav class from here and again paste it here and now i will grab our another list so
that's why ul that's it and now i want in one row so that's why display would be flex and the
flags direction will be in one row and align items will be center that's it if we now go and refresh
so here you can see that now this knife links in one row but we don't have a space
between this knife link so i want some space or padding so that's why i copy this from here and
paste it here now this time i will grab our list tag from here so that's my list
so here i will give padding from left side 30 pixel so if we go now and save and refresh
so here you can see that now we have a space between the nav links now here you
can see that we can see some bullet points so i don't want this bullet point so that's why
this such style will be none if we go and refresh so here you can see that now we don't have any
bullet points now i have to style our nav links here we have underline i don't want this underline
so that's why i copy this list and container nav everything from here and paste it here
now i will target our anchor tag and from here first i will remove the underline so that's why
text decoration will be none okay color will be white and the font size will be
not a style font size will be let's see 1.2 em and the front width will be 300 that's it if we
now save and go our website and refresh so here you can see that now we have our navigation links
and this is in white color now i want some space from the top and from left and from right also
so that's why go to our container class and here in the container class i will give padding
from top it will take 50 pixels and from right it will take 70 pixel from bottom it will take 0 and
from left it will take also 70 pixels that's it if we go now save and refresh our website
so here you can see that now we have a space from the top left and right here
so yeah so here you can see that in our real website we have a overlay
on the background image so i will now create this overlay so that's why go to our body tag
and here in the background image i will create linear gradient so that's why
linear gradient and here i have to give some rgb a value so that's why rg
ba and the rgb value will be for first one it will be zero zero zero and
zero point plus c six a rgb value of 0.6 copy this thing and paste it here again so if we now
save and go our website and refresh so here you can see that now we have our background
overlay so yeah now we have to create this heading and our dummy text and our logo so
that's why go to our html again and here we have to create another gif tag and this time
the class name will be box that's it and inside this box first i have to create a page to tag
and here i have to write and here you can see that in our website reality is actually in another
style we we are style this word differently so that's why i will put this reality a word
in a different aspen tag so that's why i have to create a spam tag and here i have to write reality
that's it and after our h2 now i have to create some paragraphs so that's why i will create a
paragraph tag and here just type lorem and tab and i don't want this much so that's why i delete this
that's it and uh underneath this paragraph i want a button so that's why i have to
create a anchor tag and this will be hash and the the name of this button will be
load more that's it if you now save and go our website and refresh
so here you can see that now we have our heading our paragraph and our
button okay so i want this thing to be in center so that's why copy this box class
and paste it here that's it and because i want in center so that's why display will be flex
and flags direction will be column because i want in one column and justify content will be center
align items will be center and the text element will be
also center now i want to give some width and height and i will give a width of 60 percent
okay and i will give a height of looks 80 ph that's it if we go now save and refresh our
website now here you can see that this paragraph this heading and this button is actually centered
in from the top and i want to center this thing from the left and right also so that's why here
you can see that we have some actually margin so that's why i have to create this margin auto
so save and go register and refresh so yeah you can see that now
everything is in the center so first thing i will do is i will style our heading so that's why
copy this box class from here and our heading was s2
and let's first give a font size will be six ram that's it and the font weight will be bold
and i will give the color of white that's it if we now go and save and refresh so here you
can see that now we have our white heading and in our website you can see that this
reality what is actually a different style so i will do this here also so copy this box again and
paste it here and at this time i have to grab the s pen which we created so that's why i copy this
aspen tag from here and just paste it here so yeah and i will give opacity of 0.5 save
and refresh so now you can see that our reality is now in different style so
now i will style our paragraph also so that's why copy this whole thing again
and then paste it here and instead of s2 i have to write paragraph for a paragraph and
the font size will be 1.4 ram and front width will be 300 and the color will be white and
i want a space from the bottom so that's why padding from bottom will be 30 pixel
that's it if you go and refresh and here you can see that we have our paragraph and
we have also some space from the bottom because i gave padding from bottom to 30 pixel so yeah
now i will style our button so that's why copy this thing again paragraph and paste it here
and here in instead of paragraph i have to write add because of anchor tag and so here in
our button i will give a font size of 1.3 ram and the phone to it will be 300 and the
color will be actually i will change this color to this one
that's it and i will give a background color and i want the background color to be white
that's it and i want some padding from top and bottom it will be 13 pixel and from left and
right it will be 30 pixel that's it if we go and save refresh our website so here you can see that
actually here we have to here that's it if we gonna save and refresh so here you can
see that now we have our background white color background and we have a different font color
now i don't want this underline so that's why text decoration will be none
that's it and here you can see that in our real website we have a rounded button so i
want this thing to here also so that's why border areas i have to create border radius 50 pixel
that's it save refresh yeah so here you can see that now we have our border space
so now i want to decrease the font size a little bit so that's why it will be 1.2
save refresh yeah that's it and now i want a border also so that's why
border will be one pixel and it will be solid and the border color will be white that's it save and
refresh you can see the border yet so now i have to create our hover effect like this one
so for doing this we have to just copy this box and anchor tag paste it here now right hover
that's it we just have to change the color and the background color so copy this thing
here and paste it here and i want the color to be white our font color will be white
and our background color will be transparent okay so now save and refresh
so here you can know this one refresh and here you can see that we have our button hover but it
is not smooth so that's why we have to give some transition all zero point three second
so now save and go our website and refresh so if we now hover so you can see that it is looking
good now we have to create this effect this hover effect in our nav links also so that's why i will
go to our nav link and here copy this thing and paste it here just right over that's it
so now go down and here we just have to copy this from here color and here everything from here and
paste it to our hover section and from here i don't want this text decoration
and in border radius i want not 50 i want 30 pixel and i don't and here we have to give this border
and the transition i don't want this transition here it will be in the list here so if we go
now and save and refresh our website so if you now over you can see that here
i will delay this hover effect a little bit more this will be 5 save and refresh
yeah now it is looking good and this over effect is working well
so yeah i think our website is done here we have our logo our nav links and our heading
our paragraph and our button so that's it i hope you guys enjoyed our tutorial
and if you guys really enjoyed our tutorial then please please subscribe and press the bell icon
for the future videos and if you guys have any question about this video or any other video
you guys can comment below so that's it guys thank you so much guys for watching this
i know video there