How to Create a Website Footer.

-

Website Footer Code below here..


Step-1:- Create a  HTML Page .

1- index.html



Step-2:- Write the Code of (Index.html) Page.



<!DOCTYPE html>
<html>
<head>
<title>Footer</title>
<link href=style.css rel=stylesheet type=text/css media=all />
</head>
<body>
<div class=a2>
<div class=a3>
<div class="footer one">
<h3> About Us</h3>
<p>this company are provide the improved condition on his based the condition check system for every movent. that can be informed the way of the following instraction of the condition. for every movent condition.</p>
</div>
<div class="footer two">
<h3>Social media</h3>
<ul>
<li><a class=f href=#><i></i>Facebook</a></li>
<li><a class=t href=#><i></i>Twitter</a></li>
<li><a class=g href=#><i></i>Google </a></li>
</ul>
</div>
<div class="footer three">
<h3>Contact Info</h3>
<ul>
<li>The company name <span></span> </li>
<li>4574545644 </li>
<li><a href=# style=color:white>login@gmail.com</a> </li>
</ul>
</div>
<div class=a1></div>
</div></div></div>
</body>
</html>




Step-3:- And Now the time of CSS Pages.
Create a  CSS Page....


1- style.css


Step-4:- Write the Code of (style.css) Page.

ol,ul{list-style:none;
margin:0px;
padding:0px;}

a{text-decoration:none;}
.a1{clear:both;}

.a2{
    margin: 0 auto;
    width: 67%;}

.a3{
    background:#1C456E;
    padding: 3em 3em;
}
.footer{
float:left;
}
 h3{
    font-size: 18px;
    color: white;
}
.footer.one {
    width: 37%;
}
.footer.three {
    width: 23%;
}
.footer.one p{
color:white;
line-height:2em;
font-size:14px;
}
.footer.two {
    width: 23%;
    margin: 0 8%;
}
.footer.two ul{
margin:0;
padding:0;
}
.footer.two ul li{
list-style-type:none;
display:block;
    line-height: 1.5em;
font-size:14px;
}
.footer.two ul li a{
color:white;
display:block;
}
.footer.two ul li a.f {
background: url('../images/social2.png') no-repeat 0px 4px;  
    padding: 10px 0 12px 52px;
}
.footer.two ul li a.t {
background: url('../images/social1.png') no-repeat 0px 4px;
    padding: 10px 0 12px 52px;
}
.footer.two ul li a.g {
    background: url('../images/social3.png') no-repeat 0px 4px;
    padding: 10px 0 12px 52px;
}
.footer.three ul li {
    list-style-type: none;
    display: block;
    color: white;
    font-size: 14px;
    line-height: 2.5em;
}
.footer.three ul li span {
    display: block;
}
.footer.two ul li a.f:hover {
        color:#09F;
}
.footer.two ul li a.t:hover {
        color:#09F;
}
.footer.two ul li a.g:hover {
        color:#09F;
}
@media (max-width: 1440px){
.a2 {
width: 73%;
}
}
@media (max-width: 1366px){
.footer.one {
width: 38%;
}
.a3 {
padding: 2.5em 2.5em;
}
}
@media (max-width: 1080px){
.a2 {
width: 80%;
}
.footer h3 {
font-size: 19px;
}
.footer h3 {
font-size: 18px;
}
}
@media (max-width: 1024px){
.footer-a3 {
padding: 2em 2em;
}
.a2 {
width: 82%;
}
@media (max-width: 991px){
.footer.two {
width: 27%;
margin: 0 5%;
}
.footer.three {
width: 25%;
}
}
@media (max-width: 800px){
.a2 {
width: 88%;
}
.footer.one p {
font-size: 13px;
}
.footer.two ul li {
font-size: 13px;
}
.footer.three ul li {
font-size: 13px;
}
.footer h3 {
font-size: 16px;
}
}
@media (max-width: 768px){
.a2 {
width: 90%;
}
@media (max-width: 736px){
.footer.one {
width: 35%;
}
.footer.two {
width: 29%;
margin: 0 4%;
}
.footer.three {
width: 27%;
}
}
@media (max-width: 667px){
.footer.one {
width: 100%;
}
.footer.two {
width: 48%;
margin: 0 4% 0 0;
}
.footer.three {
width: 48%;
}
.footer.one {
margin-bottom: 40px;
}
}
@media (max-width: 640px){
.a3 {
padding: 2.5em 2.5em;
}

@media (max-width: 480px){
.a3 {
padding: 1.5em 1.5em;
}
@media (max-width: 414px){
.footer.two {
    width: 100%;
}
.footer.three {
    width: 100%;
}
.footer h3 {
    margin-bottom: 18px;
}
.footer.one {
    margin-bottom: 0;
}
.footer.two {
    width: 100%;
    margin: 30px 0;
}
@media (max-width: 320px){
.a3 {
padding: 1em 1em;
}



Note: Social Icon are the Images and save the 3 Social Icon Images
            in images folder.

Thanks









Comments

Post a Comment

Popular posts from this blog

How to Create a Login With Signup form in php

-
Image
Code of the Login & Signup Form in php. Login & Signup form is must for websites.  Check Code Below Here.. Important Note:-  If you want run this code. First of all you need to create a mysql database and Table.  Create a database called (registration). In the registration database, add a table called (users).  The users table will take the following four fields. 1- id  - int(11)  autoincrement   primary key 2- username  -  varchar(100)    collation(latin1_swedish)_ci 3- email  -  varchar(100) 4- password  -  varchar(100) Step:1:- Create a 5 php pages... 1- index.php 2- errors.php 3- login.php 4- register.php 5- server.php Step:2:- Write the Code of (index.php) page. <?php    session_start();    if (!isset($_SESSION['username'])) {     $_SESSION['msg'] = "You must log in first";     header('location: login.php');   }   if (isset($_GET['lo
Read more

Code of the filter Drop-down Menu.

-
Image
Drop-Down Code below here.. Step-1:-   Create a  HTML Page . 1 - index.html Step-2:-  Write the Code of (Index.html) Page. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h2>Search/Filter Dropdown</h2> <div class="dropdown"> <button onclick="myFunction()" class="dropbtn">Dropdown</button> <div id="myDropdown" class="dropdown-content"> <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()"> <a href="#about">About</a> <a href="#base">Base</a> <a href="#blog">Blog</a> <a href="#contact">Contact</a>
Read more

Create a Responsive mega Drop Down.

-
Image
Mega Dropdown Code below here.. Step-1 :-   Create a  HTML Page . 1-  index.html Step-2:-  Write the Code of (Index.html) Page. <!DOCTYPE html> <html lang="en">   <head>     <title>SmartMenus jQuery Website Menu - jQuery Plugin</title>     <meta charset="utf-8">     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">         <link href="demo.css" rel="stylesheet" type="text/css" />   </head>   <body>     <nav id="main-nav">       <ul id="main-menu" class="sm sm-blue" >         <li><a href="#">Home</a></li>         <li><a href="#">About</a>           <ul>             <li><a href="#">Introduction to SmartMenus jQuery</a></li>      
Read more