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
<!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
<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
.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;
}
}
......
.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;
......
......@@ -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% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment