From 5afcad3543b20f7a5c0bbdca16d2885b1b73ee67 Mon Sep 17 00:00:00 2001 From: Kusumkoli Date: Thu, 26 Mar 2020 00:00:16 -1200 Subject: [PATCH] login page --- LoginPageTask/index.html | 58 +++++++++++------ LoginPageTask/main.css | 130 ++++++++++++++++++++++++++++++++++++--- LoginPageTask/main.js | 16 +++++ 3 files changed, 177 insertions(+), 27 deletions(-) diff --git a/LoginPageTask/index.html b/LoginPageTask/index.html index 99031f8..de4fb90 100644 --- a/LoginPageTask/index.html +++ b/LoginPageTask/index.html @@ -9,27 +9,45 @@ Login - + + - - -
-

Enter your details

-
- - - - - -

Age

- - - - - -
-
- + + +
+ +
+ + +
+ +

Welcome Back

+
+ +

Enter Your Details

+
+ + + + + + + +
+

Age

+ + + + +
+ +
+
+
+ + + + \ No newline at end of file diff --git a/LoginPageTask/main.css b/LoginPageTask/main.css index 5991bf3..683ecca 100644 --- a/LoginPageTask/main.css +++ b/LoginPageTask/main.css @@ -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%; @@ -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======================== */ \ No newline at end of file +/* ========================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; +} \ No newline at end of file diff --git a/LoginPageTask/main.js b/LoginPageTask/main.js index 05d42f4..f755100 100644 --- a/LoginPageTask/main.js +++ b/LoginPageTask/main.js @@ -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); \ No newline at end of file