Skip to content
Snippets Groups Projects
Unverified Commit 39fbf66e authored by maria-moroz's avatar maria-moroz Committed by GitHub
Browse files

Merge pull request #7 from maria-moroz/bugfix/general 

container and card
parents 3a1de5e2 76725007
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
src/index.html
+ 22
− 24
View file @ 39fbf66e
<!DOCTYPE html> <!DOCTYPE html>
<html lang="ru"> <html lang="ru">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Заголовок страницы</title> <title>Заголовок страницы</title>
<link <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/1.0.0/modern-normalize.min.css"
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==" integrity="sha512-ISS7cAi1PEhQ8jnbJpJZMd29NlhNj4AWYyLOSp2CE/CsHxTCu+r+t0D2yoJudVrd0/8fTVPUVDzY5Tvli75u/g=="
crossorigin="anonymous" crossorigin="anonymous" />
/>
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet" />
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap"
rel="stylesheet"
/>
</head> </head>
<body> <body>
<include src="./partials/header.html"></include> <include src="./partials/header.html"></include>
<include src="./partials/one-card-preview.html"></include> <!-- <include src="./partials/one-card-preview.html"></include> -->
<include src="./partials/general-container.html"></include>
<include src="./partials/footer.html"></include> <include src="./partials/footer.html"></include>
<script src="./index.js"></script> <script src="./index.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
src/partials/general-container.html
+ 37
− 72
View file @ 39fbf66e
<section class="container movies"> <section class="container movies">
<div class="movie"> <div class="movie">
<div class="movie__cover-inner"> <img class="movie__cover" src="https://i.pinimg.com/originals/53/91/1a/53911a269df36dd3b2a2007b7f0ed03e.jpg"
<img class="movie__cover" src="/images/cover.jpg" alt="${movie.name}"> alt="${movie.name}">
<div class="movie__info"> <h2 class="card-preview-info__name">name</h2>
<p class="movie__title">Green Book</p> <div class="card-preview-info">
<p class="movie__category">Drama, Action</p> <p class="card-preview-info__data">Genre | years</p>
<p class="movie__year">2020</p> <span class="card-preview-info__rating">rating</span>
</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> </div>
<div class="movie"> <div class="movie">
<div class="movie__cover-inner"> <img class="movie__cover" src="https://i.pinimg.com/originals/53/91/1a/53911a269df36dd3b2a2007b7f0ed03e.jpg"
<img class="movie__cover" src="/images/cover.jpg" alt="${movie.name}"> alt="${movie.name}">
<div class="movie__info"> <h2 class="card-preview-info__name">name</h2>
<p class="movie__title">Green Book</p> <div class="card-preview-info">
<p class="movie__category">Drama, Action</p> <p class="card-preview-info__data">Genre | years</p>
<p class="movie__year">2020</p> <span class="card-preview-info__rating">rating</span>
</div>
</div> </div>
</div> </div>
<div class="movie"> <div class="movie">
<div class="movie__cover-inner"> <img class="movie__cover" src="https://i.pinimg.com/originals/53/91/1a/53911a269df36dd3b2a2007b7f0ed03e.jpg"
<img class="movie__cover" src="/images/cover.jpg" alt="${movie.name}"> alt="${movie.name}">
<div class="movie__info"> <h2 class="card-preview-info__name">name</h2>
<p class="movie__title">Green Book</p> <div class="card-preview-info">
<p class="movie__category">Drama, Action</p> <p class="card-preview-info__data">Genre | years</p>
<p class="movie__year">2020</p> <span class="card-preview-info__rating">rating</span>
</div>
</div> </div>
</div> </div>
<div class="movie"> <div class="movie">
<div class="movie__cover-inner"> <img class="movie__cover" src="https://i.pinimg.com/originals/53/91/1a/53911a269df36dd3b2a2007b7f0ed03e.jpg"
<img class="movie__cover" src="/images/cover.jpg" alt="${movie.name}"> alt="${movie.name}">
<div class="movie__info"> <h2 class="card-preview-info__name">name</h2>
<p class="movie__title">Green Book</p> <div class="card-preview-info">
<p class="movie__category">Drama, Action</p> <p class="card-preview-info__data">Genre | years</p>
<p class="movie__year">2020</p> <span class="card-preview-info__rating">rating</span>
</div>
</div> </div>
</div> </div>
<div class="movie"> <div class="movie">
<div class="movie__cover-inner"> <img class="movie__cover" src="https://i.pinimg.com/originals/53/91/1a/53911a269df36dd3b2a2007b7f0ed03e.jpg"
<img class="movie__cover" src="/images/cover.jpg" alt="${movie.name}"> alt="${movie.name}">
<div class="movie__info"> <h2 class="card-preview-info__name">name</h2>
<p class="movie__title">Green Book</p> <div class="card-preview-info">
<p class="movie__category">Drama, Action</p> <p class="card-preview-info__data">Genre | years</p>
<p class="movie__year">2020</p> <span class="card-preview-info__rating">rating</span>
</div>
</div> </div>
</div> </div>
<!-- <div class="movie"> <!-- <div class="movie">
<div class="movie__cover-inner"> <img class="movie__cover" src="https://i.pinimg.com/originals/53/91/1a/53911a269df36dd3b2a2007b7f0ed03e.jpg"
<img class="movie__cover" src="/images/cover.jpg" alt="${movie.name}"> alt="${movie.name}">
<div class="movie__info"> <h2 class="card-preview-info__name">name</h2>
<p class="movie__title">Green Book</p> <div class="card-preview-info">
<p class="movie__category">Drama, Action</p> <p class="card-preview-info__data">Genre | years</p>
<p class="movie__year">2020</p> <span class="card-preview-info__rating">rating</span>
</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> --> </div> -->
</section> </section>
\ No newline at end of file
src/sass/_general-container.scss
+ 17
− 12
View file @ 39fbf66e
.movie__cover{ .movie__cover{
max-width: 280px; width: 280px;
max-height: 398px; height: 398px;
border-radius: 5px; border-radius: 5px;
@media screen and (min-width: 767px){ @media screen and (min-width: 767px){
min-width: 336px; width: 293px;
min-height: 455px; height: 398px;
} }
@media screen and (min-width: 1024px){ @media screen and (min-width: 1024px){
min-width: 309px; width: 274px;
min-height: 489px; height: 398px;
} }
} }
...@@ -30,40 +30,45 @@ flex-direction: column; ...@@ -30,40 +30,45 @@ flex-direction: column;
.movie{ .movie{
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
margin-bottom: 21px; margin-bottom: 20px;
@media screen and (min-width: 767px){ @media screen and (min-width: 767px){
margin-right: 16px; margin-right: 16px;
margin-left: 0px; margin-left: 0px;
margin-bottom: 30px;
} }
@media screen and (min-width: 1024px){ @media screen and (min-width: 1024px){
margin: 0px; // margin: 0px 0px 31px 0px;
margin-bottom: 31px;
} }
} }
.movie:nth-child(even){ .movie:nth-child(even){
@media screen and (min-width: 767px){ @media screen and (min-width: 767px){
margin-left: 16px; margin-left: 15px;
margin-right: 0px; margin-right: 0px;
} }
@media screen and (min-width: 1024px){ @media screen and (min-width: 1024px){
margin: 0; margin: 0;
margin-bottom: 31px;
} }
} }
.movie:nth-child(odd){ .movie:nth-child(odd){
@media screen and (min-width: 767px) { @media screen and (min-width: 767px) {
margin-left: 0px; margin-left: 0px;
margin-right: 16px; margin-right: 15px;
} }
@media screen and (min-width: 1024px){ @media screen and (min-width: 1024px){
margin: 0; margin: 0;
margin-bottom: 31px;
} }
} }
.movie:nth-child(3n+2){ .movie:nth-child(3n+2){
@media screen and (min-width: 1024px) { @media screen and (min-width: 1024px) {
margin-left: 16px; margin-left: 30px;
margin-right: 16px; margin-right: 30px;
} }
} }
......
src/sass/components/_one-card-preview.scss
+ 21
− 21
View file @ 39fbf66e
.container-card-preview{ // .container-card-preview{
height: 445px; // height: 445px;
margin-left: auto; // margin-left: auto;
margin-right: auto; // margin-right: auto;
width: 320px; // width: 320px;
padding: 0 20px; // padding: 0 20px;
@media screen and (min-width: 480px) { // @media screen and (min-width: 480px) {
margin-top: 20px; // margin-top: 20px;
width: 324px; // width: 324px;
padding: 0 15px; // padding: 0 15px;
} // }
@media screen and (min-width: 768px) { // @media screen and (min-width: 768px) {
margin-top: 30px; // margin-top: 30px;
width: 304px; // width: 304px;
} // }
// @media screen and (min-width: 1024px) { // // @media screen and (min-width: 1024px) {
// // }
// } // }
} // .card-preview__poster{
.card-preview__poster{ // width: 100%;
width: 100%; // height: 398px;
height: 398px;
} // }
.card-preview-info{ .card-preview-info{
display: flex; display: flex;
......
src/sass/main.scss
+ 2
− 1
View file @ 39fbf66e
...@@ -8,4 +8,5 @@ ...@@ -8,4 +8,5 @@
@import './utility-classes'; @import './utility-classes';
@import './footer'; @import './footer';
@import './header'; @import './header';
@import './components/one-card-preview' @import './components/one-card-preview';
@import './general-container'
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment