"Touranks Trmplate"
Bootstrap 3.3.0 Snippet by wissemzaafrani

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html> <html lang="fr"> <head> <title>Hadhoud Tunisia</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <style> .navbar-form input, .form-inline input { width:auto; } body { padding-top:50px; color:#646464; background-color:#efefef; } h1,h2,h3,.highlight,.navbar a,#masthead h4 { font-family:'Oswald',arial narrow,sans-serif; } footer { margin-top:40px; padding-top:40px; padding-bottom:40px; background-color:#cecece; } #masthead { min-height:199px; background-color:#000044; color:#aaaacc; } #masthead h1 { font-size: 55px; line-height: 1; color:#fefeff; margin-top:50px; } #masthead .well { margin-top:31px; background-color:#111166; border-color:#000022; color:#efefff; min-height:127px; } #topPanel { padding-top:0px; padding-left:22px; padding-right:22px; } #topPanel .panel-body { padding-top:0px; } .navbar.affix { position:fixed; top:0; width:100%; } .top-spacer { background-color:#ffffff; height:40px; } a,a:hover { color:#223344; text-decoration:none; } .icon-bar { background-color:#fff; } @media screen and (min-width: 768px) { #masthead h1 { font-size: 80px; } } .navbar-bright { background-color:#337ab7; color:#fff; margin-bottom: 0; border-width: 0; } .navbar-bright a, .navbar-bright .navbar-brand, #masthead h4 { color:#ccccdd; font-size:14px; text-transform: uppercase; letter-spacing:.08em; } .navbar-bright li > a:hover { background-color:#17c8e6; } .dropdown-menu { min-width: 250px; } .caret { color:#fff; } .navbar-toggle { color:#fff; border-width:0; } .navbar-toggle:hover { background-color:#fff; } body {margin:0;} .topnav { overflow: hidden; background-color: #365899 } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .topnav a:hover { background-color: #ddd; color: black; } .topnav .icon { display: none; } @media screen and (max-width: 600px) { .topnav a:not(:first-child) {display: none;} .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 600px) { .topnav.responsive {position: relative;} .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } } .footer{ color:#fff;background:#337ab7;padding: 10px; } .fa { padding: 20px; font-size: 20px; width: 60px; text-align: center; text-decoration: none; margin: 5px 2px; border-radius: 50%; } .fa:hover { opacity: 0.7; } .fa-facebook { background: #3B5998; color: white; } .fa-twitter { background: #55ACEE; color: white; } .fa-google { background: #dd4b39; color: white; } </style> </head> <body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="50"> <nav class="navbar navbar-bright navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Touranks-Tunisia</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Rechercher des annonces</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Aide<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Posé annonces</a></li> <li><a href="#">Page 1-2</a></li> <li><a href="#">Page 1-3</a></li> </ul> </li> <li><a href="#">Apropos</a></li> <li><a href="#">Blog</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> </ul> </div> </div> </nav> <div class="jumbotron"> <form class="form-inline"> <center> <input type="text" class="form-control" size="80" placeholder="Rechercher des annonces"> <button type="button" class="btn btn-danger">Recherche</button> </center> </form> </div> <br> <div class="container"> <div class="row"> <div class="col-sm-4"> <div class="panel panel-primary"> <div class="panel-heading">Product</div> <div class="panel-body"><img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"></div> <div class="panel-footer">Buy 50 mobiles and get a gift card</div> </div> </div> <div class="col-sm-4"> <div class="panel panel-primary"> <div class="panel-heading">Product</div> <div class="panel-body"><img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"></div> <div class="panel-footer">Buy 50 mobiles and get a gift card</div> </div> </div> <div class="col-sm-4"> <div class="panel panel-primary"> <div class="panel-heading">Product</div> <div class="panel-body"><img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"></div> <div class="panel-footer">Buy 50 mobiles and get a gift card</div> </div> </div> </div> </div><br><br> <div class="container"> <div class="row"> <div class="col-sm-4"> <div class="panel panel-primary"> <div class="panel-heading">Product</div> <div class="panel-body"><img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"></div> <div class="panel-footer">Buy 50 mobiles and get a gift card</div> </div> </div> <div class="col-sm-4"> <div class="panel panel-primary"> <div class="panel-heading">Product</div> <div class="panel-body"><img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"></div> <div class="panel-footer">Buy 50 mobiles and get a gift card</div> </div> </div> <div class="col-sm-4"> <div class="panel panel-primary"> <div class="panel-heading">Product</div> <div class="panel-body"><img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"></div> <div class="panel-footer">Buy 50 mobiles and get a gift card</div> </div> </div> </div> </div><br> <div class="container"> <div class="row"> <div class="col-sm-4"> <div class="panel panel-primary"> <div class="panel-heading">Product</div> <div class="panel-body"><img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"></div> <div class="panel-footer">Buy 50 mobiles and get a gift card</div> </div> </div> <div class="col-sm-4"> <div class="panel panel-primary"> <div class="panel-heading">Product</div> <div class="panel-body"><img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"></div> <div class="panel-footer">Buy 50 mobiles and get a gift card</div> </div> </div> <div class="col-sm-4"> <div class="panel panel-primary"> <div class="panel-heading">Product</div> <div class="panel-body"><img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image"></div> <div class="panel-footer">Buy 50 mobiles and get a gift card</div> </div> </div> </div> </div><br> <!-- Footer --> <footer class="text-center"> <a class="up-arrow" href="#myPage" data-toggle="tooltip" title="TO TOP"> <span class="glyphicon glyphicon-chevron-up"></span> </a><br><br> <p>Coded By :Wissem Zaafrani Mahdia Kerker </p> <br> <a href="#" class="fa fa-facebook"></a> <a href="#" class="fa fa-twitter"></a> <a href="#" class="fa fa-google"></a> </footer> <!--/ Footer --> <!-- Script for up Footer --> <script> $(document).ready(function(){ // Initialize Tooltip $('[data-toggle="tooltip"]').tooltip(); // Add smooth scrolling to all links in navbar + footer link $(".navbar a, footer a[href='#myPage']").on('click', function(event) { // Make sure this.hash has a value before overriding default behavior if (this.hash !== "") { // Prevent default anchor click behavior event.preventDefault(); // Store hash var hash = this.hash; // Using jQuery's animate() method to add smooth page scroll // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area $('html, body').animate({ scrollTop: $(hash).offset().top }, 900, function(){ // Add hash (#) to URL when done scrolling (default click behavior) window.location.hash = hash; }); } // End if }); }) </script> </body> </html>

Related: See More

Material Kit PRO BS3

Questions / Comments: