diff --git a/100_projects/83-games-sign-in-login-form/images/facebook.png b/100_projects/83-games-sign-in-login-form/images/facebook.png new file mode 100644 index 0000000..9cad026 Binary files /dev/null and b/100_projects/83-games-sign-in-login-form/images/facebook.png differ diff --git a/100_projects/83-games-sign-in-login-form/images/google.png b/100_projects/83-games-sign-in-login-form/images/google.png new file mode 100644 index 0000000..d858f75 Binary files /dev/null and b/100_projects/83-games-sign-in-login-form/images/google.png differ diff --git a/100_projects/83-games-sign-in-login-form/images/logo.png b/100_projects/83-games-sign-in-login-form/images/logo.png new file mode 100644 index 0000000..c086c24 Binary files /dev/null and b/100_projects/83-games-sign-in-login-form/images/logo.png differ diff --git a/100_projects/83-games-sign-in-login-form/images/playstation.png b/100_projects/83-games-sign-in-login-form/images/playstation.png new file mode 100644 index 0000000..5c6b4c0 Binary files /dev/null and b/100_projects/83-games-sign-in-login-form/images/playstation.png differ diff --git a/100_projects/83-games-sign-in-login-form/images/switch.png b/100_projects/83-games-sign-in-login-form/images/switch.png new file mode 100644 index 0000000..9d7eabd Binary files /dev/null and b/100_projects/83-games-sign-in-login-form/images/switch.png differ diff --git a/100_projects/83-games-sign-in-login-form/images/xbox.png b/100_projects/83-games-sign-in-login-form/images/xbox.png new file mode 100644 index 0000000..2139c1b Binary files /dev/null and b/100_projects/83-games-sign-in-login-form/images/xbox.png differ diff --git a/100_projects/83-games-sign-in-login-form/index.html b/100_projects/83-games-sign-in-login-form/index.html new file mode 100644 index 0000000..0fdbaa2 --- /dev/null +++ b/100_projects/83-games-sign-in-login-form/index.html @@ -0,0 +1,53 @@ + + + + + document + + + + + + +
+ +
+ + + + + +
+
Sign In
+
+
+ + +
+
+ + +
+
+ + Forgot Your Password? +
+ +
+ Privacy Policy +
+
+
+ Don't have an Epic Games account? + Sign Up +
+
+ + + diff --git a/100_projects/83-games-sign-in-login-form/main.js b/100_projects/83-games-sign-in-login-form/main.js new file mode 100644 index 0000000..f763c41 --- /dev/null +++ b/100_projects/83-games-sign-in-login-form/main.js @@ -0,0 +1,20 @@ +$(".textbox input").focusout(function(){ + if($(this).val() == ""){ + $(this).siblings().removeClass("hidden"); + $(this).css("background","#554343"); + }else{ + $(this).siblings().addClass("hidden"); + $(this).css("background","#484848"); + } +}); + +$(".textbox input").keyup(function(){ + var inputs = $(".textbox input"); + if(inputs[0].value != "" && inputs[1].value){ + $(".login-btn").attr("disabled",false); + $(".login-btn").addClass("active"); + }else{ + $(".login-btn").attr("disabled",true); + $(".login-btn").removeClass("active"); + } +}); \ No newline at end of file diff --git a/100_projects/83-games-sign-in-login-form/style.css b/100_projects/83-games-sign-in-login-form/style.css new file mode 100644 index 0000000..2fec8f8 --- /dev/null +++ b/100_projects/83-games-sign-in-login-form/style.css @@ -0,0 +1,199 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "hind",sans-serif; + text-decoration: none; +} +body{ + background: #121212; + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; +} +.login-form{ + width: 470px; + background: #202020; + padding: 30px 60px; +} +.logo{ + height: 50px; + text-align: center; +} +.logo img{ + height: 50px; +} +.social-media{ + display: flex; + margin: 30px 0; +} +.social-media button{ + height: 50px; + width: 100px; + margin-right: 10px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + border: none; + transition: .3s linear; + border-radius: 2px; +} +.social-media button:last-child{ + margin: 0; +} +.social-media button img{ + width: 20px; +} +.facebook{ + background: #4267b2; +} +.google{ + background: #fff; +} +.playstation{ + background: #02b3e8; +} +.xbox{ + background: #107c10; +} +.switch{ + background: #e60012; +} +.social-media button:hover { + opacity: .7; +} +.login-form h6{ + color: #f1f1f1; + font-size: 16px; + text-transform: uppercase; + font-weight: 600; +} +.textbox{ + width: 100%; + height: 50px; + position: relative; + margin-top: 15px; +} +.textbox input{ + width: 100%; + height: 50px; + border: none; + background: #2b2b2b; + padding: 0 15px; + font-size: 16px; + outline: none; + color: #f4f4f4; +} +.textbox input:focus{ + background: #484848 !important; +} +.check-message{ + position: absolute; + top: 50%; + right: 10px; + color: #fff; + text-transform: uppercase; + transform: translateY(-50%); +} +.textbox input:focus + .check-message{ + display: none; +} +.options{ + margin-top: 15px; + color: #f4f4f480; + overflow: hidden; + font-size: 14px; + display: flex; + justify-content: space-between; + align-items: center; +} +.remember-me{ + display: flex; + align-items: center; + justify-content: center; + align-content: center; + cursor: pointer; +} +.checkbox{ + width: 20px; + height: 20px; + background: #484848; + margin-right: 8px; + position: relative; +} +.checkbox input{ + width: 100%; + height: 100%; + opacity: 0; + cursor: pointer; +} +.checked{ + position: absolute; + left: 8px; + top: 4px; + width: 5px; + height: 10px; + border: solid #fff; + border-width: 0 1px 1px 0; + transform: rotate(45deg); + display: none; +} +.checkbox input:checked + .checked{ + display: block; +} +.options a{ + color: #f4f4f480; + font-size: 14px; + float: right; +} +.login-btn{ + width: 100%; + height: 50px; + margin-top: 30px; + background: #191919; + color: #f1f1f1; + border: none; + outline: none; + cursor: pointer; + text-transform: uppercase; + font-weight: 700; + transition: .3s linear; +} +.login-btn.active{ + background: #037bee; + color: #fff; +} +.login-btn.active:hover{ + opacity: .7; +} +.hidden{ + display: none; +} +.privacy-link{ + text-align: center; + margin-top: 35px; +} +.privacy-link a{ + color: #f1f1f1; + font-size: 14px; +} +.dont-have-account{ + font-size: 14px; + text-align: center; + color: #f4f4f480; + margin: 20px 0; +} +.dont-have-account a{ + color: #f1f1f1; +} +@media screen and (max-width:470px) { + body{ + background: #202020; + } + .login-form{ + width: 100%; + padding: 0 25px; + } +}