diff --git a/src/index.html b/src/index.html index b3521cbd35798b96e6b353fda2665e9c9b39f9a2..f52b6df9174a7cc2ceed086947638a355146bb26 100644 --- a/src/index.html +++ b/src/index.html @@ -21,6 +21,7 @@ <include src = "./partials/footer.html"></include> <!-- Так добавлÑÑŽÑ‚ÑÑ Ñ„Ñ€Ð°Ð³Ð¼ÐµÐ½Ñ‚Ñ‹ в главные HTML-файлы Ñтраниц. --> <!-- <include src="./partials/example.html"></include> --> + <include src="./partials/one-card-preview.html"></include> <!-- Скрипт идёт поÑледним в разметке. Ð’ нём уже подключен главный SASS-файл. --> <script src="./index.js"></script> diff --git a/src/partials/one-card-preview.html b/src/partials/one-card-preview.html new file mode 100644 index 0000000000000000000000000000000000000000..785b79f2ded1b6c80c3e15231b3cdfaa0e32f9ba --- /dev/null +++ b/src/partials/one-card-preview.html @@ -0,0 +1,13 @@ +<div class="container-card-preview"> + <img + src="https://i.pinimg.com/originals/53/91/1a/53911a269df36dd3b2a2007b7f0ed03e.jpg" + alt="poster" + class="card-preview__poster" + /> + + <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> diff --git a/src/sass/components/_one-card-preview.scss b/src/sass/components/_one-card-preview.scss new file mode 100644 index 0000000000000000000000000000000000000000..9d8579cb204d94ac2219080d8fa4dc9287e645d8 --- /dev/null +++ b/src/sass/components/_one-card-preview.scss @@ -0,0 +1,55 @@ + +.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: 1024px) { + +// } +} +.card-preview__poster{ + width: 100%; + height: 398px; + +} +.card-preview-info{ + + display: flex; + font-size: 12px; + line-height: 1.33; + +} +.card-preview-info__name{ + margin: 10px 0 0 0 ; + font-size: 12px; + line-height: 1.33; + +} +.card-preview-info__data{ + color: $accent-color; + margin: 0; + font-size: 12px; + line-height: 1.33; + margin-right: 10px; +} +.card-preview-info__rating{ + padding: 1px 9px 1px 10px; + background-color: $accent-color; + color: $primary-white-color; + border-radius: 5px; +line-height: 1.16; +} \ No newline at end of file