diff --git a/src/index.html b/src/index.html
index 2d87d5e07c26a66e893f6942f4042f38a7c9265d..8d29002eff11c94f10b18c214aecd7bccc5c7294 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,24 +1,26 @@
<!DOCTYPE html>
<html lang="ru">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Заголовок Ñтраницы</title>
+ <link
+ rel="stylesheet"
+ href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/1.0.0/modern-normalize.min.css"
+ integrity="sha512-ISS7cAi1PEhQ8jnbJpJZMd29NlhNj4AWYyLOSp2CE/CsHxTCu+r+t0D2yoJudVrd0/8fTVPUVDzY5Tvli75u/g=="
+ crossorigin="anonymous"
+ />
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+ <link
+ href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap"
+ rel="stylesheet"
+ />
+ </head>
+ <body>
+ <include src="./partials/one-card-preview.html"></include>
+ <include src="./partials/footer.html"></include>
-<head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Заголовок Ñтраницы</title>
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/1.0.0/modern-normalize.min.css"
- integrity="sha512-ISS7cAi1PEhQ8jnbJpJZMd29NlhNj4AWYyLOSp2CE/CsHxTCu+r+t0D2yoJudVrd0/8fTVPUVDzY5Tvli75u/g=="
- crossorigin="anonymous" />
- <link rel="preconnect" href="https://fonts.googleapis.com" />
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet" />
-</head>
-
-<body>
- <!-- Так добавлÑÑŽÑ‚ÑÑ Ñ„Ñ€Ð°Ð³Ð¼ÐµÐ½Ñ‚Ñ‹ в главные HTML-файлы Ñтраниц. -->
- <!-- <include src="./partials/example.html"></include> -->
- <!-- <include src="./partials/general-container.html"></include> -->
- <!-- Скрипт идёт поÑледним в разметке. Ð’ нём уже подключен главный SASS-файл. -->
- <script src="./index.js"></script>
-</body>
-
-</html>
\ No newline at end of file
+ <script src="./index.js"></script>
+ </body>
+</html>
diff --git a/src/partials/footer.html b/src/partials/footer.html
new file mode 100644
index 0000000000000000000000000000000000000000..d635b760a0a776db310b3046746844b9e0b6649d
--- /dev/null
+++ b/src/partials/footer.html
@@ -0,0 +1,12 @@
+<footer>
+ <div class="footer_container container">
+ <p class="footer_text">
+ © 2022 | All Rights Reserved | Developed with<svg
+ class="footer_icon"
+ width="14px"
+ height="12.88px"
+ >
+ <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/_footer.scss b/src/sass/_footer.scss
new file mode 100644
index 0000000000000000000000000000000000000000..6e1b3f7d29efcef7361d6e47ddfe211e7da0067b
--- /dev/null
+++ b/src/sass/_footer.scss
@@ -0,0 +1,30 @@
+footer {
+ background-color: $secondary-white-color;
+}
+
+.footer_container {
+ padding-top: 30px;
+ padding-bottom: 30px;
+}
+
+.footer_text {
+ color: $footer-text-color;
+ font-size: 16px;
+ font-weight: 400;
+ text-align: center;
+ line-height: 1.14;
+ margin-top: 0px;
+ margin-bottom: 0px;
+
+ @media screen and (max-width: 768px) {
+ width: 270px;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+}
+
+.footer_icon {
+ margin-left: 10px;
+ margin-right: 10px
+}
\ No newline at end of file
diff --git a/src/sass/_utility-classes.scss b/src/sass/_utility-classes.scss
index 7578e912cc59bc37fdf57d9bcd9a2ba90ce4c219..3190d38cfa760db2b8120331f20365546debc88e 100644
--- a/src/sass/_utility-classes.scss
+++ b/src/sass/_utility-classes.scss
@@ -44,7 +44,7 @@ a {
padding: 0;
}
-.img {
+img {
display: block;
width: 100%;
}
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
diff --git a/src/sass/main.scss b/src/sass/main.scss
index cf040b04ce451de6e06d1cee1437e52ebcbea307..e393ef280d27a2d3de0867deee7205e0e44182ec 100644
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -6,5 +6,5 @@
// Стили Ð´Ð»Ñ Ñ„Ð°Ð¹Ð»Ð° Ñ Ð¿Ñ€Ð¸Ð¼ÐµÑ€Ð¾Ð¼ HTML-фрагмента
@import './variables';
@import './utility-classes';
-
-@import './general-container'
+@import './footer';
+@import './components/one-card-preview';