Product Dashboard Initial Layout

Developer
Ahsan K. Rathore
Size
3,376 Kb
Views
30,360
  1. Product Dashboard Initial Layout Previews
  2. Product Dashboard Initial Layout HTML Codes
  3. Product Dashboard Initial Layout CSS Codes
  4. Product Dashboard Initial Layout JS Codes

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 Previews
IQ Test

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" }); }
})
Product Dashboard Initial Layout - Script Codes
Product Dashboard Initial Layout - Script Codes
Home Page Home
Developer Ahsan K. Rathore
Username ahsanrathore
Uploaded July 04, 2022
Rating 3
Size 3,376 Kb
Views 30,360
Do you need developer help for Product Dashboard Initial Layout?

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!

Ahsan K. Rathore (ahsanrathore) Script Codes
Name
Animated Left Menu with Parallel Content Sliding
Animated Bar Charts
SVG Path Animation using CSS3
Select Previous Value of Dropdown on Custom Click Button
SVG Radar Animation with Radio Waves Alert
A Pen by Ahsan K. Rathore
Full Calendar - Isotope
Shopping Cart - Angular JS
Animated Progress Donut
Parallax Content
Create amazing sales emails with AI!

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!