Daily UI/ To Do List - 01
How do I make an daily ui/ to do list - 01?
What is a daily ui/ to do list - 01? How do you make a daily ui/ to do list - 01? This script and codes were developed by Jonathan De Jesús on 24 November 2022, Thursday.
Daily UI/ To Do List - 01 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Daily UI/ To Do List - 01</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <br /><br /><br />
<div class="container text-center"> <h2>Daily UI - To Do List</h2><br /> <hr /> <div class="row"> <div class="col-xs-6"> <br> <div class="btn-group btn-group-vertical" data-toggle="buttons"> <label class="btn active"> <input type="checkbox" name='email1' checked><i class="fa fa-square-o fa-2x"></i><i class="fa fa-check-square-o fa-2x"></i> <span> sign up</span> </label> <label class="btn"> <input type="checkbox" name='email2'><i class="fa fa-square-o fa-2x"></i><i class="fa fa-check-square-o fa-2x"></i><span> credit card checkout</span> </label> <label class="btn"> <input type="checkbox" name='email3'><i class="fa fa-square-o fa-2x"></i><i class="fa fa-check-square-o fa-2x"></i><span> landing page</span> </label> <label class="btn"> <input type="checkbox" name='email3'><i class="fa fa-square-o fa-2x"></i><i class="fa fa-check-square-o fa-2x"></i><span> calculator</span> </label> <label class="btn"> <input type="checkbox" name='email3'><i class="fa fa-square-o fa-2x"></i><i class="fa fa-check-square-o fa-2x"></i><span> app icon </span> </label> <label class="btn"> <input type="checkbox" name='email3'><i class="fa fa-square-o fa-2x"></i><i class="fa fa-check-square-o fa-2x"></i><span> user profile</span> </label> <label class="btn"> <input type="checkbox" name='email3'><i class="fa fa-square-o fa-2x"></i><i class="fa fa-check-square-o fa-2x"></i><span> settings</span> </label> <label class="btn"> <input type="checkbox" name='email3'><i class="fa fa-square-o fa-2x"></i><i class="fa fa-check-square-o fa-2x"></i><span> 404 page</span> </label> <label class="btn"> <input type="checkbox" name='email3'><i class="fa fa-square-o fa-2x"></i><i class="fa fa-check-square-o fa-2x"></i><span> music player</span> </label> <label class="btn"> <input type="checkbox" name='email3'><i class="fa fa-square-o fa-2x"></i><i class="fa fa-check-square-o fa-2x"></i><span> social share</span> </label> </div> </div><!--col--> <div class="col-xs-6"> <br> <div class="btn-group btn-group-vertical" data-toggle="buttons"> <label class="btn"> <input type="checkbox" name='email1'><i class="fa fa-square-o fa-2x"></i><i class="fa fa-check-square-o fa-2x"></i> <span> Flash Message (Error/Success)</span> </label> <label class="btn"> <input type="checkbox" name='email2'><i class="fa fa-square-o fa-2x"></i><i class="fa fa-check-square-o fa-2x"></i><span> E-Commerce Shop
(Single Item)</span> </label> <label class="btn"> <input type="checkbox" name='email3'><i class="fa fa-square-o fa-2x"></i><i class="fa fa-check-square-o fa-2x"></i><span> Direct Messaging</span> </label> <label class="btn"> <input type="checkbox" name='email3'><i class="fa fa-square-o fa-2x"></i><i class="fa fa-check-square-o fa-2x"></i><span> Countdown Timer</span> </label> <label class="btn"> <input type="checkbox" name='email3'><i class="fa fa-square-o fa-2x"></i><i class="fa fa-check-square-o fa-2x"></i><span> On/Off Switch </span> </label> <label class="btn"> <input type="checkbox" name='email3'><i class="fa fa-square-o fa-2x"></i><i class="fa fa-check-square-o fa-2x"></i><span> Pop-Up / Overlay</span> </label> <label class="btn"> <input type="checkbox" name='email3'><i class="fa fa-square-o fa-2x"></i><i class="fa fa-check-square-o fa-2x"></i><span>
Email Receipt</span> </label> <label class="btn"> <input type="checkbox" name='email3'><i class="fa fa-square-o fa-2x"></i><i class="fa fa-check-square-o fa-2x"></i><span> Analytics Chart</span> </label> <label class="btn"> <input type="checkbox" name='email3'><i class="fa fa-square-o fa-2x"></i><i class="fa fa-check-square-o fa-2x"></i><span> Leaderboard</span> </label> <label class="btn"> <input type="checkbox" name='email3'><i class="fa fa-square-o fa-2x"></i><i class="fa fa-check-square-o fa-2x"></i><span> Location Tracker</span> </label> </div> </div><!--col--> </div><!--row-->
</div><!--container--> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
</body>
</html>
Daily UI/ To Do List - 01 - Script Codes CSS Codes
@import 'https://fonts.googleapis.com/css?family=Open+Sans:300,400,700';
body{ font-family: 'Open Sans', sans-serif;
}
label.btn span { font-size: 1.5em ; text-transform:capitalize; margin-left:0.7em; font-weight:300;
}
label input[type="radio"] ~ i.fa.fa-circle-o{ color: #28a54c; display: inline;
}
label input[type="radio"] ~ i.fa.fa-dot-circle-o{ display: none;
}
label input[type="radio"]:checked ~ i.fa.fa-circle-o{ display: none;
}
label input[type="radio"]:checked ~ i.fa.fa-dot-circle-o{ color: #28a54c; display: inline;
}
label:hover input[type="radio"] ~ i.fa {
color: #28a54c;
}
label input[type="checkbox"] ~ i.fa.fa-square-o{ color: #c8c8c8; display: inline;
}
label input[type="checkbox"] ~ i.fa.fa-check-square-o{ display: none;
}
label input[type="checkbox"]:checked ~ i.fa.fa-square-o{ display: none;
}
label input[type="checkbox"]:checked ~ i.fa.fa-check-square-o{ color: #28a54c; display: inline;
}
label:hover input[type="checkbox"] ~ i.fa {
color: #28a54c;
}
div[data-toggle="buttons"] label.active{ color: #28a54c;
}
div[data-toggle="buttons"] label {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 2em;
text-align: left;
white-space: nowrap;
vertical-align: top;
cursor: pointer;
background-color: none;
border: 0px solid
#c8c8c8;
border-radius: 3px;
color: #c8c8c8;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
div[data-toggle="buttons"] label:hover {
color: #28a54c;
}
div[data-toggle="buttons"] label:active, div[data-toggle="buttons"] label.active {
-webkit-box-shadow: none;
box-shadow: none;
}
Developer | Jonathan De Jesús |
Username | JonathanDeJesus |
Uploaded | November 24, 2022 |
Rating | 3 |
Size | 2,604 Kb |
Views | 16,192 |
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 |
My first pen | 1,705 Kb |
Moises | 1,476 Kb |
Responsive modal window | 9,264 Kb |
Blog design idea | 2,787 Kb |
Case Studies | 7,824 Kb |
Personal site | 3,915 Kb |
Enveer | 1,372 Kb |
JS | 2,028 Kb |
Css reference | 2,022 Kb |
Daily UI Sign Up | 1,384 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 |
Siema - add pagination to prototype | Pawelgrzybek | 2,575 Kb |
Sassy Buttons | Elyseholladay | 2,299 Kb |
Canvas Orbital Trails v2 | Jackrugile | 3,421 Kb |
Pure CSS Animated Photo Stack | Depthdev | 2,486 Kb |
Magnus 3 | ARocketfish | 7,944 Kb |
Simple checkbox style | Vncnz | 2,628 Kb |
JQuery exercise | Brian-baum | 3,780 Kb |
Alter bg opacity on hover... | Chrisboon27 | 2,054 Kb |
Nav Test -- cats 1 | Payls | 4,735 Kb |
CSS3 Fullscreen Background Slideshow | Leetech | 3,435 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!