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;
}

                                    
Vidéo background en html5 style01

Vidéo background en html5 style01

Planète animée style01

Planète animée style01

Page 404 exemple 01

Page 404 exemple 01

Header Aside Footer Admin

Header Aside Footer Admin

Form Création de compte style animée

Form Création de compte style animée

Flat icon Responsive Boxes

Flat icon Responsive Boxes

Elastic Content Slider

Elastic Content Slider

Carousel Bootstrap4

Carousel Bootstrap4

Card Bootstrap4 02

Card Bootstrap4 02

Card Bootstrap4 01

Card Bootstrap4 01

Bootstrap modal avec un formulaire newsletter

Bootstrap modal avec un formulaire newsletter

Arrows Defense Game

Arrows Defense Game