diff --git a/src/index.html b/src/index.html index cdf5b00a87d269083a604075e8bac138db70aceb..c67ad7b1167f84260700d0f102ca8448609cc892 100644 --- a/src/index.html +++ b/src/index.html @@ -1,27 +1,25 @@ <!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 diff --git a/src/partials/general-container.html b/src/partials/general-container.html index ab846986fcafff27609bc0998b6e586ccf4ed86f..bacf0a4f5767502a4daa490e7de6ade78f92c784 100644 --- a/src/partials/general-container.html +++ b/src/partials/general-container.html @@ -1,92 +1,57 @@ <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 diff --git a/src/sass/_general-container.scss b/src/sass/_general-container.scss index 1e1a93ed848d30ff2e73e8c11c6249009ed8cc86..b16390ba8500e3aea9cdb943087738bffc00427a 100644 --- a/src/sass/_general-container.scss +++ b/src/sass/_general-container.scss @@ -1,15 +1,15 @@ .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; } } diff --git a/src/sass/components/_one-card-preview.scss b/src/sass/components/_one-card-preview.scss index 9d8579cb204d94ac2219080d8fa4dc9287e645d8..b74c1c2d9a473d66ee88db1ce2a018933dd01b44 100644 --- a/src/sass/components/_one-card-preview.scss +++ b/src/sass/components/_one-card-preview.scss @@ -1,31 +1,31 @@ -.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; diff --git a/src/sass/main.scss b/src/sass/main.scss index ff2165e648453677a36f782f7d144fe6c98f635c..d4f21781a8b921522a45033c9b77857196287a8a 100644 --- a/src/sass/main.scss +++ b/src/sass/main.scss @@ -8,4 +8,5 @@ @import './utility-classes'; @import './footer'; @import './header'; -@import './components/one-card-preview' +@import './components/one-card-preview'; +@import './general-container'