<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="black"> <div class="container" id="conatact"> <div class="row"> <div class="col-lg-12" style="text-align: center; padding-top:100px; padding-bottom: 50px; color: #fff;"> <h1 style="font-size: 60px;" >Contact Us</h1> <hr> </div> </div> <div class="row"> <div class="col-md-6 footerleft"> <div class="col-md-6" id="actionButtons"> <button type="button" id="1" class="btn btn-primary tr-btn-primary-inverse">Project</button> <button id="2" type="button" class="btn btn-primary tr-btn-primary-inverse">Feature</button> <button type="button" id="3" class="btn btn-primary tr-btn-primary-inverse">Partner</button> </div> <div class="col-md-6" id="fs-content"> <div id="projects-footer"> <ul> <li class="tr-footer-item1">Project 1</li> <li class="tr-footer-item1">Project 2</li> <li class="tr-footer-item1">Project 3</li> <li class="tr-footer-item1">Project 4</li> <li class="tr-footer-item1">Project 5</li> <li class="tr-footer-item1">Project 6</li> </ul> </div> <div id="features-footer" style="display: none;"> <ul> <li class="tr-footer-item1">Feature 1</li> <li class="tr-footer-item1">Feature 2</li> <li class="tr-footer-item1">Feature 3</li> </ul> </div> <div id="partners-footer" style="display: none;"> <ul> <li class="tr-footer-item1">Partner 1</li> <li class="tr-footer-item1">Partner 2</li> <li class="tr-footer-item1">Partner 3</li> </ul> </div> </div> <div class="col-md-12 fs-contact-us"> <span style="color: #fff; font-size: 20px;">Our location</span> <iframe height="150" style="width: 100%;" src="googleMap.html"></iframe> </div> <div class="col-md-12"> <ul class="contact_details"> <li class="bb" ><i class="fa fa-home"> Address: 81, Guruchariq street, Almazar district 100069 Tashkent</i></li> <li class="bb" ><i class="fa fa-phone"> Phone: (+998 77) 777-77-77</i></li> <li class="bb" ><i class="fa fa-envelope-o"> E-mail: info@fizmasoft.uz</i></li> </ul> </div> </div> <div class="col-md-6 footerright "> <form class="form-group"> <span style="color: #fff; font-size: 20px;">Your name</span> <input type="text" class="form-control" placeholder="Your name"> <span style="color: #fff; font-size: 20px;">Phone number</span> <input type="text" class="form-control" placeholder="Your phone number"> <span style="color: #fff; font-size: 20px;">E-mail address</span> <input type="text" class="form-control" placeholder="Your phone number"> <span style="color: #fff; font-size: 20px;">Aim of contact</span> <textarea class="form-control" style="height: 200px;"> </textarea> <button type="button" class="btn btn-primary tr-btn-primary-inverse1 pull-right " style="margin-top: 15px; "><i class="fa fa-send"></i> Send</button> </form> </div> </div> </div> </div>

/*For black backgraound*/ .black{ background-color: #2d2d30; } /*Navbar style start*/ .navbar { margin-bottom: 0; border: 0; font-size: 13px !important; letter-spacing: 2px; opacity: 0.9; } .tr-navbar { background-color: #2d2d30 !important; } /*Navbar style end*/ /*tr-btn-primary*/ .tr-btn-primary{ background: #2d2d30 ; } .tr-btn-primary:hover{ background: white ; color: #2d2d30 ; } .tr-btn-primary-inverse{ background: #fff; color: #2d2d30; border:1px solid; border-color: #2d2d30; font-size: 20px; border-radius: 5px; width: 100%; margin: 5px; } .tr-btn-primary-inverse1{ background: #fff; color: #2d2d30; border:1px solid; border-color: #2d2d30; font-size: 20px; border-radius: 5px; } .tr-btn-primary-inverse1:hover{ background: #2d2d30; color: white; } .tr-btn-primary-inverse:hover{ background: #2d2d30; color: white; } /*end tr-btn-primary*/ /*Project features*/ figure.snip0078 { font-family: 'Raleway', Arial, sans-serif; color: #fff; position: relative; float: left; margin: 10px 1%; min-width: 220px; max-width: 310px; max-height: 310px; width: 100%; text-align: center; } figure.snip0078 * { -webkit-box-sizing: padding-box; box-sizing: padding-box; } figure.snip0078 img { opacity: 1; max-width: 100%; border: 10px solid #000000; -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-transform: scale(0.85); transform: scale(0.85); -webkit-transform-origin: 0 0; transform-origin: 0 0; } figure.snip0078 figcaption { bottom: 0; width: 60%; right: 0; position: absolute; background: #000000; padding: 20px; -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-transform: translateY(0); transform: translateY(0); box-shadow: 0 0px 10px -10px #000000; } figure.snip0078 figcaption h2, figure.snip0078 figcaption p { margin: 0; color: #ffffff; } figure.snip0078 figcaption h2 { font-weight: 400; text-transform: uppercase; } figure.snip0078 figcaption h2 span { font-weight: 800; } figure.snip0078 figcaption p { font-size: 0.9em; font-weight: 500; opacity: 0.65; } figure.snip0078 a { left: 0; right: 0; top: 0; bottom: 0; position: absolute; z-index: 1; } figure.snip0078.yellow figcaption { background: #2d2d30; } figure.snip0078.yellow img { border: 10px solid #2d2d30; } figure.snip0078:hover figcaption, figure.snip0078.hover figcaption { -webkit-transform: translateY(-8px); transform: translateY(-8px); box-shadow: 0 15px 15px -15px #000000; opacity: 0.95; } figure.snip0078:hover.yellow img, figure.snip0078.hover.yellow img { border: 10px solid #fff; } .project-link{ color: #2d2d30; } a.project-link:hover{ color: #2d2d30; } .vertical-line{ border-left: solid #2d2d30; } /*Project features end*/ /*Footer start*/ .footerleft{ border-right: 2px solid; } .tr-footer-item1{ font-size: 20px; color: #fff; list-style: none; display: inline-block; } .bb{ color: #fff; list-style: none; } .contact_details{ margin-top: 25px; font-size: 20px; padding-left: 10px; } .footerright{ margin-bottom: 20px; } /*Footer end*/

$(document).ready(function(){ $("#actionButtons button").on("click", function(event) { $("#fs-content div").fadeOut(0.01).eq(parseInt($(event.currentTarget).attr("id"))-1).fadeIn("slow"); }); });