diff --git a/submissions/smillims/cinema-booking-js/css/media.css b/submissions/smillims/cinema-booking-js/css/media.css
new file mode 100644
index 0000000..007633f
--- /dev/null
+++ b/submissions/smillims/cinema-booking-js/css/media.css
@@ -0,0 +1,308 @@
+@media screen and (max-width: 1450px) {
+  .container {
+    margin: 0;
+  }
+}
+
+@media screen and (max-width: 1280px) {
+  .aside-menu {
+    width: 270px;
+  }
+  .aside-menu-h1 {
+    font-size: 70px;
+  }
+  .tickets,
+  .aside-menu-button {
+    width: 250px;
+  }
+  .aside-menu-button {
+    font-size: 65px;
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  body {
+    position: relative;
+  }
+
+  .header-menu {
+    position: relative;
+    right: -60px;
+    top: 15px;
+  }
+
+  .input-menu,
+  .label-menu {
+    display: none;
+  }
+
+  .aside-menu {
+    display: block;
+    width: 510px;
+    height: 440px;
+
+    position: absolute;
+    top: 780px;
+    left: 200px;
+  }
+
+  .aside-menu-block-h1 {
+    height: 100px;
+  }
+
+  .asime-menu-poster {
+    display: none;
+  }
+
+  .movie-block-inside {
+    width: 100%;
+  }
+
+  .tickets,
+  .aside-menu-button {
+    min-width: 485px;
+    margin-bottom: 7px;
+  }
+  .aside-menu-button {
+    margin-left: 13px;
+  }
+
+  .aside-menu-tickets-green {
+    margin-top: 20px;
+  }
+
+  .container {
+    margin: 0 auto;
+  }
+
+  .main {
+    margin: 0 20px;
+    margin-bottom: 20px;
+  }
+}
+
+@media screen and (max-width: 1000px) {
+  .aside-menu {
+    width: 450px;
+  }
+
+  .tickets,
+  .aside-menu-button {
+    min-width: 430px;
+  }
+
+  .aside-menu-button {
+    margin-left: 10px;
+  }
+
+  .container {
+    margin-left: 120px;
+  }
+
+  .main {
+    width: 600px;
+    font-size: 40px;
+
+    margin-top: 30px;
+    margin-left: 100px;
+  }
+
+  .main-poster {
+    max-width: 500px;
+    max-height: 300px;
+
+    border-radius: 50px;
+  }
+
+  .seating {
+    width: 600px;
+  }
+
+  .seating-screen svg {
+    width: 500px;
+    left: 0px;
+  }
+
+  .seating-screen::after {
+    left: 210px;
+  }
+
+  .seating-container {
+    margin: 0;
+    margin-left: 190px;
+  }
+
+  .label-seating-place-blue {
+    min-width: 50px;
+    border-radius: 70px;
+  }
+}
+
+@media screen and (max-width: 900px) {
+  .aside-menu {
+    left: 105px;
+  }
+
+  .container {
+    margin-left: 30px;
+  }
+}
+
+@media screen and (max-width: 720px) {
+  .input-menu,
+  .label-menu {
+    display: none;
+  }
+
+  .aside-menu {
+    display: flex;
+    margin-left: -60px;
+  }
+
+  .container {
+    margin-left: -40px;
+  }
+
+  .main-form {
+    margin-left: 10px;
+  }
+}
+
+@media screen and (max-width: 640px) {
+  .aside-menu {
+    top: 650px;
+  }
+
+  .main {
+    margin-left: 70px;
+  }
+
+  .main-poster {
+    max-width: 300px;
+    max-height: 300px;
+  }
+
+  .main-form {
+    margin-top: 10px;
+    margin-left: 20px;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .aside-menu {
+    width: 370px;
+    margin-left: -120px;
+  }
+
+  .tickets,
+  .aside-menu-button {
+    min-width: 330px;
+  }
+
+  .aside-menu-button {
+    margin-left: 20px;
+  }
+
+  .main {
+    width: 450px;
+    margin-left: 55px;
+  }
+
+  .seating {
+    width: 450px;
+    margin-left: -20px;
+  }
+
+  .seating-container {
+    margin-left: 120px;
+  }
+
+  .seating-screen {
+    max-width: 300px;
+  }
+
+  .seating-screen svg {
+    width: 300px;
+    left: 0px;
+  }
+
+  .seating-screen::after {
+    left: 120px;
+
+    font-size: 25px;
+  }
+
+  .seating-name {
+    right: -20px;
+  }
+}
+
+@media screen and (max-width: 465px) {
+  .aside-menu {
+    width: 350px;
+    left: 120px;
+    margin-bottom: 10px;
+  }
+
+  .tickets,
+  .aside-menu-button {
+    width: 310px;
+  }
+
+  .aside-menu-button {
+    margin-left: 10px;
+  }
+
+  .main {
+    font-size: 30px;
+  }
+
+  .main-poster {
+    order: 2;
+    margin-left: 10px;
+  }
+
+  .main-form {
+    order: 1;
+    margin-left: -50px;
+  }
+
+  .choose-date,
+  .choose-time {
+    width: 60px;
+
+    font-size: 15px;
+  }
+}
+
+@media screen and (max-width: 422px) {
+  .aside-menu {
+    width: 300px;
+    left: 110px;
+  }
+
+  .tickets,
+  .aside-menu-button {
+    min-width: 230px;
+  }
+
+  .aside-menu-button {
+    width: 280px;
+    height: 80px;
+  }
+
+  .main-poster {
+    max-width: 250px;
+    max-height: 250px;
+
+    margin-left: 35px;
+  }
+
+  .main-form {
+    margin-left: -80px;
+  }
+
+  .seating {
+    margin-left: -45px;
+  }
+}
diff --git a/submissions/smillims/cinema-booking-js/css/style.css b/submissions/smillims/cinema-booking-js/css/style.css
new file mode 100644
index 0000000..20f249e
--- /dev/null
+++ b/submissions/smillims/cinema-booking-js/css/style.css
@@ -0,0 +1,506 @@
+@charset "UTF-8";
+
+* {
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+:active {
+  outline: none;
+}
+
+a:active {
+  outline: none;
+}
+
+nav,
+footer,
+header,
+aside {
+  display: block;
+}
+
+html,
+body {
+  height: 100%;
+  width: 100%;
+  font-size: 100%;
+  line-height: 1;
+  font-size: 14px;
+  -ms-text-size-adjust: 100%;
+  -moz-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+
+input,
+button,
+textarea {
+  font-family: inherit;
+}
+
+input::-ms-clear {
+  display: none;
+}
+
+button {
+  cursor: pointer;
+}
+
+button::-moz-focus-inner {
+  padding: 0;
+  border: 0;
+}
+
+a,
+a:visited {
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: none;
+}
+
+ul li,
+ol li {
+  list-style: none;
+}
+
+img {
+  vertical-align: top;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*--------------------*/
+
+@font-face {
+  font-family: "Bebas Neue";
+
+  src: url("https://nomail.com.ua/files/eot/1e99b0442583593743adb5d91d7c0669.eot?#iefix") format("embedded-opentype"),
+    url("https://nomail.com.ua/files/woff/1e99b0442583593743adb5d91d7c0669.woff") format("woff"),
+    url("https://nomail.com.ua/files/woff2/1e99b0442583593743adb5d91d7c0669.woff2") format("woff2");
+}
+
+body {
+  font-family: "Bebas Neue";
+  font-style: normal;
+  font-weight: normal;
+
+  color: #000;
+}
+
+img {
+  max-width: 100%;
+}
+
+input,
+label,
+.last-place {
+  display: inline-block;
+}
+.last-place {
+  min-width: 140px;
+}
+
+.header {
+  width: 100%;
+  position: relative;
+}
+
+.header-menu {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+
+.input-menu {
+  display: block;
+}
+
+.label-menu {
+  display: block;
+  width: 64px;
+
+  cursor: pointer;
+}
+
+.input-menu:focus + .label-menu {
+  outline: 1px solid #000;
+}
+
+.input-menu:checked + .label-menu {
+  position: absolute;
+  right: 0px;
+}
+.input-menu:checked ~ .aside-menu {
+  display: flex;
+}
+
+.aside-menu {
+  display: none;
+  flex-direction: column;
+
+  width: 300px;
+  height: 760px;
+
+  margin-top: 10px;
+  margin-right: 95px;
+
+  box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.2);
+  border-radius: 20px;
+}
+
+.aside-menu-block-h1 {
+  height: 136px;
+
+  background: #ffffff;
+  box-shadow: 0px 8px 7px rgba(0, 0, 0, 0.25);
+  border-radius: 10px 10px 0px 0px;
+  display: flex;
+  justify-content: center;
+}
+
+.aside-menu-h1 {
+  display: flex;
+  align-items: center;
+  font-size: 90px;
+  letter-spacing: 0.1em;
+}
+
+.asime-menu-poster {
+  display: flex;
+  justify-content: center;
+
+  margin-top: 15px;
+}
+
+.asime-menu-poster img {
+  width: 200px;
+  height: 310px;
+}
+
+.tickets {
+  width: 280px;
+  max-width: 280px;
+  height: 70px;
+
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+
+  margin: 0 auto;
+  margin-bottom: 6px;
+}
+.tickets .numbers-tickets {
+  color: #fff;
+  font-size: 60px;
+}
+.tickets img {
+  width: 60px;
+}
+.aside-menu-tickets-green {
+  margin-top: 10px;
+
+  background-color: #86ab57;
+}
+.aside-menu-tickets-yellow {
+  background-color: #f9bc0b;
+}
+.aside-menu-tickets-blue {
+  background-color: #5b3bb7;
+}
+
+.aside-menu-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 280px;
+
+  font-size: 70px;
+
+  margin: 0 auto;
+  margin-bottom: 10px;
+
+  border-radius: 0px 0px 10px 10px;
+  padding-top: 5px;
+
+  color: #fff;
+  background-color: #aa2e2e;
+}
+.aside-menu-button:hover {
+  background-color: rgb(216, 27, 27);
+}
+.aside-menu-button:active {
+  background-color: #aa2e2edc;
+}
+.aside-menu-button:focus {
+  outline: 2px solid #000;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  max-width: 950px;
+  margin: 0 auto;
+}
+
+.main {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 880px;
+  font-size: 55px;
+
+  margin-top: 20px;
+  margin-bottom: 20px;
+
+  position: relative;
+}
+.main-poster {
+  max-width: 558px;
+  max-height: 365.77px;
+
+  border-radius: 50px;
+}
+.main-form {
+  margin-left: 50px;
+}
+.block-date,
+.block-time {
+  display: flex;
+  flex-direction: column;
+}
+.choose-date,
+.choose-time {
+  width: 100px;
+  height: 50px;
+
+  font-family: "Bebas Neue";
+  font-style: normal;
+  font-weight: normal;
+
+  font-size: 20px;
+
+  color: #000;
+
+  cursor: pointer;
+}
+
+.choose-date:focus,
+.choose-time:focus {
+  outline: 1px solid #000;
+}
+
+.seating {
+  width: 880px;
+}
+.seating-screen {
+  position: relative;
+  left: 120px;
+}
+.seating-screen::after {
+  content: "Screen";
+  position: absolute;
+  top: 15px;
+  left: 285px;
+
+  width: 209px;
+  height: 37.28px;
+
+  font-size: 30px;
+}
+
+.seating-container {
+  max-width: 340px;
+
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  user-select: none;
+
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+
+  position: relative;
+}
+
+.seating-green {
+  max-height: 130px;
+
+  margin-top: 45px;
+}
+.seating-yellow {
+  max-height: 70px;
+
+  margin-top: 25px;
+  margin-bottom: 35px;
+}
+.seating-blue {
+  display: flex;
+  justify-content: center;
+  max-height: 40px;
+}
+
+.seating-container label {
+  cursor: pointer;
+}
+
+.label-seating-place-green {
+  width: 30px;
+  height: 27px;
+
+  margin: 2px;
+
+  background-color: #86ab57;
+  transition: background-color 0.3s;
+  border-radius: 129px;
+  transform: matrix(-1, 0, 0, 1, 0, 0);
+}
+.label-seating-place-green:hover {
+  background-color: #94be5e;
+}
+.label-seating-place-green:active {
+  background-color: #87ab57a9;
+}
+
+.label-seating-place-yellow {
+  width: 30px;
+  height: 27px;
+
+  margin: 2px;
+
+  background-color: #f9bc0b;
+  transition: background-color 0.3s;
+  border-radius: 129px;
+  transform: matrix(-1, 0, 0, 1, 0, 0);
+}
+.label-seating-place-yellow:hover {
+  background-color: #ebb001;
+}
+.label-seating-place-yellow:active {
+  background-color: #f9bd0bb2;
+}
+.label-seating-place-blue {
+  width: 53px;
+  height: 36.28px;
+
+  margin-right: 3px;
+
+  background-color: #5b3bb7;
+  transition: background-color 0.3s;
+  border-radius: 70px;
+}
+.label-seating-place-blue:hover {
+  background-color: #4b24c2;
+}
+.label-seating-place-blue:active {
+  background-color: #5a3bb7c0;
+}
+.label-seating-place-blue:nth-of-type(2n) {
+  margin-right: 20px;
+}
+
+.seating-place-green:checked + .label-seating-place-green,
+.seating-place-yellow:checked + .label-seating-place-yellow,
+.seating-place-blue:checked + .label-seating-place-blue {
+  background-color: red;
+  transition: background-color 0.5s;
+}
+.seating-place-green:checked + .label-seating-place-green:active,
+.seating-place-yellow:checked + .label-seating-place-yellow:active,
+.seating-place-blue:checked + .label-seating-place-blue:active {
+  background-color: rgba(255, 0, 0, 0.808);
+}
+
+.seating-place-green:focus + .label-seating-place-green,
+.seating-place-yellow:focus + .label-seating-place-yellow,
+.seating-place-blue:focus + .label-seating-place-blue {
+  border: 2px solid #000;
+}
+
+.seating-name {
+  position: absolute;
+  top: 49px;
+  right: -10px;
+}
+.seating-name > li {
+  font-size: 20px;
+
+  margin-bottom: 13px;
+}
+.seating-name > li:nth-child(4) {
+  margin-bottom: 35px;
+}
+.seating-name > li:nth-child(6) {
+  margin-bottom: 50px;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  border: 0;
+  padding: 0;
+  clip: rect(0 0 0 0);
+  overflow: hidden;
+}
+
+.movie {
+  max-width: 280px;
+  height: 70px;
+
+  font-size: 10px;
+
+  display: flex;
+  flex-wrap: wrap;
+
+  color: #fff;
+  overflow-y: scroll;
+}
+
+.movie-block-inside {
+  width: 280px;
+
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  font-size: 20px;
+  padding: 3px;
+}
+.movie-block-inside:after {
+  content: "";
+  width: 100%;
+  height: 1px;
+
+  margin-top: 3px;
+
+  background-color: #000;
+}
+
+.movie-first-column,
+.movie-second-column {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
diff --git a/submissions/smillims/cinema-booking-js/index.html b/submissions/smillims/cinema-booking-js/index.html
new file mode 100644
index 0000000..c688b35
--- /dev/null
+++ b/submissions/smillims/cinema-booking-js/index.html
@@ -0,0 +1,208 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cinema</title>
+    <link rel="stylesheet" href="css/style.css" />
+    <link rel="stylesheet" href="css/media.css" />
+  </head>
+  <body>
+    <header class="header">
+      <div class="header-menu">
+        <input class="input-menu visually-hidden" id="menu" type="checkbox" name="seating" value="menu" checked />
+        <label class="label-menu" for="menu">
+          <img src="img/menu.svg" alt="menu" />
+        </label>
+        <aside class="aside-menu">
+          <div class="aside-menu-block-h1">
+            <h1 class="aside-menu-h1">soul</h1>
+          </div>
+          <div class="asime-menu-poster">
+            <img src="img/Soul_(poster).jpg" alt="poster" />
+          </div>
+          <div class="aside-menu-tickets-green tickets movie"></div>
+          <div class="aside-menu-tickets-yellow tickets movie"></div>
+          <div class="aside-menu-tickets-blue tickets movie"></div>
+          <button class="aside-menu-button" type="button" form="form-seating-id">Buy</button>
+        </aside>
+      </div>
+    </header>
+    <div class="container">
+      <main class="main">
+        <img class="main-poster" src="img/soul.jpg" alt="poster" />
+        <form class="main-form">
+          <div class="block-date">
+            <p class="form-date">Date:</p>
+            <select class="choose-date" id="date" name="date">
+              <option disabled>Choose date:</option>
+              <option value="20.02">20.02</option>
+              <option value="21.02">21.02</option>
+              <option value="22.02">22.02</option>
+              <option value="23.02">23.02</option>
+            </select>
+          </div>
+          <div class="block-time">
+            <p class="form-time">Time:</p>
+            <select class="choose-time" id="time" name="time">
+              <option disabled>Choose time:</option>
+              <option value="10:00">10:00</option>
+              <option value="15:00">15:00</option>
+              <option value="18:00">18:00</option>
+              <option value="21:00">21:00</option>
+            </select>
+          </div>
+        </form>
+      </main>
+
+      <section class="seating">
+        <div class="seating-screen">
+          <svg width="629" height="27" viewBox="0 0 629 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M1 26L19.4899 23.2417C216.102 -6.08887 415.988 -5.94341 612.557 23.6733L628 26" stroke="black" />
+          </svg>
+        </div>
+        <form class="form-seating" id="form-seating-id" name="formSeating">
+          <div class="seating-container">
+            <div class="seating-green">
+              <input class="seating-place-green visually-hidden seating-input" id="green-1" type="checkbox" name="green" value="1-1" />
+              <label class="label-seating-place-green" for="green-1"></label>
+              <input class="seating-place-green visually-hidden seating-input" id="green-2" type="checkbox" name="green" value="1-2" />
+              <label class="label-seating-place-green" for="green-2"></label>
+              <input class="seating-place-green visually-hidden seating-input" id="green-3" type="checkbox" name="green" value="1-3" />
+              <label class="label-seating-place-green" for="green-3"></label>
+              <input class="seating-place-green visually-hidden seating-input" id="green-4" type="checkbox" name="green" value="1-4" />
+              <label class="label-seating-place-green" for="green-4"></label>
+              <input class="seating-place-green visually-hidden seating-input" id="green-5" type="checkbox" name="green" value="1-5" />
+              <label class="label-seating-place-green" for="green-5"></label>
+              <input class="seating-place-green visually-hidden seating-input" id="green-6" type="checkbox" name="green" value="1-6" />
+              <label class="label-seating-place-green" for="green-6"></label>
+              <input class="seating-place-green visually-hidden seating-input" id="green-7" type="checkbox" name="green" value="1-7" />
+              <label class="label-seating-place-green" for="green-7"></label>
+              <input class="seating-place-green visually-hidden seating-input" id="green-8" type="checkbox" name="green" value="1-8" />
+              <label class="label-seating-place-green" for="green-8"></label>
+              <input class="seating-place-green visually-hidden seating-input" id="green-9" type="checkbox" name="green" value="1-9" />
+              <label class="label-seating-place-green" for="green-9"></label>
+              <input class="seating-place-green visually-hidden seating-input" id="green-10" type="checkbox" name="green" value="2-1" />
+              <label class="label-seating-place-green" for="green-10"></label>
+              <input class="seating-place-green visually-hidden seating-input" id="green-11" type="checkbox" name="green" value="2-2" />
+              <label class="label-seating-place-green" for="green-11"></label>
+              <input class="seating-place-green visually-hidden seating-input" id="green-12" type="checkbox" name="green" value="2-3" />
+              <label class="label-seating-place-green" for="green-12"></label>
+              <input class="seating-place-green visually-hidden seating-input" id="green-13" type="checkbox" name="green" value="2-4" />
+              <label class="label-seating-place-green" for="green-13"></label>
+              <input class="seating-place-green visually-hidden seating-input" id="green-14" type="checkbox" name="green" value="2-5" />
+              <label class="label-seating-place-green" for="green-14"></label>
+              <input class="seating-place-green visually-hidden seating-input" id="green-15" type="checkbox" name="green" value="2-6" />
+              <label class="label-seating-place-green" for="green-15"></label>
+              <input class="seating-place-green visually-hidden seating-input" id="green-16" type="checkbox" name="green" value="2-7" />
+              <label class="label-seating-place-green" for="green-16"></label>
+              <input class="seating-place-green visually-hidden seating-input" id="green-17" type="checkbox" name="green" value="2-8" />
+              <label class="label-seating-place-green" for="green-17"></label>
+              <input class="seating-place-green visually-hidden seating-input" id="green-18" type="checkbox" name="green" value="2-9" />
+              <label class="label-seating-place-green" for="green-18"></label>
+              <input class="seating-place-green visually-hidden seating-input" id="green-19" type="checkbox" name="green" value="3-1" />
+              <label class="label-seating-place-green" for="green-19"></label>
+              <input class="seating-place-green visually-hidden seating-input" id="green-20" type="checkbox" name="green" value="3-2" />
+              <label class="label-seating-place-green" for="green-20"></label>
+              <input class="seating-place-green visually-hidden seating-input" id="green-21" type="checkbox" name="green" value="3-3" />
+              <label class="label-seating-place-green" for="green-21"></label>
+              <input class="seating-place-green visually-hidden seating-input" id="green-22" type="checkbox" name="green" value="3-4" />
+              <label class="label-seating-place-green" for="green-22"></label>
+              <input class="seating-place-green visually-hidden seating-input" id="green-23" type="checkbox" name="green" value="3-5" />
+              <label class="label-seating-place-green" for="green-23"></label>
+              <input class="seating-place-green visually-hidden seating-input" id="green-24" type="checkbox" name="green" value="3-6" />
+              <label class="label-seating-place-green" for="green-24"></label>
+              <input class="seating-place-green visually-hidden seating-input" id="green-25" type="checkbox" name="green" value="3-7" />
+              <label class="label-seating-place-green" for="green-25"></label>
+              <input class="seating-place-green visually-hidden seating-input" id="green-26" type="checkbox" name="green" value="3-8" />
+              <label class="label-seating-place-green" for="green-26"></label>
+              <input class="seating-place-green visually-hidden seating-input" id="green-27" type="checkbox" name="green" value="3-9" />
+              <label class="label-seating-place-green" for="green-27"></label>
+              <input class="seating-place-green visually-hidden seating-input" id="green-28" type="checkbox" name="green" value="4-1" />
+              <label class="label-seating-place-green" for="green-28"></label>
+              <input class="seating-place-green visually-hidden seating-input" id="green-29" type="checkbox" name="green" value="4-2" />
+              <label class="label-seating-place-green" for="green-29"></label>
+              <input class="seating-place-green visually-hidden seating-input" id="green-30" type="checkbox" name="green" value="4-3" />
+              <label class="label-seating-place-green" for="green-30"></label>
+              <input class="seating-place-green visually-hidden seating-input" id="green-31" type="checkbox" name="green" value="4-4" />
+              <label class="label-seating-place-green" for="green-31"></label>
+              <input class="seating-place-green visually-hidden seating-input" id="green-32" type="checkbox" name="green" value="4-5" />
+              <label class="label-seating-place-green" for="green-32"></label>
+              <input class="seating-place-green visually-hidden seating-input" id="green-33" type="checkbox" name="green" value="4-6" />
+              <label class="label-seating-place-green" for="green-33"></label>
+              <input class="seating-place-green visually-hidden seating-input" id="green-34" type="checkbox" name="green" value="4-7" />
+              <label class="label-seating-place-green" for="green-34"></label>
+              <input class="seating-place-green visually-hidden seating-input" id="green-35" type="checkbox" name="green" value="4-8" />
+              <label class="label-seating-place-green" for="green-35"></label>
+              <input class="seating-place-green visually-hidden seating-input" id="green-36" type="checkbox" name="green" value="4-9" />
+              <label class="label-seating-place-green" for="green-36"></label>
+            </div>
+            <div class="seating-yellow">
+              <input class="seating-place-yellow visually-hidden seating-input" id="yellow-1" type="checkbox" name="yellow" value="5-1" />
+              <label class="label-seating-place-yellow" for="yellow-1"></label>
+              <input class="seating-place-yellow visually-hidden seating-input" id="yellow-2" type="checkbox" name="yellow" value="5-2" />
+              <label class="label-seating-place-yellow" for="yellow-2"></label>
+              <input class="seating-place-yellow visually-hidden seating-input" id="yellow-3" type="checkbox" name="yellow" value="5-3" />
+              <label class="label-seating-place-yellow" for="yellow-3"></label>
+              <input class="seating-place-yellow visually-hidden seating-input" id="yellow-4" type="checkbox" name="yellow" value="5-4" />
+              <label class="label-seating-place-yellow" for="yellow-4"></label>
+              <input class="seating-place-yellow visually-hidden seating-input" id="yellow-5" type="checkbox" name="yellow" value="5-5" />
+              <label class="label-seating-place-yellow" for="yellow-5"></label>
+              <input class="seating-place-yellow visually-hidden seating-input" id="yellow-6" type="checkbox" name="yellow" value="5-6" />
+              <label class="label-seating-place-yellow" for="yellow-6"></label>
+              <input class="seating-place-yellow visually-hidden seating-input" id="yellow-7" type="checkbox" name="yellow" value="5-7" />
+              <label class="label-seating-place-yellow" for="yellow-7"></label>
+              <input class="seating-place-yellow visually-hidden seating-input" id="yellow-8" type="checkbox" name="yellow" value="5-8" />
+              <label class="label-seating-place-yellow" for="yellow-8"></label>
+              <input class="seating-place-yellow visually-hidden seating-input" id="yellow-9" type="checkbox" name="yellow" value="5-9" />
+              <label class="label-seating-place-yellow" for="yellow-9"></label>
+              <input class="seating-place-yellow visually-hidden seating-input" id="yellow-10" type="checkbox" name="yellow" value="6-1" />
+              <label class="label-seating-place-yellow" for="yellow-10"></label>
+              <input class="seating-place-yellow visually-hidden seating-input" id="yellow-11" type="checkbox" name="yellow" value="6-2" />
+              <label class="label-seating-place-yellow" for="yellow-11"></label>
+              <input class="seating-place-yellow visually-hidden seating-input" id="yellow-12" type="checkbox" name="yellow" value="6-3" />
+              <label class="label-seating-place-yellow" for="yellow-12"></label>
+              <input class="seating-place-yellow visually-hidden seating-input" id="yellow-13" type="checkbox" name="yellow" value="6-4" />
+              <label class="label-seating-place-yellow" for="yellow-13"></label>
+              <input class="seating-place-yellow visually-hidden seating-input" id="yellow-14" type="checkbox" name="yellow" value="6-5" />
+              <label class="label-seating-place-yellow" for="yellow-14"></label>
+              <input class="seating-place-yellow visually-hidden seating-input" id="yellow-15" type="checkbox" name="yellow" value="6-6" />
+              <label class="label-seating-place-yellow" for="yellow-15"></label>
+              <input class="seating-place-yellow visually-hidden seating-input" id="yellow-16" type="checkbox" name="yellow" value="6-7" />
+              <label class="label-seating-place-yellow" for="yellow-16"></label>
+              <input class="seating-place-yellow visually-hidden seating-input" id="yellow-17" type="checkbox" name="yellow" value="6-8" />
+              <label class="label-seating-place-yellow" for="yellow-17"></label>
+              <input class="seating-place-yellow visually-hidden seating-input" id="yellow-18" type="checkbox" name="yellow" value="6-9" />
+              <label class="label-seating-place-yellow" for="yellow-18"></label>
+            </div>
+            <div class="seating-blue">
+              <input class="seating-place-blue visually-hidden seating-input" id="blue-1" type="checkbox" name="blue" value="7-1" />
+              <label class="label-seating-place-blue" for="blue-1"></label>
+              <input class="seating-place-blue visually-hidden seating-input" id="blue-2" type="checkbox" name="blue" value="7-2" />
+              <label class="label-seating-place-blue" for="blue-2"></label>
+              <input class="seating-place-blue visually-hidden seating-input" id="blue-3" type="checkbox" name="blue" value="7-3" />
+              <label class="label-seating-place-blue" for="blue-3"></label>
+              <input class="seating-place-blue visually-hidden seating-input" id="blue-4" type="checkbox" name="blue" value="7-4" />
+              <label class="label-seating-place-blue" for="blue-4"></label>
+              <input class="seating-place-blue visually-hidden seating-input" id="blue-5" type="checkbox" name="blue" value="7-5" />
+              <label class="label-seating-place-blue" for="blue-5"></label>
+              <input class="seating-place-blue visually-hidden seating-input" id="blue-6" type="checkbox" name="blue" value="7-6" />
+              <label class="label-seating-place-blue" for="blue-6"></label>
+            </div>
+            <ol class="seating-name">
+              <li class="seating-a">a</li>
+              <li class="seating-b">b</li>
+              <li class="seating-c">c</li>
+              <li class="seating-d">d</li>
+              <li class="seating-e">e</li>
+              <li class="seating-f">f</li>
+              <li class="seating-g">g</li>
+            </ol>
+          </div>
+        </form>
+      </section>
+    </div>
+
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/submissions/smillims/cinema-booking-js/script.js b/submissions/smillims/cinema-booking-js/script.js
new file mode 100644
index 0000000..ff32920
--- /dev/null
+++ b/submissions/smillims/cinema-booking-js/script.js
@@ -0,0 +1,59 @@
+const formSeating = document.querySelector('.form-seating');
+
+const asideMenuGreenTicket = document.querySelector('.aside-menu-tickets-green');
+const asideMenuYellowTicket = document.querySelector('.aside-menu-tickets-yellow');
+const asideMenuBlueTicket = document.querySelector('.aside-menu-tickets-blue');
+
+function checkClick(e) {
+	const targetSeating = e.target.closest('.seating-input');
+
+	if(!targetSeating) return;
+
+	numberOfTickets(targetSeating);
+}
+
+function numberOfTickets(target) {
+	const targetInputValue = target.value;
+	const [row, seat] = targetInputValue.split('-');
+
+	if((target.getAttribute('name') === 'green' || target.getAttribute('name') === 'yellow' || target.getAttribute('name') === 'blue') && target.checked) {
+		generateTicketInfoBlock(target, row, seat, targetInputValue);
+	} else if (!target.checked) {
+		removeTicketInfoBlock(targetInputValue);
+	}
+}
+
+function generateTicketInfoBlock(target, row, seat, id) {
+	const divMoviePlace = document.createElement('div');
+	
+	divMoviePlace.classList.add('movie-block-inside');
+	divMoviePlace.dataset.id = id;
+	divMoviePlace.innerHTML = `<div class="movie-first-column">
+											<p class="movie-place">Row: ${row}</p>
+											<p class="movie-row">Place: ${seat}</p>
+										</div>
+										<div class="movie-second-column">
+											<p class="movie-text-1">Have</p>
+											<p class="movie-text-2">good</p>
+											<p class="movie-text-3">day!</p>
+										</div>`;
+
+	if(target.getAttribute('name') === 'green' && target.checked){
+		asideMenuGreenTicket.appendChild(divMoviePlace);
+	} else if(target.getAttribute('name') === 'yellow' && target.checked) {
+		asideMenuYellowTicket.appendChild(divMoviePlace);
+	} else if(target.getAttribute('name') === 'blue' && target.checked) {
+		asideMenuBlueTicket.appendChild(divMoviePlace);
+	}
+}
+
+function removeTicketInfoBlock(id) {
+	const movieBlockInside = document.querySelectorAll('.movie-block-inside');
+	movieBlockInside.forEach(item => {
+		if (item.dataset.id === id){
+			item.remove();
+		}
+	});
+}
+
+formSeating.addEventListener('click', checkClick);