Commit d790ec10 authored by Sahil Sagar's avatar Sahil Sagar
Browse files

Update public/stylesheets/customer_registration.css, views/customer_registration.ejs files

parent 0a91ef49
body {
font-family: Arial, Helvetica, sans-serif;
background-color: black;
}
* {
@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
background-image: url('https://images.unsplash.com/photo-1521218040446-6365be66a028?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60');
/* Add padding to containers */
.container {
padding: 16px;
background-color: white;
}
.container{
max-width: 700px;
width: 100%;
background-image: url('https://images.unsplash.com/photo-1521218040446-6365be66a028?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60');
/* Full-width input fields */
input[type=text], input[type=password], input[type=tell] {
width: 50%;
padding: 15px;
margin: 5px 0px 22px 0px;
display: inline-block;
border: none;
background: #f1f1f1;
padding: 25px 30px;
border-radius: 5px;
box-shadow: 0 5px 10px rgba(0,0,0,0.15);
}
input[type=text]:focus, input[type=password]:focus, input[type=tell]:focus {
background-color: #ddd;
outline: none;
.container .title{
font-size: 25px;
font-weight: 500;
position: relative;
}
select{
width: 50%;
padding: 10px;
.container .title::before{
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 30px;
border-radius: 5px;
background: linear-gradient(135deg, #71b7e6, #9b59b6);
}
/* Overwrite default styles of hr */
hr {
border: 1px solid green;
margin-bottom: 25px;
.content form .user-details{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 20px 0 12px 0;
}
/* Set a style for the submit button */
.registerbtn {
background-color: #f44336;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 10%;
opacity: 0.9;
form .user-details .input-box{
margin-bottom: 15px;
width: calc(100% / 2 - 20px);
}
.registerbtn:hover {
opacity: 1;
form .input-box span.details{
display: block;
font-weight: 500;
margin-bottom: 5px;
}
/* Add a blue text color to links */
a {
color: dodgerblue;
.user-details .input-box input{
height: 45px;
width: 100%;
outline: none;
font-size: 16px;
border-radius: 5px;
padding-left: 15px;
border: 1px solid #ccc;
border-bottom-width: 2px;
transition: all 0.3s ease;
}
/* Set a grey background color and center the text of the "sign in" section */
.signin {
background-color: #f1f1f1;
text-align: center;
.user-details .input-box input:focus,
.user-details .input-box input:valid{
border-color: #9b59b6;
}
div
{
padding:70px 75px 80px;
background-image: url('https://images.unsplash.com/photo-1521218040446-6365be66a028?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60');
opacity: 1;
background-size: cover;
height: 100%;
form .category{
display: flex;
width: 80%;
margin: 14px 0 ;
justify-content: space-between;
}
form .category label{
display: flex;
align-items: center;
cursor: pointer;
}
form .category label .dot{
height: 18px;
width: 18px;
border-radius: 50%;
margin-right: 10px;
background: #d9d9d9;
border: 5px solid transparent;
transition: all 0.3s ease;
}
#dot-1:checked ~ .category label .one,
#dot-2:checked ~ .category label .two,
#dot-3:checked ~ .category label .three{
background: #9b59b6;
border-color: #d9d9d9;
}
form input[type="radio"]{
display: none;
}
form .button{
height: 45px;
margin: 35px 0
}
form .button input{
height: 100%;
width: 100%;
border-radius: 5px;
border: none;
color: red;
font-size: 18px;
font-weight: 500;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s ease;
background color: #ffaa00;
}
form .button input:hover{
/* transform: scale(0.99); */
background: linear-gradient(-135deg, #71b7e6, #9b59b6);
}
@media(max-width: 584px){
.container{
max-width: 100%;
}
form .user-details .input-box{
margin-bottom: 15px;
width: 100%;
}
form .category{
width: 100%;
}
.content form .user-details{
max-height: 300px;
overflow-y: scroll;
}
.user-details::-webkit-scrollbar{
width: 5px;
}
}
@media(max-width: 459px){
.container .content .category{
flex-direction: column;
}
}
}
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="customer_registration.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="../stylesheets/customer_registration.css">
</head>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<!---<title> Registration Form </title>--->
<link href="customer_registration.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="../stylesheets/customer_registration.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<center>
<form action="/customer_registration" method="post">
<div class="container">
<h1> Customer Registration</h1>
<h3>Please Fill In This Form To Create An Account.</h3>
<hr>
<label for="Full Name"><b>FULL NAME</b></label><br>
<input type="text" placeholder="Enter Full Name" name="fullname" required><br>
<label for="uname"><b>USER NAME</b></label><br>
<input type="text" placeholder="Enter Username" name="uname" required><br>
<label for="Mobile Number"><b>MOBILE NUMBER</b></label><br>
<input type="tell" placeholder="Enter Mobile Number" name="Mobile" required><br>
<label for="email"><b>EMAIL ID</b></label><br>
<input type="text" placeholder="Enter Email" name="email" required><br>
<label for="psw"><b>PASSWORD</b></label><br>
<input type="password" placeholder="Enter Password" name="psw" required><br>
<label for="psw-repeat"><b>REPEAT PASSWORD</b></label><br>
<input type="password" placeholder="Repeat Password" name="psw-repeat" required><br>
<hr>
<p>By Creating An Account You Agree To Our <a href="./policy"><b>TERMS & PRIVACY</a>.</p><br>
<button type="submit" class="registerbtn">REGISTER</button><br>
</div>
<div class="container signin">
<div class="title">Registration</div>
<div class="content">
<form action="#">
<div class="user-details">
<div class="input-box">
<span class="details">Full Name</span>
<input type="text" placeholder="Enter your name" required>
</div>
<div class="input-box">
<span class="details">Username</span>
<input type="text" placeholder="Enter your username" required>
</div>
<div class="input-box">
<span class="details">Email</span>
<input type="text" placeholder="Enter your email" required>
</div>
<div class="input-box">
<span class="details">Phone Number</span>
<input type="text" placeholder="Enter your number" required>
</div>
<div class="input-box">
<span class="details">Password</span>
<input type="text" placeholder="Enter your password" required>
</div>
<div class="input-box">
<span class="details">Confirm Password</span>
<input type="text" placeholder="Confirm your password" required>
</div>
</div>
<p>By Creating An Account You Agree To Our <a href="./policy"><b>TERMS & PRIVACY</a>.</p><br>
<div class="button">
<input type="submit" value="Register">
</div>
<div class="container signin">
<h3>Already Have An Account?</h3><p> <a href="customer_login">LOG IN</a>.</P>
</div>
</form>
<center>
</form>
</div>
</div>
</body>
</html>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment