ArianaGuial
commented
1 month ago Register Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register | Tumblr</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<style>
body {
font-family: Arial, sans-serif;
background-color: #001935;
color: #fff;
text-align: center;
display: flex;
flex-direction: column;
min-height: 100vh;
}
header {
background-color: #001935;
padding: 10px;
display: flex;
align-items: center;
}
#logo {
margin-right: 10px;
}
#logo img {
max-width: 100%;
height: auto;
}
#search {
background-color: #fff;
color: #333;
border: none;
border-radius: 3px;
padding: 5px;
width: 400px;
}
main {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
}
form {
background-color: #001935;
padding: 30px;
border-radius: 5px;
max-width: 400px;
position: relative;
}
input[type="text"], input[type="password"], input[type="email"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border-radius: 3px;
border: none;
background-color: #fff;
color: #333;
box-sizing: border-box;
}
input[type="submit"] {
width: 100%;
padding: 10px;
border-radius: 3px;
border: none;
background-color: #00b8d9;
color: #fff;
font-weight: bold;
cursor: pointer;
margin-bottom: 10px;
}
.error {
color: #ff0000;
margin-bottom: 10px;
}
.footer {
position: absolute;
bottom: 0;
width: 50%;
background-color: #001935;
padding: 20px;
font-size: 14px;
color: #aaa;
}
.footer-left {
left: 0;
text-align: left;
}
.footer ul {
list-style: none;
padding: 0;
margin: 0;
text-align: left;
}
.footer ul li {
display: inline-block;
margin-right: 10px;
}
.footer ul li a {
color: #aaa;
text-decoration: none;
}
.footer p {
margin: 0;
text-align: right;
}
.footer p a {
color: #aaa;
text-decoration: none;
}
#logo1 img {
max-width: 100%;
height: 50px;
margin-right: 10px;
}
#logo2 img {
max-width: 100%;
height: 50px;
}
#logo2 img{
margin-bottom: 20px;
}
.hr-text {
margin: 20px auto;
text-align: center;
}
.hr-text::before,
.hr-text::after {
content: "";
display: inline-block;
width: 40%;
height: 1px;
background-color: #ccc;
vertical-align: middle;
}
.hr-text span {
display: inline-block;
vertical-align: middle;
padding: 0 10px;
background-color: #001935;
}
</style>
</head>
<body>
<header>
<div id="logo1">
<img src="C:\Users\Ariana\Downloads\t-white.png" alt="Tumblr Logo">
</div>
<input type="text" id="search" placeholder="Search Tumblr">
</header>
<main>
<div style="display: flex; flex-direction: column; align-items: center;">
<div id="logo2">
<img src="C:\Users\Ariana\Downloads\tumblr-logo-black-and-white.png" alt="Tumblr Logo">
</div>
<form id="registrationForm" action="C:\Users\Ariana\Documents\college files\2ND YEAR\WebDev1\SignInTUMBLR.html" method="get" novalidate>
<div id="fullnameError" class="error"></div>
<input type="text" name="fullname" id="fullname" placeholder="Full Name" class="form-control">
<div id="emailError" class="error"></div>
<input type="email" name="email" id="email" placeholder="Email" class="form-control">
<div id="passwordError" class="error"></div>
<input type="password" name="password" id="password" placeholder="Password" class="form-control">
<div id="repeatPasswordError" class="error"></div>
<input type="password" name="repeat_password" id="repeatPassword" placeholder="Repeat Password" class="form-control">
<input type="submit" value="Register" class="btn btn-primary">
<div class="hr-text"><span>or</span></div>
<input type="submit" value="Continue with Google" class="btn btn-secondary">
<input type="submit" value="Continue with Apple" class="btn btn-secondary">
</form>
</div>
</main>
<footer class="footer footer-left">
<ul>
<li><a href="#">Terms</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Support</a></li>
</ul>
</footer>
<script>
function validateEmail(email) {
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return re.test(String(email).toLowerCase());
}
const form = document.getElementById('registrationForm');
const fullname = document.getElementById('fullname');
const email = document.getElementById('email');
const password = document.getElementById('password');
const repeatPassword = document.getElementById('repeatPassword');
form.addEventListener('submit', function(event) {
let valid = true;
const fullnameValue = fullname.value.trim();
const emailValue = email.value.trim();
const passwordValue = password.value.trim();
const repeatPasswordValue = repeatPassword.value.trim();
const fullnameError = document.getElementById('fullnameError');
const emailError = document.getElementById('emailError');
const passwordError = document.getElementById('passwordError');
const repeatPasswordError = document.getElementById('repeatPasswordError');
if (fullnameValue === '') {
fullnameError.textContent = 'Full Name is required.';
valid = false;
} else {
fullnameError.textContent = '';
}
if (emailValue === '') {
emailError.textContent = 'Email is required.';
valid = false;
} else if (!validateEmail(emailValue)) {
emailError.textContent = 'Email is not valid.';
valid = false;
} else {
emailError.textContent = '';
}
if (passwordValue === '') {
passwordError.textContent = 'Password is required.';
valid = false;
} else if (passwordValue.length < 8) {
passwordError.textContent = 'Password must be at least 8 characters long.';
valid = false;
} else {
passwordError.textContent = '';
}
if (repeatPasswordValue === '') {
repeatPasswordError.textContent = 'Repeat Password is required.';
valid = false;
} else if (repeatPasswordValue !== passwordValue) {
repeatPasswordError.textContent = 'Passwords do not match.';
valid = false;
} else {
repeatPasswordError.textContent = '';
}
if (!valid) {
event.preventDefault();
}
});
</script>
</body>
</html>
Tumblr Website Replica