Skip to content

login page #75

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Kusumkoli wants to merge 1 commit into
base: master
Choose a base branch
from
Open

login page #75

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 38 additions & 20 deletions LoginPageTask/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,27 +9,45 @@
<title>Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css">
<script src="main.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<body>
<img src="https://incubateind.com/images/IncubateIND%20Black.png" class="logo" alt="">
<!-- Beautify This -->
<div class="log-form">
<h2>Enter your details</h2>
<form>
<input type="text" title="username" placeholder="username" />
<input type="email" title="email" placeholder="email">
<input type="password" title="password" placeholder="password" />
<input type="password" title="cnfpassword" placeholder="confirm password" />
<textarea name="message" id="message" cols="35" rows="4" placeholder="enter message"></textarea>
<p>Age</p>
<input type="radio" id="above" name="age" value="above">
<label for="above">Above 18</label>
<input type="radio" id="below" name="age" value="below">
<label for="below">Below 18</label>
<button type="submit" class="btn">Submit</button>
</form>
</div>
<!-- Beautify Ends -->
<img src="https://incubateind.com/images/IncubateIND%20Black.png" class="logo" alt="">
<!----- close button ----->
<div class="close">
<i class="fa fa-close"></i>
</div>

<!---- search field ------->
<div class="search">
<!-- <i class="fa fa-search"></i> -->
<p class="open_form">Welcome Back</p>
<div class="input">
<class class="log-form">
<p>Enter Your Details</p>
<form>

<input type="text" title="username" placeholder="username" />

<input type="email" title="email" placeholder="email">
<input type="password" title="password" placeholder="password" />
<input type="password" title="cnfpassword" placeholder="confirm password" />
<textarea name="message" id="message" cols="35" rows="4" placeholder="enter message"></textarea>
<div style="font-size: 15px;">
<p>Age</p>
<input type="radio" id="above" name="age" value="above">
<label for="above">Above 18</label>
<input type="radio" id="below" name="age" value="below">
<label for="below">Below 18</label>
</div>
<button type="submit" class="btn">Submit</button>
</form>
</div>
</div>
</body>

<!-- <script src="jquery-3.4.1.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="main.js"></script>
</html>
130 changes: 123 additions & 7 deletions LoginPageTask/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,21 @@
}

body {
font-family: "open sans", helvetica, arial, sans;
font-family: 'Josefin Sans', sans-serif;
}

.logo{
width: 100px;
margin: 20px;
z-index: 10;
position: absolute;
}
.log-form {

/*.log-form {
width: 100%;
min-width: 320px;
max-width: 475px;
background: #fff;
background: transparent;
position: absolute;
top: 50%;
left: 50%;
Expand All @@ -21,21 +26,132 @@ body {
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
}*/

h2 {
text-align: center;
}
.log-form {
/*.log-form {
padding: 2em;
-webkit-box-shadow: 4px -1px 53px -7px rgba(138, 138, 138, 0.30);
-moz-box-shadow: 4px -1px 53px -7px rgba(138, 138, 138, 0.30);
box-shadow: 4px -1px 53px -7px rgba(138, 138, 138, 0.30);
}
}*/

form {
display: block;
text-align: center;
width: 100%;
}
/* ========================WRITE YOUR CSS FROM HERE======================== */
/* ========================WRITE YOUR CSS FROM HERE======================== */

*{
margin:0;
padding:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}

body{
background:#263238;
position:relative;
}

.close{
position:absolute;
color:#fff;
top:20px;
right:50px;
font-size:1.7em;
cursor:pointer;
display:none;
z-index:999;
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
-webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.close:hover{
font-size:2.4em;
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
/*-------------- saerch section -----------*/
.search{
position:fixed;
top:50%;
left:50%;
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
border-radius:1000px;
width:0;
height:0;
background: -webkit-gradient(linear, left top, right top, from(#7b4397), to(#dc2430));
-webkit-transition: all .4s linear;
transition: all .4s linear;
}

.search .open_form{
color:white;
font-size:1.7em;
cursor:pointer;
width: auto;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

.log-form {
text-align: center;
padding: 20px;
}

.search .input{
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
width:350px;
height:500px;
background: black;
border:none;
outline:none;
border-bottom:3px solid #eee;
color:#eee;
font-size:1.3em;
display:none;
}

input {
background-color: transparent;
padding: 10px 20px;
border-radius: 20px;
color: white;
margin: 10px;
outline: none;
border: solid grey 2px;
}

form {
display: flex;
flex-direction: column;
align-items: center;
}

textarea {
background-color: transparent;
border: solid grey 2px;
margin: 10px;
border-radius: 20px;
padding: 6px 15px;
}

.search.open{
height:4000px;
width:4000px;
}
16 changes: 16 additions & 0 deletions LoginPageTask/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,17 @@
/* ========================WRITE YOUR JS FROM HERE======================== */
(function($){
var search_button = $('.open_form'),
close_button = $('.close'),
input = $('.input');
search_button.on('click',function(){
$(this).parent().addClass('open');
close_button.fadeIn(500);
input.fadeIn(500);
});

close_button.on('click',function(){
search_button.parent().removeClass('open');
close_button.fadeOut(500);
input.fadeOut(500);
});
})(jQuery);