File Index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
</head>
<body>
<div class="login-form">
<div class="logo"></div>
<div class="container">
<h1>Sign in with social club</h1>
<form action="">
<div class="txtb">
<input type="text" placeholder=" ">
<span class="placeholder">Email</span>
</div>
<div class="txtb">
<input type="password" id="passwordInput" placeholder=" ">
<span class="placeholder">Password</span>
<i class="show-password-btn">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" height="16" width="16" class="UI__Icon__icon" data-ui-name="visibility_off_icon"><path d="M29.8 17.2c-2.2 1.7-4.6 3-7.1 3.7l-2.5-2.5c.6-.8.9-1.8.9-2.9 0-1.4-.5-2.6-1.5-3.6-1.7-1.7-4.5-1.9-6.4-.6l-1.7-1.7c6.3-1.3 12.9.1 18.4 4.3.6.5 1.5.4 1.9-.2.5-.6.4-1.5-.2-1.9-6.7-5.1-14.9-6.6-22.4-4.4L5.7 3.9c-.5-.5-1.4-.5-1.9 0s-.5 1.4 0 1.9l2.6 2.6c-2 .9-4 2-5.8 3.4-.6.5-.7 1.3-.2 1.9.3.3.7.5 1.1.5.3 0 .6-.1.8-.3 1.9-1.5 4-2.6 6.2-3.4l2.9 2.9c-.3.6-.4 1.2-.4 1.8 0 .8.5 1.4 1.3 1.5.6.1 1.2-.4 1.4-1l2.2 2.2c-.2 0-.3 0-.5-.1-.7-.2-1.5.2-1.7.9-.2.7.2 1.5.9 1.7.5.2 1 .2 1.5.2.7 0 1.4-.2 2.1-.5l1.5 1.5c-6 1-12.2-.5-17.3-4.5-.6-.5-1.5-.4-1.9.2-.5.6-.4 1.5.2 1.9 4.6 3.6 10 5.4 15.5 5.4 2 0 3.9-.2 5.9-.7l4.1 4.1c.3.3.6.4 1 .4s.7-.1 1-.4c.5-.5.5-1.4 0-1.9L25.1 23c2.3-.9 4.6-2.1 6.6-3.7.6-.5.7-1.3.2-1.9-.7-.6-1.5-.7-2.1-.2zm-12.2-3.3c.4.4.7 1 .7 1.7 0 .3-.1.6-.2.8l-3-3c.9-.3 1.9-.1 2.5.5z"></path></svg>
</i>
</div>
<label class="checkbox">
<input type="checkbox">
<span>Keep me signed in</span>
</label>
<div class="forgot-signin-container">
<a href="#" class="link">Forgot your password?</a>
<input type="button" value="Sign in">
</div>
</form>
</div>
<div class="container bottom-container">
<h3 class="row">Sign in using</h3>
<div class="sm-login row">
<a href="#">
<img src="images/ps.png" alt="">
</a>
<a href="#">
<img src="images/xbox.png" alt="">
</a>
<a href="#">
<img src="images/fb.png" alt="">
</a>
<a href="#">
<img src="images/google.png" alt="">
</a>
<a href="#">
<img src="images/twitter.png" alt="">
</a>
</div>
</div>
<div class="create-account">
Not a member?
<a href="#" class="link">Create a new account</a>
</div>
</div>
<div class="copyright">
© 2020
</div>
<script>
document.querySelector(".show-password-btn").addEventListener("click",function(){
var passwordInput = document.querySelector("#passwordInput");
if(passwordInput.type == "password") passwordInput.type = "text";
else passwordInput.type = "password";
});
</script>
</body>
</html>
File CSS for style.css
*{
margin: 0;
padding: 0;
font-family: "ubuntu",sans-serif;
box-sizing: border-box;
}
::selection{
background-color: #fdcf74;
}
body{
background-image: url(images/bg.png);
background-size: 256px;
min-height: 100vh;
display: grid;
justify-items: center;
align-items: center;
grid-template-rows: auto 62px;
}
.login-form{
width: 100%;
max-width: 500px;
}
.logo{
background-image: url(images/logo.svg);
width: 290px;
height: 82px;
margin: 40px auto;
}
.container{
margin: 20px 0;
background-color: #fff;
padding: 20px;
border-radius: 2px;
color: #4d4d4d;
}
.container h1{
font-size: 24px;
margin-bottom: 20px;
}
.txtb{
height: 50px;
margin-bottom: 20px;
position: relative;
overflow: hidden;
}
.txtb input{
width: 100%;
height: 50px;
border: 1px solid #e6e6e6;
padding: 0 20px;
font-size: 18px;
color: #666;
border-radius: 3px;
outline: 3px solid #fcaf1770;
}
.placeholder{
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
user-select: none;
pointer-events: none;
font-size: 17px;
transform-origin: 0 0;
transition: .2s linear;
}
.txtb input:not(:placeholder-shown) + .placeholder{
transform: scale(.75) translateY(-26px);
}
.txtb input:not(:placeholder-shown){
padding-top: 12px;
}
.show-password-btn{
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
fill: #999;
}
.checkbox{
display: inline-block;
margin-bottom: 20px;
cursor: pointer;
padding-left: 30px;
position: relative;
}
.checkbox input{
display: none;
}
.checkbox span::before{
content: "";
position: absolute;
width: 20px;
height: 20px;
border: 1px solid #4d4d4d;
left: 0;
box-sizing: border-box;
border-radius: 3px;
}
.checkbox span:after{
content: "";
position: absolute;
width: 12px;
height: 6px;
border-bottom: 2px solid #333;
border-left: 2px solid #333;
transform: rotate(-50deg);
box-sizing: border-box;
left: 4px;
top: 6px;
display: none;
}
.checkbox input:checked + span::after{
display: block;
}
.forgot-signin-container{
display: flex;
align-items: center;
justify-content: space-between;
}
.link{
color: #fcaf17;
text-decoration: none;
transition: .2s linear;
}
.link:hover{
text-decoration: underline;
}
.forgot-signin-container input{
width: 100px;
height: 38px;
border: none;
background-image: linear-gradient(90deg,#f7931e,#fcaf17);
color: #fff;
font-weight: 700;
outline: none;
cursor: pointer;
border-radius: 3px;
}
.forgot-signin-container input:hover{
background: #fcaf17;
}
.bottom-container{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.bottom-container h3{
font-size: 18px;
font-weight: 500;
}
.sm-login{
display: flex;
justify-content: space-between;
}
.sm-login a{
width: 38px;
margin: 0 5px;
overflow: hidden;
}
.sm-login a img{
width: 100%;
}
.create-account{
text-align: center;
color: #fff;
margin: 30px 0;
}
.copyright{
color: #999;
font-size: 12px;
}
@media screen and (max-width: 520px){
body{
align-items: unset;
}
.logo{
width: 236px;
height: 67px;
margin: 16px auto;
}
.container{
margin: 8px;
}
.row{
width: 100%;
}
.sm-login{
margin-top: 8px;
}
.sm-login a{
flex: 1;
max-width: 65px;
}
}
Comments
Post a Comment