diff --git a/src/html/one-card-modal.html b/src/html/one-card-modal.html
new file mode 100644
index 0000000000000000000000000000000000000000..09a5e7f51e25d562ad8758e0341032faa36c2561
--- /dev/null
+++ b/src/html/one-card-modal.html
@@ -0,0 +1,23 @@
+<img src="#" alt="poster" />
+<h2>name</h2>
+<dl>
+ <dt>Vote / Votes</dt>
+ <dd>'.../...'</dd>
+ <dt>Popularity</dt>
+ <dd>100.2</dd>
+ <dt>Original Title</dt>
+ <dd>A FISTFUL OF LEAD</dd>
+ <dt>Genre</dt>
+ <dd>Western</dd>
+</dl>
+<h3>About</h3>
+<p>
+ Four of the West’s most infamous outlaws assemble to steal a huge stash of gold from the most
+ corrupt settlement of the gold rush towns. But not all goes to plan one is killed and the other
+ three escapes with bags of gold hide out in the abandoned gold mine where they happen across
+ another gang of three – who themselves were planning to hit the very same bank! As tensions rise,
+ things go from bad to worse as they realise the bags of gold are filled with lead... they’ve been
+ double crossed – but by who and how?
+</p>
+<button>add to Watched</button>
+<button>add to queue</button>
diff --git a/src/html/one-card-preview.html b/src/html/one-card-preview.html
new file mode 100644
index 0000000000000000000000000000000000000000..6532ef389480e8453a4774c9e45c02b3932fa4a2
--- /dev/null
+++ b/src/html/one-card-preview.html
@@ -0,0 +1,9 @@
+<div class="container-card-preview">
+ <img src="images/Rectangle.jpg" alt="poster" class="card-preview__poster" />
+
+ <h2 class="card-preview-info__name">name</h2>
+ <div class="card-preview-info">
+ <p class="card-preview-info__data">Genre | years</p>
+ <span class="card-preview-info__rating">rating</span>
+ </div>
+</div>
diff --git a/src/html/one-card.html b/src/html/one-card.html
deleted file mode 100644
index d4772482cdd6446ab57bc3bf25b0dff4b04a1979..0000000000000000000000000000000000000000
--- a/src/html/one-card.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<div class="container conteiner_card">
- <img src="#" alt="poster" />
- <h2>name</h2>
- <p>Genre</p>
- <p>years</p>
- <p>rating</p>
-</div>
diff --git a/src/images/Rectangle.jpg b/src/images/Rectangle.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..68a264d47b54f997d5ae57366425cc3c886cdb55
Binary files /dev/null and b/src/images/Rectangle.jpg differ
diff --git a/src/index.html b/src/index.html
index 087b53438dbc34ec087627de1b51fa481781fad1..10332060e842de0a8c24f9ec10a63b004c85e8ed 100644
--- a/src/index.html
+++ b/src/index.html
@@ -20,7 +20,8 @@
<body>
<!-- Так добавлÑÑŽÑ‚ÑÑ Ñ„Ñ€Ð°Ð³Ð¼ÐµÐ½Ñ‚Ñ‹ в главные HTML-файлы Ñтраниц. -->
<!-- <include src="./partials/example.html"></include> -->
- <include src="./html/one-card.html"></include>
+ <include src="./html/one-card-preview.html"></include>
+ <!-- <include src="./html/one-card-modal.html"></include> -->
<!-- Скрипт идёт поÑледним в разметке. Ð’ нём уже подключен главный SASS-файл. -->
<script src="./index.js"></script>
diff --git a/src/sass/components/_one-card-modal.scss b/src/sass/components/_one-card-modal.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/sass/components/_one-card-preview.scss b/src/sass/components/_one-card-preview.scss
new file mode 100644
index 0000000000000000000000000000000000000000..9d8579cb204d94ac2219080d8fa4dc9287e645d8
--- /dev/null
+++ b/src/sass/components/_one-card-preview.scss
@@ -0,0 +1,55 @@
+
+.container-card-preview{
+height: 445px;
+margin-left: auto;
+margin-right: auto;
+ width: 320px;
+ padding: 0 20px;
+@media screen and (min-width: 480px) {
+ margin-top: 20px;
+width: 324px;
+padding: 0 15px;
+}
+
+@media screen and (min-width: 768px) {
+ margin-top: 30px;
+ width: 304px;
+
+}
+
+// @media screen and (min-width: 1024px) {
+
+// }
+}
+.card-preview__poster{
+ width: 100%;
+ height: 398px;
+
+}
+.card-preview-info{
+
+ display: flex;
+ font-size: 12px;
+ line-height: 1.33;
+
+}
+.card-preview-info__name{
+ margin: 10px 0 0 0 ;
+ font-size: 12px;
+ line-height: 1.33;
+
+}
+.card-preview-info__data{
+ color: $accent-color;
+ margin: 0;
+ font-size: 12px;
+ line-height: 1.33;
+ margin-right: 10px;
+}
+.card-preview-info__rating{
+ padding: 1px 9px 1px 10px;
+ background-color: $accent-color;
+ color: $primary-white-color;
+ border-radius: 5px;
+line-height: 1.16;
+}
\ No newline at end of file
diff --git a/src/sass/main.scss b/src/sass/main.scss
index 908047521c4d9e1353010cd7e928a2132b161f04..4c7c0bf5348d3940f453197564dc4378edaa9738 100644
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -6,3 +6,5 @@
// Стили Ð´Ð»Ñ Ñ„Ð°Ð¹Ð»Ð° Ñ Ð¿Ñ€Ð¸Ð¼ÐµÑ€Ð¾Ð¼ HTML-фрагмента
@import './variables';
@import './utility-classes';
+@import './components/one-card-preview';
+@import './components/one-card-modal';