Styling changes

inputs/index.html

@@ -21,51 +21,58 @@
     <div class="demo">
         <h1>All about Inputs</h1>
 
-        <h2>Required</h2>
-        <form>
-            <label for="username1">Username:</label>
-            <input type="text" id="username1" name="username" required>
-            <input type="submit">
-        </form>
-
-        <h2>Autofocus</h2>
-        <form>
-            <label for="username2">Username:</label>
-            <input type="text" id="username2" name="username" required autofocus>
-            <input type="submit">
-        </form>
-
-        <h2>Placeholder</h2>
-        <form>
-            <label for="username3">Username:</label>
-            <input type="text" id="username3" name="username" placeholder="Enter your username">
-            <input type="submit">
-        </form>
-
-        <h2>E-mail</h2>
-        <form>
-            <label for="email">Username:</label>
-            <input id="email" name="email" type="email" />
-            <input type="submit">
-        </form>
-
-        <h2>Regex validations</h2>
-        <form>
-            <label for="password">Strong password($Password1234):</label>
-            <input type="password" 
-                    name="password" 
-                    id="password" 
-                    placeholder="6-20 chars, at least 1 digit, 1 uppercase and one lowercase letter" 
-                    pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$" autofocus required>
-            <button type="submit"> Test </button>
-        </form>
-
         <h2>Color picker</h2>
         <input type="color" onchange="showColor(event)">
         <p id="colorMe">Color Me!</p>
-        
-        <h2>Voice recognition(Only mobile devices)</h2>
-        <input type="text" x-webkit-speech> 
+
+        <div class="box">
+            <h2>Required</h2>
+            <form>
+                <label for="username1">Username:</label>
+                <input type="text" id="username1" name="username" required>
+                <input type="submit">
+            </form>
+        </div>
+
+        <div class="box">
+            <h2>Autofocus</h2>
+            <form>
+                <label for="username2">Username:</label>
+                <input type="text" id="username2" name="username" required autofocus>
+                <input type="submit">
+            </form>
+        </div>
+
+        <div class="box">
+            <h2>Placeholder</h2>
+            <form>
+                <label for="username3">Username:</label>
+                <input type="text" id="username3" name="username" placeholder="Enter your username">
+                <input type="submit">
+            </form>
+        </div>
+
+        <div class="box">
+            <h2>E-mail</h2>
+            <form>
+                <label for="email">Username:</label>
+                <input id="email" name="email" type="email" />
+                <input type="submit">
+            </form>
+        </div>
+
+        <div class="box">
+            <h2>Regex validations</h2>
+            <form>
+                <label for="password">Strong password($Password1234):</label>
+                <input type="password" 
+                        name="password" 
+                        id="password" 
+                        placeholder="6-20 chars, at least 1 digit, 1 uppercase and one lowercase letter" 
+                        pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$" autofocus required>
+                <button type="submit"> Test </button>
+            </form>
+        </div>        
     </div>
 </body>
 

main.css

@@ -24,6 +24,13 @@ li {
     list-style: none;
 }
 
+.box {
+  border: 1px dotted;
+  border-radius: 5px;
+  padding: 10px;
+  width: 80%;
+  margin: 10px;
+}
 .demo {
   margin: 30px auto 30px auto;
   display: flex;