Product backlog module
How do I make an product backlog module?
Mobile app interface for product backlog.Based on http://drbl.in/jSsf by Janko Jovanovic (http://jankoatwarpspeed.com). What is a product backlog module? How do you make a product backlog module? This script and codes were developed by Nika Zawila on 15 October 2022, Saturday.
Product backlog module - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Product backlog module</title> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="app"> <header class="app__header"> <h1 class="app__header-title">Product Backlog</h1> <a href="#" class="app__link-back"> <i class="fa fa-arrow-left"></i> </a> <a href="#" class="app__link-settings"> <i class="fa fa-gear"></i> </a> </header> <div class="app__body"> <div class="log"> <div class="log__header"> <a href="#" class="log__ticket">#1355</a> <span class="log__badge">5</span> <i class="fa fa-heart log__icon"></i> </div> <div class="log__body"> Default notification for a new user </div> </div> <div class="log"> <div class="log__header"> <a href="#" class="log__ticket">#4211</a> <span class="log__badge">8</span> </div> <div class="log__body"> Add a box for a freemium plan to pricing page </div> </div> <div class="log log--critical"> <div class="log__header"> <a href="#" class="log__ticket">#0149</a> <span class="log__badge">20</span> </div> <div class="log__body"> Test what works better: editing an item in-place or in overlay </div> </div> <div class="log log--urgent"> <div class="log__header"> <a href="#" class="log__ticket">#1728</a> <span class="log__badge">8</span> </div> <div class="log__body"> Restyle alternate rows in search result table </div> </div> <div class="log"> <div class="log__header"> <a href="#" class="log__ticket">#3392</a> <span class="log__badge">8</span> </div> <div class="log__body"> Add icons for impediments, warnings, information and errors </div> </div> </div>
</div>
</body>
</html>
Product backlog module - Script Codes CSS Codes
body { background: #222; font-family: 'Open Sans', sans-serif; font-size: 18px; font-weight: lighter; color: #C3D2D3;
}
/* --- APP --- */
.app { width: 330px; margin: 40px auto;
}
.app__header { background: #61C3B9; border-radius: 20px 20px 0 0; text-align: center; position: relative; padding: 12px 30px;
}
.app__header-title { display: inline-block; font-size: 20px; line-height: 1.25; color: #D5E6E8;
}
.app__link-back,
.app__link-settings { text-decoration: none; color: #D5E6E8; position: absolute; top: 15px;
}
.app__link-back { left: 20px;
}
.app__link-settings { right: 20px;
}
.app__body { background: #3E4D68; border-radius: 0 0 20px 20px;
}
/* --- LOG --- */
.log { font-size: 14px; padding: 20px; border-top: 1px solid #2B3547;
}
.log--critical { box-shadow: 6px 0 0 #E77A7A inset;
}
.log--urgent { box-shadow: 6px 0 0 #F6B07D inset;
}
.log__header { position: relative; font-size: 12px; font-weight: bold;
}
.log__ticket { text-decoration: none; color: #4BCBD8;
}
.log__badge { background: #57657E; padding: 3px 5px; border-radius: 5px; min-width: 15px; text-align: center; display: inline-block;
}
.log__body { padding-top: 10px; line-height: 1.25;
}
.log__icon { color: #E77A7A; font-size: 12px; position: absolute; top: 5px; right: 0;
}
Developer | Nika Zawila |
Username | nikazawila |
Uploaded | October 15, 2022 |
Rating | 3.5 |
Size | 2,488 Kb |
Views | 18,216 |
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 |
Buttons with badges | 1,979 Kb |
Cashflow app module | 2,041 Kb |
Credit Card Template | 16,362 Kb |
Menu | 3,277 Kb |
Dropdown menu | 2,700 Kb |
Player | 142,669 Kb |
Weather widget | 2,790 Kb |
A Pen by Nika Zawila | 1,712 Kb |
Music player | 52,180 Kb |
Password reset form | 2,800 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 |
Twitch JSON API | Jvhti | 2,808 Kb |
Lazy Load for Background Images | The_ruther4d | 2,977 Kb |
React Recipe Box | Krokodill | 5,347 Kb |
JQuery AJAX reddit Exercise | Btholt | 1,777 Kb |
Playing with transition timing | Mattgrosswork | 1,993 Kb |
Revolving Text Landing Page Trial | TimRuby | 2,976 Kb |
Simple animated hover effect | Pobee-norris | 3,044 Kb |
Codero Sitemap | S1m0ne | 28,169 Kb |
Freecodecamp - Tribute Page | Samoht513 | 3,583 Kb |
Pomodoro Timer | Sdas13 | 2,900 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!