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 create 
tag 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 create  tag
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
