diff --git a/src/images/cover.jpg b/src/images/cover.jpg new file mode 100644 index 0000000000000000000000000000000000000000..a9772fe133c8982a57a154c7337a74cd6b5b5364 Binary files /dev/null and b/src/images/cover.jpg differ diff --git a/src/partials/general-container.html b/src/partials/general-container.html new file mode 100644 index 0000000000000000000000000000000000000000..ab846986fcafff27609bc0998b6e586ccf4ed86f --- /dev/null +++ b/src/partials/general-container.html @@ -0,0 +1,92 @@ +<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> + <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> + </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> + </div> + </div> --> +</section> \ No newline at end of file diff --git a/src/sass/_general-container.scss b/src/sass/_general-container.scss new file mode 100644 index 0000000000000000000000000000000000000000..1e1a93ed848d30ff2e73e8c11c6249009ed8cc86 --- /dev/null +++ b/src/sass/_general-container.scss @@ -0,0 +1,76 @@ +.movie__cover{ + max-width: 280px; + max-height: 398px; + border-radius: 5px; + @media screen and (min-width: 767px){ + min-width: 336px; + min-height: 455px; + + } + @media screen and (min-width: 1024px){ + min-width: 309px; + min-height: 489px; + + } +} + +.movies{ +display: flex; +flex-direction: column; +@media screen and (min-width: 767px){ + display: flex; + flex-wrap: wrap; + flex-direction: unset; +} +@media screen and (min-width: 1024px){ + display: flex; + +} +} +.movie{ +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:last-child { +// @media screen and (min-width: 767px){ +// margin-left: 0px; +// } + +// } +