How to create Footer in Website
How to Create a code Step by Step Process
Step 1: Create a folder. Folder name Project.
Step 2: Open Sublime text and Type given HTML code.
Step 3: After enter this code, Save file name index.html (inside the Project folder)
Step 4: Open index.html with any browser like Chrome, Internet explorer, etc.
Step 5: Finally get an output.
index.html
<!DOCTYPE html>
<html>
<head>
<link href=”css/style.css” rel=’stylesheet’ type=’text/css’ />
</head>
<body>
<div class=”footer text-center”>
<div class=”container”>
<div class=”logo2 wow fadeInUp” data-wow-duration=”1s” data-wow-delay=”.3s”>\<a href=”index.html”><h2>C<span>areer Lines</span></h2></a>
<p>Training | Placement</p>
</div>
<a href=”single.html” class=”flag_tag2″>Where to find us?</a>
<ul class=”social wow slideInDown” data-wow-duration=”1s” data-wow-delay=”.3s”>
<li><a href=”#” class=”fb”> </a></li>
<li><a href=”#” class=”in”> </a></li>
<li><a href=”#” class=”dott”></a></li>
<div class=”clearfix”></div>
</ul>
</div>
</div>
<style type=”text/css”>
html, body {
font-family: ‘Calibri’, sans-serif;
font-size: 100%;
}
::before, ::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
body {
margin: 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.footer {
background: #333;
padding: 2em 0;
}
.text-center {
text-align: center;
}
body {
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
}
.clearfix::after, .container::after, .container-fluid::after, .row::after, .form-horizontal .form-group::after, .btn-toolbar::after, .btn-group-vertical > .btn-group::after, .nav::after, .navbar::after, .navbar-header::after, .navbar-collapse::after, .pager::after, .panel-body::after, .modal-footer::after {
clear: both;
}
.clearfix::before, .clearfix::after, .container::before, .container::after, .container-fluid::before, .container-fluid::after, .row::before, .row::after, .form-horizontal .form-group::before, .form-horizontal .form-group::after, .btn-toolbar::before, .btn-toolbar::after, .btn-group-vertical > .btn-group::before, .btn-group-vertical > .btn-group::after, .nav::before, .nav::after, .navbar::before, .navbar::after, .navbar-header::before, .navbar-header::after, .navbar-collapse::before, .navbar-collapse::after, .pager::before, .pager::after, .panel-body::before, .panel-body::after, .modal-footer::before, .modal-footer::after {
display: table;
content: ” “;
}
.container {
width: 1170px;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.logo2 {
text-align: center;
margin: 0 0 2em 0;
}
a.flag_tag2 {
color: #fff;
font-size: 1.2em;
}
body a {
transition: 0.5s all;
-webkit-transition: 0.5s all;
-o-transition: 0.5s all;
-moz-transition: 0.5s all;
-ms-transition: 0.5s all;
}
a {
color: #1B242F;
text-decoration: none;
}
a {
background: transparent;
}
ul.social {
display: block;
padding: 0;
margin: 3em auto 0;
text-align: center;
}
ul.social li {
display: inline-block;
}
ul.social {
text-align: center;
}
.logo2 a span {
color: #fff;
font-family: ‘Merriweather Sans’, sans-serif;
font-size: 0.3em;
font-weight: bold;
}
.logo2 a h2 {
font-weight: bold;
font-size: 5.5em;
color: #EFA52C;
text-transform: uppercase;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: inherit;
}
.logo2 p {
font-size: 0.8em;
color: #EFA52C;
text-transform: uppercase;
letter-spacing: 3px;
padding: 0;
margin: -9px 0 12px 0;
}
p {
margin: 0;
font-family: serif;
color: black;
}
</style>
</body>
</html>