Skip to content

Commit

Permalink
Merge pull request #83 from asutosh-147/main
Browse files Browse the repository at this point in the history
second commit
  • Loading branch information
IshitaSatpathy authored Oct 9, 2022
2 parents 5a26224 + 37f1a30 commit bc61bfc
Show file tree
Hide file tree
Showing 3 changed files with 161 additions and 0 deletions.
Binary file added Asutosh Behuria/task-2 Login Form/image.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
44 changes: 44 additions & 0 deletions Asutosh Behuria/task-2 Login Form/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<!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">
<script src="https://kit.fontawesome.com/beb01bfdbf.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>

<div class="container">
<h1>Konichiwa >.<</h1>
<form action="">
<div class="txt_field">
<span>
<i class="fa-solid fa-user"></i>
<input type="text" placeholder="Username" required>
</span>
<br>
<span>
<i class="fa-solid fa-lock"></i>
<input type="password" placeholder="Password" required>
</span>
</div>
<button class="Login">Login</button>
<span class="opt">OR <br>login with</span>
<div class="loglink">
<a href=""><i class="fa-brands fa-google"></i></a>
<a href=""><i class="fa-brands fa-facebook"></i></a>
<a href="#"><i class="fa-brands fa-linkedin"></i></a>
</div>
<div class="newpage">
<ul>
<li><a href="#">Forgot password?</a></li>
<li>Don't have an account?<a href="#"> Sign up</a></li>
</ul>
</div>

</form>
</div>
</body>
</html>
117 changes: 117 additions & 0 deletions Asutosh Behuria/task-2 Login Form/styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
*{
box-sizing: border-box;
font-family:sans-serif;
}
body{
margin: 0;
padding: 0;
background-image: url(/image.jpg);
/* background-image: linear-gradient(120deg,rgb(46, 34, 172),rgb(228, 76, 158)); */
background-size: cover;
background-repeat:repeat-y;
overflow: hidden;

}
.container{
width: 400px;
margin: 10% auto;
text-align: center;
padding: 20px;
background-color: rgb(241, 247, 254);
/* background: none; */
/* padding: 5px; */
box-shadow: 0 0 15px rgb(73, 56, 78);
border-radius: 20px;
}
.container h1{
text-align: center;
/* margin: 25px; */
padding: 10px;
padding-bottom: 20px;
border-bottom: 1px solid silver;
text-shadow: 2px 3px 5px #555;
letter-spacing: 3px;
color: rgb(50, 47, 47);
}
.container input{
border: none;
outline: none;
width: 300px;
height: 40px;
background-color: rgba(255, 255, 255, 0.949);
font-size: 1.2em;
border-radius: 10px;
padding-left: 35px;
margin: 10px;
border-bottom: 1px solid rgba(104, 84, 84, 0.949);
background: none;

}
.txt_field input:hover{
box-shadow: 2px 2px 5px #555;
}
.Login{
display: block;
text-align: center;
margin: auto;
width: 69%;
height: 35px;
border: none;
outline: none;
border-radius: 8px;
margin-top: 25px;
margin-bottom: 20px;
background-color: hsl(269, 46%, 32%);
color: hsl(212, 87%, 97%);
letter-spacing: 3px;
cursor: pointer;
}
.Login:hover{
background-color: rgb(29, 122, 35);
}
.txt_field span{
position: relative;
}
span i{
position: absolute;
top: 0px;
left: 23px;
color:hsl(269, 46%, 32%) ;
}
i{
color:hsl(269, 46%, 32%)
}
.opt{
margin: auto;
letter-spacing: 1px;
}
.loglink{
width: 50%;
font-size: 1.7em;
padding: 15px 0px;
margin: auto;
display: flex;
justify-content:space-evenly;
align-items: center;
}
.loglink i:hover{
color: rgb(45, 172, 53);
}
.newpage{
/* margin-left: 15px; */
padding-left: 10px;
text-align: left;

}
ul{
list-style: none;
}
.newpage li,a{
margin-bottom: 6px;
text-decoration: none;
color: #555;
}
.newpage a:hover{
color: rgb(232, 100, 100);
font-size: 1.1em;
}

0 comments on commit bc61bfc

Please sign in to comment.