Task manager UI
How do I make an task manager ui?
What is a task manager ui? How do you make a task manager ui? This script and codes were developed by Icebob on 12 June 2022, Sunday.
Task manager UI - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Task manager UI</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="page"> <div class="pageHeader"> <div class="title">Dashboard</div> <div class="userPanel"><i class="fa fa-chevron-down"></i><span class="username">John Doe </span><img src="https://s3.amazonaws.com/uifaces/faces/twitter/kolage/73.jpg" width="40" height="40"/></div> </div> <div class="main"> <div class="nav"> <div class="searchbox"> <div><i class="fa fa-search"></i> <input type="search" placeholder="Search"/> </div> </div> <div class="menu"> <div class="title">Navigation</div> <ul> <li> <i class="fa fa-home"></i>Home</li> <li><i class="fa fa-signal"></i>Activity</li> <li class="active"> <i class="fa fa-tasks"></i>Manage Tasks</li> <li> <i class="fa fa-envelope"></i>Messages</li> </ul> </div> </div> <div class="view"> <div class="viewHeader"> <div class="title">Manage Tasks</div> <div class="functions"> <div class="button active">Add New Task</div> <div class="button">Completed</div> <div class="button inverz"><i class="fa fa-trash-o"></i></div> </div> </div> <div class="content"> <div class="list"> <div class="title">Today</div> <ul> <li class="checked"><i class="fa fa-check-square-o"></i><span>Update team page</span> <div class="info"> <div class="button green">In progress</div><span>Complete by 25/04/2014</span> </div> </li> <li><i class="fa fa-square-o"></i><span>Design a new logo</span> <div class="info"> <div class="button">Pending</div><span>Complete by 10/04/2014</span> </div> </li> <li><i class="fa fa-square-o"></i><span>Find a front end developer</span> <div class="info"></div> </li> </ul> </div> <div class="list"> <div class="title">Tomorrow</div> <ul> <li><i class="fa fa-square-o"></i><span>Find front end developer</span> <div class="info"></div> </li> </ul> </div> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Task manager UI - Script Codes CSS Codes
@import url(http://fonts.googleapis.com/css?family=Dosis:300|Lato:300,400,600,700|Roboto+Condensed:300,700|Open+Sans+Condensed:300,600|Open+Sans:400,300,600,700|Maven+Pro:400,700);
@import url("http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");
html { background-image: url(http://www.ultraimg.com/images/2UeGfhZ.jpg);
}
body { padding: 0px; margin: 0px; font-family: "Open Sans"; font-size: 14px; font-smoothing: antialiased;
}
.page { position: absolute; width: 80%; height: 80%; left: 10%; top: 10%; background-color: rgba(255, 255, 255, 0.7); -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
}
.pageHeader { width: 100%; height: 50px; line-height: 50px; background-color: #54b9cd; color: White; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 5px 20px; vertical-align: middle;
}
.pageHeader .title { width: 40%; float: left; line-height: 40px; font-size: 1.5em; font-weight: 700;
}
.pageHeader .userPanel { width: 40%; float: right;
}
.pageHeader .userPanel i { float: right; line-height: 40px; padding-right: 10px;
}
.pageHeader .userPanel .username { float: right; line-height: 40px; padding: 0px 20px; font-weight: 600; font-size: 1.0em;
}
.pageHeader .userPanel img { float: right; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}
.main { position: relative; width: 100%; height: 100%; clear: both; background-color: white;
}
.main .nav { width: 200px; height: 100%; float: left; background-color: rgba(227, 234, 235, 0.8);
}
.main .nav .searchbox { width: 170px; height: 30px; line-height: 30px; margin: 15px; background-color: White; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
}
.main .nav .searchbox i { display: inline-block; color: #bbb; margin-left: 5px; margin-right: 5px; font-size: 16px;
}
.main .nav .searchbox input { display: inlin-block; width: 120px; background-color: White; color: Black; font-family: "Lato"; border: 0px;
}
.main .nav .menu { width: 100%; margin: 15px; color: #555;
}
.main .nav .menu .title { font-weight: 700; font-size: 1.0em; text-transform: uppercase;
}
.main .nav .menu ul { padding-left: 0px;
}
.main .nav .menu ul li { cursor: pointer; list-style: none; margin: 5px 0px; padding: 5px 0px; font-weight: 600; margin-right: 30px; padding-left: 10px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; transition: 0.25s all;
}
.main .nav .menu ul li.active { color: #79BC46;
}
.main .nav .menu ul li:hover { background-color: #999;
}
.main .nav .menu ul li i { font-size: 1.4em; margin-right: 10px;
}
.main .view { position: relative; margin-left: 200px;
}
.main .view .viewHeader { width: 100%; height: 70px; line-height: 70px; padding: 20px 20px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-bottom: 1px solid #E0E0E0;
}
.main .view .viewHeader .title { float: left; font-size: 1.4em; font-weight: 400; padding: 0px; color: #AAA; margin-top: -18px;
}
.main .view .viewHeader .functions { float: right;
}
.main .view .viewHeader .functions .button { float: right; height: 30px; line-height: 30px; background-color: #AAA; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; margin: 0px 5px; padding: 0px 20px; cursor: pointer; color: White; font-weight: 700;
}
.main .view .viewHeader .functions .button.active { background-color: #54b9cd;
}
.main .view .viewHeader .functions .button.inverz { background-color: inherit; border: 1px solid #AAA; width: 10px; color: #AAA; font-size: 1.3em; padding-left: 10px; padding-right: 16px;
}
.main .view .content { position: absolute; left: 0px; top: 70px; right: 0px; bottom: 0px; padding: 10px;
}
.main .view .content .list .title { width: 100%; padding: 10px; text-transform: uppercase; font-weight: 700; color: #54b9cd;
}
.main .view .content .list ul { width: 100%; padding-left: 10px; color: #777;
}
.main .view .content .list ul li { width: 100%; height: 50px; line-height: 50px; list-style: none; border-top: 1px solid #AAA;
}
.main .view .content .list ul li.checked { background-color: #F0F4F5;
}
.main .view .content .list ul li:last-child { border-bottom: 1px solid #AAA;
}
.main .view .content .list ul li i { float: left; width: 30px; height: 50px; line-height: 50px; margin-left: 10px; font-size: 1.3em;
}
.main .view .content .list ul li span { float: left; font-weight: 600;
}
.main .view .content .list ul li .info { float: right;
}
.main .view .content .list ul li .info span { font-weight: 300;
}
.main .view .content .list ul li .info .button { float: right; width: 100px; height: 30px; line-height: 30px; background-color: #AAA; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; margin: 10px 10px; text-align: center; cursor: pointer; color: White; font-weight: 700;
}
.main .view .content .list ul li .info .button.green { background-color: #85C157;
}
.clear { clear: both;
}
Task manager UI - Script Codes JS Codes
/*
Inspired by dribble.com/shots/1507858-Dashboard */
(function() {
}).call(this);
![Task manager UI - Script Codes](http://shots.codepen.io/icebob/pen/DbfgK-512.jpg)
Developer | Icebob |
Username | icebob |
Uploaded | June 12, 2022 |
Rating | 4.5 |
Size | 5,953 Kb |
Views | 178,112 |
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 |
OSX dock menu | 5,975 Kb |
Login page with blur background | 5,022 Kb |
A Pen by Icebob | 7,324 Kb |
SVG clock UI | 5,852 Kb |
Notification popups | 4,190 Kb |
Home portal app | 17,672 Kb |
Angular Sample App with Semantic UI | 3,545 Kb |
Animated popup window | 4,352 Kb |
Dashboard page | 5,813 Kb |
Loading animation with css | 2,947 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 |
React JS Movie Info App | MTushar | 4,870 Kb |
Tic Tac Toe | Volv | 4,862 Kb |
Gradient-ui-button-mark-fx | Tabspace | 1,881 Kb |
Hover Animation from UNIQLO | Insprd | 3,772 Kb |
Twitch API | Coderpilot | 3,412 Kb |
CMP5-Opdracht15 | SannevanGastel | 2,733 Kb |
Horizontal Navigation with Floats | Gymratpacks | 5,403 Kb |
The Rope | Chribbe | 2,886 Kb |
Disable JavaScript execution from console | Ludviglindblom | 2,534 Kb |
DFF Website | Hawcubite | 10,123 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!