Skip to content

D
dashboard
Commit fc916998 by Anoop
Options

header design

parent ef0bd874
Showing with 173 additions and 34 deletions
css/main.css
:root{--primary:#9800bc;--dark-color:#333;--light-color:#fff;--border-radius:0}.app-header{padding:15px;background:var(--primary);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;color:#fff}.user{display:-webkit-box;display:-ms-flexbox;display:flex}.user p{line-height:1.5}.user_designation{color:var(--text-color-light)}.user_name{margin-bottom:0 !important;font-weight:var(--font-weight-bold);color:var(--primary)}.user_avatar{margin-right:15px}.user_avatar img{width:75px;-o-object-fit:contain;object-fit:contain;height:75px;border-radius:50%;border:2px solid #fff;padding:9px}
:root{--primary: #375471;--dark-color: #333;--light-color: #fff;--text-color: #333;--text-color-light: rgba(255, 255, 255, 0.9);--border-radius: 0;--font-weight: 400;--font-weight-light: 300;--font-weight-bold: 600}.scr-text{border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal !important}.app-header{padding:15px;background:var(--primary);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#fff}.app-header>a{color:#fff}.app-header .action{display:-webkit-box;display:-ms-flexbox;display:flex}.app-header .action a{display:block;padding:5px 15px;margin-bottom:5px;opacity:0.8;-webkit-transition:all ease-in-out 0.3s;-o-transition:all ease-in-out 0.3s;transition:all ease-in-out 0.3s}.app-header .action a:hover{opacity:1}.app-header .action>a,.app-header .action .action_text{color:#fff;font-size:1.5rem}.user{display:-webkit-box;display:-ms-flexbox;display:flex;margin-right:auto;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-inline:15px auto}.user p{line-height:1.5;margin-bottom:0}.user_designation{color:var(--text-color-light);margin-bottom:5px !important}.user_name{margin-bottom:0 !important;font-weight:var(--font-weight-bold);color:var(--light-color);font-size:1.25rem}.user_avatar{margin-right:15px}.user_avatar img{width:65px;-o-object-fit:contain;object-fit:contain;height:65px;border-radius:50%;border:2px solid var(--light-color);padding:9px}.toggle{height:35px;width:35px;-webkit-box-flex:0;-ms-flex:0 0 35px;flex:0 0 35px;border:0;margin-right:15px;padding:7px 5px;position:relative;outline:0 !important;background:transparent;cursor:pointer}.toggle span{height:2px;width:80%;background:var(--light-color);display:block;position:absolute;right:0;left:0;margin:auto;-webkit-transition:all ease 0.3s;-o-transition:all ease 0.3s;transition:all ease 0.3s}.toggle span:nth-child(1){top:5px}.toggle span:nth-child(2){top:15px}.toggle span:nth-child(3){top:25px}.toggle:not(.active) span:nth-child(2){width:calc(100% - 15px);left:-8px}.toggle:not(.active) span:nth-child(3){width:calc(100% - 20px);left:-11px}.toggle.active span{-webkit-transition:all ease 0.3s;-o-transition:all ease 0.3s;transition:all ease 0.3s}.toggle.active span:first-child{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);top:15px}.toggle.active span:nth-child(2){opacity:0}.toggle.active span:nth-child(3){-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);top:15px}.toggle.dot-toggle{-webkit-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8)}.toggle.dot-toggle span{width:5px;height:5px;border-radius:5px;background:#333}
/*# sourceMappingURL=main.css.map */
\ No newline at end of file
css/main.css.map
{
"version": 3,
"mappings": "AAAA,AAAA,KAAK,AAAA,CACD,SAAS,CAAA,OAAC,CACV,YAAY,CAAA,IAAC,CACb,aAAa,CAAA,IAAC,CACd,eAAe,CAAA,CAAC,CACnB,AAGD,AAAA,WAAW,AAAC,CACR,OAAO,CAAE,IAAI,CACb,UAAU,CAAE,cAAc,CAC1B,OAAO,CAAE,IAAI,CACb,eAAe,CAAE,aAAa,CAC9B,KAAK,CAAE,IAAI,CACd,AAED,AAAA,KAAK,AAAC,CACL,OAAO,CAAE,IAAI,CAuBb,AAxBD,AAEC,KAFI,CAEJ,CAAC,AAAC,CACD,WAAW,CAAE,GAAG,CAChB,AACA,AAAD,iBAAa,AAAC,CACb,KAAK,CAAE,uBAAuB,CAC9B,AACA,AAAD,UAAM,AAAC,CACN,aAAa,CAAE,YAAY,CAC3B,WAAW,CAAE,uBAAuB,CACpC,KAAK,CAAE,cAAc,CACrB,AACA,AAAD,YAAQ,AAAC,CACR,YAAY,CAAE,IAAI,CASlB,AAVA,AAEM,YAFC,CAED,GAAG,AAAA,CACC,KAAK,CAAE,IAAI,CACX,UAAU,CAAE,OAAO,CACnB,MAAM,CAAE,IAAI,CACZ,aAAa,CAAE,GAAG,CAClB,MAAM,CAAE,cAAc,CACtB,OAAO,CAAE,GAAG,CACf",
"mappings": "AAAA,AAAA,KAAK,AAAC,CACF,SAAS,CAAA,QAAC,CACV,YAAY,CAAA,KAAC,CACb,aAAa,CAAA,KAAC,CACd,YAAY,CAAA,KAAC,CACb,kBAAkB,CAAA,yBAAC,CACnB,eAAe,CAAA,EAAC,CAChB,aAAa,CAAA,IAAC,CACd,mBAAmB,CAAA,IAAC,CACpB,kBAAkB,CAAA,IAAC,CACtB,AAED,AAAA,SAAS,AAAC,CACN,MAAM,CAAE,CAAC,CACT,IAAI,CAAE,wBAAwB,CAC9B,SAAS,CAAE,UAAU,CACrB,MAAM,CAAE,GAAG,CACX,MAAM,CAAE,IAAI,CACZ,QAAQ,CAAE,MAAM,CAChB,OAAO,CAAE,CAAC,CACV,QAAQ,CAAE,QAAQ,CAClB,KAAK,CAAE,GAAG,CACV,SAAS,CAAE,iBAAiB,CAC/B,AAED,AAAA,WAAW,AAAC,CACR,OAAO,CAAE,IAAI,CACb,UAAU,CAAE,cAAc,CAC1B,OAAO,CAAE,IAAI,CACb,eAAe,CAAE,aAAa,CAC9B,WAAW,CAAE,MAAM,CACnB,KAAK,CAAE,IAAI,CAsBd,AA5BD,AAOI,WAPO,CAOL,CAAC,AAAC,CACA,KAAK,CAAE,IAAI,CACd,AATL,AAUI,WAVO,CAUP,OAAO,AAAC,CACJ,OAAO,CAAE,IAAI,CAgBhB,AA3BL,AAYQ,WAZG,CAUP,OAAO,CAEH,CAAC,AAAC,CACE,OAAO,CAAE,KAAK,CACd,OAAO,CAAE,QAAQ,CAEjB,aAAa,CAAE,GAAG,CAClB,OAAO,CAAE,GAAG,CACZ,UAAU,CAAE,oBAAoB,CAInC,AAtBT,AAmBY,WAnBD,CAUP,OAAO,CAEH,CAAC,AAOI,MAAM,AAAC,CACJ,OAAO,CAAE,CAAC,CACb,AArBb,AAuBQ,WAvBG,CAUP,OAAO,CAaD,CAAC,CAvBX,WAAW,CAUP,OAAO,CAaE,YAAY,AAAC,CACd,KAAK,CAAE,IAAI,CACX,SAAS,CAAE,MAAM,CACpB,AAIT,AAAA,KAAK,AAAC,CACF,OAAO,CAAE,IAAI,CACb,YAAY,CAAE,IAAI,CAClB,WAAW,CAAE,MAAM,CACnB,aAAa,CAAE,SAAS,CA0B3B,AA9BD,AAKI,KALC,CAKD,CAAC,AAAC,CACE,WAAW,CAAE,GAAG,CAChB,aAAa,CAAE,CAAC,CACnB,AACA,AAAD,iBAAa,AAAC,CACV,KAAK,CAAE,uBAAuB,CAC9B,aAAa,CAAE,cAAc,CAChC,AACA,AAAD,UAAM,AAAC,CACH,aAAa,CAAE,YAAY,CAC3B,WAAW,CAAE,uBAAuB,CACpC,KAAK,CAAE,kBAAkB,CACzB,SAAS,CAAE,OAAO,CACrB,AACA,AAAD,YAAQ,AAAC,CACL,YAAY,CAAE,IAAI,CASrB,AAVA,AAEG,YAFI,CAEJ,GAAG,AAAC,CACA,KAAK,CAAE,IAAI,CACX,UAAU,CAAE,OAAO,CACnB,MAAM,CAAE,IAAI,CACZ,aAAa,CAAE,GAAG,CAClB,MAAM,CAAE,GAAG,CAAC,KAAK,CAAC,kBAAkB,CACpC,OAAO,CAAE,GAAG,CACf,AAIT,AAAA,OAAO,AAAC,CACJ,MAAM,CAAE,IAAI,CACZ,KAAK,CAAE,IAAI,CACX,IAAI,CAAE,QAAQ,CACd,MAAM,CAAE,CAAC,CACT,YAAY,CAAE,IAAI,CAClB,OAAO,CAAE,OAAO,CAChB,QAAQ,CAAE,QAAQ,CAClB,OAAO,CAAE,YAAY,CACrB,UAAU,CAAE,WAAW,CACvB,MAAM,CAAE,OAAO,CA6DlB,AAvED,AAaI,OAbG,CAaH,IAAI,AAAC,CACD,MAAM,CAAE,GAAG,CACX,KAAK,CAAE,GAAG,CACV,UAAU,CAAE,kBAAkB,CAC9B,OAAO,CAAE,KAAK,CACd,QAAQ,CAAE,QAAQ,CAClB,KAAK,CAAE,CAAC,CACR,IAAI,CAAE,CAAC,CACP,MAAM,CAAE,IAAI,CACZ,UAAU,CAAE,aAAa,CAU5B,AAhCL,AAuBQ,OAvBD,CAaH,IAAI,AAUC,UAAW,CAAA,CAAC,CAAE,CACX,GAAG,CAAE,GAAG,CACX,AAzBT,AA0BQ,OA1BD,CAaH,IAAI,AAaC,UAAW,CAAA,CAAC,CAAE,CACX,GAAG,CAAE,IAAI,CACZ,AA5BT,AA6BQ,OA7BD,CAaH,IAAI,AAgBC,UAAW,CAAA,CAAC,CAAE,CACX,GAAG,CAAE,IAAI,CACZ,AA/BT,AAmCY,OAnCL,AAiCF,IAAK,CAAA,OAAO,EACT,IAAI,AACC,UAAW,CAAA,CAAC,CAAE,CACX,KAAK,CAAE,iBAAiB,CACxB,IAAI,CAAE,IAAI,CACb,AAtCb,AAuCY,OAvCL,AAiCF,IAAK,CAAA,OAAO,EACT,IAAI,AAKC,UAAW,CAAA,CAAC,CAAE,CACX,KAAK,CAAE,iBAAiB,CACxB,IAAI,CAAE,KAAK,CACd,AA1Cb,AA8CQ,OA9CD,AA6CF,OAAO,CACJ,IAAI,AAAC,CACD,UAAU,CAAE,aAAa,CAY5B,AA3DT,AAgDY,OAhDL,AA6CF,OAAO,CACJ,IAAI,AAEC,YAAY,AAAC,CACV,SAAS,CAAE,aAAa,CACxB,GAAG,CAAE,IAAI,CACZ,AAnDb,AAoDY,OApDL,AA6CF,OAAO,CACJ,IAAI,AAMC,UAAW,CAAA,CAAC,CAAE,CACX,OAAO,CAAE,CAAC,CACb,AAtDb,AAuDY,OAvDL,AA6CF,OAAO,CACJ,IAAI,AASC,UAAW,CAAA,CAAC,CAAE,CACX,SAAS,CAAE,cAAc,CACzB,GAAG,CAAE,IAAI,CACZ,AA1Db,AA8DI,OA9DG,AA8DF,WAAW,AAAC,CACT,SAAS,CAAE,UAAU,CAOxB,AAtEL,AAgEQ,OAhED,AA8DF,WAAW,CAER,IAAI,AAAC,CACD,KAAK,CAAE,GAAG,CACV,MAAM,CAAE,GAAG,CACX,aAAa,CAAE,GAAG,CAClB,UAAU,CAAE,IAAI,CACnB",
"sources": [
"../scss/main.scss"
],
......
index.html
......@@ -7,11 +7,19 @@
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/main.css">
<title>Hello, world!</title>
<link rel="stylesheet" href="node_modules/bootstrap-icons/font/bootstrap-icons.css">
<link rel="shortcut icon" href="/images/envigo.png" type="image/x-icon">
<title>Envigo Dashboard</title>
</head>
<body>
<header class="app-header">
<button class="toggle">
<span></span>
<span></span>
<span></span>
</button>
<div class="user">
<div class="user_avatar">
<img src="images/logo.png" alt="user_avatar">
......@@ -21,13 +29,26 @@
<p class="user_designation">Marketing Agency</p>
</div>
</div>
<h1 class="app-heading">Building <span class="golden">IPMT</span></h1>
<!-- <h1 class="app-heading">Dashboard <span class="golden">UI</span></h1> -->
<div class="action">
<a href="#" class="action_search"><span class="scr-text">Search</span></a>
<span class="action_spacer"></span>
<a href="#" class="action_grid-view active"><span class="scr-text">Grid View</span></a>
<a href="" class="action_list-view"><span class="scr-text">List View</span></a>
<a href="#"><i class="bi bi-bell-fill"></i><span class="scr-text">Notification</span></a>
<a href="#"><i class="bi bi-envelope-fill"></i><span class="scr-text">Messages</span></a>
<a href="#"><i class="bi bi-list-task"></i><span class="scr-text">Task</span></a>
<div class="dropdown">
<a class="dropdown-toggle action_text" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
John Deo
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</header>
<section class="content-wrap">
<aside class="app-sidebar">
......
scss/main.scss
:root{
--primary:#9800bc;
--dark-color:#333;
--light-color:#fff;
--border-radius:0;
:root {
--primary: #375471;
--dark-color: #333;
--light-color: #fff;
--text-color: #333;
--text-color-light: rgba(255, 255, 255, 0.9);
--border-radius: 0;
--font-weight: 400;
--font-weight-light: 300;
--font-weight-bold: 600;
}
.scr-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
.app-header {
padding: 15px;
background: var(--primary);
display: flex;
justify-content: space-between;
align-items: center;
color: #fff;
> a {
color: #fff;
}
.action {
display: flex;
a {
display: block;
padding: 5px 15px;
margin-bottom: 5px;
opacity: 0.8;
transition: all ease-in-out 0.3s;
&:hover {
opacity: 1;
}
}
> a, .action_text {
color: #fff;
font-size: 1.5rem;
}
}
}
.user {
display: flex;
p {
line-height: 1.5;
}
&_designation {
color: var(--text-color-light);
}
&_name {
margin-bottom: 0 !important;
font-weight: var(--font-weight-bold);
color: var(--primary);
}
&_avatar {
margin-right: 15px;
img{
width: 75px;
display: flex;
margin-right: auto;
align-items: center;
margin-inline: 15px auto;
p {
line-height: 1.5;
margin-bottom: 0;
}
&_designation {
color: var(--text-color-light);
margin-bottom: 5px !important;
}
&_name {
margin-bottom: 0 !important;
font-weight: var(--font-weight-bold);
color: var(--light-color);
font-size: 1.25rem;
}
&_avatar {
margin-right: 15px;
img {
width: 65px;
object-fit: contain;
height: 75px;
height: 65px;
border-radius: 50%;
border: 2px solid #fff;
border: 2px solid var(--light-color);
padding: 9px;
}
}
}
\ No newline at end of file
}
}
.toggle {
height: 35px;
width: 35px;
flex: 0 0 35px;
border: 0;
margin-right: 15px;
padding: 7px 5px;
position: relative;
outline: 0 !important;
background: transparent;
cursor: pointer;
// display: none;
span {
height: 2px;
width: 80%;
background: var(--light-color);
display: block;
position: absolute;
right: 0;
left: 0;
margin: auto;
transition: all ease 0.3s;
&:nth-child(1) {
top: 5px;
}
&:nth-child(2) {
top: 15px;
}
&:nth-child(3) {
top: 25px;
}
}
&:not(.active) {
span {
&:nth-child(2) {
width: calc(100% - 15px);
left: -8px;
}
&:nth-child(3) {
width: calc(100% - 20px);
left: -11px;
}
}
}
&.active {
span {
transition: all ease 0.3s;
&:first-child {
transform: rotate(45deg);
top: 15px;
}
&:nth-child(2) {
opacity: 0;
}
&:nth-child(3) {
transform: rotate(-45deg);
top: 15px;
}
}
}
&.dot-toggle {
transform: scale(0.8);
span {
width: 5px;
height: 5px;
border-radius: 5px;
background: #333;
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment