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
Hide whitespace changes
Inline Side-by-side
src/index.html
+ 22
− 24
View file @ 39fbf66e
<!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
src/partials/general-container.html
+ 37
− 72
View file @ 39fbf66e
<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
src/sass/_general-container.scss
+ 17
− 12
View file @ 39fbf66e
.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;
}
}
......
src/sass/components/_one-card-preview.scss
+ 21
− 21
View file @ 39fbf66e
.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;
......
src/sass/main.scss
+ 2
− 1
View file @ 39fbf66e
......@@ -8,4 +8,5 @@
@import './utility-classes';
@import './footer';
@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.
Finish editing this message first!
Please register or to comment