diff --git a/src/index.html b/src/index.html
index 194fd44f8dfd8f45d769f777571382bf50dbbb1c..bda86f72404e374169e900d86ad70a99874a0333 100644
--- a/src/index.html
+++ b/src/index.html
@@ -20,7 +20,7 @@
<body>
<!-- Так добавлÑÑŽÑ‚ÑÑ Ñ„Ñ€Ð°Ð³Ð¼ÐµÐ½Ñ‚Ñ‹ в главные HTML-файлы Ñтраниц. -->
<!-- <include src="./partials/example.html"></include> -->
-
+ <include src="./partials/film-info.html"></include>
<!-- Скрипт идёт поÑледним в разметке. Ð’ нём уже подключен главный SASS-файл. -->
<script src="./index.js"></script>
</body>
diff --git a/src/partials/film-info.html b/src/partials/film-info.html
new file mode 100644
index 0000000000000000000000000000000000000000..3f4bb9210930eae4a532fde42c8ac40e768c5b19
--- /dev/null
+++ b/src/partials/film-info.html
@@ -0,0 +1,41 @@
+<div class="film-info__overlay is-open">
+ <div class="film-info__container">
+ <div class="film-info__poster">
+ <img
+ src="https://www.themoviedb.org/t/p/w1280/1pnigkWWy8W032o9TKDneBa3eVK.jpg"
+ alt="interstellar"
+ class="film-info__image img"
+ />
+ </div>
+ <div class="film-info__text">
+ <h2 class="film-info__title">Interstellar</h2>
+ <div class="film-info__lists">
+ <ul class="film-info__titles-list list">
+ <li class="film-info__title-item">Vote / Votes</li>
+ <li class="film-info__title-item">Popularity</li>
+ <li class="film-info__title-item">Original Title</li>
+ <li class="film-info__title-item">Genre</li>
+ </ul>
+ <ul class="film-info__properties-list list">
+ <li class="film-info__property-item">
+ <span class="accent">7.3</span>
+ <span class="separator">/</span>
+ <span class="simple">1260</span>
+ </li>
+ <li class="film-info__property-item">100.2</li>
+ <li class="film-info__property-item">A FISTFUL OF LEAD</li>
+ <li class="film-info__property-item">Western</li>
+ </ul>
+ </div>
+ <h3 class="film-info__description-title">About</h3>
+ <p class="film-info__description">
+ The adventures of a group of explorers who make use of a newly discovered wormhole to
+ surpass the limitations on human space travel and conquer the vast distances involved in an
+ interstellar voyage.
+ </p>
+ <button class="film-info__button film-info__button--accent">add to watched</button>
+ <button class="film-info__button">add to queue</button>
+ </div>
+ </div>
+ <!-- <button class="close-modal-button"></button>-->
+</div>
diff --git a/src/sass/_film-info.scss b/src/sass/_film-info.scss
new file mode 100644
index 0000000000000000000000000000000000000000..080e0c6a831ace4df4b94805bfe187c2d18db56e
--- /dev/null
+++ b/src/sass/_film-info.scss
@@ -0,0 +1,142 @@
+h1,
+h2,
+h3,
+p {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+button {
+ padding: 0;
+}
+
+img {
+ display: block;
+ max-width: 100%;
+ height: auto;
+}
+
+$transition-duration: 250ms;
+$transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+
+.film-info__overlay {
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+
+ position: fixed;
+ top: 0;
+ left: 0;
+ overflow-y: scroll;
+ z-index: 100;
+
+ width: 100%;
+ height: 100%;
+
+ min-width: 320px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ background: rgba(0, 0, 0, 0.2);
+ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+
+ transition: opacity $transition-duration $transition-timing-function,
+ visibility $transition-duration $transition-timing-function;
+
+ &.is-open {
+ opacity: 1;
+ visibility: visible;
+ pointer-events: initial;
+ }
+
+ @media screen and (max-width: 767px) {
+ padding: 20px;
+ }
+}
+
+.film-info__container {
+ width: 100%;
+ background-color: $primary-white-color;
+
+ padding: 48px 20px 40px 20px;
+
+ transform: translateX(100%);
+ transition-property: transform;
+ transition-duration: 800ms;
+ transition-timing-function: $transition-timing-function;
+
+ .film-info__overlay & {
+ transform: translateX(0);
+ }
+
+ @media screen and (min-width: 480px) {
+ width: 480px;
+ }
+
+ @media screen and (min-width: 768px) {
+ height: 562px;
+ width: 618px;
+ display: flex;
+ padding: 42px 28px 40px 28px;
+ }
+
+ @media screen and (min-width: 1024px) {
+ height: 568px;
+ width: 882px;
+ padding: 50px 30px 40px 30px;
+ }
+
+}
+
+.film-info__poster {
+ width: 369px;
+}
+
+.film-info__title {
+ font-size: 20px;
+ line-height: 1.15;
+ margin-bottom: 20px;
+
+ @media screen and (min-width: 1024px) {
+ font-size: 30px;
+ line-height: 1.17;
+ }
+}
+
+.film-info__lists {
+ display: flex;
+}
+
+.film-info__titles-list,
+.film-info__properties-list {
+ font-size: 12px;
+ line-height: 1.33;
+}
+
+.film-info__titles-list {
+ color: $secondary-text-color;
+}
+
+.film-info__title-item,
+.film-info__property-item {
+ &:not(:last-child) {
+ margin-bottom: 10px;
+ }
+}
+
+.film-info__property-item .accent,
+.film-info__property-item .simple {
+ padding: 1px 4px 1px 4px;
+ border-radius: 5px;
+ min-width: 36px;
+}
+
+.film-info__property-item .accent {
+ background-color: $accent-color;
+ color: $primary-white-color;
+}
+
+.film-info__property-item .simple {
+ background-color: $secondary-white-color;
+}
diff --git a/src/sass/main.scss b/src/sass/main.scss
index 908047521c4d9e1353010cd7e928a2132b161f04..66ab3991a7b851eec656830bbce0ec08b2c1c3f4 100644
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -6,3 +6,4 @@
// Стили Ð´Ð»Ñ Ñ„Ð°Ð¹Ð»Ð° Ñ Ð¿Ñ€Ð¸Ð¼ÐµÑ€Ð¾Ð¼ HTML-фрагмента
@import './variables';
@import './utility-classes';
+@import './film-info';