I was bored again and made the discord login form. It's pretty much like the original.
Created
November 1, 2021 04:16
-
-
Save DreamBoy65/3c461dd8bf05bb597966854983ae0330 to your computer and use it in GitHub Desktop.
Discord Login Form
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // NORMALIZED CSS INSTALLED | |
| // View settings for more info. | |
| #container | |
| #inviteContainer | |
| .logoContainer | |
| img.logo(src="https://seeklogo.com/images/D/discord-logo-134E148657-seeklogo.com.png") | |
| img.text(src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/Discord_Color_Text_Logo.svg/2000px-Discord_Color_Text_Logo.svg.png") | |
| .acceptContainer | |
| form | |
| h1 WELCOME BACK! | |
| .formContainer | |
| .formDiv | |
| p EMAIL | |
| input(type="email", required="") | |
| .formDiv | |
| p PASSWSORD | |
| input(type="password", required="") | |
| a.forgotPas(href="#") FORGOT YOUR PASSWORD? | |
| .formDiv | |
| button.acceptBtn(type="submit") Login | |
| span.register | |
| | Need an account? | |
| a(href="#") Register |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var images = ['https://wallpapersite.com/images/pages/pic_w/1063.jpg', 'http://www.hdwallpaper.nu/wp-content/uploads/2017/04/PLAYERUNKNOWNS-BATTLEGROUNDS-12937710.jpg', 'https://www.hdwallpapers.in/walls/overwatch_4k-HD.jpg', 'https://images.alphacoders.com/186/186993.jpg', 'https://images4.alphacoders.com/602/thumb-1920-602788.png']; | |
| $('#container').append('<style>#container, .acceptContainer:before, .logoContainer:before {background: url(' + images[Math.floor(Math.random() * images.length)] + ') center fixed }'); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Work+Sans:300,400,700,900'); | |
| * {outline-width: 0; font-family: 'Montserrat' !important;} | |
| #container { | |
| height: 100vh; | |
| background-size: cover !important; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| #inviteContainer { | |
| display: flex; | |
| overflow: hidden; | |
| position: relative; | |
| border-radius: 5px; | |
| .acceptContainer { | |
| padding: 45px 30px; | |
| box-sizing: border-box; | |
| width: 400px; | |
| &:before { | |
| content: ""; | |
| background-size: cover !important; | |
| box-shadow: inset 0 0 0 3000px rgba(40,43,48,.75); | |
| filter: blur(10px); | |
| position: absolute; | |
| width: 150%; | |
| height: 150%; | |
| top: -50px; | |
| left: -50px; | |
| } | |
| } | |
| } | |
| form { | |
| position: relative; | |
| text-align: center; | |
| height: 100%; | |
| h1 { | |
| margin: 0 0 15px 0; | |
| font-family: 'Work Sans' !important; | |
| font-weight: 700; | |
| font-size: 20px; | |
| color: #fff; | |
| user-select: none; | |
| } | |
| } | |
| .formContainer { | |
| text-align: left; | |
| .formDiv { | |
| margin-bottom: 30px; | |
| &:last-child { | |
| padding-top: 10px; | |
| margin-bottom: 0; | |
| } | |
| } | |
| p { | |
| margin: 0; | |
| font-weight: 700; | |
| color: #aaa; | |
| font-size: 10px; | |
| user-select: none; | |
| } | |
| input[type=password], input[type=email] { | |
| background: transparent; | |
| border: none; | |
| box-shadow: inset 0 -1px 0 rgba(255,255,255,0.15); | |
| padding: 15px 0; | |
| box-sizing: border-box; | |
| color: #fff; | |
| width: 100%; | |
| transition: 0.2s ease; | |
| &:focus { | |
| box-shadow: inset 0 -2px 0 #fff; | |
| } | |
| } | |
| } | |
| .logoContainer { | |
| padding: 45px 35px; | |
| box-sizing: border-box; | |
| position: relative; | |
| z-index: 2; | |
| position: relative; | |
| overflow: hidden; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-direction: column; | |
| img { | |
| width: 150px; | |
| margin-bottom: -5px; | |
| display: block; | |
| position: relative; | |
| &:first-child { | |
| width: 150px; | |
| } | |
| } | |
| .text { | |
| padding: 25px 0 10px 0; | |
| } | |
| &:before { | |
| content: ""; | |
| background-size: cover !important; | |
| position: absolute; | |
| top: -50px; | |
| left: -50px; | |
| width: 150%; | |
| height: 150%; | |
| filter: blur(10px); | |
| box-shadow: inset 0 0 0 3000px rgba(255,255,255,0.8); | |
| } | |
| } | |
| .forgotPas { | |
| color: #aaa; | |
| opacity: .8; | |
| text-decoration: none; | |
| font-weight: 700; | |
| font-size: 10px; | |
| margin-top: 15px; | |
| display: block; | |
| transition: 0.2s ease; | |
| &:hover { | |
| opacity: 1; | |
| color: #fff; | |
| } | |
| } | |
| .acceptBtn { | |
| width: 100%; | |
| box-sizing: border-box; | |
| background: #7289DA; | |
| border: none; | |
| color: #fff; | |
| padding: 20px 0; | |
| border-radius: 3px; | |
| cursor: pointer; | |
| transition: 0.2s ease; | |
| user-select: none; | |
| &:hover { | |
| background: #6B7FC5; | |
| } | |
| } | |
| .register { | |
| color: #aaa; | |
| font-size: 12px; | |
| padding-top: 15px; | |
| display: block; | |
| a { | |
| color: #fff; | |
| text-decoration: none; | |
| margin-left: 5px; | |
| box-shadow: inset 0 -2px 0 transparent; | |
| padding-bottom: 5px; | |
| user-select: none; | |
| &:hover { | |
| box-shadow: inset 0 -2px 0 #fff; | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment