diff --git a/src/index.html b/src/index.html
index 5dde1f9d427332be42403133a6217e9334775e79..a1a965752e1dd36480cd0143da79ee72915ebaee 100644
--- a/src/index.html
+++ b/src/index.html
@@ -23,7 +23,6 @@
     <!-- Так добавляются фрагменты в главные HTML-файлы страниц. -->
     <!-- <include src="./partials/example.html"></include> -->
 
-    <!-- Скрипт идёт последним в разметке. В нём уже подключен главный SASS-файл. -->
     <script src="./index.js"></script>
   </body>
 </html>
diff --git a/src/partials/footer.html b/src/partials/footer.html
index e436ae4088089c23270dbdc3fb16bc8a5d1cc436..d635b760a0a776db310b3046746844b9e0b6649d 100644
--- a/src/partials/footer.html
+++ b/src/partials/footer.html
@@ -6,8 +6,7 @@
         width="14px"
         height="12.88px"
       >
-        <use href="./images/sprite.svg#heart"></use></svg
-      >by <a href="#"> GoIT Students </a>
+        <use href="./images/sprite.svg#heart"></use></svg>by <a href="#"> GoIT Students </a>
     </p>
   </div>
 </footer>
diff --git a/src/partials/one-card-preview.html b/src/partials/one-card-preview.html
new file mode 100644
index 0000000000000000000000000000000000000000..785b79f2ded1b6c80c3e15231b3cdfaa0e32f9ba
--- /dev/null
+++ b/src/partials/one-card-preview.html
@@ -0,0 +1,13 @@
+<div class="container-card-preview">
+  <img
+    src="https://i.pinimg.com/originals/53/91/1a/53911a269df36dd3b2a2007b7f0ed03e.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/sass/_utility-classes.scss b/src/sass/_utility-classes.scss
index 5cb8793fbb696e6eaf3d267dcae8cbe714dc6fd5..374c58e6aa1e0ecae48c692bc390b66edeef8a86 100644
--- a/src/sass/_utility-classes.scss
+++ b/src/sass/_utility-classes.scss
@@ -47,9 +47,9 @@ a {
   text-decoration: none;
 }
 
-.img {
-  display: block;
-  width: 100%;
+img {
+    display: block;
+    width: 100%;
 }
 
 .visually-hidden {
diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss
index 369c47e73b2c77bad626ce99a5e8b07f9960bda6..188361b636b92cc919eb066c935146ca942db39f 100644
--- a/src/sass/_variables.scss
+++ b/src/sass/_variables.scss
@@ -4,4 +4,6 @@ $secondary-white-color: #F7F7F7;
 $primary-text-color: #000000;
 $secondary-text-color: #8C8C8C;
 $footer-text-color: #545454;
-$alert-color: #FF001B;
\ No newline at end of file
+$alert-color: #FF001B;
+$transition-duration: 250ms;
+$transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
\ No newline at end of file
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