diff --git a/src/index.html b/src/index.html index 5dde1f9d427332be42403133a6217e9334775e79..a1a965752e1dd36480cd0143da79ee72915ebaee 100644 --- a/src/index.html +++ b/src/index.html @@ -23,7 +23,6 @@ <!-- Так добавлÑÑŽÑ‚ÑÑ Ñ„Ñ€Ð°Ð³Ð¼ÐµÐ½Ñ‚Ñ‹ в главные HTML-файлы Ñтраниц. --> <!-- <include src="./partials/example.html"></include> --> - <!-- Скрипт идёт поÑледним в разметке. Ð’ нём уже подключен главный SASS-файл. --> <script src="./index.js"></script> </body> </html> diff --git a/src/partials/footer.html b/src/partials/footer.html index e436ae4088089c23270dbdc3fb16bc8a5d1cc436..d635b760a0a776db310b3046746844b9e0b6649d 100644 --- a/src/partials/footer.html +++ b/src/partials/footer.html @@ -6,8 +6,7 @@ width="14px" height="12.88px" > - <use href="./images/sprite.svg#heart"></use></svg - >by <a href="#"> GoIT Students </a> + <use href="./images/sprite.svg#heart"></use></svg>by <a href="#"> GoIT Students </a> </p> </div> </footer> 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/_utility-classes.scss b/src/sass/_utility-classes.scss index 5cb8793fbb696e6eaf3d267dcae8cbe714dc6fd5..374c58e6aa1e0ecae48c692bc390b66edeef8a86 100644 --- a/src/sass/_utility-classes.scss +++ b/src/sass/_utility-classes.scss @@ -47,9 +47,9 @@ a { text-decoration: none; } -.img { - display: block; - width: 100%; +img { + display: block; + width: 100%; } .visually-hidden { diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss index 369c47e73b2c77bad626ce99a5e8b07f9960bda6..188361b636b92cc919eb066c935146ca942db39f 100644 --- a/src/sass/_variables.scss +++ b/src/sass/_variables.scss @@ -4,4 +4,6 @@ $secondary-white-color: #F7F7F7; $primary-text-color: #000000; $secondary-text-color: #8C8C8C; $footer-text-color: #545454; -$alert-color: #FF001B; \ No newline at end of file +$alert-color: #FF001B; +$transition-duration: 250ms; +$transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); \ No newline at end of file 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