diff --git a/src/images/cover.jpg b/src/images/cover.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a9772fe133c8982a57a154c7337a74cd6b5b5364
Binary files /dev/null and b/src/images/cover.jpg differ
diff --git a/src/index.html b/src/index.html
index 194fd44f8dfd8f45d769f777571382bf50dbbb1c..bdc5c703ddabc2d0642ae378876231741894f029 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,27 +1,24 @@
<!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>
- <!-- Так добавлÑÑŽÑ‚ÑÑ Ñ„Ñ€Ð°Ð³Ð¼ÐµÐ½Ñ‚Ñ‹ в главные HTML-файлы Ñтраниц. -->
- <!-- <include src="./partials/example.html"></include> -->
- <!-- Скрипт идёт поÑледним в разметке. Ð’ нём уже подключен главный SASS-файл. -->
- <script src="./index.js"></script>
- </body>
-</html>
+<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
diff --git a/src/partials/general-container.html b/src/partials/general-container.html
new file mode 100644
index 0000000000000000000000000000000000000000..3c48ece2041e7f9aa5b784c8e3c41153a93d2a7c
--- /dev/null
+++ b/src/partials/general-container.html
@@ -0,0 +1,74 @@
+<section class="general-page">
+ <div class="container movies">
+ <div class="movie">
+ <div class="movie__cover-inner">
+ <img class="movie__cover" src="/images/cover.jpg" alt="${movie.name}">
+ <div class="movie__info">
+ <p class="movie__title">Green Book</p>
+ <p class="movie__category">Drama, Action</p>
+ <p class="movie__year">2020</p>
+ </div>
+ </div>
+ </div>
+ <div class="movie">
+ <div class="movie__cover-inner">
+ <img class="movie__cover" src="/images/cover.jpg" alt="${movie.name}">
+ <div class="movie__info">
+ <p class="movie__title">Green Book</p>
+ <p class="movie__category">Drama, Action</p>
+ <p class="movie__year">2020</p>
+ </div>
+ </div>
+ </div>
+ <div class="movie">
+ <div class="movie__cover-inner">
+ <img class="movie__cover" src="/images/cover.jpg" alt="${movie.name}">
+ <div class="movie__info">
+ <p class="movie__title">Green Book</p>
+ <p class="movie__category">Drama, Action</p>
+ <p class="movie__year">2020</p>
+ </div>
+ </div>
+ </div>
+ <div class="movie">
+ <div class="movie__cover-inner">
+ <img class="movie__cover" src="/images/cover.jpg" alt="${movie.name}">
+ <div class="movie__info">
+ <p class="movie__title">Green Book</p>
+ <p class="movie__category">Drama, Action</p>
+ <p class="movie__year">2020</p>
+ </div>
+ </div>
+ </div>
+ <div class="movie">
+ <div class="movie__cover-inner">
+ <img class="movie__cover" src="/images/cover.jpg" alt="${movie.name}">
+ <div class="movie__info">
+ <p class="movie__title">Green Book</p>
+ <p class="movie__category">Drama, Action</p>
+ <p class="movie__year">2020</p>
+ </div>
+ </div>
+ </div>
+ <div class="movie">
+ <div class="movie__cover-inner">
+ <img class="movie__cover" src="/images/cover.jpg" alt="${movie.name}">
+ <div class="movie__info">
+ <p class="movie__title">Green Book</p>
+ <p class="movie__category">Drama, Action</p>
+ <p class="movie__year">2020</p>
+ </div>
+ </div>
+ </div>
+ <div class="movie">
+ <div class="movie__cover-inner">
+ <img class="movie__cover" src="/images/cover.jpg" alt="${movie.name}">
+ <div class="movie__info">
+ <p class="movie__title">Green Book</p>
+ <p class="movie__category">Drama, Action</p>
+ <p class="movie__year">2020</p>
+ </div>
+ </div>
+ </div>
+ </div>
+</section>
\ No newline at end of file
diff --git a/src/sass/_general-container.scss b/src/sass/_general-container.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d404020d1b63dc633364f338264c29a87176a386
--- /dev/null
+++ b/src/sass/_general-container.scss
@@ -0,0 +1,33 @@
+.movie__cover{
+ max-width: 280px;
+ max-height: 398px;
+ border-radius: 5px;
+ @media screen and (min-width: 767px){
+ max-width: 336px;
+ max-height: 455px;
+
+ }
+ @media screen and (min-width: 1024px){
+ max-width: 309px;
+ max-height: 489px;
+
+ }
+}
+
+.movies{
+display: flex;
+flex-direction: column;
+@media screen and (min-width: 767px){
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: unset;
+
+}
+
+}
+.movie{
+margin: auto;
+}
+
+.movie__cover-inner{
+}
\ No newline at end of file
diff --git a/src/sass/_utility-classes.scss b/src/sass/_utility-classes.scss
index 71dcb48c8c0f28e1fb128985df07fad9304a5daa..7578e912cc59bc37fdf57d9bcd9a2ba90ce4c219 100644
--- a/src/sass/_utility-classes.scss
+++ b/src/sass/_utility-classes.scss
@@ -28,12 +28,12 @@ a {
@media screen and (min-width: 768px) {
width: 768px;
- padding: 0 76px;
+ padding: 0 32px;
}
@media screen and (min-width: 1024px) {
width: 1024px;
- padding: 0 71px;
+ padding: 0 32px;
}
}
diff --git a/src/sass/main.scss b/src/sass/main.scss
index 908047521c4d9e1353010cd7e928a2132b161f04..cf040b04ce451de6e06d1cee1437e52ebcbea307 100644
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -6,3 +6,5 @@
// Стили Ð´Ð»Ñ Ñ„Ð°Ð¹Ð»Ð° Ñ Ð¿Ñ€Ð¸Ð¼ÐµÑ€Ð¾Ð¼ HTML-фрагмента
@import './variables';
@import './utility-classes';
+
+@import './general-container'