diff --git a/images/bg.jpg b/images/bg.jpg new file mode 100644 index 0000000..1476dac Binary files /dev/null and b/images/bg.jpg differ diff --git a/images/facebook.png b/images/facebook.png new file mode 100644 index 0000000..14d5f18 Binary files /dev/null and b/images/facebook.png differ diff --git a/images/instagram.png b/images/instagram.png new file mode 100644 index 0000000..da645b7 Binary files /dev/null and b/images/instagram.png differ diff --git a/images/linkedin.png b/images/linkedin.png new file mode 100644 index 0000000..8108210 Binary files /dev/null and b/images/linkedin.png differ diff --git a/images/twitter.png b/images/twitter.png new file mode 100644 index 0000000..06d0c0f Binary files /dev/null and b/images/twitter.png differ diff --git a/script.js b/script.js new file mode 100644 index 0000000..cd9e74a --- /dev/null +++ b/script.js @@ -0,0 +1,5 @@ +document.querySelector('.img-btn').addEventListener('click', function() + { + document.querySelector('.cont').classList.toggle('s-signup') + } +); diff --git a/signup.html.html b/signup.html.html new file mode 100644 index 0000000..1843301 --- /dev/null +++ b/signup.html.html @@ -0,0 +1,74 @@ + + + + How to Design Login & Registration Form Transition + + + + + + +
+
+

Sign In

+ + + +

Forgot Password ?

+ + +
+ +
+
+
+

New here?

+

Sign up and discover great amount of new opportunities!

+
+
+

One of us?

+

If you already has an account, just sign in. We've missed you!

+
+
+ Sign Up + Sign In +
+
+ +
+
+ + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..b1d4a2d --- /dev/null +++ b/style.css @@ -0,0 +1,312 @@ +*, *:before, *:after{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Nunito', sans-serif; +} + +body{ + width: 100%; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + background: -webkit-linear-gradient(left, #7579ff, #b224ef); + font-family: 'Nunito', sans-serif; +} + +input, button{ + border:none; + outline: none; + background: none; +} + +.cont{ + overflow: hidden; + position: relative; + width: 900px; + height: 550px; + background: #fff; + box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22); +} + +.form{ + position: relative; + width: 640px; + height: 100%; + padding: 50px 30px; + -webkit-transition:-webkit-transform 1.2s ease-in-out; + transition: -webkit-transform 1.2s ease-in-out; + transition: transform 1.2s ease-in-out; + transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out; +} + +h2{ + width: 100%; + font-size: 30px; + text-align: center; +} + +label{ + display: block; + width: 260px; + margin: 25px auto 0; + text-align: center; +} + +label span{ + font-size: 14px; + font-weight: 600; + color: #505f75; + text-transform: uppercase; +} + +input{ + display: block; + width: 100%; + margin-top: 5px; + font-size: 16px; + padding-bottom: 5px; + border-bottom: 1px solid rgba(109, 93, 93, 0.4); + text-align: center; + font-family: 'Nunito', sans-serif; +} + +button{ + display: block; + margin: 0 auto; + width: 260px; + height: 36px; + border-radius: 30px; + color: #fff; + font-size: 15px; + cursor: pointer; +} + +.submit{ + margin-top: 40px; + margin-bottom: 30px; + text-transform: uppercase; + font-weight: 600; + font-family: 'Nunito', sans-serif; + background: -webkit-linear-gradient(left, #7579ff, #b224ef); +} + +.submit:hover{ + background: -webkit-linear-gradient(left, #b224ef, #7579ff); +} + +.forgot-pass{ + margin-top: 15px; + text-align: center; + font-size: 14px; + font-weight: 600; + color: #0c0101; + cursor: pointer; +} + +.forgot-pass:hover{ + color: red; +} + +.social-media{ + width: 100%; + text-align: center; + margin-top: 20px; +} + +.social-media ul{ + list-style: none; +} + +.social-media ul li{ + display: inline-block; + cursor: pointer; + margin: 25px 15px; +} + +.social-media img{ + width: 40px; + height: 40px; +} + +.sub-cont{ + overflow: hidden; + position: absolute; + left: 640px; + top: 0; + width: 900px; + height: 100%; + padding-left: 260px; + background: #fff; + -webkit-transition: -webkit-transform 1.2s ease-in-out; + transition: -webkit-transform 1.2s ease-in-out; + transition: transform 1.2s ease-in-out; +} + +.cont.s-signup .sub-cont{ + -webkit-transform:translate3d(-640px, 0, 0); + transform:translate3d(-640px, 0, 0); +} + +.img{ + overflow: hidden; + z-index: 2; + position: absolute; + left: 0; + top: 0; + width: 260px; + height: 100%; + padding-top: 360px; +} + +.img:before{ + content: ''; + position: absolute; + right: 0; + top: 0; + width: 900px; + height: 100%; + background-image: url(images/bg.jpg); + background-size: cover; + transition: -webkit-transform 1.2s ease-in-out; + transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out; +} + +.img:after{ + content: ''; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: rgba(0,0,0,0.3); +} + +.cont.s-signup .img:before{ + -webkit-transform:translate3d(640px, 0, 0); + transform:translate3d(640px, 0, 0); +} + +.img-text{ + z-index: 2; + position: absolute; + left: 0; + top: 50px; + width: 100%; + padding: 0 20px; + text-align: center; + color: #fff; + -webkit-transition:-webkit-transform 1.2s ease-in-out; + transition: -webkit-transform 1.2s ease-in-out; + transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out; +} + +.img-text h2{ + margin-bottom: 10px; + font-weight: normal; +} + +.img-text p{ + font-size: 14px; + line-height: 1.5; +} + +.cont.s-signup .img-text.m-up{ + -webkit-transform:translateX(520px); + transform:translateX(520px); +} + +.img-text.m-in{ + -webkit-transform:translateX(-520px); + transform:translateX(-520px); +} + +.cont.s-signup .img-text.m-in{ + -webkit-transform:translateX(0); + transform:translateX(0); +} + + +.sign-in{ + padding-top: 65px; + -webkit-transition-timing-function:ease-out; + transition-timing-function:ease-out; +} + +.cont.s-signup .sign-in{ + -webkit-transition-timing-function:ease-in-out; + transition-timing-function:ease-in-out; + -webkit-transition-duration:1.2s; + transition-duration:1.2s; + -webkit-transform:translate3d(640px, 0, 0); + transform:translate3d(640px, 0, 0); +} + +.img-btn{ + overflow: hidden; + z-index: 2; + position: relative; + width: 100px; + height: 36px; + margin: 0 auto; + background: transparent; + color: #fff; + text-transform: uppercase; + font-size: 15px; + cursor: pointer; +} + +.img-btn:after{ + content: ''; + z-index: 2; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + border: 2px solid #fff; + border-radius: 30px; +} + +.img-btn span{ + position: absolute; + left: 0; + top: 0; + display: -webkit-box; + display: flex; + -webkit-box-pack:center; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + -webkit-transition:-webkit-transform 1.2s; + transition: -webkit-transform 1.2s; + transition: transform 1.2s; + transition: transform 1.2s, -webkit-transform 1.2s;; +} + +.img-btn span.m-in{ + -webkit-transform:translateY(-72px); + transform:translateY(-72px); +} + +.cont.s-signup .img-btn span.m-in{ + -webkit-transform:translateY(0); + transform:translateY(0); +} + +.cont.s-signup .img-btn span.m-up{ + -webkit-transform:translateY(72px); + transform:translateY(72px); +} + +.sign-up{ + -webkit-transform:translate3d(-900px, 0, 0); + transform:translate3d(-900px, 0, 0); +} + +.cont.s-signup .sign-up{ + -webkit-transform:translate3d(0, 0, 0); + transform:translate3d(0, 0, 0); +} \ No newline at end of file