"Checklist"
Bootstrap 3.3.0 Snippet by clarisseolviga

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css"> <!-- Website CSS style --> <link rel="stylesheet" type="text/css" href="assets/css/main.css"> <!-- Website Font style --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"> <!-- Google Fonts --> <link href='https://fonts.googleapis.com/css?family=Passion+One' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'> <title>Admin</title> </head> <body> <div class="container"> <div class="row main"> <div class="panel-heading"> <div class="panel-title text-center"> <h1 class="title">Company Name</h1> <hr /> </div> </div> <div class="main-login main-center"> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend>Checklist</legend> <!-- Multiple Radios (inline) --> <div class="form-group"> <label class="col-md-4 control-label" for="hardware">Hardware:How long does it take for your Microsoft programs to boot up?</label> <div class="col-md-4"> <label class="radio-inline" for="hardware-0"> <input name="hardware" id="hardware-0" type="radio" checked="checked" value="They crash from time to time"> They crash from time to time </label> <label class="radio-inline" for="hardware-1"> <input name="hardware" id="hardware-1" type="radio" value="More than a minute"> More than a minute </label> <label class="radio-inline" for="hardware-2"> <input name="hardware" id="hardware-2" type="radio" value="Less than a minute"> Less than a minute </label> </div> </div> <!-- Multiple Radios (inline) --> <div class="form-group"> <label class="col-md-4 control-label" for="Connectivity">Connectivity: How long does it take for you to launch Outlook Online?</label> <div class="col-md-4"> <label class="radio-inline" for="Connectivity-0"> <input name="Connectivity" id="Connectivity-0" type="radio" checked="checked" value="It’s inaccessible from time to time"> It’s inaccessible from time to time </label> <label class="radio-inline" for="Connectivity-1"> <input name="Connectivity" id="Connectivity-1" type="radio" value="More than a minute"> More than a minute </label> <label class="radio-inline" for="Connectivity-2"> <input name="Connectivity" id="Connectivity-2" type="radio" value="Less than a minute"> Less than a minute </label> </div> </div> <!-- Multiple Checkboxes --> <div class="form-group"> <label class="col-md-4 control-label" for="Desktop">Do you have the following installed on your computer? </label> <div class="col-md-4"> <div class="checkbox"> <label for="Desktop-0"> <input name="Desktop" id="Desktop-0" type="checkbox" value="Word"> Word </label> </div> <div class="checkbox"> <label for="Desktop-1"> <input name="Desktop" id="Desktop-1" type="checkbox" value="Excel"> Excel </label> </div> <div class="checkbox"> <label for="Desktop-2"> <input name="Desktop" id="Desktop-2" type="checkbox" value="PowerPoint"> PowerPoint </label> </div> <div class="checkbox"> <label for="Desktop-3"> <input name="Desktop" id="Desktop-3" type="checkbox" value="Outlook"> Outlook </label> </div> <div class="checkbox"> <label for="Desktop-4"> <input name="Desktop" id="Desktop-4" type="checkbox" value="OneNote"> OneNote </label> </div> </div> </div> <!-- Multiple Checkboxes --> <div class="form-group"> <label class="col-md-4 control-label" for="iPhone">Do you have the following installed on your iPhone?</label> <div class="col-md-4"> <div class="checkbox"> <label for="iPhone-0"> <input name="iPhone" id="iPhone-0" type="checkbox" value="Word"> Word </label> </div> <div class="checkbox"> <label for="iPhone-1"> <input name="iPhone" id="iPhone-1" type="checkbox" value="Excel"> Excel </label> </div> <div class="checkbox"> <label for="iPhone-2"> <input name="iPhone" id="iPhone-2" type="checkbox" value="PowerPoint"> PowerPoint </label> </div> <div class="checkbox"> <label for="iPhone-3"> <input name="iPhone" id="iPhone-3" type="checkbox" value="Outlook"> Outlook </label> </div> <div class="checkbox"> <label for="iPhone-4"> <input name="iPhone" id="iPhone-4" type="checkbox" value="OneNote"> OneNote </label> </div> <div class="checkbox"> <label for="iPhone-5"> <input name="iPhone" id="iPhone-5" type="checkbox" value="Lync"> Lync </label> </div> <div class="checkbox"> <label for="iPhone-6"> <input name="iPhone" id="iPhone-6" type="checkbox" value="SharePoint"> SharePoint </label> </div> <div class="checkbox"> <label for="iPhone-7"> <input name="iPhone" id="iPhone-7" type="checkbox" value="OneDrive for Business"> OneDrive for Business </label> </div> <div class="checkbox"> <label for="iPhone-8"> <input name="iPhone" id="iPhone-8" type="checkbox" value="Power BI"> Power BI </label> </div> <div class="checkbox"> <label for="iPhone-9"> <input name="iPhone" id="iPhone-9" type="checkbox" value="Sway"> Sway </label> </div> <div class="checkbox"> <label for="iPhone-10"> <input name="iPhone" id="iPhone-10" type="checkbox" value="Delve"> Delve </label> </div> </div> </div> <!-- Multiple Checkboxes --> <div class="form-group"> <label class="col-md-4 control-label" for="Android">Do you have the following installed on your Android device?</label> <div class="col-md-4"> <div class="checkbox"> <label for="Android-0"> <input name="Android" id="Android-0" type="checkbox" value="Word"> Word </label> </div> <div class="checkbox"> <label for="Android-1"> <input name="Android" id="Android-1" type="checkbox" value="Excel"> Excel </label> </div> <div class="checkbox"> <label for="Android-2"> <input name="Android" id="Android-2" type="checkbox" value="PowerPoint"> PowerPoint </label> </div> <div class="checkbox"> <label for="Android-3"> <input name="Android" id="Android-3" type="checkbox" value="OneNote"> OneNote </label> </div> <div class="checkbox"> <label for="Android-4"> <input name="Android" id="Android-4" type="checkbox" value="Outlook"> Outlook </label> </div> <div class="checkbox"> <label for="Android-5"> <input name="Android" id="Android-5" type="checkbox" value="Lync"> Lync </label> </div> <div class="checkbox"> <label for="Android-6"> <input name="Android" id="Android-6" type="checkbox" value="Delve"> Delve </label> </div> </div> </div> </fieldset> </form> </div> </div> </div> <script type="text/javascript" src="assets/js/bootstrap.js"></script> </body> </html>
/* /* Created by Filipe Pina * Specific styles of signin, register, component */ /* * General styles */ body, html{ height: 100%; background-repeat: no-repeat; background-color: #d3d3d3; font-family: 'Oxygen', sans-serif; } .main{ margin-top: 70px; } h1.title { font-size: 50px; font-family: 'Passion One', cursive; font-weight: 400; } hr{ width: 10%; color: #fff; } .form-group{ margin-bottom: 15px; } label{ margin-bottom: 15px; } input, input::-webkit-input-placeholder { font-size: 11px; padding-top: 3px; } .main-login{ background-color: #fff; /* shadows and rounded borders */ -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); } .main-center{ margin-top: 30px; margin: 0 auto; max-width: 330px; padding: 40px 40px; } .login-button{ margin-top: 5px; } .login-register{ font-size: 11px; text-align: center; }

Related: See More

Coming Sssoon Page

Questions / Comments: