From 76725007904089b68ed9c370654aed67eeb560d5 Mon Sep 17 00:00:00 2001
From: Sergio Pieshko <sergio.pieshko@icloud.com>
Date: Thu, 5 May 2022 15:11:01 +0300
Subject: [PATCH] container and card
---
src/index.html | 46 +++++----
src/partials/general-container.html | 109 +++++++--------------
src/sass/_general-container.scss | 29 +++---
src/sass/components/_one-card-preview.scss | 42 ++++----
src/sass/main.scss | 3 +-
5 files changed, 99 insertions(+), 130 deletions(-)
diff --git a/src/index.html b/src/index.html
index cdf5b00..c67ad7b 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,27 +1,25 @@
<!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/header.html"></include>
- <include src="./partials/one-card-preview.html"></include>
- <include src="./partials/footer.html"></include>
- <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>
+ <include src="./partials/header.html"></include>
+ <!-- <include src="./partials/one-card-preview.html"></include> -->
+ <include src="./partials/general-container.html"></include>
+ <include src="./partials/footer.html"></include>
+
+ <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
index ab84698..bacf0a4 100644
--- a/src/partials/general-container.html
+++ b/src/partials/general-container.html
@@ -1,92 +1,57 @@
<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>
+ <img class="movie__cover" src="https://i.pinimg.com/originals/53/91/1a/53911a269df36dd3b2a2007b7f0ed03e.jpg"
+ alt="${movie.name}">
+ <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>
<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>
+ <img class="movie__cover" src="https://i.pinimg.com/originals/53/91/1a/53911a269df36dd3b2a2007b7f0ed03e.jpg"
+ alt="${movie.name}">
+ <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>
<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>
+ <img class="movie__cover" src="https://i.pinimg.com/originals/53/91/1a/53911a269df36dd3b2a2007b7f0ed03e.jpg"
+ alt="${movie.name}">
+ <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>
<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>
+ <img class="movie__cover" src="https://i.pinimg.com/originals/53/91/1a/53911a269df36dd3b2a2007b7f0ed03e.jpg"
+ alt="${movie.name}">
+ <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>
<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>
+ <img class="movie__cover" src="https://i.pinimg.com/originals/53/91/1a/53911a269df36dd3b2a2007b7f0ed03e.jpg"
+ alt="${movie.name}">
+ <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>
- <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>
+ <img class="movie__cover" src="https://i.pinimg.com/originals/53/91/1a/53911a269df36dd3b2a2007b7f0ed03e.jpg"
+ alt="${movie.name}">
+ <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> -->
+
</section>
\ No newline at end of file
diff --git a/src/sass/_general-container.scss b/src/sass/_general-container.scss
index 1e1a93e..b16390b 100644
--- a/src/sass/_general-container.scss
+++ b/src/sass/_general-container.scss
@@ -1,15 +1,15 @@
.movie__cover{
- max-width: 280px;
- max-height: 398px;
+ width: 280px;
+ height: 398px;
border-radius: 5px;
@media screen and (min-width: 767px){
- min-width: 336px;
- min-height: 455px;
+ width: 293px;
+ height: 398px;
}
@media screen and (min-width: 1024px){
- min-width: 309px;
- min-height: 489px;
+ width: 274px;
+ height: 398px;
}
}
@@ -30,40 +30,45 @@ flex-direction: column;
.movie{
margin-left: auto;
margin-right: auto;
-margin-bottom: 21px;
+margin-bottom: 20px;
@media screen and (min-width: 767px){
margin-right: 16px;
margin-left: 0px;
+margin-bottom: 30px;
}
@media screen and (min-width: 1024px){
-margin: 0px;
+// margin: 0px 0px 31px 0px;
+margin-bottom: 31px;
}
}
.movie:nth-child(even){
@media screen and (min-width: 767px){
- margin-left: 16px;
+ margin-left: 15px;
margin-right: 0px;
}
@media screen and (min-width: 1024px){
margin: 0;
+ margin-bottom: 31px;
}
}
.movie:nth-child(odd){
@media screen and (min-width: 767px) {
margin-left: 0px;
- margin-right: 16px;
+ margin-right: 15px;
+
}
@media screen and (min-width: 1024px){
margin: 0;
+margin-bottom: 31px;
}
}
.movie:nth-child(3n+2){
@media screen and (min-width: 1024px) {
- margin-left: 16px;
- margin-right: 16px;
+ margin-left: 30px;
+ margin-right: 30px;
}
}
diff --git a/src/sass/components/_one-card-preview.scss b/src/sass/components/_one-card-preview.scss
index 9d8579c..b74c1c2 100644
--- a/src/sass/components/_one-card-preview.scss
+++ b/src/sass/components/_one-card-preview.scss
@@ -1,31 +1,31 @@
-.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;
-}
+// .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: 768px) {
+// margin-top: 30px;
+// width: 304px;
-}
+// }
-// @media screen and (min-width: 1024px) {
+// // @media screen and (min-width: 1024px) {
+// // }
// }
-}
-.card-preview__poster{
- width: 100%;
- height: 398px;
+// .card-preview__poster{
+// width: 100%;
+// height: 398px;
-}
+// }
.card-preview-info{
display: flex;
diff --git a/src/sass/main.scss b/src/sass/main.scss
index ff2165e..d4f2178 100644
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -8,4 +8,5 @@
@import './utility-classes';
@import './footer';
@import './header';
-@import './components/one-card-preview'
+@import './components/one-card-preview';
+@import './general-container'
--
GitLab