Product Dashboard Initial Layout
How do I make an product dashboard initial layout?
Product Dashboard Initial Layout. What is a product dashboard initial layout? How do you make a product dashboard initial layout? This script and codes were developed by Ahsan K. Rathore on 04 July 2022, Monday.
Product Dashboard Initial Layout - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Product Dashboard Initial Layout</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Header: begins -->
<div class="header"> <!-- Row Header: begins --> <div class="row-header"> <!-- Header Left: begins --> <div class="col-3 header-left"> <!-- Brand Name: begins --> <div class="brand-name"> <img src="http://124.109.41.123/img/pizza-hut-vertical.png" style="display:none;" /> <img src="http://124.109.41.123/img/pizza-hut-horizontal.png" /> </div> <!-- Brand Name: ends --> </div> <!-- Header Left: ends --> <!-- Header Right: begins --> <div class="col-9 header-right"> <div class="menu-items-wrap"> <div class="logo-product"> <img src="http://124.109.41.123/img/pizza-hut-vertical.png" /> </div> <nav class="menu-items"> <ul> <li class="selected"> <a href="#"> <span class="mitem"></span> <span class="mitem-text">Dashboard</span> </a> </li> <li class="separator"></li> <li> <a href="#"> <span class="mitem"></span> <span class="mitem-text">Locations</span> </a> </li> <li class="separator"></li> <li> <a href="#"> <span class="mitem"></span> <span class="mitem-text">Sales</span> </a> </li> <li class="separator"></li> <li> <a href="#"> <span class="mitem"></span> <span class="mitem-text">License</span> </a> </li> <li class="separator"></li> <li> <a href="#"> <span class="mitem"></span> <span class="mitem-text">Admin</span> </a> </li> </ul> </nav> </div> </div> <!-- Header Right: ends --> </div> <!-- Row Header: ends -->
</div>
<!-- Header: ends -->
<!-- Content Wrap: begins -->
<div class="content-wrap"> <!-- Content Inner: begins --> <div class="content-inner"> <!-- Row Body: begins --> <div class="row-body"> <!-- Left Side: begins --> <div class="col-3 left-side"> <!-- Navigation: begins --> <nav class="navigation"> <!-- Menu: begins --> <ul> <li><a href="#">Manage Prices</a></li> <li><a href="#">Categories</a></li> <li><a href="#">Products</a></li> <li><a href="#">Options</a></li> <li><a href="#">Sizes</a></li> <li><a href="#">Tips</a></li> <li><a href="#">Coupons</a></li> </ul> <!-- Menu: ends --> </nav> <!-- Navigation: begins --> </div> <!-- Left Side: ends --> <!-- Right Side: begins --> <div class="col-9 right-side"> <!-- Main Contetn Wrap: begins --> <div class="main-content-wrap"> <p>sdfsdf</p> <p>sdfsdf</p> <p>sdfsdf</p> <p>sdfsdf</p> <p>sdfsdf</p> <p>sdfsdf</p> <p>sdfsdf</p> <p>sdfsdf</p> <p>sdfsdf</p> <p>sdfsdf</p> <p>sdfsdf</p> <p>sdfsdf</p> <p>sdfsdf</p> <p>sdfsdf</p> <p>sdfsdf</p> <p>sdfsdf</p> <p>sdfsdf</p> <p>sdfsdf</p> <p>sdfsdf</p> <p>sdfsdf</p> <p>sdfsdf</p> <p>sdfsdf</p> <p>sdfsdf</p> <p>sdfsdf</p> <p>sdfsdf</p> <p>sdfsdf</p> <p>sdfsdf</p> </div> <!-- Main Contetn Wrap: ends --> </div> <!-- Right Side: ends --> </div> <!-- Row Body: ends --> </div> <!-- Content Inner: ends -->
</div>
<!-- Content Wrap: ends -->
<!-- Footer: begins -->
<div class="footer">Footer</div>
<!-- Footer: ends --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Product Dashboard Initial Layout - Script Codes CSS Codes
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
/*Roboto Font*/
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,100italic,100,400italic,500,500italic,700,700italic,900,900italic);
body { padding-top: 75px; overflow: scroll; font-family : 'Roboto', sans-serif; font-size: 15px;
}
.header { height: 75px; width: 100%; background-color: #fff; position: fixed; top: 0px; z-index: 2; border-top: 20px solid orange; border-bottom: 1px solid #ccc;
}
.row-header { overflow: hidden;
}
.header-left { float: left;
}
.brand-name { height: 53px; width: 100%; padding: 10px 15px; box-sizing: border-box;
}
.brand-name img { max-height:37px; }
.header-right { display: block; margin-left : 220px;
}
.menu-items-wrap { padding : 10px 18px; overflow: hidden;
}
.logo-product { float: right; width: 100px; text-align: right; height: 35px; }
.logo-product img { max-height: 35px; }
.menu-items { display: block; margin-right: 100px; text-align: left; }
.menu-items ul { list-style-type:none; margin: 0px; padding: 0px; }
.menu-items ul li { padding : 0px 0px; display: inline-block; }
.menu-items ul li a { display: block; text-align: center; color : #999; font-size : 14px; text-decoration: none; }
.menu-items ul li.selected a,
.menu-items ul li:hover a { color: orange; }
.menu-items ul li.separator { width:1px; height: 34px; background-color : #e4e4e4; margin: 0 15px; }
.mitem { width: 20px; height: 20px; border-radius: 50%; background-color: #ddd; display: block; margin: 0 auto;
}
.content-wrap { width: 100%; min-width: 1100px; z-index: 1; top: 75px;
}
.content-inner { width: 100%; display: table;
}
.row-body { display: table-row; width: 100%; min-width: 1100px;
}
.navigation { position: absolute; top: 75px; width: 220px;
}
.navigation ul { list-style-type: none; margin: 0px; padding: 0px; width: 100%;
}
.navigation ul li { padding: 0; background-color: #fff; width: 100%; display: block; border-bottom: 1px solid #ccc; box-sizing: border-box; padding: 0px 2px;
}
.navigation ul li:hover { background-color: #f4f4f4;
}
.navigation ul li a { text-decoration: none; font-weight: 600; color: #555; background: url(https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_right_48px-20.png) right center no-repeat; display: block; padding: 15px 13px; text-transform: uppercase; font-size: 14px;
}
.navigation ul li:hover a { color: #337ab7;
}
.left-side { background-color: #fff; float: none; display: table-cell; height: 300px; box-sizing: border-box;
}
.right-side { background-color: #fff; float: none; display: table-cell; height: 700px; overflow: auto; border-left: 1px solid #ccc;
}
.main-content-wrap { padding: 15px; }
.col-3{ width: 220px; }
.col-9 { width: auto; }
.footer { height: 35px; border-top: 1px solid #ccc; }
Product Dashboard Initial Layout - Script Codes JS Codes
$(window).on('scroll', function(){ var e = $(window).scrollTop(); if(e > 0) { $(".navigation").css({ position : "fixed" }); } else { $(".navigation").css({ position : "absolute" }); }
})
Developer | Ahsan K. Rathore |
Username | ahsanrathore |
Uploaded | July 04, 2022 |
Rating | 3 |
Size | 3,376 Kb |
Views | 30,360 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Select Previous Value of Dropdown on Custom Click Button | 2,690 Kb |
One page responsive website By Ahsan Khurshid | 6,327 Kb |
Responsive Mega Menu - CSS3 | 4,373 Kb |
Full Calendar - Isotope | 2,895 Kb |
Animated Progress Donut | 2,945 Kb |
Responsive Layout with Flexbox | 1,831 Kb |
A Pen by Ahsan K. Rathore | 2,027 Kb |
Bootstrap Modal Example | 2,183 Kb |
Get a Quote Widget for Taxi Services in UK | 3,746 Kb |
SVG Radar Animation with Radio Waves Alert | 2,753 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Swiftype Lower Third | Zumwalt | 4,796 Kb |
Tile Animation Thing | Frxnz | 4,332 Kb |
Delete Hover | Chungman93 | 2,557 Kb |
GrcJS | Vino6 | 2,047 Kb |
Cake | Kennyname | 7,220 Kb |
Filtering with shuffle.js | Deyand | 2,712 Kb |
Colorful Sliders | Chanrith | 1,246 Kb |
Scroll Arrow | Robooneus | 4,437 Kb |
Fullscreen audio play button | 72 | 2,148 Kb |
Caputre Cam with JS | KimmoCommit | 2,795 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!