E-Commerce menu footer - Web Designer Wall

<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>  <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="author" content="sumit kumar"> <title>Trial</title> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <link href="css/font-awesome.css" rel="stylesheet" type="text/css"> <link href="css/style.css" rel="stylesheet" type="text/css"> <script src="https://use.fontawesome.com/07b0ce5d10.js"></script> </head> <body> <nav class="top-bar"> <div class="container"> <div class="row"> <div class="col-sm-4 hidden-xs"> <span class="nav-text"> <i class="fa fa-phone" aria-hidden="true"></i> +123 4567 8910 <i class="fa fa-envelope" aria-hidden="true"></i> [email protected]</span> </div> <div class="col-sm-4 text-center"> <a href="#" class="social"><i class="fa fa-facebook" aria-hidden="true"></i></a> <a href="#" class="social"><i class="fa fa-twitter" aria-hidden="true"></i></a> <a href="#" class="social"><i class="fa fa-instagram" aria-hidden="true"></i></a> <a href="#" class="social"><i class="fa fa-youtube-play" aria-hidden="true"></i></a> <a href="#" class="social"><i class="fa fa-google" aria-hidden="true"></i></a> <a href="#" class="social"><i class="fa fa-dribbble" aria-hidden="true"></i></a> </div> <div class="col-sm-4 text-right hidden-xs"> <ul class="tools"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-globe" aria-hidden="true"></i> Language<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Russian</a></li> <li><a href="#">French</a></li> <li><a href="#">Mandarin</a></li> <li><a href="#">Italian</a></li> <li><a href="#">Gorgean</a></li> </ul> </li> <li class="dropdown"> <a class="" href="#"><i class="fa fa-user" aria-hidden="true"></i> My Account</a> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-usd" aria-hidden="true"></i> Currency<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">USD</a></li> <li><a href="#">EUR</a></li> <li><a href="#">$</a></li> </ul> </li> </ul> </div> </div> </div> </nav>   <nav class="navbar navbar-inverse"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><img src="https://lh3.googleusercontent.com/-N4NB2F966TU/WM7V1KYusRI/AAAAAAAADtA/fPvGVNzOkCo7ZMqLI6pPITE9ZF7NONmawCJoC/w185-h40-p-rw/logo.png"></a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav navbar-left"> <li class=""><a href="#">Home</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">About <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Page 1-1</a></li> <li><a href="#">Page 1-2</a></li> <li><a href="#">Page 1-3</a></li> </ul> </li> <li><a href="#">services</a></li> <li><a href="#">gallery</a></li> <li><a href="#">blog</a></li> <li><a href="#">contact us</a></li> </ul> <form class="navbar-form navbar-right"> <div class="input-group"> <div class="input-group-btn"> <button class="btn btn-default-1" type="submit"> <i class="glyphicon glyphicon-search"></i> </button> </div> <input type="text" class="form-control" placeholder="Search"> </div> <span class="cart-heart hidden-sm hidden-xs"> <a href="#"><i class="fa fa-user" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-cart-plus" aria-hidden="true"></i></a> </span> <span class="cart-heart hidden-md hidden-lg"> <a href="#"><i class="fa fa-heart" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-cart-plus" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-user" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-globe" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-usd" aria-hidden="true"></i></a> </span> </form> </div> </div> </nav>  <div id="myCarousel" class="carousel slide" data-ride="carousel">  <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> </ol>  <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="http://diamondcreative.net/plus-v1.1/img/slider/slider_06.jpg" width="1366px" height="700px"> <div class="carousel-caption hidden-xs"> <h3>New Collection touch of Chania</h3> <p>The atmosphere in Chania has a touch<br> of Florence and Venice.</p> <button class="btn btn-danger">READ MORE</button> </div> </div> <div class="item"> <img src="http://diamondcreative.net/plus-v1.1/img/slider/slider_03.jpg" width="1366px" height="700px"> <div class="carousel-caption hidden-xs"> <h3>New Collection touch of Chania</h3> <p>The atmosphere in Chania has a touch<br> of Florence and Venice.</p> <button class="btn btn-danger">READ MORE</button> </div> </div> </div>  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>  <footer class="footer"> <div class="container"> <div class="row"> <div class="col-sm-3"> <h4 class="title">Sumi</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin suscipit, libero a molestie consectetur, sapien elit lacinia mi.</p> <ul class="social-icon"> <a href="#" class="social"><i class="fa fa-facebook" aria-hidden="true"></i></a> <a href="#" class="social"><i class="fa fa-twitter" aria-hidden="true"></i></a> <a href="#" class="social"><i class="fa fa-instagram" aria-hidden="true"></i></a> <a href="#" class="social"><i class="fa fa-youtube-play" aria-hidden="true"></i></a> <a href="#" class="social"><i class="fa fa-google" aria-hidden="true"></i></a> <a href="#" class="social"><i class="fa fa-dribbble" aria-hidden="true"></i></a> </ul> </div> <div class="col-sm-3"> <h4 class="title">My Account</h4> <span class="acount-icon"> <a href="#"><i class="fa fa-heart" aria-hidden="true"></i> Wish List</a> <a href="#"><i class="fa fa-cart-plus" aria-hidden="true"></i> Cart</a> <a href="#"><i class="fa fa-user" aria-hidden="true"></i> Profile</a> <a href="#"><i class="fa fa-globe" aria-hidden="true"></i> Language</a> </span> </div> <div class="col-sm-3"> <h4 class="title">Category</h4> <div class="category"> <a href="#">men</a> <a href="#">women</a> <a href="#">boy</a> <a href="#">girl</a> <a href="#">bag</a> <a href="#">teshart</a> <a href="#">top</a> <a href="#">shos</a> <a href="#">glass</a> <a href="#">kit</a> <a href="#">baby dress</a> <a href="#">kurti</a> </div> </div> <div class="col-sm-3"> <h4 class="title">Payment Methods</h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <ul class="payment"> <li><a href="#"><i class="fa fa-cc-amex" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-credit-card" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-paypal" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-cc-visa" aria-hidden="true"></i></a></li> </ul> </div> </div> <hr> <div class="row text-center"> © 2017. Made with by sumi9xm.</div> </div> </footer> <script src="js/jquery-3.1.1.js"></script> <script src="js/bootstrap.js"></script> </body> </html>

/*////////////////TOP NAV BAR////////////////*/ .top-bar{background-color:black;min-height:40px;padding-top:5px;padding-bottom: 0px;} .top-bar .nav-text { color: #00BCD4; display: block; margin-top: 5px; } .top-bar .social{color:#FFF;display:inline-block;padding:5px;text-decoration: none;} .top-bar .tools{margin:0px;padding:0px;list-style-type:none;} .top-bar .tools li{list-style-type: none;display:inline-block;} .top-bar .tools li a { display: block; text-decoration: none; color: #fff; padding-left: 15px; padding-top: 5px; } .navbar-brand { /* float: left; */ height: 50px; padding: 3px 15px; font-size: 18px; line-height: 20px; position: absolute; z-index: 11; margin: 0 auto; right: 42%; } .navbar-inverse { background-color: #009688; border-color: #080808; } .navbar { position: relative; min-height: 50px; margin-bottom: 0px; border: 0px solid #000;; border-radius:0px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .navbar-inverse .navbar-nav > li > a { color: #fff; } .nav > li > a { position: relative; display: block; padding: 15px 11px;} .form-control{ border-color:#fff; border-radius:0px; background-color:transparent; } .btn-default-1 { color: #fff; background-color: transparent; border-color: #fff; border-radius: 0px; } .cart-heart a{display:inline-block;color:#fff;font-size:20px;padding:5px;} /*CROUSELE START///////////////////////////*/ .carousel-caption { position: absolute; right: 15%; bottom: 35px; width: 60%; left: 15%; z-index: 10; padding-top: 20px; padding-bottom: 20px; color: #fff; text-align: left; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); } @media screen and (min-width:768px){ .carousel-caption h3{font-size: 52px;} .carousel-caption p{font-size: 32px;} .carousel-caption{padding-bottom:160px;} } /*FOOTER START///////////////////*/ .footer { padding: 50px 0 20px 0; background-color: #35404f; color: #878c94; } .footer .title{text-align: left;color:#fff;font-size:25px;} .footer .social-icon{padding:0px;margin:0px;} .footer .social-icon a{display:inline-block;color:#fff;font-size:25px;padding:5px;} .footer .acount-icon a{display:block;color:#fff;font-size:18px;padding:5px;text-decoration:none;} .footer .acount-icon .fa{margin-right:25px;} .footer .category a { text-decoration: none; color: #fff; display: inline-block; padding: 5px 20px; margin: 1px; border-radius:4px; margin-top: 6px; background-color: black; border: solid 1px #fff; } .footer .payment{margin:0px;padding:0px;list-style-type:none} .footer .payment li{list-style-type:none} .footer .payment li a { text-decoration: none; display: inline-block; color: #fff; float: left; font-size: 25px; padding: 10px 10px; }

Close

E-Commerce menu footer

This is an example of the implementation of a top navigation bar and a footer section for a website with CSS and HTML. Bootstrap library and bootstrap style sheets have been imported to the code with the use of its grid view elements to separate and organize the displaying sections. All the icons that are displayed in the example are used with the integration of the font awesome icons. The basic styles such as background color, buttons, and labels have been used with pure CSS implementation. The background color of the top bar is set as black and in order to place the social media icons in a row, the display style is set as inline-block, font color as white and the font size as 25px.