Skip to content

Commit

Permalink
add login signup page
Browse files Browse the repository at this point in the history
  • Loading branch information
@oxone-999
oxone-999 committed Oct 6, 2023
1 parent c87cbfd commit 4869278
Show file tree
Hide file tree
Showing 5 changed files with 401 additions and 0 deletions.
Binary file added images/user-picture.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
50 changes: 50 additions & 0 deletions pages/login.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<!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/login.css" />
<title>Document</title>
</head>
<body>
<div class="main">
<div class="container">
<div class="login_container">
<img src="../images/user-picture.png" alt="logo" class="logo" />
<span>Login</span>
</div>
<div class="input_container">
<div class="group">
<input class="input" type="email" placeholder="email" />
</div>
<div class="group">
<svg
stroke="currentColor"
stroke-width="1.5"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
class="icon"
>
<path
d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"
stroke-linejoin="round"
stroke-linecap="round"
></path>
</svg>
<input class="input" type="password" placeholder="password" />
</div>
<div>
<button class="login_btn">Log In</button>
</div>
<div>
<span
><a class="forget_link" href="signup.html"
>Forget Password?</a
></span
>
</div>
</div>
</div>
</div>
</body>
</html>
62 changes: 62 additions & 0 deletions pages/signup.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<!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/signup.css" />
<title>Document</title>
</head>
<body>
<div class="main">
<div class="container">
<div class="signup_container">
<img src="../images/user-picture.png" alt="logo" class="logo" />
<span>Sign Up</span>
</div>
<div class="input_container">
<div class="group">
<input class="input" type="text" placeholder="username" />
</div>
<div class="group">
<input class="input" type="email" placeholder="email" />
</div>
<div class="group">
<svg
stroke="currentColor"
stroke-width="1.5"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
class="icon"
>
<path
d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"
stroke-linejoin="round"
stroke-linecap="round"
></path>
</svg>
<input class="input" type="password" placeholder="password" />
</div>
<div class="group">
<svg
stroke="currentColor"
stroke-width="1.5"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
class="icon"
>
<path
d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"
stroke-linejoin="round"
stroke-linecap="round"
></path>
</svg>
<input class="input" type="password" placeholder="confirm password" />
</div>
</div>
<div>
<button class="signup_btn">Sign Up</button>
</div>
</div>
</div>
</body>
</html>
145 changes: 145 additions & 0 deletions styles/login.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
body{
margin:0;
padding: 0;
font-family: sans-serif;
background-color: #DAFFFB;
}

.main{
width: 100%;
height: 100vh;
background-color: #DAFFFB;
display: flex;
justify-content: center;
align-items: center;
}

.container{
width: 30%;
height: 60%;
background-color: #fff;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
display: flex;
flex-direction: column;
justify-content: left;
align-items: center;
overflow: hidden;
}

.login_container{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
background-color: #176B87;
}

.login_container span{
font-size: 30px;
font-weight: 600;
color: #DAFFFB;
padding: 1rem;
}

.login_container img{
margin-top: 1.5rem;
width: 20%;
transition: transform 0.9s ease-in-out;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
background-color: #DAFFFB;
}

input{
width: 80%;
height: 50px;
outline: none;
border: 1px solid #DAFFFB;
border-radius: 5px;
padding: 0 1rem;
font-size: 1rem;
margin: 1rem 0;
transition: all 0.3s ease-in-out;
}

.group {
display: flex;
line-height: 30px;
align-items: center;
position: relative;
max-width: 200px;
}

.input {
width: 100%;
height: 45px;
line-height: 30px;
padding: 0 5rem;
padding-left: 3rem;
border: 2px solid transparent;
border-radius: 10px;
outline: none;
background-color: #f8fafc;
color: #0d0c22;
transition: .5s ease;
}

.input::placeholder {
color: #94a3b8;
}

.input:focus, input:hover {
outline: none;
border-color: rgba(129, 140, 248);
background-color: #fff;
box-shadow: 0 0 0 5px rgb(129 140 248 / 30%);
}

.icon {
position: absolute;
left: 1rem;
fill: none;
width: 1rem;
height: 1rem;
}

.input_container{
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-direction: column;
}

button{
width: 5rem;
height: 2rem;
border: none;
outline: none;
border-radius: 5px;
background-color: #176B87;
color: #DAFFFB;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease-in-out;
}

button:hover{
background-color: #DAFFFB;
color: #176B87;
}

.login_btn{
margin: 1rem 0 0 0;
}

.forget_link{
font-size: 0.8rem;
color: #176B87;
text-decoration: none;
padding-top: 1rem;
}
Loading

0 comments on commit 4869278

Please sign in to comment.