Skip to content
Snippets Groups Projects
Commit 2ff92f67 authored by Sergio Pieshko's avatar Sergio Pieshko
Browse files

general cont

parent cee4d2f5
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/partials/general-container.html
+ 76
− 58
View file @ 2ff92f67
<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
src/sass/_general-container.scss
+ 52
− 9
View file @ 2ff92f67
......@@ -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;
// }
// }
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