"Admin Panel"
Foundation 6.3.1 Snippet by shafique45

Post to Facebook Tweet this

<link href="//cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <title>Admin Panel</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container-fluid main-container"> <div class="row"> <div class="col-md-3 main-side"> <div class="row"> <i class="fa fa-laptop" aria-hidden="true"></i> <h1 class="main-heading"> Xanra <br>Softtech</h1> </div> <div class="side-bar"> <ul> <li><a href=""><i class="fa fa-tachometer" aria-hidden="true"></i> Dashboard<i class="fa fa-angle-right arrow" aria-hidden="true"></i></a></li> <li><a href=""><i class="fa fa-sitemap" aria-hidden="true"></i> Items<i class="fa fa-angle-right arrow" aria-hidden="true"></i></a></li> <li><a href=""><i class="fa fa-shopping-bag" aria-hidden="true"></i> Sold<i class="fa fa-angle-right arrow" aria-hidden="true"></i></a></li> <li><a href=""><i class="fa fa-truck" aria-hidden="true"></i> Shipping<i class="fa fa-angle-right arrow" aria-hidden="true"></i></a></li> <li><a href=""><i class="fa fa-hand-spock-o" aria-hidden="true"></i> Remaining<i class="fa fa-angle-right arrow" aria-hidden="true"></i></a></li> <li><a href=""><i class="fa fa-first-order" aria-hidden="true"></i> Orders<i class="fa fa-angle-right arrow" aria-hidden="true"></i></a></li> <li><a href=""><i class="fa fa-users" aria-hidden="true"></i> Clients<i class="fa fa-angle-right arrow" aria-hidden="true"></i></a></li> <li><a href=""><i class="fa fa-linode" aria-hidden="true"></i> Brands<i class="fa fa-angle-right arrow" aria-hidden="true"></i></a></li> </ul> </div> </div> <div class="col-md-9"> <div class="row Xanra"> <div class="col-md-5 heading-main"> <h1>Xanra Softtech</h1> </div> <div class="col-md-2 bell"> <a><i class="fa fa-bell-o" aria-hidden="true"></i> <span class="badge badge-danger">4</span> </a> </div> <div class="col-md-5 search-bar"> <div class="md-form mt-0"> <input class="form-control" type="text" placeholder="Search" aria-label="Search"> </div> </div> </div> <div class="row brands"> <div class="col-md-12 heading-section"> <h1>Xanra Brands</h1> </div> <div class="icons col-md-12 text-center"> <i class="fa fa-bandcamp ma" aria-hidden="true"></i> <i class="fa fa-envelope-open ma" aria-hidden="true"></i> <i class="fa fa-meetup ma" aria-hidden="true"></i> <i class="fa fa-snowflake-o ma" aria-hidden="true"></i> <i class="fa fa-address-card-o ma" aria-hidden="true"></i> <i class="fa fa-address-card ma" aria-hidden="true"></i> <i class="fa fa-telegram ma" aria-hidden="true"></i> <i class="fa fa-calendar ma" aria-hidden="true"></i> </div> </div> <div class="row"> <table class="table"> <thead> <tr class="header"> <th scope="col">ID</th> <th scope="col">Item 1</th> <th scope="col">Item 2</th> <th scope="col">Item 3</th> <th scope="col">Item 4</th> <th scope="col"><i class="fa fa-tachometer" aria-hidden="true"></i></th> <th scope="col"><i class="fa fa-tachometer" aria-hidden="true"></i></th> <th scope="col"><i class="fa fa-tachometer" aria-hidden="true"></i></th> <th scope="col">Item 8</th> <th scope="col">Item 9</th> <th scope="col">Item 10</th> <th scope="col">Item 11</th> <th scope="col">Item 12</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">3</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> </tbody> </table> </div> </div> </div> </div> </body> </html>
*{ padding: 0px; margin: 0px; } .main-side{ background-color: blue; padding-top: 20px; width: 100%; min-height: 635px; } .main-heading{ color: #fff; font-size: 24px; } .side-bar ul{ list-style-type: none; } .side-bar ul li{ font-size: 18px; padding-top: 15px; padding-bottom: 15px; line-height: 18px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; } .side-bar ul li a{ text-decoration: none; color: #fff!important; } .side-bar ul li :hover{ border-top-right-radius: 20px; border-bottom-right-radius: 20px; } .side-bar ul li:hover a{ color: #333!important; } .arrow{ float: right; } .fa-laptop{ font-size: 60px; color: #fff; padding-left: 10px; padding-right: 10px; } .header{ background-color: #6161e4; color: #fff; } .bell{ padding-top: 10px; } .fa-bell-o{ font-size: 30px; } .search-bar{ padding-top: 10px; } .ma{ font-size: 60px; color: blue; padding-right: 10px; } .Xanra{ padding-top: 20px; padding-bottom: 20px; } .brands{ padding-top: 20px; padding-bottom: 20px; }

Related: See More

Material Dashboard React

Questions / Comments: