Material login screen with background image

Developer
Anton Petrov
Size
3,630 Kb
Views
8,096
  1. Material login screen with background image Previews
  2. Material login screen with background image HTML Codes
  3. Material login screen with background image CSS Codes
  4. Material login screen with background image JS Codes

How do I make an material login screen with background image?

Simple Material login screen.. What is a material login screen with background image? How do you make a material login screen with background image? This script and codes were developed by Anton Petrov on 20 December 2022, Tuesday.

Material login screen with background image Previews
IQ Test

Material login screen with background image - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Material login screen with background image</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link rel='stylesheet prefetch' href='https://code.getmdl.io/1.3.0/material.blue_grey-pink.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="login-form" class="login-screen"> <div class="login-screen__form"> <form autocomplete="off"> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input class="mdl-textfield__input" type="text" id="username"> <label class="mdl-textfield__label" for="sample3">Username</label> </div> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input class="mdl-textfield__input" type="password" id="password"> <label class="mdl-textfield__label" for="sample4">Password</label> <span class="mdl-textfield__error">Input is not a number!</span> </div> </form> </div> <div class="login-screen__actions"> <button id="login" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" disabled> Log in </button> <button id="signup" class="mdl-button mdl-js-button mdl-js-ripple-effect"> Sign Up </button> </div>
</div>
<div id="snackbar" class="mdl-js-snackbar mdl-snackbar"> <div class="mdl-snackbar__text"></div> <button class="mdl-snackbar__action" type="button"></button>
</div> <script src='https://unpkg.com/[email protected]'></script>
<script src='https://code.getmdl.io/1.3.0/material.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Material login screen with background image - Script Codes CSS Codes

body { background-image: url("http://i.imgur.com/JiGcUsz.jpg"); background-position: center center; background-size: cover; background-attachment: fixed;
}
.login-screen { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 50vh; min-height: 300px;
}
.login-screen > div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center;
}
.login-screen__form { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: 30px 0;
}
.login-screen__form .mdl-textfield { width: 100%;
}
.login-screen__actions #login { margin-right: 15px;
}

Material login screen with background image - Script Codes JS Codes

'use strict';
var form = document.querySelector('.login-screen__form > form');
var username = document.getElementById('username');
var password = document.getElementById('password');
var login = document.getElementById('login');
var signup = document.getElementById('signup');
var snackbar = document.getElementById('snackbar');
login.disabled = true;
username.addEventListener('change', function () { return handleChange(event);
});
password.addEventListener('change', function () { return handleChange(event);
});
login.addEventListener('click', function () { return handleLogIn(event);
});
signup.addEventListener('click', function () { return handleSignUp(event);
});
var handleChange = function handleChange(event) { if (username.value !== '' && password.value !== '') { login.disabled = false; } else { login.disabled = true; }
};
var handleLogIn = function handleLogIn(event) { var data = { message: 'Hello ' + username.value + '!', timeout: 2000 }; snackbar.MaterialSnackbar.showSnackbar(data);
};
var handleSignUp = function handleSignUp(event) { var data = { message: 'Redirecting to registration page...', timeout: 2000 }; snackbar.MaterialSnackbar.showSnackbar(data);
};
Material login screen with background image - Script Codes
Material login screen with background image - Script Codes
Home Page Home
Developer Anton Petrov
Username apetrov
Uploaded December 20, 2022
Rating 3
Size 3,630 Kb
Views 8,096
Do you need developer help for Material login screen with background image?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Anton Petrov (apetrov) Script Codes
Name
Heartbeat
A Pen by Anton Petrov
Gradient Text with CSS
CSS Fullscreen Minimal Menu
Fullscreen Menu Background Color Change
Social media minimal icons
Basic 3D Fullscreen Transition
Interactive map with SVG
SVG menu
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!