hi everyone in our previous tutorial we have
created this beautiful homepage step by step using html and css and after creating
the home page we have made this home page responsive for our tablet mode here you can
see that we have our tablet mode version and after creating the tablet mode we have created the
mobile version also so this is the mobile version and now in this part we are going to
create our this beautiful about us page and in our about us page we have a background
image we have a heading here and then we have a beautiful image and some text here and
our awesome feature section and then we have our trusted by section also so in this
part we will create this about us page and we will make this page responsive for mobile
and template as well and if you guys didn't watch the part one yet link will be given in the
description please guys check out the part one also and in a few moments we will create this
about us page a step by step using html and css but before we get started if you guys are new in
my channel then please please subscribe like this video and press the bell icon for the future
videos and if you guys have any question about this video please let me know in my comment
section that's it guys let's get started before we go to about us page first we
have to do some work in our home page if i go to my website here you can see that
if i click on the home page here you can see that the home link is highlighted and now i
want to do the same for our this website also so for doing this we just have to add a class
in our network i will show you how to do that here you can see that if i now hover our
color is now changing so i will use the same technique for highlighting the home section
so let's go to our code here in our index and here you can see that we have our network and
if i now go to my style sheet and go to the top here you can see that if i hover on
our nav links our color is now changing so i will simply add another
line here and just copy this one and then paste it here add a comma and
here instead of hover it will be active so here you can see that we are adding active
class and now we just have to add this active class in our home section of our index page here
you can see that we have a list for home and here inside this anchor tag we have to add a class here
and the class name will be active that's it so now save and if i go to my website and now here
you can see that our homepage is highlighted now if i go to my index again and here you can
see that we have to add some address here for different pages so currently i am now in my home
page so that's why i don't have to add any address for our home page but we have to add address for
our these pages so now let's add the addresses so for the about page i will create a separate index
file so that's why the file name will be about dot html that's it and for the blog page it will be
blog dot html and for the course page it will be course dot html and at the last for our contact
us page it will be contact dot html that's it so we have done everything in our home page
now we have to create our about us page so that's why just create a
new file type in control plus n and now we have to save the file so
for saving the file type control plus s and here now we have to give the name so for the
about us page we have to create a about dot html page that's it now for the about us page i
will simply copy everything from our index and then paste it here that's it now if i go to my
website and now here you can see that the address is showing index.html now if i click on the about
us page here you can see that now the address is now changed and it is about html so since i am
now in my about us page i want to highlight the about us page not the home so let's try let's
go to our index not index in our about us page and we have to remove the class name from
home page to our about us page that's it now save and go to our website and now here you
can see that about us page is highlighted so now we have to start working on our
about us page so let's go to our about us page here so in our about our spreadsheet
you can see that we have the same nav bar same background i mean the styling and here
you can see that we have a awesome feature section common here and then our footer section is
also common so from our about page i will simply we need the nav page we need the home and we
need the feature section also but we don't need the code section so that's why delete this
one and we don't need any registration on any profile section also so delete these things also
now save and go to our website now here you can see that we have now only one section left so now
we have to create the others so for creating the others first we have to create this heading so
let's go to our code let's go to our hero section and from here i just need the s2 i don't need
anything else so that's why i will simply teach these things now save and go to our website here
you can see that we have only our this heading now i want to change the heading
and the heading will be this one about tech adoka so paste the heading here that's
it now we have changed the heading also so after this one now here you can see that our this
background is taking full screen within height but now here in we have a smaller height here so
we have to fix this one so for fixing this one we just have to go to our code and here it
will be not home it will be about home okay and now we have to add a styling for our this
idea also so let's go to our style sheet here you can see that we have our home i will simply copy
the home styling from here and go to the bottom and underneath the footer we have to comment out
first and it will be about that's it and i will paste the home section here so from here i will
simply copy the about home and then paste it here that's it close the index file so first thing
i will do i will change the background image and it will be back one dot jpg that's it
and from height it will be 60 vh now save and go to our website so guys here you can see
that we have decreased the height and we have added a different background image and now we have
to install our this heading so for styling the heading just copy this one and then paste it here
then we have a s2 here inside the about home id so first i will give a color and our color
will be white then i'll give you a font size font size will be 2.2 ram and then i will
add a letter spacing and it will be one pixel now save and go to our website so guys here
you can see that we have created our this background image and our this heading so after
all this one we have to create our this section we have a image here in the left side and we
have some text in the right side so we have to create the section so for creating the section
let's go to our code and underneath the home let's create another section here and let's give
a idea also and the idea will be about container that's it and in the about container
i will create two different parts one part will take our this image and the
another part will take out this text so let's create a different here and the class
name for our part one will be about image that's it and then we have to create another div tag for
our text and the class name will be about text so in our about image we have to add a image
here and i have a images folder and inside the images folder i have a image here which is a
dot png that's it now save and go to our website and here you can see that we have now added
the image so after the image now you have to create our this text so let's go to our text
div here and first we have to create a as2 so just copy the heading from here and then paste it here then we have to create
a paragraph so for the paragraphs just copy this one and then paste it here that's it and
then we have to create our this two section here you can see that we have some small images
and then text paragraph and we have to create this thing also so for creating this one let's go
to our code and here we have to create a div tag and the class name of this div tag will be about
fee it means about features so first i will add image and i have the images folder and inside the
images folder i have a feature one image that's it and then we need to create another div tag for
the text so the class name will be feature text that's it and then let's get a h5 and
for the h5 it will be 400 plus courses that's it and then i have to create a paragraph so
paragraph will be this one copy and paste it here that's it so guys here you can see that we have
created one about feature now you have to create another one so for creating the next one copy
this section and then paste it here that's it now if i go to my website here you can see
that we have our image heading paragraph our these images so now we have to start these
things so for styling let's go to our code and from here just copy the about container id and
go to our style sheet and then paste it here now if i go to my website here you can see
that our this part and our this part is now in one column but we want these things in one
row so that's why let's add display flags and we have to add align items center and then i
have to add some padding here from left right top and bottom and the padding from top it will
be eight feet of from left 8 and from bottom to from right it will be also 8 vw now save
and go to our side here you consider now everything is now in one row and we have some
space from left right top and bottom here so after this one now we have to specify a width
for our this part and we will also specify a width for our this part also so just go to our
code from here copy this id and then paste it here go to our about and here you can see that we have
a class name for our this part which is about image copy this one and then paste it here first
i will give a width and it will be 60 percent now save here you can see that now it is
taking 60 percent so after this one now you have to give a width for our this part also
now copy this one and then paste it here and we have to change the class name which is about
text now copy this about text and paste it here that's it now for the about text it will be
taking 40 percent now save go to our website okay now it is i think taking 40 percent okay now
we have to add some space between these two parts so that's why we have to add a padding right
here in our this image and it will be 60 pixel now save here you can see that now this image
is taking 60 pixel width from the right side so we have done with our this image part now we
have to work on our this feature text so for this one just copy this one from here and then paste
it here then we have to target our s2 for our heading for the heading i will give a different
color and the color will be this one then i need some padding from the bottom and it will be
15 pixel now save and here you can see that we have changed the color of our text and we have
some space at the bottom and now i will simply give a color for all this text also so for this
one just copy and then paste it here and instead of s2 it will be p paragraph and i will give
a different color and color will be this one and here i need a font width and the font weight
will be 300 now save and go to our website here you can see that we have changed the color and the
font width of our this paragraph so after this one we have to fix all these images these images
is taking too much width and height so we have to fix this one here you can see that our image
and our this text is actually in one column but i want these things in one row like this one so for
changing the aligning we just have to copy this class and paste it here then we have to target our
about free class from here and then paste it here so i will use the display flags for aligning
in one row then i will use justify content space between because i need some space from the
between and the align items will be flex the start now save and go to our website here you can
see that our image and our text is now in one row so now we have to specify some width and
height for all these images just copy this text from here and then paste it here then we have
to target our image and this image will take 50 pixel width and they will take background
size cover and a background position center that's it now save and go to our website and now
here you can see that they are taking 40 pixel 40 pixel or 52x i have 50 pixel width we have
to define the width for our this text also so let's go to our code and copy this one and then
paste it here then we have to go to our about and from here we have to copy the f text
plus from here and then paste it here now we have to give a width of 90 percent now
if i go to my website here you can see that we don't have any space between this image and our
this text so that's why in our image i will add a margin right and it will take 20 pixel now save
go to our website yeah now we have much space here and now i need some space on the top also because
we don't have any space on the top so that's why let's go to our fe section and here i will add a
margin top here and it will take 30 pixel save and go to our website and now here you can see that
we have a space here on the top now we have to install our this heading a smaller heading so for
changing these things just copy this class name from here and then paste it here then we have
to target our h5 for our those smaller headings and then now i'll give a font size and it will
be 16 pixel then i will give a different color and the color will be this one now save and go
to our website and now here you can see that we have changed the size of our this heading
and now we have to go to our about dot html and then we have to change the image and our
this text here so let's go to our about and for the image it will be feature two image and
for the heading we have to add lifetime access paste it here that's it now
save and go to our website now here you can see that you have changed the
images and the headings and this is looking good okay now here you can see that i
think this image is actually taking a bit more space from our actual website
okay let's go to our style and if i go to our image here here you can see that we have our
image okay here you can see that we have give about us image to take 60 percent now we have
to target our image inside our this about image class so target our image and the inside of 60
percent i want to take our this image to take 100 percent width and height so after this one here we
can see that in our text i don't need any padding so delete the padding instead of give padding
in our about text i will give the padding in our image box and here i will add padding right
and it will take 60 pixels now save and go to our website and now here you can see that yes
now this image is taking perfect with an height so we have created our this section also
and we have our awesome feature section also so after this one now we have to add our this trusted by section so for
creating this one let's go to our code first we have to collapse this one and
then here underneath the feature you have to create another section and we have to
give id here and it will be trust that's it so in our trust we have to
add a heading and a paragraph so simply copy the heading and paragraph from here close this one and paste it here and we
have to change the heading it will be trust trusted by and then paste it here
that's it now save and go to our website here you can see that we have our
trusted buy and our this text here so after adding our heading in
paragraph we have to add our this images so for adding the image let's go to our
code and underneath the paragraph we have to create a div tag and we have to give a
class name and it will be cast image that's it and here we have to add six image so let's
create an image tag and i have a images folder and here we have trust one here png now i will
simply copy this one and i paste it five times that's it and here it will be two three four five
and six that's it now save and go to our website and here you can see that we have six images
here so now we have to align these things we have to style these things so that's why
just copy this trust id from here and then paste it here first thing i will do i will
align everything in the center so that's why text align will be center now save and here you
can see that now everything is center now next what we have to do we have to add some padding for
top bottom left and right let's add some padding and padding from top it will be 8 vw from
left 8 vw from bottom it will be 8 vw okay let's give only 8 vw from everywhere now
save and go to our website and here you can see that we have now 8 vw space or padding from
everywhere now we have to align our this images so that so i just copy this trust id from here
and then paste it here then we have to target our trust image now copy this image and then paste it
here first let's give a width of our these images so that's why target our image and here
we have to give a width of 90 pixel and the height will be auto
now save and go to our website and now here you can see that they are taking
90 pixel width now we have to add some space on the top of our this images that's why
copy this class and then paste it here let's add a merging top and it will be 60 pixel
and if i go to my website here you can see that we don't have any space between these images
but we have a lot of space this section and our right section so that's why we have to
use display flags and the justify content will be a space between because i want some
space in between and the align items will be center now save and go to our website and
here you can see that now they are taking perfect width and height and also there's some
space in between yeah now this is looking good so guys here you can see that we have successfully
created our this about us page and now we have to make this page responsive for mobile and
tablet as well so just inspect the website so this is our ipad and here you can
see that in our ipad it is looking good but we have to actually adjust the space left and
right for our this section so i will decrease the space from this section from left and right if
i now select this section here you can see that we have actually padding here too much padding
now i want to decrease the padding so that's why i click right and copy the rule from here and
let's go to our media query for 769 pixel and here let's comment out and it will be about and
then paste the rule here and from the left it will be 4 from the right it will be also 4 that's
it and i don't want to change anything from here now save and go to our website here you can see
that we have now less space from left and right and here we have too much space beside the
image if i now select here you can see that the green area so here you can see that you have
padding right 60 pixels but i want to decrease the space i want to decrease the padding so
that's why i just copy the rule from here and paste it here i don't want to change the width but the padding will be 30 pixel now save go to
our website yeah now this is looking much better so after all these things now here we can see
that again we don't have any space left between so here i will do i will actually decrease the width
of all these images if i now select the images they are taking 90 pixel now i will decrease the
width so that so i just copy the text from here and then paste it here and it will be taking 50
pixel now save and go to our website and yeah now here you can see that they are looking good so
guys here you can see that for the tablet mode we have created our this about us page and now we
have to make the second version for our mobile so let's select the mobile from here so here you
can see that in our mobile version this section is not looking good so we have to change the
section they are actually in one row now but for the mobile i will change the aligning and they
will be in column in one column so for changing the aligning just select the section this one and
from here just copy the rule and go to our code and go to our for 75 and here we have to comment
out first and it will be about and then paste the rule here for the about container i don't want
to change any padding but here i will change the flags direction in our large screen it was in row
but for this screen our mobile screen it will be column now save and here you can see that
they are now in one column but we have to decrease the width and height of our these
sections because they are still taking the width we have given in the last media query so that's
why we have to select the image here here you can see that this image now from here just copy the
rule and go to our code and then paste it here here this part will take hundred percent of width
and i don't want any padding right it will be zero now save go to our website here you can see that
it is now taking 100 percent width and height and then now we have to do the same for this one just
select this one here you can see that we have our about text now copy the about text and then paste
it here it will be 100 save and go to our website here you can see that now it is looking much
better and guys i think our this text should be on the top and our this image should be at
the bottom of our this text so we can do this also we will just have to change here and it will
be column reverse now save and go to our website here you can see that we have our text at
the first and we have our image at the bottom now i want some space at the bottom of this
text so that's why i just put our code and in our text we have to add padding bottom and
it will be 20 pixel now save go to our website here you can see that yeah now we have space
and i think this aligning is looking much better than the previous one okay now we have done
this one so for the trusted y we have to now break the line because we don't have
that much space for these six images so that's why just select this section this image
section so this one just copy this rule from here and go to our code and then paste it here
here we have margin top 60 i will decrease the space and it will be 40 and here you can see the
display flags just justify content will be center and then here i will add flex wrap wrap
that's it now save go to our website and here i will actually increase the width of all
these images so that's why just select this one and then copy the rule from
here and then paste it here and here they will take 60 pixel width and then
i will add some space from the left and right for each of these images so that's why let's add
margin and the margin from top and bottom will be 10 pixel from left and right it will be 15 pixel
now save and go to our website yeah now here you can see that they are aligning in the center
and they have also have a space between them so yeah guys i think our about us page
is also done for our mobile and for our tablet mode as well and this page is looking
good in our large medium and a small screen so guys here you can see that we have
done with our about us page and we have and we have made this about us page
responsive for mobile interpret as well that's it for our this part and in our next
part we will create our blog page here you can see that we have a blog page here we have
some blogs here and then we have some categories in the right section and if we click
on the read more here you can see that we have a specific block and we have some
text here and we have another button here and we will also make this page responsive so
if i inspect the website here you can see that so guys that's it for our this part and i
hope i will see you in our next part also and i hope you guys enjoyed this tutorial you
guys learned something new from this one and if you guys really enjoyed this tutorial
then please please subscribe like this video and press the bell icon for the future videos
and if you guys any question about this video please let me know in my comment section so
that's it guys let's see you in our next tutorial you