mirror of
https://gitea.smigz.com/smiggiddy/odin-codeprojects.git
synced 2024-12-25 22:10:43 -05:00
Feat signup form (#3)
* initial commit * feat: add html skeleton * feat: added div for forms * feat: add more styling * feat: more styling * feat: fixed form field alignment * feat: format layout and shiz * feat: add logo + transparent box * feat: add color scheme * feat: add h1 tags * feat: remove placeholders/add text colors * feat: basic mobile layout * feat: add javascript * feat: added javascript error validation * feat: buttons/links completed
This commit is contained in:
GitHub
parent
9f764ac71f
commit
a47a2cec30
5 changed files with 275 additions and 0 deletions
190
signup_form/css/style.css
Normal file
190
signup_form/css/style.css
Normal file
|
|
@ -0,0 +1,190 @@
|
||||||
|
:root {
|
||||||
|
--main-bg: #C4DFDF;
|
||||||
|
--light-bg: #F8F6F4;
|
||||||
|
--text-color: rgb(22, 72, 99);
|
||||||
|
--error-color: #EF6262;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.container {
|
||||||
|
justify-content: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
align-content: center;
|
||||||
|
height: 100vh;
|
||||||
|
margin: 0;
|
||||||
|
background-color: var(--light-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
height: 100%;
|
||||||
|
background-image: url(../static/background.jpg);
|
||||||
|
background-position: center;
|
||||||
|
background-size: auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.logo {
|
||||||
|
position: relative;
|
||||||
|
background-color: rgb(22, 72, 99, 0.7);
|
||||||
|
top: 15vh;
|
||||||
|
height: 200px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo img {
|
||||||
|
height: 14vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo img {
|
||||||
|
height: 14vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo h1 {
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: 3rem;
|
||||||
|
color: var(--light-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form {
|
||||||
|
width: 60vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input input[type='text'],
|
||||||
|
.form-input input[type='password'],
|
||||||
|
.form-input input[type='email'] {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border: 1px solid #D6D9DC;
|
||||||
|
border-radius: 3px;
|
||||||
|
width: 100%;
|
||||||
|
padding: 7px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input label {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-button {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-button p {
|
||||||
|
margin-top: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error {
|
||||||
|
color: var(--error-color);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media only screen and (min-width: 700px) {
|
||||||
|
.container {
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
align-content: center;
|
||||||
|
}
|
||||||
|
.sidebar {
|
||||||
|
width: 50vw;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.form {
|
||||||
|
margin-left: 30px;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
form {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
width: 700px;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input {
|
||||||
|
align-items: flex-start; /* To avoid stretching */
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.form-input input[type='text'],
|
||||||
|
.form-input input[type='password'],
|
||||||
|
.form-input input[type='email'] {
|
||||||
|
width: 290px;
|
||||||
|
height: initial;
|
||||||
|
}
|
||||||
|
.form-input label {
|
||||||
|
width: 290px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Left side of the screen */
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
background-image: url(../static/background.jpg);
|
||||||
|
background-position: center;
|
||||||
|
background-size: auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.logo {
|
||||||
|
position: relative;
|
||||||
|
background-color: rgb(22, 72, 99, 0.7);
|
||||||
|
top: 35vh;
|
||||||
|
height: 400px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo img {
|
||||||
|
height: 14vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo h1 {
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: 3rem;
|
||||||
|
color: var(--light-bg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: 'Montserrat', sans-serif;
|
||||||
|
font-size: 16px;
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0.7rem 4.5rem;
|
||||||
|
border: 0.2rem solid var(--text-color);
|
||||||
|
margin: 1;
|
||||||
|
box-sizing: border-box;
|
||||||
|
text-decoration: none;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--light-bg);
|
||||||
|
background-color: var(--text-color);
|
||||||
|
transition: all 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
background-color: var(--light-bg);
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--text-color);
|
||||||
|
font-weight: 900;
|
||||||
|
}
|
||||||
54
signup_form/index.html
Normal file
54
signup_form/index.html
Normal file
|
|
@ -0,0 +1,54 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>Sign up! | Smig.Tech™</title>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,700;1,900&display=swap" rel="stylesheet">
|
||||||
|
<link href="css/style.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="sidebar">
|
||||||
|
<div class="logo logo-text">
|
||||||
|
<img src="static/logo.png" alt="" srcset="">
|
||||||
|
<h1>Smig.Tech</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form">
|
||||||
|
<h1 class="call-to-action">Sign up today!</h1>
|
||||||
|
<form action="post" method="#">
|
||||||
|
<div class="form-input">
|
||||||
|
<label for="name">NAME</label>
|
||||||
|
<input type="text" name="name" id="name"required>
|
||||||
|
</div>
|
||||||
|
<div class="form-input">
|
||||||
|
<label for="email">EMAIL</label>
|
||||||
|
<input type="email" name="email" id="email" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-input">
|
||||||
|
<label for="password">PASSWORD</label>
|
||||||
|
<input type="password" name="password" id="password" required minlength="8">
|
||||||
|
<div class="error"></div>
|
||||||
|
</div>
|
||||||
|
<div class="form-input">
|
||||||
|
<label for="password-confirmation">CONFIRM PASSWORD</label>
|
||||||
|
<input type="password" name="password-confirmation" id="password-confirmation" required
|
||||||
|
minlength="8">
|
||||||
|
<div class="error"></div>
|
||||||
|
</div>
|
||||||
|
<div class="form-button">
|
||||||
|
<button type="#">Create Account</button>
|
||||||
|
<p>Already have an account? <a href="#">Log in</a></p>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="js/script.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
31
signup_form/js/script.js
Normal file
31
signup_form/js/script.js
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
const name = document.querySelector('#name'),
|
||||||
|
email = document.querySelector('#email'),
|
||||||
|
password = document.querySelector('#password'),
|
||||||
|
passwordConfirmation = document.querySelector('#password-confirmation'),
|
||||||
|
formInputs = document.querySelectorAll('.form-input')
|
||||||
|
|
||||||
|
password.addEventListener('keyup', e => {
|
||||||
|
let error = '*Password must be at least 8 characters!';
|
||||||
|
let errorDiv = password.nextElementSibling;
|
||||||
|
|
||||||
|
if (password.value.length < 8) {
|
||||||
|
password.style.borderColor = "#EF6262";
|
||||||
|
errorDiv.textContent = error;
|
||||||
|
} else {
|
||||||
|
password.style.borderColor = "";
|
||||||
|
errorDiv.textContent = "";
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
passwordConfirmation.addEventListener('keyup', e => {
|
||||||
|
let error = '*Passwords do not match!';
|
||||||
|
let errorDiv = passwordConfirmation.nextElementSibling;
|
||||||
|
|
||||||
|
if (password.value !== e.target.value ) {
|
||||||
|
passwordConfirmation.style.borderColor = "#EF6262";
|
||||||
|
errorDiv.textContent = error;
|
||||||
|
} else {
|
||||||
|
passwordConfirmation.style.borderColor = "";
|
||||||
|
errorDiv.textContent = "";
|
||||||
|
}
|
||||||
|
});
|
||||||
BIN
signup_form/static/background.jpg
Normal file
BIN
signup_form/static/background.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
signup_form/static/logo.png
Normal file
BIN
signup_form/static/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 261 KiB |
Loading…
Reference in a new issue