diff --git a/Labs/about.html b/Labs/about.html new file mode 100644 index 0000000..70938ee --- /dev/null +++ b/Labs/about.html @@ -0,0 +1,58 @@ + + + + + + + О нас + + + +
+ +
+ +
+ +
+ +
+ +
+ +
+

Лучший кинотеатр на просторах интернета

+

Контакты:

+ +
+ + + + \ No newline at end of file diff --git a/Labs/img/icon-paint.png b/Labs/img/icon-paint.png new file mode 100644 index 0000000..60bceaf Binary files /dev/null and b/Labs/img/icon-paint.png differ diff --git a/Labs/img/icon.png b/Labs/img/icon.png new file mode 100644 index 0000000..b6920d5 Binary files /dev/null and b/Labs/img/icon.png differ diff --git a/Labs/img/movie-posters/brat.jpg b/Labs/img/movie-posters/brat.jpg new file mode 100644 index 0000000..8fc149a Binary files /dev/null and b/Labs/img/movie-posters/brat.jpg differ diff --git a/Labs/img/movie-posters/brba.jpg b/Labs/img/movie-posters/brba.jpg new file mode 100644 index 0000000..0117402 Binary files /dev/null and b/Labs/img/movie-posters/brba.jpg differ diff --git a/Labs/img/movie-posters/marsianin.jpg b/Labs/img/movie-posters/marsianin.jpg new file mode 100644 index 0000000..b88c051 Binary files /dev/null and b/Labs/img/movie-posters/marsianin.jpg differ diff --git a/Labs/img/telegram.png b/Labs/img/telegram.png new file mode 100644 index 0000000..d955219 Binary files /dev/null and b/Labs/img/telegram.png differ diff --git a/Labs/index.html b/Labs/index.html new file mode 100644 index 0000000..c289bc7 --- /dev/null +++ b/Labs/index.html @@ -0,0 +1,72 @@ + + + + + + + Онлайн-кинотеатр Спойлер + + + + +
+ +
+ +
+ +
+ +
+ + + +
+ +
+

Добро пожаловать в наш онлайн-кинотеатр!

+

Здесь вы найдете только лучшие фильмы и сериалы

+
+
+ +

Марсианин (2015)

+
+
+ +

Брат (2009)

+
+
+
+ + + + + + diff --git a/Labs/library.html b/Labs/library.html new file mode 100644 index 0000000..c377f70 --- /dev/null +++ b/Labs/library.html @@ -0,0 +1,62 @@ + + + + + + + Ваши фильмы + + + +
+ +
+ +
+ +
+ +
+ +
+
+

Просмотренные

+
+
+
+ +

Марсианин (2015)

+
+
+ +

Брат (2009)

+
+
+ + + + \ No newline at end of file diff --git a/Labs/movies.html b/Labs/movies.html new file mode 100644 index 0000000..97519a4 --- /dev/null +++ b/Labs/movies.html @@ -0,0 +1,61 @@ + + + + + + + Фильмы + + + +
+ +
+ +
+ +
+ +
+ +
+
+

Здесь будут фильмы

+
+
+
+ +

Марсианин (2015)

+
+
+ +

Брат (2009)

+
+
+ + + \ No newline at end of file diff --git a/Labs/series.html b/Labs/series.html new file mode 100644 index 0000000..6e1538c --- /dev/null +++ b/Labs/series.html @@ -0,0 +1,58 @@ + + + + + + + Сериалы + + + +
+ +
+ +
+ +
+ +
+ +
+
+

Здесь будут сериалы

+
+
+
+ +

Во все тяжкие (2008-2013)

+
+
+ + + + \ No newline at end of file diff --git a/Labs/style.css b/Labs/style.css new file mode 100644 index 0000000..f9e770c --- /dev/null +++ b/Labs/style.css @@ -0,0 +1,211 @@ +body { + background-color: #F2F2F7; + margin: 5px; + font-family: Arial, sans-serif; + /*overflow-x: hidden;*/ +} + +.header { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 60px; + background-color: #67A8C2; + color: #081c15; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 10px; + box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); + z-index: 10; +} + +.header-logo { + display: flex; + align-items: center; + gap: 15px; +} + +.header-logo img { + width: 50px; + height: auto; +} + +/* Стили основного горизонтального меню */ +.nav-links { + display: flex; + gap: 15px; + margin-right: 20px; +} + +.nav-links a { + text-decoration: none; + color: #081c15; + font-weight: bold; + background: #ffffff; + padding: 8px 15px; + border-radius: 5px; + transition: 0.3s; +} + +.nav-links a:hover { + background: #FF6A25; +} + +/* Контейнер для навигационного меню */ +.nav-container { + position: relative; +} + +.features-menu { + padding-left: 0px; + margin: 10px 5px; +} + +/* Выпадающее меню для мобильных устройств */ +.nav-dropdown { + display: none; + flex-direction: column; + position: absolute; + top: 60px; /* Чуть ниже шапки */ + right: 0px; + background-color: #67A8C2; + box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); + width: 150px; + border-radius: 5px; + padding: 5px; +} + + + +/* Изменение цвета при наведении в выпадающем меню */ +.nav-dropdown a:hover { + background: #FF6A25; +} + +.features-menu li { + display: inline; + position: relative; +} + +.features-menu a { + padding: 5% 2%; + display: flex; + text-align: center; + text-decoration: none; + color: #081c15; + background: #ffffff; + border-radius: 5px; + border: 2px solid #000000; + gap: 1%; +} + +/* Кнопка меню (бургер) */ +.menu-button { + display: none; + cursor: pointer; + text-decoration: none; + color: #081c15; + font-weight: bold; + background: #ffffff; + padding: 8px 15px; + border-radius: 5px; + transition: 0.3s; + margin-right: 20px; +} + +/* выпадающее меню при наведении или при фокусе внутри контейнера */ +.nav-container:hover .nav-dropdown, +.nav-container:focus-within .nav-dropdown { + display: flex; +} + +/* стили для списка фильмов и т.д. остаются без изменений */ +.movie-list { + display: flex; + justify-content: left; + gap: 20px; + margin: 50px 50px; +} + +.movie-item { + text-align: center; +} + +.movie-item img { + width: 300px; + height: auto; +} + +.content { + margin-top: 80px; + padding: 20px; +} + +.footer { + position: relative; + width: 100%; + background-color: #081c15; + color: #fff; + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: space-between; + padding: 20px; +} + +.footer-info, +.footer-social { + flex: 1; + min-width: 250px; + margin: 10px; + white-space:inherit; +} + +.footer-social img { + width: 2em; +} + +.footer-social a { + margin-right: 10px; +} +/* планшет (от 701px до 960px) */ +@media only screen and (min-width: 701px) and (max-width: 960px) { + .header { + font-size: 0.8em; + } + + .nav-links { + padding: 0.7em 0.5em; + } +} +/* мобильное устройство (ширина до 700px) */ +@media only screen and (max-width: 700px) { + .nav-links { + display: none; + } + + .menu-button { + display: flex; + } + + .movie-list { + flex-direction: column; + justify-content: center; + } + + .movie-item img { + width: 90%; + } + + .footer { + position: relative; + text-align: center; + padding: 0px; + } + + .header { + font-size: 0.7em; + } +}