Snippio

Responsive Website Footer

<!DOCTYPE html> <html> <head> <title>Page Title</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> </head> <body> <div class="container-fluid pb-0 mb-0 justify-content-center text-light "> <div class="row my-5 justify-content-center"> <div class="col text-center"> <div class="card border-0"> <div class="card-body"> <div class="card-title"> <h3 class="mb-4">Ready to See What your team can do?</h3> </div> <div class="row justify-content-center"> <div class="col-md-4 col"> <p class="small color-text">We'll show you how your team can have more meaningful conservations with your customers without heavy IT effors. </p> <button type="button" class="btn btn-primary border-0 my-4"><b>Get in Touch</b></button><br> <img src="https://i.imgur.com/pC6AgYC.jpg" class="img-fluid" width="450"> </div> </div> </div> </div> </div> </div> <footer> <div class="row justify-content-center mb-0 pt-5 pb-0 row-2 px-3"> <div class="col-12"> <div class="row row-2"> <div class="col-sm-3 text-md-center"> <h5><span> <i class="fa fa-firefox text-light" aria-hidden="true"></i></span><b> Snippio</b></h5> </div> <div class="col-sm-3 my-sm-0 mt-5"> <ul class="list-unstyled"> <li class="mt-0">Platform</li> <li>Help Center</li> <li>Security</li> </ul> </div> <div class="col-sm-3 my-sm-0 mt-5"> <ul class="list-unstyled"> <li class="mt-0">Customers</li> <li>Use Cases</li> <li>Customers Services</li> </ul> </div> <div class="col-sm-3 my-sm-0 mt-5"> <ul class="list-unstyled"> <li class="mt-0">Company</li> <li>About</li> <li>Careers- <span class="Careers">We're-hiring</span></li> </ul> </div> </div> </div> </div> <div class="row justify-content-center mt-0 pt-0 row-1 mb-0 px-sm-3 px-2"> <div class="col-12"> <div class="row my-4 row-1 no-gutters"> <div class="col-sm-3 col-auto text-center"><small>&#9400; snippio Software</small></div> <div class="col-md-3 col-auto "></div> <div class="col-md-3 col-auto"></div> <div class="col my-auto text-md-left text-right "> <small> contact@snippio.com <span><img src="https://i.imgur.com/TtB6MDc.png" class="img-fluid " width="25"></span> <span><img src="https://i.imgur.com/N90KDYM.png" class="img-fluid " width="25"></span></small> </div> </div> </div> </div> </footer> </div> <style> @import url('https://fonts.googleapis.com/css?family=Rubik&display=swap'); body { font-family: 'Rubik', sans-serif; height: 100% !important; background-color: #F8F9FB !important } .container-fluid { margin-top: 101px; color: #000 !important } .card { background-color: #F8F9FB !important } p { font-size: calc(12px + (14 - 12) * ((100vw - 360px) / (1600 - 360))) !important; display: fkex } h3 { font-size: calc(24px + (30 - 24) * ((100vw - 360px) / (1600 - 360))) !important } .social { font-size: 21px !important } .color-text { color: #757575 !important } button { font-size: calc(12px + (13 - 12) * ((100vw - 360px) / (1600 - 320))) !important; background-color: #2CA6FB !important; padding-left: calc(20px + (28 - 20) * ((100vw - 360px) / (1600 - 360))) !important; padding-right: calc(20px + (28 - 20) * ((100vw - 360px) / (1600 - 360))) !important; padding-top: calc(10px + (12 - 10) * ((100vw - 360px) / (1600 - 360))) !important; padding-bottom: calc(10px + (12 - 10) * ((100vw - 360px) / (1600 - 360))) !important } button:focus { -moz-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; outline-width: 0 } footer { color: #caced1 !important } li { margin-top: 20px; margin-bottom: 20px } .Careers { cursor: pointer; color: #1E88E5 } .row-1 { background-color: #1E242A !important } .row-2 { background-color: #28323C !important } </style> </body> </html>

Preview