hi everyone welcome back to our e-commerce website tutorial part
4 and in our previous tutorials we have created our this beautiful home page
also we have created our shop page and in our shop page we have a list of items
and then we have a pagination option here so that we can add multiple product item pages
and then at the last we have created our this beautiful
product details page and here we have a simple javascript slider
if we scroll down here you can see that we have some related products
and now in this part we will be creating our this simple but premium blog page
and in this block page here you can see that we have an image and then we have a title of this
block and then we have a date of the block and if you hover on a block here you can see that
we have a beautiful over effect on our image and we have also added some hover effect on our title
and if when i scroll down here you can see that we have more blogs and then we have a
banner section and underneath this banner here you can see that we have more blocks
now in a few moments i will be showing you how to create this simple but premium blog
page using html css and bootstrap step by step but before we get started if you guys didn't watch our
part 1 part 2 and part 3 link will be given in the description please guys check out those parts also
and 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 us started
for creating our blog page first we have to create a new file
and then we have to save this file and the name of this file will be blog dot html
now let's go to our index and then copy everything from here
and then paste it here that's it now close our index.html file and
go to the top here now save and open our live server
and here you can see that we have our dot blog.html url now we have to change these
sections from our code so that's why let's go to our html and from here we need our navigation bar
and we need our home section and from here i will select everything till our footer that's it
and now we have to delete them now save and go to our website and here you can see that we
have our navigation bar we have our home page and then we have our footer now from our home
page i don't need our this images if i go to my website here you can see that we have a simple
heading for our blogs and we have to create this heading that's why let's go to our html
and open our home and from here we have to change the id and it will be blog home
and from here i don't want this div and our this h5 and this paragraph and ending div that's it
now save and go to our website and here you can see that we don't have anything in our dc screen
now let's go to our code again and from here i will delete the s pen and this text
and it will be only blocks and then i want a horizontal line so that's why it will be hr
and in our h1 we have to create a class and here i will be adding some bootstrap classes
so i want this text to be bold so that's why we have to add a bootstrap class which is font with
bold that's it and if i go to my website here you can see that our this block text
our this block text is now actually underneath our this header so now we have to add some
padding and margin so that we can place our heading underneath our this never so that's
right let's go to our code and here we have to add some classes so i want some padding top so that's
why it will be p t and it will be five and then i want some margin top also it will be also five
and here in our h1 i will add some padding top five that's it now save and go to our website
and here you can see that we have now our blogs heading and now this heading is now actually a
little bit bigger from our this heading so that's why we have to change the h1 and it will be h2
now save and go to our website and here you can see that now it is exactly looking like
our this website now we have to add some padding from left and right on our here so that's why
just go to our section and in our class we have to add a container and this container
will add some padding from left right so that's why container now save and go to our website
and here you can see that now we have some padding from left and right as well
so after our heading if we go to my website here you can see that
we have our blogs so for this blog i will create a different section so that's right
let's create a section and then we have to give a id here and the id will be blog container
and then we have to create a div tag and inside this div tag i will be creating all
of our blocks so that's why we have to create a class name and it will be row
so i want our every block to be in one row so that's why we have to add this bootstrap class
row and now let's create our first blog and let's create our class and it will be post
and now after adding our row class we have to define the column width
for our large for our medium and a small screen so in our large screen
our this block is going to take six column
and in our medium screen this block will be taking 6 column
and in our small screen it will take the 12 column and inside our post div tag we have to create a
div tag and now we have to import our image so that's why let's create a class and it will be
post image and now we have to create our image tag and i have a image folder and inside this folder i
have a blog folder and i will take the first one that's it and underneath our div type we have to
create a h3 for our block title now let's go to our website and from here copy this title
and then paste it here then we have to create a paragraph for our date so copy this date from here
and then paste it here now save and go to our website here you can see that we have
our blog image and then we have our title and date now first thing i will do i will add some
padding from left and right and we have a scroll bar at the bottom and i don't want this scroll bar
so first thing i will do i will add some padding from left and right so that's right let's go to
our section and then in our main section we have to create a class and it will be container that's
it and if i go to my website and then i will add some padding from top also so that's why pt5
now save and go to our website and here you can see that now we have some space
from left and right and then we have also some padding on the top now after this one i want some
padding from the bottom of our this image and then i want to place this title in the center
so that's why let's go to our s3 and here we have to add some classes bootstrap classes i want this
text to be in the center so that's why it will be text center and then i will add font to it normal
and then i want some padding top and it will be three and for our date i will add a class also
text center now save and go to our website that's it here you can see that now we have placed our
heading in the center now we have to make our this image responsive so that's why we have
to add another bootstrap class for our image here we have to add a class and it will be image fluid
that's it and then i will give a width of hundred percent
now save and go to our website and here we can see that this image is now taking perfect with a
height so after this one now we have to create our hover effect so for creating this one let's go to
our code first we have to copy our this id block container and then let's go to our style sheet
and then let's go to the bottom so first we have to comment out and it will be blocked and paste
the id here and if i go to my blog html and copy the post class from here and then paste it here
and if i hover on our post then i want to add hover effect in our image
so first i will do i will add some scaling in our image if i hover on our post
so that's why we have to add transform and it will be a scale
1.3 and then i want to rotate our image a little bit so that's why it will be rotate
minus 10 degree
that's it and then i want to decrease the opacity and it will be 0.8
now save and go to our website and if i now hover here you can see that our image is now rotating
a little bit and then we have increased the size of our image
now here you can see that our this image is actually going out of the screen so that's
why we have to fix this one first let's go to our code and let's copy our these classes from here
and then paste it here and let's go to our blog html and from here copy our post image
class name and then paste it here so first thing i will do i will hide our overflow
and then i will add a cursor and it will be pointer now save and go to our website and
if i now over here you can see that our image is now adding the effects inside the screen that's
it so now i want to add some transition in our hover effect so that's why copy this one and then
paste it here remove the hover then we have to add some transition and it will be 0.3 second is now
save and go to our website and if i now hover here you can see that we have a smooth transition here
so if i hover on our post i want to change the text color also so for doing this let's
go to our code and copy this one then paste it here and here instead of image it will be h3
and i want to change the color so that's why let's add a color and a color will be this one
now save and go to our website and if i now hover in our post here you can see that our
title color is now changing and now we have to add some transition in our title also
so that's why copy this one again and then paste it here
and then remove the hover then we have to add transition so that's why copy this transition from
here and then paste it here and then we have to add cursor pointer now save and go to our website
and now if i hover in our post here you can see that we have added hopper effect in our image and
we have also added hover effect in our title so guys here you can see that we have created
our first blog and now we have to create some more so that's why if i go to my website here
you can see that we have more blocks here so for adding the blocks let's go to our html
and from our this div we just have to copy this div tag and paste it three times now save and
go to our website and here you can see that now we have four blocks here now we have to simply change
the images and the title of our blogs and here we have successfully changed the images and the title
and then we have also added some padding bottom for each of this div tag
now save and go to our website and here you can see that we have now added different images
and different titles for our these blogs so after our these blogs we have to add
a banner here so for adding the banner let's go to our code and copy this section then paste it here
and from here i don't want any h3 and paragraph and from here i will remove the post class that's
it and i will change the image name and it will be banner now save and go to our website
and here you can see that we have now our banner here but this banner is now taking six column only
we have to change the column setting so let's go to our code and here it will be taking 12
column 12 column in our medium screen in our small screen and in our large screen now save
and go to our website and here you can see that now our image is taking full width and height
so after our banner now we have to create our these three small blogs so let's go to our code
and from here copy this div tag and then paste it here
three more time now save and if you go to my website here you can see that we have three more
blocks here but this blocks is taking six column in our larger screen now i want to decrease the
column width so that's why our this blog post will be taking four column in our large screen 6 column
in medium screen and 12 column in our smaller screen so now let's change the other blocks also
that's it now save and go to our website and here you can see that our this blog is now taking four
column of our screen now i want to change the aligning of our this heading i want this text
to be in the starting and i don't want any date so that's why let's go to our code
and from here remove the text center
and remove the paragraph also and here instead of s3 it will be h4 that's it now copy this div tag
and delete these two from here and paste it two more times now save and go to our website
and here you can see that this text is now smaller than our
this heading now i want to change the images so let's go to our code
that's it guys we have successfully changed the images of our blogs now save and let's go to
our website and here you can see that we have now different images for each of these blogs
and guys we have successfully created our blog page
now inspect our website
and guys here you can see that our this blog page is now looking good in our medium screen
now let's go to our mobile screen
and here you can see that this is our mobile screen and in our
mobile screen now everyone is taking full width and height
and this block page is looking so beautiful in our mobile screen in our tablet screen and
in our large screen as well guys here you can see that we have successfully created our blog
page for our e-commerce website using html css and bootstrap that's it i hope you guys enjoyed
this tutorial and if you guys really do 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 see you in our next part
you