THAPA TECHNICAL

HOUSE OF WEB DEVELOPERS AND TECHNOLOGY.

How To Create Responsive Footer In HTML CSS & Bootstrap 4 in Hindi

How To Create Responsive Footer In HTML CSS & Bootstrap 4 in Hindi




Source Code for free 


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Maven+Pro&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
*{
margin: 0; padding: 0; box-sizing: border-box;
font-family: 'Maven Pro', sans-serif;
}
header{ width: 100%; height: 300px; background: #d2dae2;}
.footer_style{
background: #2c2c54; color: white;
}

a{
text-decoration: none;
color: white;
}

a:hover{ text-decoration: none; color: #4bcffa; }

.d-flex div{
text-align: center;
border-right: 1px solid grey;
border-top: 1px solid grey;
}

.d-flex div:last-child{
border-right:none;
}

@media(max-width: 768px){
li{
list-style: none;
}

.d-flex span{
display: none;
}
}

</style>
</head>
<body>

<header>
<h3> Main Body</h3>
</header>

<footer class="footer_style">
<main class="container-fluid">
<div class="row p-3">
<div class="col-md-4 col-12 offset-md-1"> 
<p class="mt-5 text-justify"> ThapaTechnical youtube channel is here to help you. If you want to support just SUBSCRIBE and share with your friends. Lov you all :) 
DONATION FOR SUPPORT:    PhonePay = vinodbahadur@ybl      GooglePay: vbthapa55@oksbi
 Believe me all this money will be used to make more quality videos and to make my channel grow. So that I can always provide you awesome free videos :) </p>
<p class="text-capitalize"> &#169 2019 ThapaTechnical. All right reserved. </p>
</div>

<div class="col-md-4 col-12">
<h4>Contacts</h4>
              <dl>
                <dt>Address:</dt>
                <dd>Pune, Maharashtra </dd>
              </dl>
              <dl>
                <dt>email:</dt>
                <dd><a href="mailto:thapa@thapa.com" >thapa@thapa.com</a></dd>
              </dl>
              <dl>
                <dt>phones:</dt>
                <dd><a href="tel:#">+91 1234567898</a> <span>or</span> <a href="tel:#">+91 9876543211</a>
                </dd>
              </dl>
</div>

<div class="col-md-2 col-12">
<h4>Links</h4>
              <ul>
                <li><a href="https://www.thapatechnical.com/">Services</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contacts</a></li>
                <li><a href="#">About</a></li>
              </ul>
</div>
</div>

<div class="d-flex flex-row justify-content-center align-items-center flex-wrap">
<div class="p-md-5 p-2 flex-fill ">
<a href="https://www.facebook.com/vinodthapa55"> <i class="fa fa-facebook-official" aria-hidden="true"></i> <span>Facebook</span> </a> </div>

<div class="p-md-5 p-2 flex-fill "><a href="https://www.instagram.com/vinodthapa55/"><i class="fa fa-instagram" aria-hidden="true"></i><span>Instagram</span></a></div>

<div class="p-md-5 p-2 flex-fill "><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i><span>Twitter</span></a></div>

<div class="p-md-5 p-2 flex-fill "><a href="#"><i class="fa fa-youtube" aria-hidden="true"></i><span>Youtube</span></a></div>
</div>
</main>
</footer>

</body>
</html>

7 comments:

  1. Bro please make video on the topic of live tv website

    ReplyDelete
  2. Bhai please promote my channel Named Pragya Academy Nursery School on the Youtube. I am also trying to design a website for my schhol with the help of your videos plz bhai promote my channel plz plz plz plz plz plz plz plz plz plz plz plz plz plz............

    ReplyDelete
  3. I believe other website owners should take this site as an example , very clean and wonderful user genial style . ux design agency san francisco

    ReplyDelete
  4. I’ll create a hyperlink to the web page about my personal weblog. ux design agency san francisco

    ReplyDelete
  5. I am glad that it turned out so well and I hope it will continue in the future because it is so worthwhile and meaningful to the community. iphone device template

    ReplyDelete
  6. While at her sister’s fitting for a wedding dress, June is approached by a man known only as Agent Fitzgerald, and asked to accompany him inside his vehicle. tablet mockup

    ReplyDelete