-
Notifications
You must be signed in to change notification settings - Fork 1
/
Dashboard.html
99 lines (88 loc) · 4.4 KB
/
Dashboard.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Dashboard</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="css/onports-dashboard.css">
</head>
<body>
<!--MAIN TOP NAVIGATION BAR-->
<nav class="navbar navbar-expand-sm bg-blue">
<a href="#" class="navbar-brand col-2">onports</a>
<!--THIS WILL NOT DISPLAY ON SMALL SCREEN : USER IMAGE AND NAME-->
<ul id="userDesktop" class="navbar-nav col-sm-10">
<li class="nav-item">
<a class="nav-link" href="#">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="user ml-auto">
<img src="img/User.png" alt="User Profile">
<h6>Hello, Mayank!</h6>
</li>
</ul>
<!--THIS WILL DISPLAY ON MOBILE SCREEN : USER IMAGE AND NAME-->
<div id="userMobile" class="user ml-auto">
<img src="img/User.png" alt="User Profile">
<h6>Hello, Mayank!</h6>
</div>
</nav>
<!--MOBILE NAVIGATION BAR WHICH HIDES ON DESKTOP SCREEN OR WIDTH > 720px-->
<div id="mobileNavbar">
<div class="container-fluid bg-blue">
<div class="row">
<div class="col-6">
<a class="nav-link" href="#">Dashboard</a>
</div>
<div class="col-6">
<a class="nav-link" href="#">Profile</a>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<!--IT WILL HIDE ON SMALL SCREEN-->
<div class="col-md-2 mh-100">
<div class="sidebar bg-blue">
<ul id="side-links">
<li><a href="#">Overview</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Offers</a></li>
<li><a href="#">Revenue</a></li>
</ul>
</div>
</div>
<div class="col-md-10">
<div class="product-description-outer">
<h5 class="">Product Details</h5>
<button id="delete-product" class="btn btn-red">Delete Product</button>
<div class="product-description">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="prouct-image-preview">
<img src="#" alt="Product Preview" id="product-image">
</div>
</div>
<div class="col-md-6">
<h5 id="product-name" contenteditable="true">Product Name</h5>
<h6 id="product-mrp" contenteditable="true">MRP Rs 200</h6>
<h6 id="product-price" contenteditable="true">Price Rs 180</h6>
<p id="product-description" contenteditable="true">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste explicabo distinctio recusandae voluptas voluptate, sint nemo accusamus esse velit quisquam obcaecati, debitis eum et, enim ea minima consectetur alias. Laudantium quisquam aliquid corrupti praesentium! Minima perspiciatis officia deleniti, porro qui earum numquam eveniet quod neque nihil odit sapiente, laboriosam nobis!</p>
</div>
</div>
</div>
<button id="change-image" class="btn btn-pink">Change Image</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>