"footer by john niro yumang"
Bootstrap 3.3.0 Snippet by ashutosh123

<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 ----------> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <!----------------------LOCAL BOOTSTRAP FOLDER---------------------> <html> <div class="container-fluid" id="fullwidthcon"> <div class="container"> <h2 style="color:white;"> <span class="glyphicon glyphicon-flash"></span> Company Information</h2> <div class="container"> <div class="row"> <hr> <div class="col-xs-2"> <ul class="list-unstyled"> <li><h4>PRODUCT</h4><li> <li><a href="#" id="footercompanyinfo">Link Here</a></li> <li><a href="#" id="footercompanyinfo">Link Here</a></li> <li><a href="#" id="footercompanyinfo">Link Here</a></li> <li><a href="#" id="footercompanyinfo">Link Here</a></li> <li><a href="#" id="footercompanyinfo">Link Here</a></li> </ul> </div> <div class="col-xs-2"> <ul class="list-unstyled"> <li><h4>TOOLS</h4><li> <li><a href="#" id="footercompanyinfo">Link Here</a></li> <li><a href="#" id="footercompanyinfo">Link Here</a></li> <li><a href="#" id="footercompanyinfo">Link Here</a></li> <li><a href="#" id="footercompanyinfo">Link Here</a></li> </ul> </div> <div class="col-xs-2"> <ul class="list-unstyled"> <li><h4>HELP</h4><li> <li><a href="#" id="footercompanyinfo">Link Here</a></li> <li><a href="#" id="footercompanyinfo">Link Here</a></li> <li><a href="#" id="footercompanyinfo">Link Here</a></li> <li><a href="#" id="footercompanyinfo">Link Here</a></li> </ul> </div> <div class="col-xs-2"> <ul class="list-unstyled"> <li><h4>FLATFORMS</h4><li> <li><a href="#" id="footercompanyinfo">Link Here</a></li> <li><a href="#" id="footercompanyinfo">Link Here</a></li> <li><a href="#" id="footercompanyinfo">Link Here</a></li> <li><a href="#" id="footercompanyinfo">Link Here</a></li> </ul> </div> <div class="col-xs-2"> <ul class="list-unstyled"> <li><h4>PRODUCT</h4><li> <li><a href="#" id="footercompanyinfo">Link Here</a></li> <li><a href="#" id="footercompanyinfo">Link Here</a></li> <li><a href="#" id="footercompanyinfo">Link Here</a></li> <li><a href="#" id="footercompanyinfo">Link Here</a></li> </ul> </div> <div class="col-xs-2"> <ul class="list-unstyled"> <li><h4>PRODUCT</h4><li> <li><a href="#" id="footercompanyinfo">Link Here</a></li> <li><a href="#" id="footercompanyinfo">Link Here</a></li> <li><a href="#" id="footercompanyinfo">Link Here</a></li> <li><a href="#" id="footercompanyinfo">Link Here</a></li> </ul> </div> </div> <br><br><br> <div class="row"> <div class="col-xs-8"> <ul class="list-unstyled list-inline pull-left"> <li><p class="text-danger">Related Articles</p></li> <li><a href="#" id="footercompanyinfo">Foundation</a></li> <li><a href="#" id="footercompanyinfo">Event</a></li> <li><a href="#" id="footercompanyinfo">Live Tours</a></li> </ul> </div> </div> </div> <hr> <ol class="breadcrumb" style="background-color:transparent;"> <li><a href="#" id="footercompanyinfolower">About</a></li> <li><a href="#" id="footercompanyinfolower">Blog</a></li> <li><a href="#" id="footercompanyinfolower">Help</a></li> <li><a href="#" id="footercompanyinfolower">Job</a></li> <li><a href="#" id="footercompanyinfolower">Company Terms/Privacy</a></li> <li><a href="#" id="footercompanyinfolower">Advertise</a></li> <li><a href="#" id="footercompanyinfolower">Bussiness</a></li> <li><a href="#" id="footercompanyinfolower">Mobile</a></li> <li><a href="#" id="footercompanyinfolower">Messanger</a></li> <li><a href="#" id="footercompanyinfolower">Directories</a></li> <li><a href="#" id="footercompanyinfolower">Developers</a></li> <li><a href="#" id="footercompanyinfolower">Cookies</a></li> <li><a href="#" style="color:Green;font-weight:bolder;">LEARN MORE</a></li> </ol> </div> <div class="container"> <div class="row"> <div class="col-lg-6"> <div class="well well-sm"> <form> <div class="row"> <div class="col-md-6"> <div class="form-group" > <label for="name"> Name</label> <input type="text" class="form-control" id="name" placeholder="Enter name" required="required" /> </div> <div class="form-group"> <label for="email"> Email Address</label> <div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span> </span> <input type="email" class="form-control" id="email" placeholder="Enter email" required="required" /></div> </div> <div class="form-group"> <label for="subject"> Subject</label> <select id="subject" name="subject" class="form-control" required="required"> <option value="na" selected="">Choose One:</option> <option value="service">General Customer Service</option> <option value="suggestions">Suggestions</option> <option value="product">Product Support</option> <option value="product">Product Support</option> <option value="product">Product Support</option> <option value="product">Product Support</option> <option value="product">Product Support</option> <option value="product">Product Support</option> <option value="product">Product Support</option> <option value="product">Product Support</option> <option value="product">Product Support</option> <option value="product">Product Support</option> <option value="product">Product Support</option> <option value="product">Product Support</option> <option value="product">Product Support</option> <option value="product">Product Support</option> <option value="product">Product Support</option> <option value="product">Product Support</option> <option value="product">Product Support</option> <option value="product">Product Support</option> <option value="product">Product Support</option> <option value="product">Product Support</option> <option value="product">Product Support</option> <option value="product">Product Support</option> <option value="product">Product Support</option> <option value="product">Product Support</option> <option value="product">Product Support</option> <option value="product">Product Support</option> <option value="product">Product Support</option> <option value="product">Product Support</option> <option value="product">Product Support</option> </select> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="name"> Message</label> <textarea name="message" id="message" class="form-control" rows="9" cols="25" required="required" placeholder="Message"></textarea> </div> </div> <div class="col-md-12"> <button type="submit" class="btn btn-primary pull-right" id="btnContactUs"> Send Message</button> </div> </div> </form> </div> </div> <div class="col-lg-6"> <ul> <h3>Related Article</h3> <a href=""> <span class="glyphicon glyphicon-asterisk"></span> Put more Link Here </a> <li><a href=""> Put more Link Here </a> </li> <li><a href=""> Put more Link Here </a> </li> <li><a href=""> Put more Link Here </a> </li> <li><a href=""> Put more Link Here </a> </li> <li><a href=""> Put more Link Here </a> </li> </ul> </div> <div class="col-md-6"> <div class="text-center"> <h4>Find us At : </h4> <!-- just add href= for your links, like this: --> <a href="http://facebook.com" class="btn btn-social-icon btn-facebook"> <i class="fa fa-facebook"></i></a> <a class="btn btn-social-icon btn-bitbucket"><i class="fa fa-bitbucket"></i></a> <a class="btn btn-social-icon btn-dropbox"><i class="fa fa-dropbox"></i></a> <a class="btn btn-social-icon btn-flickr"><i class="fa fa-flickr"></i></a> <a class="btn btn-social-icon btn-foursquare"><i class="fa fa-foursquare"></i></a> <a class="btn btn-social-icon btn-github"><i class="fa fa-github"></i></a> <a class="btn btn-social-icon btn-google-plus"><i class="fa fa-google-plus"></i></a> <a class="btn btn-social-icon btn-instagram"><i class="fa fa-instagram"></i></a> <a class="btn btn-social-icon btn-linkedin"><i class="fa fa-linkedin"></i></a> <a class="btn btn-social-icon btn-tumblr"><i class="fa fa-tumblr"></i></a> <a class="btn btn-social-icon btn-twitter"><i class="fa fa-twitter"></i></a> </div> </div> </div> </div> <a href="#" class="pull-right" style="color:white;">@2016 All Right Reserved</a> </div> <style> #footercompanyinfolower:hover {color:white;text-decoration:none;} #footercompanyinfolower {color:rgba(35, 205, 224, 0.48);} #fullwidthcon {background:linear-gradient(180deg, DARKBLUE 5%, #0A062D 20%); } h4 {color:white;font-family:Agency FB;} #footercompanyinfo {color:white;} #td {color:white;} ul {list-style-image: url('sqpurple.gif');color:white;} .btn-social{position:relative;padding-left:44px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.btn-social :first-child{position:absolute;left:0;top:0;bottom:0;width:32px;line-height:34px;font-size:1.6em;text-align:center;border-right:1px solid rgba(0,0,0,0.2)} .btn-social.btn-lg{padding-left:61px}.btn-social.btn-lg :first-child{line-height:45px;width:45px;font-size:1.8em} .btn-social.btn-sm{padding-left:38px}.btn-social.btn-sm :first-child{line-height:28px;width:28px;font-size:1.4em} .btn-social.btn-xs{padding-left:30px}.btn-social.btn-xs :first-child{line-height:20px;width:20px;font-size:1.2em} .btn-social-icon{position:relative;padding-left:44px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:34px;width:34px;padding:0}.btn-social-icon :first-child{position:absolute;left:0;top:0;bottom:0;width:32px;line-height:34px;font-size:1.6em;text-align:center;border-right:1px solid rgba(0,0,0,0.2)} .btn-social-icon.btn-lg{padding-left:61px}.btn-social-icon.btn-lg :first-child{line-height:45px;width:45px;font-size:1.8em} .btn-social-icon.btn-sm{padding-left:38px}.btn-social-icon.btn-sm :first-child{line-height:28px;width:28px;font-size:1.4em} .btn-social-icon.btn-xs{padding-left:30px}.btn-social-icon.btn-xs :first-child{line-height:20px;width:20px;font-size:1.2em} .btn-social-icon :first-child{border:none;text-align:center;width:100% !important} .btn-social-icon.btn-lg{height:45px;width:45px;padding-left:0;padding-right:0} .btn-social-icon.btn-sm{height:30px;width:30px;padding-left:0;padding-right:0} .btn-social-icon.btn-xs{height:22px;width:22px;padding-left:0;padding-right:0} .btn-bitbucket{color:#fff;background-color:#205081;border-color:rgba(0,0,0,0.2)}.btn-bitbucket:hover,.btn-bitbucket:focus,.btn-bitbucket:active,.btn-bitbucket.active,.open .dropdown-toggle.btn-bitbucket{color:#fff;background-color:#183c60;border-color:rgba(0,0,0,0.2)} .btn-bitbucket:active,.btn-bitbucket.active,.open .dropdown-toggle.btn-bitbucket{background-image:none} .btn-bitbucket.disabled,.btn-bitbucket[disabled],fieldset[disabled] .btn-bitbucket,.btn-bitbucket.disabled:hover,.btn-bitbucket[disabled]:hover,fieldset[disabled] .btn-bitbucket:hover,.btn-bitbucket.disabled:focus,.btn-bitbucket[disabled]:focus,fieldset[disabled] .btn-bitbucket:focus,.btn-bitbucket.disabled:active,.btn-bitbucket[disabled]:active,fieldset[disabled] .btn-bitbucket:active,.btn-bitbucket.disabled.active,.btn-bitbucket[disabled].active,fieldset[disabled] .btn-bitbucket.active{background-color:#205081;border-color:rgba(0,0,0,0.2)} .btn-dropbox{color:#fff;background-color:#1087dd;border-color:rgba(0,0,0,0.2)}.btn-dropbox:hover,.btn-dropbox:focus,.btn-dropbox:active,.btn-dropbox.active,.open .dropdown-toggle.btn-dropbox{color:#fff;background-color:#0d70b7;border-color:rgba(0,0,0,0.2)} .btn-dropbox:active,.btn-dropbox.active,.open .dropdown-toggle.btn-dropbox{background-image:none} .btn-dropbox.disabled,.btn-dropbox[disabled],fieldset[disabled] .btn-dropbox,.btn-dropbox.disabled:hover,.btn-dropbox[disabled]:hover,fieldset[disabled] .btn-dropbox:hover,.btn-dropbox.disabled:focus,.btn-dropbox[disabled]:focus,fieldset[disabled] .btn-dropbox:focus,.btn-dropbox.disabled:active,.btn-dropbox[disabled]:active,fieldset[disabled] .btn-dropbox:active,.btn-dropbox.disabled.active,.btn-dropbox[disabled].active,fieldset[disabled] .btn-dropbox.active{background-color:#1087dd;border-color:rgba(0,0,0,0.2)} .btn-facebook{color:#fff;background-color:#3b5998;border-color:rgba(0,0,0,0.2)}.btn-facebook:hover,.btn-facebook:focus,.btn-facebook:active,.btn-facebook.active,.open .dropdown-toggle.btn-facebook{color:#fff;background-color:#30487b;border-color:rgba(0,0,0,0.2)} .btn-facebook:active,.btn-facebook.active,.open .dropdown-toggle.btn-facebook{background-image:none} .btn-facebook.disabled,.btn-facebook[disabled],fieldset[disabled] .btn-facebook,.btn-facebook.disabled:hover,.btn-facebook[disabled]:hover,fieldset[disabled] .btn-facebook:hover,.btn-facebook.disabled:focus,.btn-facebook[disabled]:focus,fieldset[disabled] .btn-facebook:focus,.btn-facebook.disabled:active,.btn-facebook[disabled]:active,fieldset[disabled] .btn-facebook:active,.btn-facebook.disabled.active,.btn-facebook[disabled].active,fieldset[disabled] .btn-facebook.active{background-color:#3b5998;border-color:rgba(0,0,0,0.2)} .btn-flickr{color:#fff;background-color:#ff0084;border-color:rgba(0,0,0,0.2)}.btn-flickr:hover,.btn-flickr:focus,.btn-flickr:active,.btn-flickr.active,.open .dropdown-toggle.btn-flickr{color:#fff;background-color:#d6006f;border-color:rgba(0,0,0,0.2)} .btn-flickr:active,.btn-flickr.active,.open .dropdown-toggle.btn-flickr{background-image:none} .btn-flickr.disabled,.btn-flickr[disabled],fieldset[disabled] .btn-flickr,.btn-flickr.disabled:hover,.btn-flickr[disabled]:hover,fieldset[disabled] .btn-flickr:hover,.btn-flickr.disabled:focus,.btn-flickr[disabled]:focus,fieldset[disabled] .btn-flickr:focus,.btn-flickr.disabled:active,.btn-flickr[disabled]:active,fieldset[disabled] .btn-flickr:active,.btn-flickr.disabled.active,.btn-flickr[disabled].active,fieldset[disabled] .btn-flickr.active{background-color:#ff0084;border-color:rgba(0,0,0,0.2)} .btn-foursquare{color:#fff;background-color:#0072b1;border-color:rgba(0,0,0,0.2)}.btn-foursquare:hover,.btn-foursquare:focus,.btn-foursquare:active,.btn-foursquare.active,.open .dropdown-toggle.btn-foursquare{color:#fff;background-color:#005888;border-color:rgba(0,0,0,0.2)} .btn-foursquare:active,.btn-foursquare.active,.open .dropdown-toggle.btn-foursquare{background-image:none} .btn-foursquare.disabled,.btn-foursquare[disabled],fieldset[disabled] .btn-foursquare,.btn-foursquare.disabled:hover,.btn-foursquare[disabled]:hover,fieldset[disabled] .btn-foursquare:hover,.btn-foursquare.disabled:focus,.btn-foursquare[disabled]:focus,fieldset[disabled] .btn-foursquare:focus,.btn-foursquare.disabled:active,.btn-foursquare[disabled]:active,fieldset[disabled] .btn-foursquare:active,.btn-foursquare.disabled.active,.btn-foursquare[disabled].active,fieldset[disabled] .btn-foursquare.active{background-color:#0072b1;border-color:rgba(0,0,0,0.2)} .btn-github{color:#fff;background-color:#444;border-color:rgba(0,0,0,0.2)}.btn-github:hover,.btn-github:focus,.btn-github:active,.btn-github.active,.open .dropdown-toggle.btn-github{color:#fff;background-color:#303030;border-color:rgba(0,0,0,0.2)} .btn-github:active,.btn-github.active,.open .dropdown-toggle.btn-github{background-image:none} .btn-github.disabled,.btn-github[disabled],fieldset[disabled] .btn-github,.btn-github.disabled:hover,.btn-github[disabled]:hover,fieldset[disabled] .btn-github:hover,.btn-github.disabled:focus,.btn-github[disabled]:focus,fieldset[disabled] .btn-github:focus,.btn-github.disabled:active,.btn-github[disabled]:active,fieldset[disabled] .btn-github:active,.btn-github.disabled.active,.btn-github[disabled].active,fieldset[disabled] .btn-github.active{background-color:#444;border-color:rgba(0,0,0,0.2)} .btn-google-plus{color:#fff;background-color:#dd4b39;border-color:rgba(0,0,0,0.2)}.btn-google-plus:hover,.btn-google-plus:focus,.btn-google-plus:active,.btn-google-plus.active,.open .dropdown-toggle.btn-google-plus{color:#fff;background-color:#ca3523;border-color:rgba(0,0,0,0.2)} .btn-google-plus:active,.btn-google-plus.active,.open .dropdown-toggle.btn-google-plus{background-image:none} .btn-google-plus.disabled,.btn-google-plus[disabled],fieldset[disabled] .btn-google-plus,.btn-google-plus.disabled:hover,.btn-google-plus[disabled]:hover,fieldset[disabled] .btn-google-plus:hover,.btn-google-plus.disabled:focus,.btn-google-plus[disabled]:focus,fieldset[disabled] .btn-google-plus:focus,.btn-google-plus.disabled:active,.btn-google-plus[disabled]:active,fieldset[disabled] .btn-google-plus:active,.btn-google-plus.disabled.active,.btn-google-plus[disabled].active,fieldset[disabled] .btn-google-plus.active{background-color:#dd4b39;border-color:rgba(0,0,0,0.2)} .btn-instagram{color:#fff;background-color:#3f729b;border-color:rgba(0,0,0,0.2)}.btn-instagram:hover,.btn-instagram:focus,.btn-instagram:active,.btn-instagram.active,.open .dropdown-toggle.btn-instagram{color:#fff;background-color:#335d7e;border-color:rgba(0,0,0,0.2)} .btn-instagram:active,.btn-instagram.active,.open .dropdown-toggle.btn-instagram{background-image:none} .btn-instagram.disabled,.btn-instagram[disabled],fieldset[disabled] .btn-instagram,.btn-instagram.disabled:hover,.btn-instagram[disabled]:hover,fieldset[disabled] .btn-instagram:hover,.btn-instagram.disabled:focus,.btn-instagram[disabled]:focus,fieldset[disabled] .btn-instagram:focus,.btn-instagram.disabled:active,.btn-instagram[disabled]:active,fieldset[disabled] .btn-instagram:active,.btn-instagram.disabled.active,.btn-instagram[disabled].active,fieldset[disabled] .btn-instagram.active{background-color:#3f729b;border-color:rgba(0,0,0,0.2)} .btn-linkedin{color:#fff;background-color:#007bb6;border-color:rgba(0,0,0,0.2)}.btn-linkedin:hover,.btn-linkedin:focus,.btn-linkedin:active,.btn-linkedin.active,.open .dropdown-toggle.btn-linkedin{color:#fff;background-color:#005f8d;border-color:rgba(0,0,0,0.2)} .btn-linkedin:active,.btn-linkedin.active,.open .dropdown-toggle.btn-linkedin{background-image:none} .btn-linkedin.disabled,.btn-linkedin[disabled],fieldset[disabled] .btn-linkedin,.btn-linkedin.disabled:hover,.btn-linkedin[disabled]:hover,fieldset[disabled] .btn-linkedin:hover,.btn-linkedin.disabled:focus,.btn-linkedin[disabled]:focus,fieldset[disabled] .btn-linkedin:focus,.btn-linkedin.disabled:active,.btn-linkedin[disabled]:active,fieldset[disabled] .btn-linkedin:active,.btn-linkedin.disabled.active,.btn-linkedin[disabled].active,fieldset[disabled] .btn-linkedin.active{background-color:#007bb6;border-color:rgba(0,0,0,0.2)} .btn-tumblr{color:#fff;background-color:#2c4762;border-color:rgba(0,0,0,0.2)}.btn-tumblr:hover,.btn-tumblr:focus,.btn-tumblr:active,.btn-tumblr.active,.open .dropdown-toggle.btn-tumblr{color:#fff;background-color:#1f3346;border-color:rgba(0,0,0,0.2)} .btn-tumblr:active,.btn-tumblr.active,.open .dropdown-toggle.btn-tumblr{background-image:none} .btn-tumblr.disabled,.btn-tumblr[disabled],fieldset[disabled] .btn-tumblr,.btn-tumblr.disabled:hover,.btn-tumblr[disabled]:hover,fieldset[disabled] .btn-tumblr:hover,.btn-tumblr.disabled:focus,.btn-tumblr[disabled]:focus,fieldset[disabled] .btn-tumblr:focus,.btn-tumblr.disabled:active,.btn-tumblr[disabled]:active,fieldset[disabled] .btn-tumblr:active,.btn-tumblr.disabled.active,.btn-tumblr[disabled].active,fieldset[disabled] .btn-tumblr.active{background-color:#2c4762;border-color:rgba(0,0,0,0.2)} .btn-twitter{color:#fff;background-color:#55acee;border-color:rgba(0,0,0,0.2)}.btn-twitter:hover,.btn-twitter:focus,.btn-twitter:active,.btn-twitter.active,.open .dropdown-toggle.btn-twitter{color:#fff;background-color:#309aea;border-color:rgba(0,0,0,0.2)} .btn-twitter:active,.btn-twitter.active,.open .dropdown-toggle.btn-twitter{background-image:none} .btn-twitter.disabled,.btn-twitter[disabled],fieldset[disabled] .btn-twitter,.btn-twitter.disabled:hover,.btn-twitter[disabled]:hover,fieldset[disabled] .btn-twitter:hover,.btn-twitter.disabled:focus,.btn-twitter[disabled]:focus,fieldset[disabled] .btn-twitter:focus,.btn-twitter.disabled:active,.btn-twitter[disabled]:active,fieldset[disabled] .btn-twitter:active,.btn-twitter.disabled.active,.btn-twitter[disabled].active,fieldset[disabled] .btn-twitter.active{background-color:#55acee;border-color:rgba(0,0,0,0.2)} </style>

Related: See More


Questions / Comments: