"Style Footer"
Bootstrap 3.3.0 Snippet by Opeyemi15

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <div class="row"> <h2>Use it for your website :-)</h2> </div> </div> <!--footer--> <footer> <div class="footer_top"> <div class="doct"></div> <div class="container"> <div class="col-md-5 bagcgrey"> <div class="row"> <div class="methodh4"> <h4>FOLLOW US</h4> </div> <ul class="social socmatpbo"> <p></p> <li><a target="_blank" href="https://www.facebook.com/imageeditingservice"><i class="fa fa-facebook"></i></a></li> <li><a target="_blank" href="https://twitter.com/imageeditingi2v"><i class="fa fa-twitter"></i></a></li> <li><a target="_blank" href="https://www.linkedin.com/company/image2vectorgraphicsindia"><i class="fa fa-linkedin"></i></a></li> <li><a target="_blank" href="https://plus.google.com/+Image2vectorgraphicsIndia9"><i class="fa fa-google-plus"></i></a></li> <li><a target="_blank" href="https://www.pinterest.com/imageediting/"><i class="fa fa-pinterest"></i></a></li> </ul> </div> </div> <div class="col-md-7 bagcblue"> <div class="heading6">Do you need bulk/regular images edited?</div> <p>We endeavor to build long-lasting relationship with our clients by being customers oriented and providing our clients with the best service and flexibility. Who are seeking a high volume image editing and image clipping service, no matter how large the workload, you can trust i2V Graphic studio for outsourcing.</p> </div> </div> </div> <div class="footer_bottom_col"> <div class="container"> <div class="col-md-7"> <div class="row"> <div class="col-md-4"> <div class="heading_footer">Image <span>Processing</span> </div> <ul class="footerul"> <li><a title="Image Processing Services" href="image_processing_india.html">Image Processing Services</a></li> <li><a title="Image Background Cleaning" href="image_background_cleaning_india.html">Image Background Cleaning </a></li> <li><a title="Image Masking Service" href="image_masking_india.html">Image Masking Service </a></li> <li><a title="Image Clipping Path" href="image_clipping_path_india.html">Image Clipping Path</a></li> <li><a title="Image Retouching" href="image_retouching_india.html">Image Retouching</a></li> <li><a title="Image Background Removal" href="image_background_removal.html">Image Background Removal</a></li> <li><a title="Image Resizing Service" href="image_resizing_india.html">Image Resizing Service</a></li> <li><a title="Image Cut Out Service" href="image-cut-out-service.html">Image Cut Out Service</a></li> <li><a title="Product Image Retouching Service" href="product-image-retouching-service.html">Product Image Retouching Service</a></li> <li><a title="Catalog Image Editing" href="catalog-image-editing.html">Catalog Image Editing</a></li> <li><a title="Digital Image Processing" href="digital-image-processing.html">Digital Image Processing</a></li> </ul> </div> <div class="col-md-4"> <div class="heading_footer">Graphic <span>Design</span> </div> <ul class="footerul"> <li class="home">Graphic Design</li> <li><a title="Graphic Designing" href="graphic_designing_services.html">Graphic Designing</a></li> <li><a title="Website Designing" href="website_designing_india.html">Website Designing</a></li> <li><a title="Flash, GIF Banner Creation" href="flash_gif_banner_creation_india.html">Flash / GIF Banner Creation</a></li> <li><a title="PowerPoint Presentations" href="powerpoint_presentations_india.html">PowerPoint Presentations</a></li> <li><a title="Logo Designing" href="logo_designing_india.html">Logo Designing</a></li> <li><a title="Brochure Design" href="brochure-designing.html">Brochure Design</a></li> <li><a title="Emailer Design" href="emailer_design_india.html">Emailer Design</a></li> </ul> </div> <div class="col-md-4"> <div class="heading_footer">Photo <span>Editing</span> </div> <ul class="footerul"> <li><a href="photo_restoration_india.html" title="Photo Restoration">Photo Restoration</a></li> <li><a href="photo_enhancement_india.html" title="Photo Enhancement">Photo Enhancement</a></li> <li><a href="photo_color_correction.html" title="Color Correction">Color Correction</a></li> <li><a href="photo_editing_india.html" title="Photo Editing">Photo Editing</a></li> <li><a href="panorama-photo-stitching.html" title="Panorama Photo Stitching">Panorama Photo Stitching</a></li> <li><a href="wedding-photo-editing.html" title="Wedding Photo Editing">Wedding Photo Editing</a></li> <li><a href="real-estate-virtual-tour.html" title="Real Estate Virtual Tour">Real Estate Virtual Tour</a></li> <li><a href="real-estate-hdr-photo-editing.html" title="Real Estate HDR Photo Editing">Real Estate HDR Photo Editing</a></li> <li><a href="real-estate-image-editing-services.html" title="Real Estate Image Editing">Real Estate Image Editing</a></li> </ul> </div> </div> </div> <div class="col-lg-5"> <div class=""> <div class="col-md-6"> <div class="row"> <div class="heading_footer">Online Store <span>Product Editing</span> </div> <ul class="footerul"> <li><a href="product-image-editing-services.html" title="Prodcut Image Editing">Product Image Editing</a></li> <li><a href="image-watermark-removal-service.html" title="Image Watermark Removal">Watermark Removal</a></li> <li><a href="fashion-glamour-apparel-photo-editing.html" title="Fashion Apparel Photo Editing">Fashion Apparel Photo Editing</a></li> <li><a href="jewellery-image-editing.html" title="Jewellery Photo Editing">Jewellery Photo Editing</a></li> <li><a href="ecommerce-store-image-management.html" title="Ecommerce Store Image Management">Ecommerce Store Image Management</a></li> </ul> <div class="heading_footer">Vector <span>Conversion</span> </div> <ul class="footerul"> <li><a href="image_vector_conversion_services.html" title="Image to Vector Conversion">Image to Vector Conversion</a></li> <li><a href="vector-art-conversion-services.html" title="Vector Art Conversion Services">Vector Art Conversion Services</a></li> <li><a href="convert-logo-to-vector.html" title="Convert Logo to vector">Convert Logo to vector</a></li> </ul> </div> </div> <div class="col-md-6"> <div class="row"> <div class="heading_footer">Contact <span>us</span> </div> <ul class="footerul"> <p>To contact us send an email directly to <a href="mailto:webenlance@gmail.com">webenlance@gmail.com</a> use this</p> <p> Call us at<b>+91 9999878398</b></p> </ul> </div> </div> </div> </div> </div> </div> </footer> <div class="copyright"> <p>Copyright © 2016 webenlance. Terms & Condition | <a href="sitemap.html">Sitemap</a> | <a href="sitemap.xml">Sitemap xml</a></p> </div>
@import url(https://fonts.googleapis.com/css?family=Lato:400,300,700,900|Open+Sans:400,300); footer { background-image: url(webenlance.in/bootsnipp/images/footer_sli2.png); background-repeat: repeat; } .footer_top { min-height:100px; background: rgba(255, 255, 255, 0); background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(247, 247, 247, 0) 56%, rgba(247, 247, 247, 1) 57%, rgba(38, 12, 77, 1) 57%, rgba(38, 12, 77, 0.97) 100%); background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(56%, rgba(247, 247, 247, 0)), color-stop(57%, rgba(247, 247, 247, 1)), color-stop(57%, rgba(38, 12, 77, 1)), color-stop(100%, rgba(38, 12, 77, 0.97))); background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(247, 247, 247, 0) 56%, rgba(247, 247, 247, 1) 57%, rgba(38, 12, 77, 1) 57%, rgba(38, 12, 77, 0.97) 100%); background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(247, 247, 247, 0) 56%, rgba(247, 247, 247, 1) 57%, rgba(38, 12, 77, 1) 57%, rgba(38, 12, 77, 0.97) 100%); background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(247, 247, 247, 0) 56%, rgba(247, 247, 247, 1) 57%, rgba(38, 12, 77, 1) 57%, rgba(38, 12, 77, 0.97) 100%); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(247, 247, 247, 0) 56%, rgba(247, 247, 247, 1) 57%, rgba(38, 12, 77, 1) 57%, rgba(38, 12, 77, 0.97) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#260c4d', GradientType=1 ); } .bagcblue { background-color:#260c4d; background-image: url(http://webenlance.in/bootsnipp/images/footer_sli.png); background-repeat: no-repeat; background-position: left top; padding-left:65px; padding-top:15px; color:#FFF; font-family: 'Lato', sans-serif; min-height:131px; } .bagcblue p { font-size:13px; } .bagcgrey { background-image: url(http://webenlance.in/bootsnipp/images/footer_sli2.png); background-repeat: repeat; min-height:131px; } .methodh4 { float:left; width:103px; margin-top:50px; } .bagcgrey h4 { font-family: 'Lato', sans-serif; font-size:20px; font-weight:700; } .img-responsive2 { width:350px; margin-top:68px; float:left; } .heading6 { font-size:18px; font-family: 'Lato', sans-serif; text-transform:uppercase; } .footer_bottom_col { background-color:#373542; min-height:388px; padding-top:30px; } .heading_footer { font-family: 'Open Sans', sans-serif; font-weight:700; color:#FFF; text-transform:uppercase; font-size:16px; } .heading_footer span { display:block; background-image: url(http://webenlance.in/bootsnipp/images/display.png); background-repeat: no-repeat; background-position: left bottom; padding-bottom: 8px; line-height: 22px; } .footerul { list-style-type:none; float:left; margin-left:0px; padding-left:0px; margin-top:15px; font-family: 'Lato', sans-serif; } .footerul li a { color:#c9c9c9; font-size:13px; line-height:20px; font-family: 'Lato', sans-serif; font-weight: 400; } .footerul p { color:#c9c9c9; font-size:13px; } .footerul p a { color:#fff !important; font-weight:700 !important; } .copyright { width:100%; float:left; min-height:40px; background-color:#FFF; padding-top:12px; text-align:center; } @media (max-width:768px) { /*footer*/ .footer_top { background-color:#FFF !important; background-image:none; } .tabmob { background-image:none; } .bagcgrey { background-image:none; background-color:#f7f7f7; padding:25px 15px 15px 15px; } .methodh4 { width:100%; text-align:center; margin-top:0px; } .img-responsive2 { margin-top: 5px; margin-bottom:10px; width:90%; display:table; margin-left:5%; margin-right:5%; } .bagcblue { background-image:none; padding:10px !important; } .footerul { float:none; width:100%; } } .socmatpbo { margin-top:25px; float:left !important; font-size:20px; margin-top:60px; } .social li { float: left; } .social li a i { background-color: #eeeeee; border-radius: 50%; height: 37px; line-height: 30px; margin: 0 8px; padding: 5px; text-align: center; width: 37px; } .social { float: right; list-style-type: none; margin: 5px 0 0; padding: 0; } .socmatpbo { float: left !important; font-size: 20px; margin-top: 60px; }

Related: See More


Questions / Comments: