Add Bootstrap styling to the signup form
This commit is contained in:
		
							parent
							
								
									c3611737e8
								
							
						
					
					
						commit
						77f99eb180
					
				
					 1 changed files with 36 additions and 20 deletions
				
			
		| 
						 | 
					@ -10,29 +10,45 @@
 | 
				
			||||||
    <link rel="shortcut icon" href="/favicon.ico">
 | 
					    <link rel="shortcut icon" href="/favicon.ico">
 | 
				
			||||||
    <title>Sign up</title>
 | 
					    <title>Sign up</title>
 | 
				
			||||||
</head>
 | 
					</head>
 | 
				
			||||||
<body style="background-color: lightgreen">
 | 
					<body>
 | 
				
			||||||
    <nav class="navbar navbar-expand-sm navbar-dark bg-primary">
 | 
					    <nav class="navbar navbar-expand-sm navbar-dark bg-primary">
 | 
				
			||||||
        <a class="navbar-brand" href="index.html">Reimbursinator</a>
 | 
					        <a class="navbar-brand" href="index.html">Reimbursinator</a>
 | 
				
			||||||
    </nav>
 | 
					    </nav>
 | 
				
			||||||
    <form class="signup">
 | 
					    <div class="container pt-5">
 | 
				
			||||||
 | 
					        <div class="row">
 | 
				
			||||||
 | 
					            <div class="col-sm-6 mx-auto">
 | 
				
			||||||
 | 
					                <div class="card bg-light text-dark">
 | 
				
			||||||
 | 
					                    <div class="card-header">
 | 
				
			||||||
 | 
					                        <h3>Please Sign Up</h3>
 | 
				
			||||||
 | 
					                    </div>
 | 
				
			||||||
 | 
					                    <div class="card-body">
 | 
				
			||||||
 | 
					                        <form class="form signup" autocomplete="off" action="index.html">
 | 
				
			||||||
                            <div class="form-group">
 | 
					                            <div class="form-group">
 | 
				
			||||||
            <h3>Sign up page</h3>
 | 
					                                <label for="userName">Username:</label>
 | 
				
			||||||
 | 
					                                <input class="form-control" id="userName" type="text" name="username" minlength="4" size="10" required autofocus>
 | 
				
			||||||
                            </div>
 | 
					                            </div>
 | 
				
			||||||
                            <div class="form-group">
 | 
					                            <div class="form-group">
 | 
				
			||||||
            User Name: <input type="text" id="userName" minlength="4" size="10" required="required" class="border"><br>
 | 
					                                <label for="email">Email:</label>
 | 
				
			||||||
 | 
					                                <input class="form-control" type="email" id="email" required>
 | 
				
			||||||
                            </div>
 | 
					                            </div>
 | 
				
			||||||
                            <div class="form-group">
 | 
					                            <div class="form-group">
 | 
				
			||||||
            Email: <input type="email" id="email" required="required" class="border"><br>
 | 
					                                <label for="password">Password:</label>
 | 
				
			||||||
 | 
					                                <input class="form-control" type="password" id="password" minlength="4" size="10" required>
 | 
				
			||||||
                            </div>
 | 
					                            </div>
 | 
				
			||||||
                            <div class="form-group">
 | 
					                            <div class="form-group">
 | 
				
			||||||
            Password: <input type="password" id="password" minlength="4" size="10" required="required" class="border"><br>
 | 
					                                <label for="confirmPassword">Confirm Password:</label>
 | 
				
			||||||
 | 
					                                <input class="form-control" type="password" id="confirmPassword" required>
 | 
				
			||||||
                            </div>
 | 
					                            </div>
 | 
				
			||||||
        <div class="form-group">
 | 
					                            <button type="submit" class="btn btn-primary">Submit</button>
 | 
				
			||||||
            Confirm Password: <input type="password" id="confirmPassword" class="border"><br>
 | 
					 | 
				
			||||||
        </div>
 | 
					 | 
				
			||||||
        <input type="submit" value="Submit" formaction="index.html" class="border">
 | 
					 | 
				
			||||||
        <a class="nav-link" href="index.html">Return to main menu</a>
 | 
					 | 
				
			||||||
                        </form>
 | 
					                        </form>
 | 
				
			||||||
 | 
					                    </div>
 | 
				
			||||||
 | 
					                    <div class="card-footer">
 | 
				
			||||||
 | 
					                        Already registered? <a href="login.html">Log In</a>
 | 
				
			||||||
 | 
					                    </div>
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					            </div>
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					    </div>
 | 
				
			||||||
</body>
 | 
					</body>
 | 
				
			||||||
<script src="js/signupPage.js"></script>
 | 
					<script src="js/signupPage.js"></script>
 | 
				
			||||||
    <!--Still need to check if user exist and if email exist test-->
 | 
					    <!--Still need to check if user exist and if email exist test-->
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		
		Reference in a new issue