Skip to content
Snippets Groups Projects
Commit c2b87c3c authored by maria-moroz's avatar maria-moroz
Browse files

film-info

parent e0dc0990
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/index.html
+ 1
− 1
View file @ c2b87c3c
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
<body> <body>
<!-- Так добавляются фрагменты в главные HTML-файлы страниц. --> <!-- Так добавляются фрагменты в главные HTML-файлы страниц. -->
<!-- <include src="./partials/example.html"></include> --> <!-- <include src="./partials/example.html"></include> -->
<include src="./partials/film-info.html"></include>
<!-- Скрипт идёт последним в разметке. В нём уже подключен главный SASS-файл. --> <!-- Скрипт идёт последним в разметке. В нём уже подключен главный SASS-файл. -->
<script src="./index.js"></script> <script src="./index.js"></script>
</body> </body>
......
src/partials/film-info.html 0 → 100644
+ 41
− 0
View file @ c2b87c3c
<div class="film-info__overlay is-open">
<div class="film-info__container">
<div class="film-info__poster">
<img
src="https://www.themoviedb.org/t/p/w1280/1pnigkWWy8W032o9TKDneBa3eVK.jpg"
alt="interstellar"
class="film-info__image img"
/>
</div>
<div class="film-info__text">
<h2 class="film-info__title">Interstellar</h2>
<div class="film-info__lists">
<ul class="film-info__titles-list list">
<li class="film-info__title-item">Vote / Votes</li>
<li class="film-info__title-item">Popularity</li>
<li class="film-info__title-item">Original Title</li>
<li class="film-info__title-item">Genre</li>
</ul>
<ul class="film-info__properties-list list">
<li class="film-info__property-item">
<span class="accent">7.3</span>
<span class="separator">/</span>
<span class="simple">1260</span>
</li>
<li class="film-info__property-item">100.2</li>
<li class="film-info__property-item">A FISTFUL OF LEAD</li>
<li class="film-info__property-item">Western</li>
</ul>
</div>
<h3 class="film-info__description-title">About</h3>
<p class="film-info__description">
The adventures of a group of explorers who make use of a newly discovered wormhole to
surpass the limitations on human space travel and conquer the vast distances involved in an
interstellar voyage.
</p>
<button class="film-info__button film-info__button--accent">add to watched</button>
<button class="film-info__button">add to queue</button>
</div>
</div>
<!-- <button class="close-modal-button"></button>-->
</div>
src/sass/_film-info.scss 0 → 100644
+ 142
− 0
View file @ c2b87c3c
h1,
h2,
h3,
p {
margin-top: 0;
margin-bottom: 0;
}
button {
padding: 0;
}
img {
display: block;
max-width: 100%;
height: auto;
}
$transition-duration: 250ms;
$transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
.film-info__overlay {
opacity: 0;
visibility: hidden;
pointer-events: none;
position: fixed;
top: 0;
left: 0;
overflow-y: scroll;
z-index: 100;
width: 100%;
height: 100%;
min-width: 320px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.2);
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
transition: opacity $transition-duration $transition-timing-function,
visibility $transition-duration $transition-timing-function;
&.is-open {
opacity: 1;
visibility: visible;
pointer-events: initial;
}
@media screen and (max-width: 767px) {
padding: 20px;
}
}
.film-info__container {
width: 100%;
background-color: $primary-white-color;
padding: 48px 20px 40px 20px;
transform: translateX(100%);
transition-property: transform;
transition-duration: 800ms;
transition-timing-function: $transition-timing-function;
.film-info__overlay & {
transform: translateX(0);
}
@media screen and (min-width: 480px) {
width: 480px;
}
@media screen and (min-width: 768px) {
height: 562px;
width: 618px;
display: flex;
padding: 42px 28px 40px 28px;
}
@media screen and (min-width: 1024px) {
height: 568px;
width: 882px;
padding: 50px 30px 40px 30px;
}
}
.film-info__poster {
width: 369px;
}
.film-info__title {
font-size: 20px;
line-height: 1.15;
margin-bottom: 20px;
@media screen and (min-width: 1024px) {
font-size: 30px;
line-height: 1.17;
}
}
.film-info__lists {
display: flex;
}
.film-info__titles-list,
.film-info__properties-list {
font-size: 12px;
line-height: 1.33;
}
.film-info__titles-list {
color: $secondary-text-color;
}
.film-info__title-item,
.film-info__property-item {
&:not(:last-child) {
margin-bottom: 10px;
}
}
.film-info__property-item .accent,
.film-info__property-item .simple {
padding: 1px 4px 1px 4px;
border-radius: 5px;
min-width: 36px;
}
.film-info__property-item .accent {
background-color: $accent-color;
color: $primary-white-color;
}
.film-info__property-item .simple {
background-color: $secondary-white-color;
}
src/sass/main.scss
+ 1
− 0
View file @ c2b87c3c
...@@ -6,3 +6,4 @@ ...@@ -6,3 +6,4 @@
// Стили для файла с примером HTML-фрагмента // Стили для файла с примером HTML-фрагмента
@import './variables'; @import './variables';
@import './utility-classes'; @import './utility-classes';
@import './film-info';
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment