12/12 Responsive Footer | Create Responsive Business Theme Website Using HTML and CSS3 Only

12/12 Responsive Footer | Create Responsive Business Theme Website Using HTML and CSS3 Only


Hey guys! and welcome back. I am welcoming
you to the last video of this video series and in this video we are just
going to create the footer or responsive footer with social media icons, some
input boxes and some links. So, anyways let’s get into the coding. And let me
remind you once again, if you want to create just one section of the website,
you don’t have to follow the entire video series, you just have to follow the
second video in this video series in which we have defined the CSS classes
because those are the classes that we have used extensively throughout the
HTML part. So, you just have to create those CSS classes, so for that just go
through the second video and after that you just have to follow the video for
the section that you want to create. Let’s say you want to create this footer. So just go through the second video, create those CSS classes then you just
have to jump back directly to the last video and create this footer. You don’t
have to follow the entire video . So that was pretty much the gist of it.
Anyways, let’s get into the coding and let’s start with the footer. So let’s
begin with a ‘footer’ tag and class just as always “wrapper” to make the
“display:block” and remove the margin and padding. Alright. And let’s give it an
id=”main-footer”. Let me see in the browser. Okay, we have to begin with the social
icons, so for that let’s create a container div. This is going to contain
all the icons and let’s have the id “social-icons”. Then get inside and
create another div and give it class “text-center” to center align the icons
then get inside and let me just quickly give a title and a subtitle and if you notice we are using a dark
green color with the subtitle and a black color with the title. Alright then get below it and let’s start with
the icons. So create a div and class “text-white” “text-white”. This will make the icons
white then get inside and createtag and class
“btn btn-social socicon” or “socicon-bg-facebok mx-2”.
We have already seen this .btn class which is
used to define a button but since this is not the general button that we have
been using throughout the page this is going to be a round one so that’s why
we are not using the .btn-pink with it and we are using a different one that is
.btn-social and this .socicon-bg-facebok will be used to add a
special or a different color to the Facebook icon then mx-2 will add two
rem of margin on the right and the left of it then get inside and createtag
then class “fab fa-facebook” this will define the font awesome icons
save it and let’s see in the browser all right
know if you can see the icon but it is there and it is even having the hovering
effect then copy this entire span tag because this span is defining one icon so paste it as many times as you want
and just change the name of the classes according to the icons that you want so
I am just going to fast forward through this part you can keep pausing the video
and follow it you all right you so you can see where this do containing
all the icons is ending you so we have to move outside the container
for the social icons but stay inside the footer don’t go
outside the footer and now we will define the main content
for the footer you do and the class .p-4 for this will add four
rem of padding all within it then “bg-light-pink” “pink-light-pink” to add the light pink
background to the footer then get inside and create another

class “d-flex-r” to have the flex-direction flex-direction: row and all the contents
of the footer be defined in single row but in different columns then text-black and let’s give it an ID as well since
this

is going to divide all the columns of the footer and we will begin
with the contact part where we will define the address so for that create our do
and Class D – flex – C because within this day we want the content to be
aligned in two different rows but in a single column
then W – 30 – give it 30% of the width of its container and let’s give it in
class contact – address that we can refer it in the CSS if we
need it in the same way let’s define the other columns as well you all right so 30 plus 30 plus 30 will
equal 90% the list of the 10% will be used for the margin then get inside the contact address
column or the first column and it will begin with the image a small one so
let’s create a div to contain the image and within the dough create a eat egg so
that the image becomes a link also and within the difference part you can write
the URL you can define the image and add style attribute
and height Vibram can reduce the size of the image
all right then get outside this deal which is
containing the image but stay within the deal which is defining the contact
address don’t go outside of that deal just come outside the deal with the
image all right
now let’s define the address Clea do class address
and create title you then let us create the rest of the
address using P tag you and break tag is used to insert one line
so that we can change the line all right outside the deal which is containing the
address and let’s create another day for contact then create the title for the contact you and similarly let’s create the paragraph
text for the contact you
let’s begin with email create a tag or the anchor tag and in the reference
right mail to Poulin then your email ID then class to format it we want it to be
in black color and bold then within the text you can write the
email so that it is visible there so if we click on the email the default
application on your system for sending or receiving email will be opened up so
that an email can be sent to this email address anyways then insert a breakpoint
on a break tag and write the phone number you all right so the first column is
complete now let’s get inside the second column
which is the opening ours and let me just add text – Center to the
do so that the text is centered aligned all right
then get inside and let’s begin with the title for this column you you can see that in the browser then
create a div this div is going to have two different columns as we have seen in
the website so for that let’s have D – flex – R
and no margin let’s begin with the left column the left column is going to have
the name of the week days to create a div and this will have the class D –
flex – C them to be bold and right aligned and let’s give it 45 percent bit all
right and copy this left column bees did and let’s make it right column
and we have to remove this text – bold so that the text becomes normal and here
we want the alignment of the text on the left so in total we will get 45 plus 45
that is 90 percent bit all right then get inside the left column and
create span tag within the span tag keep writing the days of the week all right in the same way let’s create
span tags in the right column and within those span tags you have to
write the timings so I am just writing one simple timing you
can have different timings for different days all right you can see that in the browser that the
left column is right aligned that is it is towards the timings which is on the
right column alright so this creates the second column as well now get inside the
third one that is get in touch and let’s start with the title then get inside and create a form tag
this form tag is used for creating a form for user input and a form can
contain text fields radio buttons or checkboxes and we are going to define
the text fields within this and we are going to wrap the input fields within
div class let’s give it margin of one room on the
top and bottom to separate the different input fields
then get inside and create the input tag type text name let’s say name Plus field
and the placeholder name whatever we write inside the placeholder
attribute is displayed in the input boxes by default so let’s see in the
browser and you can see that the name is written
in the box so copy this entire do Baystate type remains the same
let’s change the name to contact and the value for the
placeholder attribute as well all right then leave some space and create another
div class form – group – Ram of margin on the top and bottom of
this and within this deal we are going to define that text area a text area tag
defines a multi-line text input so it can hold an unlimited number of
characters and and the size of the text area can be specified by the number of
columns and rows attributes or even we can use CSS to add height and width
property to this text area you so let’s add two rules all right
now below the text area we just have to add the button and as always we will
enclose the button within the div tag you on eight
you let’s minimize the columns you all right now you can see where this do
which is containing that last D – flex – R is ending you can clearly see that
pause the video and see it where the dev is ending
and this dev is containing the ID main footer divider get outside of this do and then create a P tag using this P tag we are going to add
some copyright information you alright then below the P tag we will
create a small button which is a scroll to top button and in the reference part
we are writing hash my page because this is the ID of the body
then let me define the I tagged with the font or some icon for that up arrow
symbol and let me just quickly show you the ID
of the body tag all right you so this completes the HTML part also
let’s quickly jump to the footer in the CSS so let’s start style
the social icons because we are going to give different colors to the different
social icons so I am going to fast forward this part also because there’s
nothing much for me to explain I am just going to refer to the different icons
that we have already defined and we will define the background colour as well as
the border color because if we don’t specify the border color the animation
will not take place and the animation has been defined with the BTN class so
we don’t have to do anything except defining the border color and I’m going
to do the same with all the social icons so keep pausing the video and try to
follow it all right and now let’s make the icons
rounded for that we will use the BTN – social class let’s have the width height
and the line height same all right then let’s begin with the footer the
main content for the footer and in the second column let’s align it to the
beginning of the flags or the flag start or the top you all right you now let’s tile the input boxes and we
have used the form control class with the text area and the field class with
the input boxes let’s style them you and change the font style as well all right you let’s remove the border you all right you and also let’s make it transparent you and let’s add some padding on the top
and bottom only and also let’s add the border only on
the bottom you still we are getting this outline let’s
get rid of that by using the : focus selector since the outline is visible
only when we focus on the input boxes you all right now also let’s add text area you
all right now the last thing that we have to do in this video series is the
media queries for the footer and below 768 breakpoint we want the columns of
the footer to be aligned in two different rows and for that we are going
to use the D – flex – our class you and we will change the road direction to
column we have been using this throughout the video series you and you can see that now and also if you want to see which class
I am talking about it is this one D – flex – are and these
are the three columns that are getting aligned in different roles now let’s add some padding on the bottom
of each column you all right
you now let’s now let’s style this copyright text you and also let’s position this back to top
or scroll to top button and the style it let’s give it the background color light
pink all right let’s give it a high z-index
so that it is always on top of other elements and display as inline-block so
that it can be displayed with other elements position fixed and bottom 1.5
Ram right 1.5 ram so it will be at a
distance of 1 point 5 gram from the bottom right corner then let’s give it a
bit of 3 Ram then height of freedom as well as the line height of three lamb then have font-size to ram and add a
transition effect as well and let’s make it a little opaque all right all right so with this the entire
website is complete with all the sections and all the knits and grades
you can go ahead personalize it more or design it even further use it in your
project or use it for practice and if you liked my video series please don’t
forget to like and comment on my videos and don’t forget to subscribe to my
channel also let me know in the comments how much you have liked the videos and
also give your feedbacks in the comments about the things that you have liked or
disliked about this video series your valuable comments are always welcomed so
I am going to see you in the next video series till then take care and thanks
for watching you

Comments

  1. Post
    Author
  2. Post
    Author

Leave a Reply

Your email address will not be published. Required fields are marked *