add desktop version

Author: solygambas

87-sliding signin signup form/index.html

@@ -19,7 +19,7 @@
     <div class="container" id="container">
       <div class="form-container sign-up-container">
         <form>
-          <h1>Create Account</h1>
+          <h1>Sign Up</h1>
           <div class="social-container">
             <a href="#" class="social"><i class="fab fa-instagram"></i></a>
             <a href="#" class="social"><i class="fab fa-google"></i></a>
@@ -34,7 +34,7 @@ <h1>Create Account</h1>
       </div>
       <div class="form-container sign-in-container">
         <form>
-          <h1>Sign in</h1>
+          <h1>Sign In</h1>
           <div class="social-container">
             <a href="#" class="social"><i class="fab fa-instagram"></i></a>
             <a href="#" class="social"><i class="fab fa-google"></i></a>

87-sliding signin signup form/style.css

@@ -22,7 +22,7 @@ body {
   align-items: center;
   justify-content: center;
   min-height: 100vh;
-  margin: -20px 0 50px;
+  margin: 1rem 0;
 }
 
 h1 {
@@ -127,7 +127,6 @@ input {
   position: relative;
   overflow: hidden;
   height: 768px;
-  max-height: 96%;
   width: 480px;
   max-width: 100%;
 }
@@ -241,3 +240,90 @@ input {
 .container.right-panel-active .overlay-right {
   transform: translateY(20%);
 }
+
+@media (min-width: 768px) {
+  body {
+    margin: -20px 0 50px;
+  }
+
+  .container {
+    width: 768px;
+    max-width: 100%;
+    height: 480px;
+  }
+
+  .form-container {
+    top: 0;
+    height: 100%;
+    width: 50%;
+  }
+
+  .sign-in-container {
+    left: 0;
+    width: 50%;
+    height: 100%;
+  }
+
+  .container.right-panel-active .sign-in-container {
+    transform: translateX(100%);
+  }
+
+  .sign-up-container {
+    left: 0;
+    width: 50%;
+    height: 100%;
+  }
+
+  .container.right-panel-active .sign-up-container {
+    transform: translateX(100%);
+  }
+
+  .overlay-container {
+    left: 50%;
+    top: 0;
+    height: 100%;
+    width: 50%;
+  }
+
+  .container.right-panel-active .overlay-container {
+    transform: translateX(-100%);
+  }
+
+  .overlay {
+    top: 0;
+    left: -100%;
+    height: 100%;
+    width: 200%;
+    transform: translateX(0);
+  }
+
+  .container.right-panel-active .overlay {
+    transform: translateX(50%);
+  }
+
+  .overlay-panel {
+    top: 0;
+    height: 100%;
+    width: 50%;
+    transform: translateX(0);
+  }
+
+  .overlay-left {
+    transform: translateX(-20%);
+  }
+
+  .container.right-panel-active .overlay-left {
+    transform: translateX(0);
+  }
+
+  .overlay-right {
+    right: 0;
+    top: 0;
+    left: 50%;
+    transform: translateX(0);
+  }
+
+  .container.right-panel-active .overlay-right {
+    transform: translateX(20%);
+  }
+}