Input valid invalid HTML CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <title>INPUT VALID INVALID HTML CSS | par NGLESSON</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keyword" content="INPUT VALID INVALID HTML CSS">
    <meta name="author" content="Mezgani said">
    <meta name="copyright" content="NGLESSON">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="style.css"  rel="stylesheet" type="text/css">
</head>
<body class="container">
    <div class="row">
		<form class="col-lg-6 col-12 mt-5">
			<div class="form-group">
				<label for="inputname" class="bold"><i class="fa fa-user"></i> Nom:</label>
				<input 
				class="form-control"
				type="text" 
				name="inputname" 
				id="inputname"
				placeholder="Entrez votre name" >
			</div>
			<div class="form-group">
				<label for="inputnamevalidation" class="bold"><i class="fa fa-user"></i> Nom (validation):</label>
				<input 
				class="form-control"
				type="text" 
				name="inputnamevalidation" 
				id="inputnamevalidation"
				maxlength="100" 
				minlength="4"
				pattern=".{4,100}"
				title="Votre nom doit contenir entre 4 et 100 caractéres" 
				placeholder="Entrez votre nom" 
				required>
			</div>
			<hr>
			<div class="form-group">
				<label for="email" class="bold"><i class="fa fa-envelope"></i> Email:</label>
				<input 
				class="form-control"
				type="email" 
				name="email" 
				placeholder="Entrez votre login" >
			</div>
			<div class="form-group">
				<label for="emailvalidation" class="bold"><i class="fa fa-envelope"></i> Email (validation):</label>
				<input 
				class="form-control"
				type="email" 
				name="emailvalidation" 
				maxlength="100" 
				minlength="4"
				pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$"
				title="Votre format email est invalide" 
				placeholder="Entrez votre login" 
				email required>
			</div>
		</form>
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="script.js"></script>
</body>
</html>
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');

* {
    margin:0px;
    padding:0px;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
} 
body {
    padding: 3em;
}
.bold {
    font-weight: bold;
}
input:invalid {
    border:1px solid #F07355;
}  
input:valid {
    border:1px solid #02AB83;
}  

::-webkit-input-placeholder { /* Edge */
    color: #858383;
    font-size: 12px;
    font-weight: 600;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #858383;
    font-size: 12px;
    font-weight: 600;
}
::placeholder {
    color: #858383;
    font-size: 12px;
    font-weight: 600;
}

                                    
Timeline style04

Timeline style04

Texte Block Posts Style01

Texte Block Posts Style01

Simple Table With UIKIT

Simple Table With UIKIT

Radio Input Image Checkbox 01

Radio Input Image Checkbox 01

Page construction avec compte à rebours style02

Page construction avec compte à rebours style02

Loading style book loader

Loading style book loader

Input valid invalid HTML CSS

Input valid invalid HTML CSS

Image hover 07

Image hover 07

Form Création de compte

Form Création de compte

Chercher un mot sur la liste

Chercher un mot sur la liste

Alert Bootstrap4 style02

Alert Bootstrap4 style02

Ajouter une pagination1

Ajouter une pagination1