doka-guide · TatianaFokina · Jul 22, 2024 · Jun 30, 2024 · Jun 30, 2024 · Jul 5, 2024
diff --git a/people/lonlylokly/index.md b/people/lonlylokly/index.md
@@ -0,0 +1,10 @@
+---
+name: "Михаил Кривдин"
+url: https://github.com/loonlylokly
+photo: photo.png
+photoAlt: "Некоторые тайны сами себя стерегут. И захочешь – не расскажешь. И эта аватарка не исключение."
+badges:
+  - first-contribution-small
+---
+
+Магистр ордена Дырявой Верстки.
diff --git a/people/lonlylokly/photo.png b/people/lonlylokly/photo.png
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="ru">
+  <head>
+    <title>Стилизация чекбокса (accent-color) — Стилизация чекбоксов и радиокнопок — Дока</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
+    />
+    <style>
+      *,
+      *:after,
+      *:before {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+
+      html, body {
+        height: 100%;
+      }
+
+      body {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #FFFFFF;
+        padding: 50px;
+        background: #18191C;
+        font-family: Roboto, sans-serif;
+        font-size: 18px;
+      }
+
+      form {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 20px;
+      }
+
+      fieldset {
+        min-width: 350px;
+        padding: 25px 15px 15px;
+      }
+
+      .checkbox > *, .radio > *{
+        vertical-align: middle;
+      }
+
+      .checkbox + .checkbox, .radio + .radio {
+        margin-block-start: 10px;
+      }
+
+      input[type="checkbox"],
+      input[type="radio"] {
+        accent-color: #C56FFF;
+        width: 20px;
+        height: 20px;
+      }
+
+      input:not(:disabled),
+      input:not(:disabled) ~ * {
+        cursor: pointer;
+      }
+
+      @media (width <= 768px) {
+        body {
+          padding: 30px;
+        }
+
+        fieldset {
+          min-width: initial;
+          width: 100%;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <form>
+      <fieldset>
+        <legend>Чекбоксы</legend>
+        <div class="checkbox">
+          <input type="checkbox" id="checkbox1">
+          <label for="checkbox1">Чекбокс 1</label>
+        </div>
+        <div class="checkbox">
+          <input type="checkbox" id="checkbox1-c" checked>
+          <label for="checkbox1-c">Чекбокс 1 (отмечен)</label>
+        </div>
+        <div class="checkbox">
+          <input type="checkbox" id="checkbox1-d-c" disabled checked>
+          <label for="checkbox1-d-c">Чекбокс 1 (отмечен и неактивен)</label>
+        </div>
+        <div class="checkbox">
+          <input type="checkbox" id="checkbox1-d-u" disabled />
+          <label for="checkbox1-d-u">Чекбокс 1 (неактивен)</label>
+        </div>
+      </fieldset>
+      <fieldset>
+        <legend>Радиокнопки</legend>
+        <div class="radio">
+          <input type="radio" id="radio1" name="radio">
+          <label for="radio1">Радиокнопка 1</label>
+        </div>
+        <div class="radio">
+          <input type="radio" id="radio1-c" name="radio" checked>
+          <label for="radio1-c">Радиокнопка 1 (отмечена)</label>
+        </div>
+        <div class="radio">
+          <input type="radio" id="radio1-d-c" disabled checked>
+          <label for="radio1-d-c">Радиокнопка 1 (отмечена и неактивна)</label>
+        </div>
+        <div class="radio">
+          <input type="radio" id="radio1-d-u" disabled>
+          <label for="radio1-d-u">Радиокнопка 1 (неактивна)</label>
+        </div>
+      </fieldset>
+    </form>
+  </body>
+</html>