Merge pull request #122 from MojtabaZare/master

ShravanMeena · web-flow · commit 7e4aa5108842 · 2019-10-23T14:42:55.000+05:30
simple, minimal login form
diff --git a/Log In Form Designs/MZ-login-form2/Readme.md b/Log In Form Designs/MZ-login-form2/Readme.md
diff --git a/Log In Form Designs/MZ-login-form2/css/index.css b/Log In Form Designs/MZ-login-form2/css/index.css
@@ -0,0 +1,63 @@
+body{
+    font-family: 'Space Mono', monospace;
+    background: #ad5389;  /* fallback for old browsers */
+    background: -webkit-linear-gradient(to right, #3c1053, #ad5389);  /* Chrome 10-25, Safari 5.1-6 */
+    background: linear-gradient(to right, #3c1053, #ad5389); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+    color: white;
+}
+*:focus {
+    outline: none;
+}
+#login-container{
+    margin: 5% auto;
+    width: 35%;
+    padding: 50px;
+    box-shadow: 0 0 5px white;
+    text-align: center;
+}
+h1{
+    text-shadow: 1px 1px 2px white;
+}
+form *{
+    display: block;
+    margin: auto;
+}
+form input{
+    width: 100%;
+    height: 40px;
+    text-align: center;
+    font-family: inherit;
+    background-color: unset;
+    margin-bottom: 10px;
+    border: none;
+    color: inherit;
+    -webkit-transition: 0.5s;
+    transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+form input:focus{
+    box-shadow: 0 0 5px white;
+}
+form input::placeholder{
+    color: #ccc;
+}
+form button{
+    border: none;
+    background-color: unset;
+    font-size: 20px;
+    font-family: inherit;
+    cursor: pointer;
+    color: inherit;
+    margin-top: 20px;
+    width: 100%;
+    padding: 10px 0;
+    transition: 0.5s;
+}
+form button:hover{
+    box-shadow: 0 0 5px white;
+}
+@media (max-width: 768px){
+    #login-container{
+        width: 80%;
+        padding: 20px;
+    }
+}
diff --git a/Log In Form Designs/MZ-login-form2/index.html b/Log In Form Designs/MZ-login-form2/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>login</title>
+        <link href="https://fonts.googleapis.com/css?family=Space+Mono&display=swap" rel="stylesheet">
+        <link rel="stylesheet" href="css/index.css">
+    </head>
+    <body>
+        <div id="login-container">
+            <h1>Login form</h1>
+            <form>
+                <input type="text" placeholder="username">
+                <input type="password" placeholder="password">
+                <button>Login</button>
+            </form>
+        </div>
+    </body>
+</html>
