vladilenm/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Rare html tags</title>

    <style>
      dialog::backdrop {
        background: rgba(0, 0, 0, 0.5);
      }

      dialog {
        max-width: 400px;
        border: 1px solid #ccc;
        border-radius: 10px;
      }
    </style>
  </head>
  <body>
    <input type="text" list="techs" />

    <datalist id="techs">
      <option value="HTML"></option>
      <option value="CSS"></option>
      <option value="JavaScript"></option>
      <option value="React"></option>
      <option value="Node"></option>
      <option value="Angular"></option>
      <option value="Vue"></option>
      <option value="Svelte"></option>
    </datalist>

    <p>H<sub>2</sub>O</p>

    <p>E=MC<sup>2</sup></p>

    <details>
      <summary>Ты точно хочешь меня открыть?</summary>

      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident
        nostrum temporibus perspiciatis optio hic corporis repellendus. Natus
        non quibusdam incidunt.
      </p>
    </details>

    <button id="open">Show modal</button>

    <dialog>
      <h2>Это заголовок</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum sequi
        excepturi adipisci soluta maxime fugit nam earum harum eligendi nisi!
      </p>

      <button>Close</button>
    </dialog>

    <script>
      const openBtn = document.querySelector('#open')
      const dialog = document.querySelector('dialog')
      const closeBtn = dialog.querySelector('button')

      openBtn.onclick = () => dialog.showModal()

      closeBtn.onclick = () => dialog.close()
    </script>

    <figure>
      <img src="https://source.unsplash.com/random/100x100" alt="" />

      <figcaption>This is random pic</figcaption>
    </figure>

    <picture>
      <source
        media="(min-width: 900px)"
        srcset="https://source.unsplash.com/random/400x400"
      />

      <source
        media="(max-width: 500px)"
        srcset="https://source.unsplash.com/random/100x100"
      />

      <img src="https://source.unsplash.com/random/200x200" alt="" />
    </picture>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Rare html tags</title>

	<style>
	dialog::backdrop {
	background: rgba(0, 0, 0, 0.5);
	}

	dialog {
	max-width: 400px;
	border: 1px solid #ccc;
	border-radius: 10px;
	}
	</style>
	</head>
	<body>
	<input type="text" list="techs" />

	<datalist id="techs">
	<option value="HTML"></option>
	<option value="CSS"></option>
	<option value="JavaScript"></option>
	<option value="React"></option>
	<option value="Node"></option>
	<option value="Angular"></option>
	<option value="Vue"></option>
	<option value="Svelte"></option>
	</datalist>

	<p>H<sub>2</sub>O</p>

	<p>E=MC<sup>2</sup></p>

	<details>
	<summary>Ты точно хочешь меня открыть?</summary>

	<p>
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident
	nostrum temporibus perspiciatis optio hic corporis repellendus. Natus
	non quibusdam incidunt.
	</p>
	</details>

	<button id="open">Show modal</button>

	<dialog>
	<h2>Это заголовок</h2>
	<p>
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum sequi
	excepturi adipisci soluta maxime fugit nam earum harum eligendi nisi!
	</p>

	<button>Close</button>
	</dialog>

	<script>
	const openBtn = document.querySelector('#open')
	const dialog = document.querySelector('dialog')
	const closeBtn = dialog.querySelector('button')

	openBtn.onclick = () => dialog.showModal()

	closeBtn.onclick = () => dialog.close()
	</script>

	<figure>
	<img src="https://source.unsplash.com/random/100x100" alt="" />

	<figcaption>This is random pic</figcaption>
	</figure>

	<picture>
	<source
	media="(min-width: 900px)"
	srcset="https://source.unsplash.com/random/400x400"
	/>

	<source
	media="(max-width: 500px)"
	srcset="https://source.unsplash.com/random/100x100"
	/>

	<img src="https://source.unsplash.com/random/200x200" alt="" />
	</picture>
	</body>
	</html>