jose-almir/flexbox_form.html

## flexbox_form.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LOGIN FORMS WITH FLEXBOX</title>
    <style>
        body {
            height: 100vh;
            margin: 0;
        }

        #bg {
            background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&w=1000&q=60');
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            height: 100vh;
        }

        .form-box {
            background-color: white;
            height: 75%;
            width: 30%;
            position: absolute;
            top: 12.5%;
            left: 35%;
            border-radius: 8px;
        }

        .is-primary-family{
            font-family: 'Lato', sans-serif;
        }

        @media(max-width: 768px) {
            .form-box {
                width: 80%;
                left: 10%;
            }
        }

        .form-column {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .form-field-item {
            margin-top: 8px;
            margin-bottom: 8px;
        }

        .label-form-item {
            align-self: flex-start;
            font-weight: 300;
        }

        .logo{
            height: auto;
            max-width: 25%;
        }

        .custom-button {
            border: none;
            padding: 8px 32px;
            text-decoration: none;
            display: inline-block;
            background-color: #C92A42;
            color: white;
            cursor: pointer;
            border-radius: 5px;
            margin-top: 10px;
            align-self: stretch;
            font-size: 1rem;
        }

        .custom-button:hover{
            background-color: #510A32;
        }

        .custom-text-field {
            border-top-style: hidden;
            border-right-style: hidden;
            border-left-style: hidden;
            border-bottom-style: groove;
        }

        .custom-text-field:focus {
            border-bottom-color: #510A32;
        }

    </style>
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
</head>
<body>
    <div id="bg">
        <div class="form-box form-column">
            <img class="logo" src="logo.png">
            <form class="form-column">
                <label id="lbl" class="label-form-item is-primary-family" for="emailField">Email</label>
                <input class="form-field-item custom-text-field" type="text" id="emailField" name="emailField">
                <label class="label-form-item is-primary-family" for="passwordField">Password</label>
                <input class="form-field-item custom-text-field" type="password" id="passwordField" name="passwordField" >
                <input id="sbmt-btn"class="custom-button is-primary-family" type="submit" value="Login">
            </form>
        </div>
    </div>
    <script>
        var sbmt_btn = document.getElementById('sbmt-btn');
        var lbl = document.getElementById('lbl');
        var emailField = document.getElementById('emailField')
        emailField.onchange = function() {
            console.log(emailField.value);
            if(emailField.value.search('@') < 1){
                emailField.style.borderBottomColor = 'red';
                lbl.style.color = "red";
                lbl.innerHTML = "Email inválido"
                sbmt_btn.disabled = true
                sbmt_btn.style.backgroundColor = 'gray'
            }else{
                emailField.style.borderBottomColor = ''
                lbl.innerHTML = "Email"
                lbl.style.color = "";
                sbmt_btn.disabled = false
                sbmt_btn.style.backgroundColor = ''
            }
        }
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="pt-br">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>LOGIN FORMS WITH FLEXBOX</title>
	<style>
	body {
	height: 100vh;
	margin: 0;
	}

	#bg {
	background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&w=1000&q=60');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	height: 100vh;
	}

	.form-box {
	background-color: white;
	height: 75%;
	width: 30%;
	position: absolute;
	top: 12.5%;
	left: 35%;
	border-radius: 8px;
	}

	.is-primary-family{
	font-family: 'Lato', sans-serif;
	}

	@media(max-width: 768px) {
	.form-box {
	width: 80%;
	left: 10%;
	}
	}

	.form-column {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	}

	.form-field-item {
	margin-top: 8px;
	margin-bottom: 8px;
	}

	.label-form-item {
	align-self: flex-start;
	font-weight: 300;
	}

	.logo{
	height: auto;
	max-width: 25%;
	}

	.custom-button {
	border: none;
	padding: 8px 32px;
	text-decoration: none;
	display: inline-block;
	background-color: #C92A42;
	color: white;
	cursor: pointer;
	border-radius: 5px;
	margin-top: 10px;
	align-self: stretch;
	font-size: 1rem;
	}

	.custom-button:hover{
	background-color: #510A32;
	}

	.custom-text-field {
	border-top-style: hidden;
	border-right-style: hidden;
	border-left-style: hidden;
	border-bottom-style: groove;
	}

	.custom-text-field:focus {
	border-bottom-color: #510A32;
	}

	</style>
	<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
	</head>
	<body>
	<div id="bg">
	<div class="form-box form-column">
	<img class="logo" src="logo.png">
	<form class="form-column">
	<label id="lbl" class="label-form-item is-primary-family" for="emailField">Email</label>
	<input class="form-field-item custom-text-field" type="text" id="emailField" name="emailField">
	<label class="label-form-item is-primary-family" for="passwordField">Password</label>
	<input class="form-field-item custom-text-field" type="password" id="passwordField" name="passwordField" >
	<input id="sbmt-btn"class="custom-button is-primary-family" type="submit" value="Login">
	</form>
	</div>
	</div>
	<script>
	var sbmt_btn = document.getElementById('sbmt-btn');
	var lbl = document.getElementById('lbl');
	var emailField = document.getElementById('emailField')
	emailField.onchange = function() {
	console.log(emailField.value);
	if(emailField.value.search('@') < 1){
	emailField.style.borderBottomColor = 'red';
	lbl.style.color = "red";
	lbl.innerHTML = "Email inválido"
	sbmt_btn.disabled = true
	sbmt_btn.style.backgroundColor = 'gray'
	}else{
	emailField.style.borderBottomColor = ''
	lbl.innerHTML = "Email"
	lbl.style.color = "";
	sbmt_btn.disabled = false
	sbmt_btn.style.backgroundColor = ''
	}
	}
	</script>
	</body>
	</html>