<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!--<img src="https://i.pinimg.com/originals/e8/71/8a/e8718a946344180d84a8dc59b4a6824f.jpg" style="--> <!-- position: absolute;--> <!-- top: -1075%;--> <!-- width: 100%;--> <!--">--> <!--<div class="absolute-footer">--> <footer class="footer"> <div class="row"> <div class="col-md-8 bg-red"> <div class="tringle-top"></div> </div> <div class="col-md-4 bg-black"> <div class="go-to-top"> <i class="fa fa-angle-down" aria-hidden="true"></i> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="col-md-3"> <h2>Logo</h2> <p>Suspendisse hendrerit tellus laoreet luctus pharetra. Aliquam porttitor vitae orci nec ultricies. Curabitur vehicula, libero eget faucibus faucibus, purus erat eleifend enim, porta pellentesque ex mi ut sem.</p> <p>© 2014 BS3 UI Kit, All rights reserved</p> </div> <div class="col-md-4"> <h4>Menu —</h4> <div class="col-md-6 no-padding"> <ul class="pages"> <li><a href="#">Travel</a></li> <li><a href="#">Nature</a></li> <li><a href="#">Explores</a></li> <li><a href="#">Science</a></li> <li><a href="#">Advice</a></li> </ul> </div> <div class="col-md-6 no-padding"> <ul class="list"> <li><a href="#">About Us</a></li> <li><a href="#">Contacts</a></li> <li><a href="#">Terms & Condition</a></li> <li><a href="#">Privacy Policy</a></li> </ul> </div> </div> <div class="col-md-2"> <h4>Follow Us</h4> <ul> <li><a href="#">Facebook</a></li> <li><a href="#">Twitter</a></li> <li><a href="#">Instagram</a></li> <li><a href="#">RSS</a></li> </ul> </div> <div class="col-md-3"> <h4>Newsletter</h4> <p>A rover wearing a fuzzy suit doesn’t alarm the real penguins</p> <div class="input-group"> <input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn"> <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-envelope"></span></button> </span> </div><!-- /input-group --> <div class="absolute-img"> <img src="https://image.freepik.com/darmowe-zdjecie/m%C5%82ody-piekarz-trzyma-chleb-i-prezentuje-co%C5%9B_1368-9859.jpg" style=" width: 200px;"> </div> </div> </div> </div> </div> </footer> <div class="footer-bottom"> <div class=""> <div class="row"> <div class="col-md-12"> <div class="baner-bootom"> <div class="baner"> <img src="https://dummyimage.com/1920x400/c71ec7/ffffff&text=Baner+Reklamowy+"/> </div> </div> </div> </div> </div> </div> <!--</div>-->

/*body { overflow:hidden;}*/ .absolute-footer { /* position: absolute; z-index: 10; top: 72px; left: 0; width: 100%; height: 100%; background-color:#fff;*/ } h2 { margin-top: 0; } .col-center{ float: none; margin: 0 auto; } .no-padding { padding:0;} .absolute-img { position: absolute; top: -143px; right: 0; z-index: -1; } .tringle-top { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); width: 0px; height: 0px; border-left: 6px solid transparent; border-right: 6px solid transparent ; border-bottom: 6px solid #2f2f2f; right: 50%; } .go-to-top { position: absolute; bottom: 0; left: 20%; transform: translateX(-50%); background-color: red; z-index: 100; width: 50px; height: 31px; color: #000; } .bg-red {background-color: red; height:6px; position: relative;} .bg-black { background-color: black; height:6px; position: relative;} footer.footer { background-color: #EAEAEA; box-shadow: 0 4px 20px #0000003b; } footer.footer .container { padding: 28px 0; } footer.footer ul { margin: 0; padding: 0; } footer.footer ul li { text-decoration: none; list-style: none; margin: 0; padding: 0; } footer.footer ul.pages { margin: 0; padding: 0; } .baner-bootom { position: relative; height: 400px; } .baner-bootom .baner { position: fixed; top: 0; height: 100%; width: 100%; z-index: -1; } .baner-bootom .baner img { width:100%;}