Skip to content

Commit 2c416e4

Browse files
codeNaitikcodeNaitik
authored
login auth page (#361)
1 parent e5991ff commit 2c416e4

File tree

5 files changed

+316
-0
lines changed

5 files changed

+316
-0
lines changed

‎login-auth-page/download.png

5.58 KB
Loading

‎login-auth-page/index.css

+127
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
/* @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap"); */
2+
* {
3+
margin: 0%;
4+
padding: 0%;
5+
font-family: "Poppins", sans-serif;
6+
}
7+
8+
.world {
9+
background-repeat: no-repeat;
10+
display: flex;
11+
justify-content: flex-end;
12+
align-items: center;
13+
height: 45em;
14+
}
15+
16+
.img-fluid img {
17+
max-width: 100%;
18+
height: auto;
19+
float: left;
20+
}
21+
.img-fluid {
22+
padding: 4em;
23+
}
24+
25+
.formm {
26+
height: auto;
27+
background: rgb(245, 37, 89);
28+
padding: 7em;
29+
margin: 5em;
30+
border-radius: 74% 26% 50% 50% / 61% 30% 70% 39%;
31+
border: 10px solid black;
32+
}
33+
.login h1 {
34+
text-align: center;
35+
margin-bottom: 1em;
36+
}
37+
38+
.username input {
39+
border: 4px solid #000;
40+
41+
padding: 20px;
42+
border-radius: 52px;
43+
}
44+
.input-field {
45+
font-size: 1em;
46+
letter-spacing: 2px;
47+
text-align: center;
48+
}
49+
.username i {
50+
position: absolute;
51+
font-size: 1.4em;
52+
padding: 1em;
53+
}
54+
55+
.username {
56+
display: -ms-flexbox;
57+
58+
display: flex;
59+
width: 100%;
60+
}
61+
62+
.username .fa-eye,
63+
.pwd .fa-eye-slash {
64+
cursor: pointer;
65+
width: 1.2em;
66+
}
67+
68+
.button {
69+
display: flex;
70+
justify-content: center;
71+
align-items: center;
72+
padding: 2em 0em 0em 0em;
73+
}
74+
75+
.btn {
76+
font-size: 1.3em;
77+
padding: 0.5em 1em 0.5em 1em;
78+
letter-spacing: 2px;
79+
border: 4px solid #000;
80+
border-radius: 50px;
81+
transition: cubic-bezier(0.075, 0.82, 0.165, 1);
82+
}
83+
84+
.btn:hover {
85+
color: white;
86+
background: black;
87+
}
88+
89+
.button:hover,
90+
.username {
91+
animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
92+
transform: translate3d(0, 0, 0);
93+
perspective: 1000px;
94+
}
95+
96+
@keyframes shake {
97+
10%,
98+
90% {
99+
transform: translate3d(-1px, 0, 0);
100+
}
101+
20%,
102+
80% {
103+
transform: translate3d(2px, 0, 0);
104+
}
105+
106+
30%,
107+
50%,
108+
70% {
109+
transform: translate3d(-2px, 0, 0);
110+
}
111+
40%,
112+
60% {
113+
transform: translate3d(2px, 0, 0);
114+
}
115+
}
116+
117+
@media only screen and (max-width: 600px) {
118+
.formm {
119+
/* padding: 7em;
120+
margin: -4em; */
121+
padding: 5em;
122+
margin: auto;
123+
}
124+
.img-fluid {
125+
display: none;
126+
}
127+
}

‎login-auth-page/login.html

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Login/sign Up </title>
8+
<link rel="stylesheet" href="index.css">
9+
10+
11+
<!-- ----------------------FONT-AWSM----------LINK -->
12+
<script src="https://kit.fontawesome.com/bf577c445a.js" crossorigin="anonymous"></script>
13+
14+
15+
</head>
16+
<body>
17+
18+
<div class="world">
19+
20+
<!-- --------login page image-------- -->
21+
22+
<div class="img-fluid">
23+
<img src="image.jpg">
24+
</div>
25+
26+
27+
<!-- ------------login form ---------------------- -->
28+
<div class="formm">
29+
30+
<!-- login text--- -->
31+
<div class="login">
32+
<h1>Login / Sign Up</h1>
33+
</div>
34+
35+
<div class="inputs">
36+
<!-- first username box--- -->
37+
<div class="username">
38+
<i class="fas fa-users"></i>
39+
<input class="input-field" id="username" placeholder="Username">
40+
</div>
41+
42+
</br>
43+
44+
<!-- ------------pasword--------- -->
45+
<div class="username">
46+
47+
<i class="fas fa-lock"></i>
48+
<input class="input-field" id="password" type="password" placeholder="Password">
49+
</div>
50+
51+
</div>
52+
<!-- -------submit button--------- -->
53+
<div class="button">
54+
<button class="btn" value="Login" id="submit" onclick="validate()" > Submit </button>
55+
</div>
56+
57+
</div>
58+
</div>
59+
60+
<script >
61+
62+
// ------------javascript code for password alert----------
63+
64+
function validate() {
65+
var username = document.getElementById("username").value;
66+
var password = document.getElementById("password").value;
67+
68+
// it will check whether user has put up something OR not
69+
70+
if (username == null || username == "") {
71+
alert("Please enter the username....!!");
72+
return false;
73+
}
74+
// it will check whether user has put up password something OR not
75+
if (password == null || password == "") {
76+
alert("Please enter the password....!!");
77+
return false;
78+
}
79+
alert('Login successful..welcome.!!');
80+
}
81+
82+
83+
</script>
84+
85+
</body>
86+
</html>

‎login-auth-page/profile.css

+30
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎login-auth-page/profile.html

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Profile</title>
8+
<link rel="stylesheet" href="profile.css">
9+
<!-- CSS only -->
10+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
11+
</head>
12+
<body>
13+
<div class="d-flex">
14+
15+
<form class=" col-lg-6">
16+
<!-- ========heading of profile=== -->
17+
<div class="heading">
18+
<h1 class=" mt-5 text-center font-weight-bold title">Profile</h1>
19+
</div>
20+
<div class=" mx-5 mt-5 form-group">
21+
<label for="exampleInputEmail1">Email address</label>
22+
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
23+
24+
</div><br>
25+
<!-- <div class="mx-5 ">
26+
<label for="exampleInputEmail1" >Governmnet id</label>
27+
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="">
28+
29+
</div> -->
30+
<div class="mx-5 ">
31+
<label for="exampleInputPassword1">Password</label>
32+
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
33+
34+
</div>
35+
36+
<div class="mx-5 my-4">
37+
<label for="exampleInputPassword1">Password</label>
38+
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
39+
40+
</div>
41+
<!-- <div class="form-group form-check">
42+
<input type="checkbox" class="form-check-input" id="exampleCheck1">
43+
<label class="form-check-label" for="exampleCheck1">Check me out</label>
44+
</div> -->
45+
46+
<div class=" mx-5 form-group">
47+
<label for="exampleFormControlTextarea1">Example </label>
48+
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
49+
</div>
50+
<button type="submit" class=" m-5 btn btn-primary">Submit</button>
51+
52+
<!-- <div class="button">
53+
<button class="btn" value="Login" id="submit" onclick="validate()" > Submit </button>
54+
</div> -->
55+
</form>
56+
57+
58+
<!-- =====photo=== -->
59+
<form class="profile-img col-lg-6">
60+
<div class=" form-group">
61+
<!-- <label for="exampleFormControlFile1">Profile pic</label> -->
62+
<h4 class="mb-3 font-weight-bold title" style="text-decoration: dashed">Profile Pic</h4>
63+
64+
<div class=" rounded-circle photo" placeholder="siughg"></div>
65+
<input type="file" class="mt-2 form-control-file" id="exampleFormControlFile1" >
66+
</div>
67+
</form>
68+
</div>
69+
70+
71+
</body>
72+
</body>
73+
</html>

0 commit comments

Comments
 (0)