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

                                    
Vers le haut

Vers le haut

Timeline style08

Timeline style08

Planète animée style01

Planète animée style01

Nav Menu style01

Nav Menu style01

Input range slider HTML style04

Input range slider HTML style04

Input range slider HTML style03

Input range slider HTML style03

Creation dune icone de prechargement avec css

Creation dune icone de prechargement avec css

Chercher un mot sur la liste

Chercher un mot sur la liste

Carousel 6 Column Product Slider with B4

Carousel 6 Column Product Slider with B4

Cards box with title

Cards box with title

Bootstrap modal avec un formulaire newsletter

Bootstrap modal avec un formulaire newsletter

Ajouter multiple input dynamique

Ajouter multiple input dynamique