<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="styles.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<title>Document</title>
<style>
html, body {
height: 100%;
margin: 0;
overflow: hidden;
}
body {
background-image: url('https://travelislife.org/wp-content/uploads/public-domain-archive.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
flex-direction: column;
}
.mask {
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
padding: 50px 0;
position: relative;
z-index: 1;
}
.card {
border-radius: 15px;
z-index: 2;
}
.card-body {
padding: 30px;
}
.btn-success {
background-color: #28a745;
border: none;
}
footer {
text-align: center;
padding: 10px;
position: absolute;
bottom: 0;
width: 100%;
z-index: 3;
}
</style>
</head>
<body>
<div class="mask">
<div class="container">
<div class="row d-flex justify-content-center align-items-center">
<div class="col-12 col-md-9 col-lg-7 col-xl-6">
<div class="card">
<div class="card-body">
<h2 class="text-uppercase text-center mb-5">Create an account</h2>
<form action ="https://jp-backend-kc80.onrender.com/auth/signup" method="POST">
<div class="form-outline mb-4">
<input type="text" id="form3Example1cg" name="name" class="form-control form-control-lg" required/>
<label class="form-label" for="form3Example1cg">Your Name</label>
</div>
<div class="form-outline mb-4">
<input type="email" id="form3Example3cg" name="email" class="form-control form-control-lg" required/>
<label class="form-label" for="form3Example3cg">Your Email</label>
</div>
<div class="form-outline mb-4">
<input type="password" id="form3Example4cg" name="password" class="form-control form-control-lg" required/>
<label class="form-label" for="form3Example4cg">Password</label>
</div>
<div class="form-outline mb-4">
<input type="password" id="form3Example4cdg" name="repeat_password" class="form-control form-control-lg" required/>
<label class="form-label" for="form3Example4cdg">Repeat your password</label>
</div>
<div class="form-outline mb-4">
<input type="date" id="form3Example5cg" name="dob" class="form-control form-control-lg" required/>
<label class="form-label" for="form3Example5cg">Date of Birth</label>
</div>
<div class="form-outline mb-4">
<input type="text" id="form3Example6cg" name="country" class="form-control form-control-lg" required/>
<label class="form-label" for="form3Example6cg">Country of Origin</label>
</div>
<div class="form-check d-flex justify-content-center mb-5">
<input class="form-check-input me-2" type="checkbox" value="" id="form2Example3cg" >
<label class="form-check-label" for="form2Example3g">
I agree to all the statements in <a href="#!" class="text-body"><u>Terms of service</u></a>
</label>
</div>
<div class="d-flex justify-content-center">
<button type="submit" data-mdb-button-init data-mdb-ripple-init
class="btn btn-success btn-block btn-lg gradient-custom-4 text-body">Register</button>
</div>
<p class="text-center text-muted mt-5 mb-0">Have an account already?<a href="http://www.journeypoint.ddnsfree.com/login"
class="fw-bold text-body"><u>Login Here</u></a></p>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<p>© 2025 JourneyPoint. All rights reserved.</p>
</footer>
</body>
</html>