From 2ff92f6724ca2d00e4f7b6b294bf6b885b12661a Mon Sep 17 00:00:00 2001
From: Sergio Pieshko <sergio.pieshko@icloud.com>
Date: Thu, 5 May 2022 11:35:21 +0300
Subject: [PATCH] general cont
---
src/partials/general-container.html | 134 ++++++++++++++++------------
src/sass/_general-container.scss | 61 +++++++++++--
2 files changed, 128 insertions(+), 67 deletions(-)
diff --git a/src/partials/general-container.html b/src/partials/general-container.html
index 3c48ece..ad9616a 100644
--- a/src/partials/general-container.html
+++ b/src/partials/general-container.html
@@ -1,74 +1,92 @@
-<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>
+<section 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 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 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 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 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 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 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 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 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 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 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 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 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> -->
</section>
\ No newline at end of file
diff --git a/src/sass/_general-container.scss b/src/sass/_general-container.scss
index d404020..1e1a93e 100644
--- a/src/sass/_general-container.scss
+++ b/src/sass/_general-container.scss
@@ -3,13 +3,13 @@
max-height: 398px;
border-radius: 5px;
@media screen and (min-width: 767px){
- max-width: 336px;
- max-height: 455px;
+ min-width: 336px;
+ min-height: 455px;
}
@media screen and (min-width: 1024px){
- max-width: 309px;
- max-height: 489px;
+ min-width: 309px;
+ min-height: 489px;
}
}
@@ -21,13 +21,56 @@ flex-direction: column;
display: flex;
flex-wrap: wrap;
flex-direction: unset;
-
}
-
+@media screen and (min-width: 1024px){
+ display: flex;
+
+}
}
.movie{
-margin: auto;
+margin-left: auto;
+margin-right: auto;
+margin-bottom: 21px;
+@media screen and (min-width: 767px){
+margin-right: 16px;
+margin-left: 0px;
+}
+@media screen and (min-width: 1024px){
+margin: 0px;
+}
+}
+
+
+.movie:nth-child(even){
+ @media screen and (min-width: 767px){
+ margin-left: 16px;
+ margin-right: 0px;
+ }
+ @media screen and (min-width: 1024px){
+ margin: 0;
+ }
+}
+.movie:nth-child(odd){
+ @media screen and (min-width: 767px) {
+ margin-left: 0px;
+ margin-right: 16px;
+ }
+ @media screen and (min-width: 1024px){
+margin: 0;
+ }
+}
+
+.movie:nth-child(3n+2){
+ @media screen and (min-width: 1024px) {
+ margin-left: 16px;
+ margin-right: 16px;
+ }
}
-.movie__cover-inner{
-}
\ No newline at end of file
+// .movie:last-child {
+// @media screen and (min-width: 767px){
+// margin-left: 0px;
+// }
+
+// }
+
--
GitLab