"basic structure web site by itpixelz"
Bootstrap 3.3.0 Snippet by hdpixelz

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="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Title </title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="icons/css/font-awesome.min.css"> <link rel="stylesheet" href="style.css"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <header> <div class="top-bar"> <div class="container"> <div class="row"> <div class="col-md-6 col-sm-6"> <ul class="social"> <li><a href="#" target="_blank"><i class="fa fa-facebook-square" aria-hidden="true"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-twitter-square" aria-hidden="true"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-google-plus-square" aria-hidden="true"></i></a></li> </ul> </div> <div class="col-md-6 col-sm-6"> <ul class="contact"> <li><i class="fa fa-phone-square" aria-hidden="true"></i></li> <li><a href="tel:+9212345679890">1(234) 567-9890</a></li> </ul> </div> </div> </div> </div> <nav class="navbar navbar-default navbar-static-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><img src="https://image.ibb.co/jVKUx5/logo.png" /></a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li class="dropdown-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> </div><!--/.nav-collapse --> </div> </nav> <div class="slider"> <img src="https://preview.ibb.co/kD3NH5/banner.jpg" /> </div> </header> <section> </section> <footer> <div class="fsec"> <div class="container"> <div class="row"> <div class="col-sm-3 col-md-3"> <h3>Menu</h3> <ul id="menu-footer-1" class="flist"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Detox</a></li> <li><a href="#">Shop</a></li> <li><a href="#">Style</a></li> <li><a href="#">Travel</a></li> <li><a href="#">FAQ</a></li> </ul> </div> <div class="col-sm-3 col-md-3"> <h3>CATEGORIES</h3> <ul id="menu-footer-2" class="flist"> <li><a href="#">Detox</a></li> <li><a href="#">Fitness</a></li> <li><a href="#">Shop</a></li> <li><a href="#">Style</a></li> <li><a href="#">Travel</a></li> <li><a href="#">Blog</a></li> </ul> </div> <div class="col-sm-3 col-md-3"> <h3>MORE INFO</h3> <ul class="flist"> <li><a href="#">TERMS & CONDITONS</a></li> <li><a href="#">CONTACT US</a></li> </ul> <h3>SECURE PAYMENT</h3> <ul class="payment-icon"> <li><a href="#"><i class="fa fa-cc-visa" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-cc-paypal" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-cc-mastercard" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-cc-amex" aria-hidden="true"></i></a></li> </ul> </div> <div class="col-sm-3 col-md-3"> <h3>CONTACT US</h3> <ul class="flist"> <li>1234 Loremipsum Road, <br> Gldummy D04 00GR</li> <li><a href="tel:+9212345679890">1(234) 567-9890</a></li> <li><a href="mailto:info@omorewa">info@omorewa</a></li> </ul> </div> </div> </div> </div> <div class="copy-right"> <div class="container"> <div class="row"> <div class="col-sm-12 col-md-12 text-center"> <p>© Copyright 2017 - xyz - All Rights Reserved</p> </div> </div> </div> </div> </footer> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> <script src="https://use.fontawesome.com/331126fe5f.js"></script> </body> </html>
img{ max-width: 100%; } .top-bar { background: #000; } ul.social { list-style: none; padding: 0px; margin: 0px; } ul.social li { display: inline-block; } ul.contact { text-align: right; padding: 0px; margin: 0px; } ul.contact li { display: inline-block; } .navbar .navbar-nav { display: inline-block; float: none; } .navbar .navbar-collapse { text-align: center; } .navbar-header { position: absolute; left: 50%; transform: translateX(-50%); top: -110px; } .navbar-default { margin-top: 130px; margin-bottom: 0px; height: 50px; background: transparent; border: none; } a.navbar-brand img { width: 70px; } .top-bar ul li a { color: #989898; line-height: 30px; font-size: 1rem; } ul.social li a { font-size: 20px; } ul.contact li .fa { font-size: 16px; color: #989898; position: relative; top: 3px; } .navbar-default .navbar-nav>li>a { font-family: 'EB Garamond', serif; color: #000; font-weight: 400; letter-spacing: .18rem; text-transform: uppercase; font-size: 1rem; } footer .fsec { background: black; padding-top: 50px; padding-bottom: 50px; color: #989898; } footer .fsec h3 { margin-bottom: 15px; font-family: 'EB Garamond', serif; font-size: 1rem; line-height: 3em; text-transform: uppercase; font-weight: bold; } ul.flist { list-style: none; padding: 0px; } ul.flist li a { color: #989898; line-height: 2rem; text-transform: uppercase; font-size: .8rem; } ul.flist li:before { content: "\f105"; font-family: fontAwesome; margin-right: 5px; font-size: .8rem; } ul.payment-icon { list-style: none; padding: 0; } ul.payment-icon li { display: inline; font-size: 18px; } ul.payment-icon li a { color: #c1c1c1; } .copy-right p { margin: 0px; line-height: 50px; font-size: .8rem; } .copy-right { background: #000000; color: #989898; } ul.flist li { font-size: .8rem; }

Related: See More

Material Kit PRO React
Basic Register Page

Questions / Comments: