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

                                    
Scroll down button 01

Scroll down button 01

Radio button style

Radio button style

Pie Charts

Pie Charts

Loading style book loader

Loading style book loader

Image hover Flip Flap Style

Image hover Flip Flap Style

Image hover 02

Image hover 02

Form contact avec validation en css

Form contact avec validation en css

Elastic Content Slider

Elastic Content Slider

Buttons Styles Inspirations

Buttons Styles Inspirations

Asidebar Menu Style01

Asidebar Menu Style01

Ajouter supprimer une tr dans une table avec l'insertion des options sur une balise select

Ajouter supprimer une tr dans une table avec l'insertion des options sur une balise select

Add Remove dynamic rows with dynamic ID of input in HTML table

Add Remove dynamic rows with dynamic ID of input in HTML table