Modified Login Page

This commit is contained in:
Kelvin Samuel 2021-09-19 15:13:13 +07:00
parent c0b0f627dc
commit 27c7c4f330

View file

@ -13,7 +13,7 @@
<link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<style>
body {
font-family: 'Poppins', sans-serif;
@ -106,7 +106,53 @@
text-decoration: underline;
}
@media screen and (max-width: 425px) {
.login-with {
color: white;
text-align: center;
}
.links {
display: flex;
cursor: pointer;
color: white;
margin: 0 0 20px 0;
}
.google, .facebook {
width: 100%;
height: 42px;
line-height: 45px;
margin-top: 10px;
}
.google {
background: white;
border: 1px solid white;
color: #1b1c1e;
margin-right: 10px;
}
.facebook {
background: #4267B2;
border: 1px solid #3e61a8;
margin-left: 10px
}
.google:hover{
background: #e0e0e0;
}
.facebook:hover{
background: #3e61a8;
}
.links i{
font-size: 17px;
}
@media screen and (max-width: 426px) {
.card a, input {
font-size: 3vw;
}
@ -114,9 +160,14 @@
.card-header {
font-size: 6vw;
}
.navbar-brand {
width: 15vw;
height: 15vw;
}
}
@media screen and (min-width: 426px) {
@media screen and (min-width: 427px) {
.card a, input {
font-size: 2vw;
}
@ -124,6 +175,11 @@
.card-header {
font-size: 5vw;
}
.navbar-brand {
width: 11vw;
height: 11vw;
}
}
@media screen and (min-width: 767px) {
@ -134,6 +190,11 @@
.card-header {
font-size: 4vw;
}
.navbar-brand {
width: 8vw;
height: 8vw;
}
}
@media screen and (min-width: 993px) {
@ -144,6 +205,11 @@
.card-header {
font-size: 2.5vw;
}
.navbar-brand {
width: 6vw;
height: 6vw;
}
}
@media screen and (min-width: 1400px) {
@ -154,6 +220,11 @@
.card-header {
font-size: 2.5vw;
}
.navbar-brand {
width: 6vw;
height: 6vw;
}
}
@media screen and (max-width: 500px) {
@ -206,14 +277,24 @@
<label for="exampleDropdownFormPassword1">Password</label>
<input class="form-control input-sm text-center" id="exampleDropdownFormPassword1"
placeholder="Password" type="password">
<br>
<div class="options-01 hoverlogin-1" style="word-break: keep-all;">
<label class="remember-me text-left"><input name="" type="checkbox">Remember me</label>
<a href="forgot-password.html" style="margin-left: 14%; font-size: 10pt;">Forgot your
<a href="forgot-password.html" style="margin-left: 15%; font-size: 10pt;">Forgot your
password?</a>
</div>
<button class="btn btn-login btn-primary" type="submit">Login</button>
<div class="login-with">Or login with
<div class="links">
<div class="google">
<i class="fab fa-google"><a href=""></a><img class="google-icon-svg" src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg"/><span></span></i>
</div>
<div class="facebook">
<i class="fab fa-facebook-f"><a href=""></a><img class="facebook-icon-svg" src="https://cdn-icons-png.flaticon.com/128/733/733547.png" style="height: 30px; width: 30px; margin: 0 30px; padding-top: -3px" ><span></span></i>
</div>
</div>
</div>
<div class="hoverlogin-1 text-center">
<a href="register.html">Not Have Account? Sign up</a>
</div>