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

container and card

parent 3a1de5e2
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 @ 76725007
<!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 @ 76725007
<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 @ 76725007
.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 @ 76725007
.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 @ 76725007
......@@ -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