-
Notifications
You must be signed in to change notification settings - Fork 188
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
e5991ff
commit 2c416e4
Showing
5 changed files
with
316 additions
and
0 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,127 @@ | ||
/* @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap"); */ | ||
* { | ||
margin: 0%; | ||
padding: 0%; | ||
font-family: "Poppins", sans-serif; | ||
} | ||
|
||
.world { | ||
background-repeat: no-repeat; | ||
display: flex; | ||
justify-content: flex-end; | ||
align-items: center; | ||
height: 45em; | ||
} | ||
|
||
.img-fluid img { | ||
max-width: 100%; | ||
height: auto; | ||
float: left; | ||
} | ||
.img-fluid { | ||
padding: 4em; | ||
} | ||
|
||
.formm { | ||
height: auto; | ||
background: rgb(245, 37, 89); | ||
padding: 7em; | ||
margin: 5em; | ||
border-radius: 74% 26% 50% 50% / 61% 30% 70% 39%; | ||
border: 10px solid black; | ||
} | ||
.login h1 { | ||
text-align: center; | ||
margin-bottom: 1em; | ||
} | ||
|
||
.username input { | ||
border: 4px solid #000; | ||
|
||
padding: 20px; | ||
border-radius: 52px; | ||
} | ||
.input-field { | ||
font-size: 1em; | ||
letter-spacing: 2px; | ||
text-align: center; | ||
} | ||
.username i { | ||
position: absolute; | ||
font-size: 1.4em; | ||
padding: 1em; | ||
} | ||
|
||
.username { | ||
display: -ms-flexbox; | ||
|
||
display: flex; | ||
width: 100%; | ||
} | ||
|
||
.username .fa-eye, | ||
.pwd .fa-eye-slash { | ||
cursor: pointer; | ||
width: 1.2em; | ||
} | ||
|
||
.button { | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
padding: 2em 0em 0em 0em; | ||
} | ||
|
||
.btn { | ||
font-size: 1.3em; | ||
padding: 0.5em 1em 0.5em 1em; | ||
letter-spacing: 2px; | ||
border: 4px solid #000; | ||
border-radius: 50px; | ||
transition: cubic-bezier(0.075, 0.82, 0.165, 1); | ||
} | ||
|
||
.btn:hover { | ||
color: white; | ||
background: black; | ||
} | ||
|
||
.button:hover, | ||
.username { | ||
animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; | ||
transform: translate3d(0, 0, 0); | ||
perspective: 1000px; | ||
} | ||
|
||
@keyframes shake { | ||
10%, | ||
90% { | ||
transform: translate3d(-1px, 0, 0); | ||
} | ||
20%, | ||
80% { | ||
transform: translate3d(2px, 0, 0); | ||
} | ||
|
||
30%, | ||
50%, | ||
70% { | ||
transform: translate3d(-2px, 0, 0); | ||
} | ||
40%, | ||
60% { | ||
transform: translate3d(2px, 0, 0); | ||
} | ||
} | ||
|
||
@media only screen and (max-width: 600px) { | ||
.formm { | ||
/* padding: 7em; | ||
margin: -4em; */ | ||
padding: 5em; | ||
margin: auto; | ||
} | ||
.img-fluid { | ||
display: none; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,86 @@ | ||
<!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>Login/sign Up </title> | ||
<link rel="stylesheet" href="index.css"> | ||
|
||
|
||
<!-- ----------------------FONT-AWSM----------LINK --> | ||
<script src="https://kit.fontawesome.com/bf577c445a.js" crossorigin="anonymous"></script> | ||
|
||
|
||
</head> | ||
<body> | ||
|
||
<div class="world"> | ||
|
||
<!-- --------login page image-------- --> | ||
|
||
<div class="img-fluid"> | ||
<img src="image.jpg"> | ||
</div> | ||
|
||
|
||
<!-- ------------login form ---------------------- --> | ||
<div class="formm"> | ||
|
||
<!-- login text--- --> | ||
<div class="login"> | ||
<h1>Login / Sign Up</h1> | ||
</div> | ||
|
||
<div class="inputs"> | ||
<!-- first username box--- --> | ||
<div class="username"> | ||
<i class="fas fa-users"></i> | ||
<input class="input-field" id="username" placeholder="Username"> | ||
</div> | ||
|
||
</br> | ||
|
||
<!-- ------------pasword--------- --> | ||
<div class="username"> | ||
|
||
<i class="fas fa-lock"></i> | ||
<input class="input-field" id="password" type="password" placeholder="Password"> | ||
</div> | ||
|
||
</div> | ||
<!-- -------submit button--------- --> | ||
<div class="button"> | ||
<button class="btn" value="Login" id="submit" onclick="validate()" > Submit </button> | ||
</div> | ||
|
||
</div> | ||
</div> | ||
|
||
<script > | ||
|
||
// ------------javascript code for password alert---------- | ||
|
||
function validate() { | ||
var username = document.getElementById("username").value; | ||
var password = document.getElementById("password").value; | ||
|
||
// it will check whether user has put up something OR not | ||
|
||
if (username == null || username == "") { | ||
alert("Please enter the username....!!"); | ||
return false; | ||
} | ||
// it will check whether user has put up password something OR not | ||
if (password == null || password == "") { | ||
alert("Please enter the password....!!"); | ||
return false; | ||
} | ||
alert('Login successful..welcome.!!'); | ||
} | ||
|
||
|
||
</script> | ||
|
||
</body> | ||
</html> |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,73 @@ | ||
<!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>Profile</title> | ||
<link rel="stylesheet" href="profile.css"> | ||
<!-- CSS only --> | ||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"> | ||
</head> | ||
<body> | ||
<div class="d-flex"> | ||
|
||
<form class=" col-lg-6"> | ||
<!-- ========heading of profile=== --> | ||
<div class="heading"> | ||
<h1 class=" mt-5 text-center font-weight-bold title">Profile</h1> | ||
</div> | ||
<div class=" mx-5 mt-5 form-group"> | ||
<label for="exampleInputEmail1">Email address</label> | ||
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> | ||
|
||
</div><br> | ||
<!-- <div class="mx-5 "> | ||
<label for="exampleInputEmail1" >Governmnet id</label> | ||
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder=""> | ||
</div> --> | ||
<div class="mx-5 "> | ||
<label for="exampleInputPassword1">Password</label> | ||
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> | ||
|
||
</div> | ||
|
||
<div class="mx-5 my-4"> | ||
<label for="exampleInputPassword1">Password</label> | ||
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> | ||
|
||
</div> | ||
<!-- <div class="form-group form-check"> | ||
<input type="checkbox" class="form-check-input" id="exampleCheck1"> | ||
<label class="form-check-label" for="exampleCheck1">Check me out</label> | ||
</div> --> | ||
|
||
<div class=" mx-5 form-group"> | ||
<label for="exampleFormControlTextarea1">Example </label> | ||
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea> | ||
</div> | ||
<button type="submit" class=" m-5 btn btn-primary">Submit</button> | ||
|
||
<!-- <div class="button"> | ||
<button class="btn" value="Login" id="submit" onclick="validate()" > Submit </button> | ||
</div> --> | ||
</form> | ||
|
||
|
||
<!-- =====photo=== --> | ||
<form class="profile-img col-lg-6"> | ||
<div class=" form-group"> | ||
<!-- <label for="exampleFormControlFile1">Profile pic</label> --> | ||
<h4 class="mb-3 font-weight-bold title" style="text-decoration: dashed">Profile Pic</h4> | ||
|
||
<div class=" rounded-circle photo" placeholder="siughg"></div> | ||
<input type="file" class="mt-2 form-control-file" id="exampleFormControlFile1" > | ||
</div> | ||
</form> | ||
</div> | ||
|
||
|
||
</body> | ||
</body> | ||
</html> |