diff --git a/html/forms/pseudo-classes/valid-invalid.html b/html/forms/pseudo-classes/valid-invalid.html
new file mode 100644
index 0000000..4737b34
--- /dev/null
+++ b/html/forms/pseudo-classes/valid-invalid.html
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="en-us">
+
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width">
+ <title>Приклад :valid та :invalid</title>
+ <link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">
+ <style>
+ body {
+ font-family: 'Josefin Sans', sans-serif;
+ margin: 20px auto;
+ max-width: 460px;
+ }
+
+ fieldset {
+ padding: 10px 30px 0;
+ }
+
+ legend {
+ color: white;
+ background: black;
+ padding: 5px 10px;
+ }
+
+ fieldset>div {
+ margin-bottom: 20px;
+ display: flex;
+ flex-flow: row wrap;
+ }
+
+ button,
+ label,
+ input {
+ display: block;
+ font-family: inherit;
+ font-size: 100%;
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
+ width: 100%;
+ padding: 5px;
+ height: 30px;
+ }
+
+ input {
+ box-shadow: inset 1px 1px 3px #ccc;
+ border-radius: 5px;
+ }
+
+ input:hover,
+ input:focus {
+ background-color: #eee;
+ }
+
+ input+span {
+ position: relative;
+ }
+
+ input:required+span::after {
+ font-size: 0.7rem;
+ position: absolute;
+ content: "обов'язкове поле";
+ color: white;
+ background-color: black;
+ padding: 5px 10px;
+ top: -26px;
+ left: -70px;
+ }
+
+ input+span::before {
+ position: absolute;
+ right: -20px;
+ top: 5px;
+ }
+
+ input:invalid {
+ border: 2px solid red;
+ }
+
+ input:invalid+span::before {
+ content: '✖';
+ color: red;
+ }
+
+ input:valid+span::before {
+ content: '✓';
+ color: green;
+ }
+
+ button {
+ width: 60%;
+ margin: 0 auto;
+ }
+ </style>
+</head>
+
+<body>
+ <form>
+ <fieldset>
+ <legend>Форма зворотного зв'язку</legend>
+
+ <p>Обо'язкові поля позначені підписом "обов'язкове поле".</p>
+ <div>
+ <label for="fname">Ім'я: </label>
+ <input id="fname" name="fname" type="text" required>
+ <span></span>
+ </div>
+ <div>
+ <label for="lname">Прізвище: </label>
+ <input id="lname" name="lname" type="text" required>
+ <span></span>
+ </div>
+ <div>
+ <label for="email">Адреса електронної пошти (введіть її, якщо бажаєте отримати відповідь): </label>
+ <input id="email" name="email" type="email">
+ <span></span>
+ </div>
+ <div><button>Подати</button></div>
+ </fieldset>
+ </form>
+</body>
+
+</html>
\ No newline at end of file