Added initial css and html framework
Change-Id: I82fafe83852a45f8af7d959e496c6246a8865ec5
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/src/elements.html b/src/elements.html
new file mode 100644
index 0000000..1d16b39
--- /dev/null
+++ b/src/elements.html
@@ -0,0 +1,90 @@
+<!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>
\ No newline at end of file