"footer with blue background"
Bootstrap 4.1.1 Snippet by Nefertiti

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <title>Footer</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.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700" rel="stylesheet"> </head> <footer class="container-fluid bg-blue py-5"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="row"> <div class="col-md-6 "> <div class="logo-part"> <img src="https://static1.squarespace.com/static/54e384e9e4b0b22e8b7e05d4/t/5da33986ff3f1e0b333f46e4/1591383964774/?format=1500w" class="w-50 logo-footer" > <p>New York, New York</p> <p></p> </div> </div> <div class="col-md-6 px-4"> <h6> About Company</h6> <p>"We are an inclusive community passionate about encouraging women to develop tech skills."</p> <!--<a href="#" class="btn-footer"> More Info </a><br>--> <!--<a href="#" class="btn-footer"> Contact Us</a>--> </div> </div> </div> <div class="col-md-6"> <div class="row"> <div class="col-md-6 px-4"> <h6> Site Links</h6> <div class="row "> <div class="col-md-6"> <ul> <li> <a href="#"> Home</a> </li> <li> <a href="#"> Our Programs</a> </li> <li> <a href="#"> About Us</a> </li> <li> <a href="#"> Blog</a> </li> <li> <a href="#"> Contact Us</a> </li> <li> <a href="#"> Log In</a> </li> </ul> </div> <div class="col-md-6 px-4"> <ul> <li> <a href="#"> FAQ</a> </li> <li> <a href="#"> Terms</a> </li> <li> <a href="#"> Policy</a> </li> <li> <a href="#"> Financing</a> </li> <li> <a href="#"> Payments</a> </li> <li> <a href="#"> Refunds</a> </li> </ul> </div> </div> </div> <div class="col-md-6 "> <h6> Newsletter</h6> <div class="social"> <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a> </div> </div> </div> </div> </div> </div> </div>
body { font-family: 'Signika', sans-serif; } .bg-blue { background: #0b1560; } .logo-footer { margin-bottom: 40px; } footer { color: white; } footer p, a { font-size: 12px; font-family: 'Gibson', sans-serif; } footer h6 { font-family: 'Playfair Display', serif; margin-bottom: 40px; position: relative; } footer h6:after { position: absolute; content: ""; background: white; width: 12%; height: 1px; left: 0; bottom: -20px; } /*.btn-footer {*/ /* color: white;*/ /* text-decoration: none;*/ /* border: 1px solid;*/ /* border-radius: 43px;*/ /* font-size: 13px;*/ /* padding: 7px 30px;*/ /* line-height: 47px;*/ /*}*/ /*.btn-footer:hover {*/ /* text-decoration: none;*/ } .form-footer input[type="text"] { border: none; border-radius: 16px 0 0 16px; outline: none; padding-left: 10px; } ::placeholder { font-size: 10px; padding-left: 10px; font-style: italic; } .form-footer input[type="button"] { border: none; background:#232323; margin-left: -5px; color: #fff; outline: none; border-radius: 0 16px 16px 0; padding: 2px 12px; } .social .fa { color: white; font-size: 22px; padding: 10px 15px; background: #0b1560; } footer ul li { list-style: none; display: block; } footer ul { padding-left: 0; } footer ul li a{ text-decoration: none; color: white; text-decoration:none; } a:hover { text-decoration: none; color: #FFFFFF !important; } .logo-part { border-right: 1px solid white; height: 100%; }

Questions / Comments: