Glassmorphism Login Form With Social Media Icons

Ticker

10/recent/ticker-posts

Glassmorphism Login Form With Social Media Icons

AK Creative 1/28/2021 05:28:00 PM

Create A Simple Glassmorphism Form By This Source Code


HTML CODE

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="fontawesome/css/all.min.css">

<link rel="stylesheet" href="style.css">

<title>Glassmorphism Form</title>

</head>

<body>

<form>

<div class="form-group">

<input type="text" placeholder="USERNAME">

</div>

<div class="form-group">

<input type="password" placeholder="PASSWORD">

</div>

<div class="form-btn">

<input type="submit" value="LOGIN">

</div>

<div class="form-text">

<p>Forgot Password?</p>

</div>

<div class="social-login">

<p>or login with</p>

<div class="social-icons">

<i class="fab fa-facebook"></i>

<i class="fab fa-twitter"></i>

<i class="fab fa-google"></i>

</div>

</div>

</form>

</body>

</html>


CSS CODE

@font-face {

font-family: 'harlow solid';

}


* {

padding: 0; margin: 0;

box-sizing: border-box;

user-select: none;

}


body {

background-image: url(https://images.wallpaperscraft.com/image/flight_balloon_sky_86980_1920x1080.jpg);

background-size: fixed;

height: 100vh; width: 100vw;

font-family: 'harlow solid';

color: #fff;

display: flex;

align-items: center;

justify-content: center;

}


form {

height: 550px; width: 500px;

padding-top: 3.5rem;

border-radius: 0.9rem;

box-shadow: 1px 1px 25px rgba(0,0,0,0.5);

backdrop-filter: blur(20px);

}


form .form-group {

padding: 1rem 3rem;

}


.form-group input {

background-color: #fff;

height: 3.5rem; width: 100%;

border-radius: 1.6rem;

border: none; outline: none;

padding-left: 3.0rem;

font-size: 1.9rem;

letter-spacing: 0.3rem;

}



.form-btn {

text-align: center;

margin-top: 0.57rem;

padding: 0.9rem;

}


.form-btn input {

background-color: #00e676;

color: #000;

padding: 0.4rem 1.3rem;

border-radius: 0.2rem;

border: none; outline: none;

font-size: 1.6rem;

letter-spacing: 0.2rem;

cursor: pointer;

}


.form-btn input:hover {

background-color: #00c853;

}



.form-text p {

color: #ff0000;

text-align: center;

margin-top: 0.67rem;

font-size: 1.4rem;

text-transform: uppercase;

letter-spacing: 0.1rem;

text-decoration: bold;

cursor: pointer;

}


.social-login {

text-align: center;

padding: 1rem;

}


.social-login p {

margin: 1.2rem 0.9rem;

color: #f4f4f4;

letter-spacing: 0.1rem;

font-size: 1.5rem;

}


.social-login .social-icons i {

font-size: 4rem;

margin: 0.3rem 0.8rem;

cursor: pointer;

}


.social-login .social-icons i:nth-child(1) {color: #01579b;}

.social-login .social-icons i:nth-child(2) {color: #4fc3f7;}

.social-login .social-icons i:nth-child(3) {color: #ef5350;}

}


OUTPUT




Tags:

Post a Comment

34 Comments

  1. Unique KnowJanuary 28, 2021 at 5:29 PM

    Perfect

    ReplyDelete
  2. Kanchan KirtimanJanuary 28, 2021 at 5:44 PM

    Awesome

    ReplyDelete
  3. Rock_ArviJanuary 28, 2021 at 5:45 PM

    Wonderful

    ReplyDelete
  4. WonderingJanuary 28, 2021 at 5:46 PM

    Wonderful

    ReplyDelete
  5. Excellent workJanuary 28, 2021 at 5:47 PM

    Wonderful

    ReplyDelete
  6. AwesomeJanuary 28, 2021 at 5:48 PM

    Wow Wonderful

    ReplyDelete
  7. WonderfulJanuary 28, 2021 at 5:50 PM

    Wow Amazing

    ReplyDelete
  8. ArviJanuary 28, 2021 at 5:52 PM

    Excellent

    ReplyDelete
  9. FabulousJanuary 28, 2021 at 5:53 PM

    Excellent & Wonderful

    ReplyDelete
  10. MLLJanuary 28, 2021 at 5:54 PM

    Perfect

    ReplyDelete
  11. SuperJanuary 28, 2021 at 5:55 PM

    Perfect 👌

    ReplyDelete
  12. UnknownJanuary 28, 2021 at 6:04 PM

    Interesting

    ReplyDelete
  13. akhJanuary 28, 2021 at 6:06 PM

    Interesting

    ReplyDelete
  14. UnknownJanuary 28, 2021 at 6:07 PM

    Interesting

    ReplyDelete
  15. UnknownJanuary 28, 2021 at 6:08 PM

    Interesting

    ReplyDelete
  16. UnknownJanuary 28, 2021 at 6:11 PM

    Awesome

    ReplyDelete
  17. UnknownJanuary 28, 2021 at 6:16 PM

    Awesome

    ReplyDelete
  18. UnknownJanuary 28, 2021 at 6:17 PM

    Awesome

    ReplyDelete
  19. UnknownJanuary 28, 2021 at 6:20 PM

    Excellent

    ReplyDelete
  20. UnknownJanuary 28, 2021 at 6:21 PM

    Excellent

    ReplyDelete
  21. KritikaJanuary 28, 2021 at 6:22 PM

    Excellent

    ReplyDelete
  22. UnknownJanuary 28, 2021 at 6:23 PM

    Excellent

    ReplyDelete
  23. UnknownJanuary 28, 2021 at 6:25 PM

    Excellent

    ReplyDelete
  24. UnknownJanuary 28, 2021 at 6:28 PM

    Fantastic

    ReplyDelete
  25. KKJanuary 28, 2021 at 6:29 PM

    Fantastic

    ReplyDelete
  26. UnknownJanuary 28, 2021 at 6:31 PM

    Fantastic

    ReplyDelete
  27. UnknownJanuary 28, 2021 at 6:34 PM

    Fantastic

    ReplyDelete
  28. snehaJanuary 28, 2021 at 6:35 PM

    attractive

    ReplyDelete
  29. son aJanuary 28, 2021 at 6:36 PM

    attractive

    ReplyDelete
  30. UnknownJanuary 28, 2021 at 6:37 PM

    Wow attractive

    ReplyDelete
  31. UnknownJanuary 28, 2021 at 6:38 PM

    attractive

    ReplyDelete
  32. UnknownJanuary 28, 2021 at 6:39 PM

    Brilliant

    ReplyDelete
  33. UnknownJanuary 28, 2021 at 9:12 PM

    Kallu very good

    ReplyDelete
  34. AnonymousFebruary 1, 2021 at 3:46 PM

    Very nice

    ReplyDelete