Hi guys welcome back to one more video as of late on this video we’ll place a footer impact for web station the utilization of html and css here’s the catch impact that we’ll place on this video on this footer we have got divided it in three columns in the first column i’ve added the marvelous links and in the second column i’ve added email subscription.
Label and in the final column you will peer the contact files and social media icons we have got created this impact the utilization of html and css gracious so let's birth to place that footer impact step-by-step the utilization of html and css here on this folder i’ve added one html file and one css file let me initiate these files with my code editor which is.
Visual studio code so here’s the html file the place i’ve added the fundamental html structures and this one is the css file the place i’ve added margin padding font family and field sizing in the html file i’ve added this link place that can join the html and css file now we can add the code in the.
Body place that can be displayed on our online page so on this physique let's place a div with the class name footer and on this footer we have got to place three columns so let's place the first column with the class name call one now we can reproduction this div and we can add the class name call to.
Name 3 now in the first one we can add a title in h3 so it’s marvelous links and on this marvelous links we can add some links so let's add one a place which is anchor place so that it may well be a clickable link.
On this one we can add the link textual notify so it’s about let me reproduction it and then we can change the link textual notify so we have got up thus far the link textual notify now in the second column we have got to add a title so but again we can add s3 and in.
This s3 we can add the title publication after this title we have got to add a email subscription make so we can exhaust the make place and within this make place we have got to add one enter field and there can be a button so first we can add one enter field enter sort can be textual notify and here we can add the placeholder.
On this placeholder we can add the textual notify that can be displayed within the enter field so here we can add your email address after that we have got to add a button button sort can be put up and here we have got to add the button textual notify so it’s subscribe now now we have got to add the notify in the.
Third column so in the third column but again we can add a title so here we can add s3 and on this s3 we can add the title contact the place we can add the contact files so in the next line we can add a p place.
Which is paragraph place and here we can add any address here we can add br to vary the road after at the side of all these textual notify let me plot back to the folder and initiate this html file with any web browser now you will peer this textual notify marvelous links then we have got some links then this title publication and we.
Contain the enter field and button and one one more title contact and a few description subsequent we have got to add the css for these notify so gorgeous plot back here we can reproduction this class name footer and for this footer we can add the css.
So gorgeous add this class name on this css file and for this one we have got to add some space from the tip after that we have got to add the width then we can add some space so here we can add padding 100 pixel it’s from the tip and bottom and left gorgeous.
15 then we can change the background and here we can add the color it may well be the textual notify color and expose can be flex so your whole columns can be aspect by aspect let's plot back to the online page but again and now you will peer here we have got the marvelous links in the.
First column publication in the second and focus on to in the third one but we need some space also so let's plot back and you will peer on this footer we have got three div this one this one and this one so for all these 3d we have got to add the identical css properties for that.
Here we can add this class name footer and after that we can add div and let's add textual notify align middle and in the second column we have got to elongate the gap so.
That it’s possible you’ll furthermore peer we have got the class name call to for the second column so here we can add dot call to and beautiful add flex grow to so it may well care for the gap twice let's plot back and here you will peer.
We have some space between all these columns after that we have got to add the css for these titles so let's plot back and you will peer we have got the title in h3 so here we can add footer div and h3 so for all these s3 we can add.
Font weight so the font weight can be 300 it may well be gentle and margin from the bottom so there can be some space at the bottom of this title and later spacing one pixel so these title appears right.
Subsequent we can add the css for these links which is in the horizontal line so we have got to align it vertically and we have got to vary the color and care for away the underline so gorgeous plot back and you will peer we have got these links in the a place in the first column so here in the css file let's add the.
Class name call 1 for the first column then we can add a place and for this a place we can add expose block then we can add textual notify decoration none it may well care for away the underline then we have got to vary the color of these links.
Subsequent we can add space at the bottom now these links appears right subsequent we can add the css for this enter field and this subscribe button and now we need this subscribe button in the next line so we have got to add the road damage let's plot back in the html file.
And between this enter field and this button we can add one br now you will peer this enter field in the tip and below that enter field we have got the subscribe button subsequent we can add the css so let's plot.
Encourage and you will peer it’s in the make place on this make we have got the enter and button so on this css file we can add make enter now for this enter field we desire a width it may well be 400 pixels and after that.
Top it may well be 45 pixel now we need the round corners so we can add border radius for pixel and texture line can be middle after that we can add the.
Home from the tip and bottom so we can add margin top and let's add a neighborhood at the bottom also account for can be none and border also none now you will peer this enter field appears right.
Let me plot back and here on this html file here we can add enter sort email so it may well gracious settle for the e mail format and here i will add required so the e mail can be required to put up this make devour this.
Let's plot back and if i click on this subscribe now button you will peer it’s asking please possess out this field because this enter field is required so this enter field is having a undercover agent right subsequent we have got to impact this button which is subscribe now so merely plot back to the css file and but again write this.
Tag make and on this make we have got added button so write the button place now for this button we have got to add the transparent background after that border it may well be 2 pixel then color.
And border radius let's add the padding also 10 pixel from top and bottom and 30 pixel from left and beautiful aspect after that we can add the font size it may well be 15 pixel and then cursor can be pointer now you will peer this.
Subscribe now button may well be having a undercover agent right so we have got designed the second column also now in the final column you will peer this title is unswerving and this textual notify may well be having a undercover agent right subsequent we can add the social media icons on this footer gorgeous jog to the font awesome web station here you’ll need to place your story.
Then click on kids and click here and you will rep a script gorgeous reproduction this script and plot back to the html file and add it here on this head place after at the side of this but again plot back to the font awesome web station and click on icons.
Here i will possess out the model fifth here we can gape the icon that we would like to expose on our web station so let me gape facebook click on the icon and you will rep this one line of code gorgeous click here to reproduction this one and plot back to the html file and add it here.
Like this let me add a div here with the class name social icons and within this div we can station this icon after at the side of this let me reproduction it and change the icons here’s for the twitter subsequent one is for the instagram.
And this one for behance after at the side of this but again refresh the catch station and now you will peer these icons in the final column which is for the facebook twitter instagram and we fingers so subsequent we can add the css for this icon so let's plot back and reproduction this class name social icons.
And for this one we can add some space from the tip so we can add margin top 30 pixel and but again write this class name and here we can add i because we have got your whole icons in i place let's lengthen the font size so it may well.
Prolong the scale of the icons then we can add some space margin 10 pixel and cursor pointer after at the side of this but again refresh the catch station and now you will peer the social media icons appears right so lastly we have got carried out this comely footer impact the utilization of html and css i hope this.
Video can be important for you if you occur to may well furthermore merely have got any interrogate you will inquire me in the notify section please devour and share this video and likewise subscribe my channel easy tutorials to take into story more movies devour this one thank you so unheard of for watching this video
