| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>openBMC</title> |
| <link rel="icon" href="favicon.ico?v=2"/> |
| <link rel="stylesheet" href="css/main.css"> |
| <script src="js/vendor/vendor.min.js"></script> |
| </head> |
| <body> |
| |
| <div class="login__wrapper" style="height: auto"> |
| <form id="login__form"> |
| <div class="row"> |
| <div class="column column-60"> |
| <h1>Header 1 Quisque velit nisi, pretium ut lacinia in</h1> |
| <h2>Header 2 Curabitur aliquet quam id dui</h2> |
| <h3>Header 3 convallis a pellentesque nec, egestas</h3> |
| <h4>Header 4 diam sit amet quam vehicula elementum</h4> |
| <h5>Header 5 ipsum id orci porta dapibus. Curabitur aliquet </h5> |
| </div> |
| </div> |
| <p>Server IP</p> |
| <p>Quisque velit nisi, pretium ut lacinia in, elementum id enim. Proin eget tortor risus. Praesent sapien massa, |
| <a href="#">convallis a pellentesque</a> nec, egestas non nisi. Proin eget tortor risus. Pellentesque in ipsum id orci porta |
| dapibus. Curabitur aliquet quam id dui posuere <span class="disabled">blandit</span>. Vestibulum ac diam sit amet quam vehicula elementum |
| sed sit amet dui. Vivamus suscipit tortor eget felis porttitor volutpat. Praesent sapien massa, convallis a |
| pellentesque nec, egestas non nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere |
| cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.</p> |
| <label for="">User Name</label> |
| <input type="text" name="name" required placeholder="User Name"> |
| |
| <label for="">Password <span class="error float-right">error message</span></label> |
| <input type="password" name="password" required placeholder="Password" class="input__error"> |
| |
| |
| <label for="" class="disabled">Disabled label</label> |
| <input type="text" name="IP" class="disabled" disabled placeholder="Disabled input"> |
| <input type="submit" value="Login" style="display: block;"> |
| |
| <h2>Text Box</h2> |
| <div> |
| <label for="comments" class="">Comments</label> |
| <textarea id="comments" class="" name="comment" type="textarea"></textarea> |
| </div> |
| <h2>Select Box</h2> |
| <div> |
| <label for="select" class="">Comments</label> |
| <select id="select" class="" name="comment" type="select"> |
| <option>Option 1</option> |
| <option>Option 2</option> |
| <option>Option 3</option> |
| </select> |
| </div> |
| <h2>Radio Buttons</h2> |
| <div> |
| <input id="radio-1" class="radio-custom" name="radio-group-1" type="radio"> |
| <label for="radio-1" class="radio-custom-label">First Choice</label> |
| </div> |
| <div> |
| <input id="radio-2" class="radio-custom" name="radio-group-2" type="radio"> |
| <label for="radio-2" class="radio-custom-label">Second Choice</label> |
| </div> |
| <div> |
| <input id="radio-3" class="radio-custom" name="radio-group-3" type="radio"> |
| <label for="radio-3" class="radio-custom-label">Third Choice</label> |
| </div> |
| |
| <h2>Checkboxes</h2> |
| <div> |
| <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox"> |
| <label for="checkbox-1" class="checkbox-custom-label">First Choice</label> |
| </div> |
| <div> |
| <input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox"> |
| <label for="checkbox-2" class="checkbox-custom-label">Second Choice tortor eget felis porttitor volutpat. Praesent sapien massa, tortor eget felis porttitor volutpat. Praesent sapien massa,</label> |
| </div> |
| <div> |
| <input id="checkbox-3" class="checkbox-custom" name="checkbox-3" type="checkbox"> |
| <label for="checkbox-3" class="checkbox-custom-label">Third Choice</label> |
| </div> |
| |
| <div class="alert__error"> Alert<button class="close" aria-label="close">×</button></div> |
| <div class="alert__warning"> Warning<button class="close" aria-label="close">×</button></div> |
| <div class="alert__message"> Message<button class="close" aria-label="close">×</button></div> |
| </form> |
| </div> |
| </body> |
| <script src="js/app.min.js"></script> |
| </html> |