├── .gitignore ├── README.md ├── card.json ├── css ├── normalize.css └── style.css ├── fonts ├── MuseoSansCyrl-500.woff ├── MuseoSansCyrl-500.woff2 ├── MuseoSansCyrl-700.woff ├── MuseoSansCyrl-700.woff2 ├── MuseoSansCyrl-900.woff └── MuseoSansCyrl-900.woff2 ├── img ├── bootstrap.min.css ├── favicon │ ├── android-chrome-192x192.png │ ├── android-chrome-512x512.png │ ├── apple-touch-icon.png │ ├── browserconfig.xml │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── mstile-150x150.png │ └── site.webmanifest ├── netcliks.png ├── netcliks.svg └── no-poster.jpg ├── index.html ├── script └── main.js └── test.json /.gitignore: -------------------------------------------------------------------------------- 1 | .idea -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # netclicks-html-css-js 2 | Service for download information and trailers about films from TMDb-API 3 | [Demo](https://alvar91.github.io/netclicks-html-css-js/) 4 | -------------------------------------------------------------------------------- /card.json: -------------------------------------------------------------------------------- 1 | { 2 | "backdrop_path": "/AdJgkXb8oLI8e4rsk8XzkvABIuw.jpg", 3 | "created_by": [ 4 | { 5 | "id": 11092, 6 | "credit_id": "537f77d60e0a2624bd00547c", 7 | "name": "Simon Kinberg", 8 | "gender": 2, 9 | "profile_path": "/3xvTvkIaKfU276cpajiAoGjvaaO.jpg" 10 | }, 11 | { 12 | "id": 71538, 13 | "credit_id": "543368cfc3a36811ef0065dc", 14 | "name": "Dave Filoni", 15 | "gender": 2, 16 | "profile_path": "/iMpXDe7D3eimy3Y8esJcF9czVbm.jpg" 17 | }, 18 | { 19 | "id": 1371864, 20 | "credit_id": "543368d40e0a2658720064f1", 21 | "name": "Carrie Beck", 22 | "gender": 0, 23 | "profile_path": null 24 | } 25 | ], 26 | "episode_run_time": [], 27 | "first_air_date": "2014-10-13", 28 | "genres": [ 29 | { 30 | "id": 10759, 31 | "name": "Боевик и Приключения" 32 | }, 33 | { 34 | "id": 16, 35 | "name": "мультфильм" 36 | } 37 | ], 38 | "homepage": "http://disneyxd.disney.com/star-wars-rebels", 39 | "id": 60554, 40 | "in_production": false, 41 | "languages": [ 42 | "en" 43 | ], 44 | "last_air_date": "2018-03-05", 45 | "last_episode_to_air": { 46 | "air_date": "2018-03-05", 47 | "episode_number": 16, 48 | "id": 1952809, 49 | "name": "Эпизод 16", 50 | "overview": "", 51 | "production_code": "", 52 | "season_number": 4, 53 | "show_id": 60554, 54 | "still_path": "/957AMS0Gh0nQGtngiUJfnxVfJ6Z.jpg", 55 | "vote_average": 10, 56 | "vote_count": 1 57 | }, 58 | "name": "Звёздные войны: Повстанцы", 59 | "next_episode_to_air": null, 60 | "networks": [ 61 | { 62 | "name": "Disney XD", 63 | "id": 44, 64 | "logo_path": "/nKM9EnV7jTpt3MKRbhBusJ03lAY.png", 65 | "origin_country": "US" 66 | } 67 | ], 68 | "number_of_episodes": 69, 69 | "number_of_seasons": 4, 70 | "origin_country": [ 71 | "US" 72 | ], 73 | "original_language": "en", 74 | "original_name": "Star Wars Rebels", 75 | "overview": "Для Галактики настали тёмные времена. Поглощая один мир за другим, Империя продолжает наращивать свою мощь. Имперские войска, оккупировавшие отдаленную планету, устанавливают на ней деспотический режим. Но находятся смельчаки, готовые противостоять силам Империи. Это экипаж космического корабля «Призрак»! Команде повстанцев предстоит столкнуться лицом к лицу с новыми грозными противниками и стать героями, способными поднять восстание.", 76 | "popularity": 35.365, 77 | "poster_path": "/fhV9ckyBko1ZejEEmwdiXG8YMy5.jpg", 78 | "production_companies": [ 79 | { 80 | "id": 1, 81 | "logo_path": "/o86DbpburjxrqAzEDhXZcyE8pDb.png", 82 | "name": "Lucasfilm", 83 | "origin_country": "US" 84 | }, 85 | { 86 | "id": 108270, 87 | "logo_path": "/b34gQGmEWBm1NapuqEjBD6oNbWj.png", 88 | "name": "Lucasfilm Animation", 89 | "origin_country": "US" 90 | } 91 | ], 92 | "seasons": [ 93 | { 94 | "air_date": "2014-08-10", 95 | "episode_count": 12, 96 | "id": 62929, 97 | "name": "Спецматериалы", 98 | "overview": "", 99 | "poster_path": "/jrDSmt0DRix2aqY7Zi15AfwZoM1.jpg", 100 | "season_number": 0 101 | }, 102 | { 103 | "air_date": "2014-10-13", 104 | "episode_count": 13, 105 | "id": 59855, 106 | "name": "Сезон 1", 107 | "overview": "", 108 | "poster_path": "/zPu9N90wS3GecpnmdVJIlKEbwsc.jpg", 109 | "season_number": 1 110 | }, 111 | { 112 | "air_date": "2015-10-14", 113 | "episode_count": 19, 114 | "id": 66362, 115 | "name": "Сезон 2", 116 | "overview": "", 117 | "poster_path": "/nEMQByxaTWb4UI2SMgClo4OwFmr.jpg", 118 | "season_number": 2 119 | }, 120 | { 121 | "air_date": "2016-09-24", 122 | "episode_count": 21, 123 | "id": 80258, 124 | "name": "Сезон 3", 125 | "overview": "", 126 | "poster_path": "/vQ1ZLi40EIAmVNYZEHhRbPb9jKp.jpg", 127 | "season_number": 3 128 | }, 129 | { 130 | "air_date": "2017-10-15", 131 | "episode_count": 16, 132 | "id": 94056, 133 | "name": "Сезон 4", 134 | "overview": "", 135 | "poster_path": "/rNXUEY3CFmq6dsx3gf38xq0MXLX.jpg", 136 | "season_number": 4 137 | } 138 | ], 139 | "status": "Ended", 140 | "type": "Scripted", 141 | "vote_average": 7.4, 142 | "vote_count": 229 143 | } -------------------------------------------------------------------------------- /css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in iOS. 9 | */ 10 | 11 | html { 12 | line-height: 1.15; /* 1 */ 13 | -webkit-text-size-adjust: 100%; /* 2 */ 14 | } 15 | 16 | /* Sections 17 | ========================================================================== */ 18 | 19 | /** 20 | * Remove the margin in all browsers. 21 | */ 22 | 23 | body { 24 | margin: 0; 25 | } 26 | 27 | /** 28 | * Render the `main` element consistently in IE. 29 | */ 30 | 31 | main { 32 | display: block; 33 | } 34 | 35 | /** 36 | * Correct the font size and margin on `h1` elements within `section` and 37 | * `article` contexts in Chrome, Firefox, and Safari. 38 | */ 39 | 40 | h1 { 41 | font-size: 2em; 42 | margin: 0.67em 0; 43 | } 44 | 45 | /* Grouping content 46 | ========================================================================== */ 47 | 48 | /** 49 | * 1. Add the correct box sizing in Firefox. 50 | * 2. Show the overflow in Edge and IE. 51 | */ 52 | 53 | hr { 54 | box-sizing: content-box; /* 1 */ 55 | height: 0; /* 1 */ 56 | overflow: visible; /* 2 */ 57 | } 58 | 59 | /** 60 | * 1. Correct the inheritance and scaling of font size in all browsers. 61 | * 2. Correct the odd `em` font sizing in all browsers. 62 | */ 63 | 64 | pre { 65 | font-family: monospace, monospace; /* 1 */ 66 | font-size: 1em; /* 2 */ 67 | } 68 | 69 | /* Text-level semantics 70 | ========================================================================== */ 71 | 72 | /** 73 | * Remove the gray background on active links in IE 10. 74 | */ 75 | 76 | a { 77 | background-color: transparent; 78 | } 79 | 80 | /** 81 | * 1. Remove the bottom border in Chrome 57- 82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 83 | */ 84 | 85 | abbr[title] { 86 | border-bottom: none; /* 1 */ 87 | text-decoration: underline; /* 2 */ 88 | text-decoration: underline dotted; /* 2 */ 89 | } 90 | 91 | /** 92 | * Add the correct font weight in Chrome, Edge, and Safari. 93 | */ 94 | 95 | b, 96 | strong { 97 | font-weight: bolder; 98 | } 99 | 100 | /** 101 | * 1. Correct the inheritance and scaling of font size in all browsers. 102 | * 2. Correct the odd `em` font sizing in all browsers. 103 | */ 104 | 105 | code, 106 | kbd, 107 | samp { 108 | font-family: monospace, monospace; /* 1 */ 109 | font-size: 1em; /* 2 */ 110 | } 111 | 112 | /** 113 | * Add the correct font size in all browsers. 114 | */ 115 | 116 | small { 117 | font-size: 80%; 118 | } 119 | 120 | /** 121 | * Prevent `sub` and `sup` elements from affecting the line height in 122 | * all browsers. 123 | */ 124 | 125 | sub, 126 | sup { 127 | font-size: 75%; 128 | line-height: 0; 129 | position: relative; 130 | vertical-align: baseline; 131 | } 132 | 133 | sub { 134 | bottom: -0.25em; 135 | } 136 | 137 | sup { 138 | top: -0.5em; 139 | } 140 | 141 | /* Embedded content 142 | ========================================================================== */ 143 | 144 | /** 145 | * Remove the border on images inside links in IE 10. 146 | */ 147 | 148 | img { 149 | border-style: none; 150 | } 151 | 152 | /* Forms 153 | ========================================================================== */ 154 | 155 | /** 156 | * 1. Change the font styles in all browsers. 157 | * 2. Remove the margin in Firefox and Safari. 158 | */ 159 | 160 | button, 161 | input, 162 | optgroup, 163 | select, 164 | textarea { 165 | font-family: inherit; /* 1 */ 166 | font-size: 100%; /* 1 */ 167 | line-height: 1.15; /* 1 */ 168 | margin: 0; /* 2 */ 169 | } 170 | 171 | /** 172 | * Show the overflow in IE. 173 | * 1. Show the overflow in Edge. 174 | */ 175 | 176 | button, 177 | input { /* 1 */ 178 | overflow: visible; 179 | } 180 | 181 | /** 182 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 183 | * 1. Remove the inheritance of text transform in Firefox. 184 | */ 185 | 186 | button, 187 | select { /* 1 */ 188 | text-transform: none; 189 | } 190 | 191 | /** 192 | * Correct the inability to style clickable types in iOS and Safari. 193 | */ 194 | 195 | button, 196 | [type="button"], 197 | [type="reset"], 198 | [type="submit"] { 199 | -webkit-appearance: button; 200 | } 201 | 202 | /** 203 | * Remove the inner border and padding in Firefox. 204 | */ 205 | 206 | button::-moz-focus-inner, 207 | [type="button"]::-moz-focus-inner, 208 | [type="reset"]::-moz-focus-inner, 209 | [type="submit"]::-moz-focus-inner { 210 | border-style: none; 211 | padding: 0; 212 | } 213 | 214 | /** 215 | * Restore the focus styles unset by the previous rule. 216 | */ 217 | 218 | button:-moz-focusring, 219 | [type="button"]:-moz-focusring, 220 | [type="reset"]:-moz-focusring, 221 | [type="submit"]:-moz-focusring { 222 | outline: 1px dotted ButtonText; 223 | } 224 | 225 | /** 226 | * Correct the padding in Firefox. 227 | */ 228 | 229 | fieldset { 230 | padding: 0.35em 0.75em 0.625em; 231 | } 232 | 233 | /** 234 | * 1. Correct the text wrapping in Edge and IE. 235 | * 2. Correct the color inheritance from `fieldset` elements in IE. 236 | * 3. Remove the padding so developers are not caught out when they zero out 237 | * `fieldset` elements in all browsers. 238 | */ 239 | 240 | legend { 241 | box-sizing: border-box; /* 1 */ 242 | color: inherit; /* 2 */ 243 | display: table; /* 1 */ 244 | max-width: 100%; /* 1 */ 245 | padding: 0; /* 3 */ 246 | white-space: normal; /* 1 */ 247 | } 248 | 249 | /** 250 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 251 | */ 252 | 253 | progress { 254 | vertical-align: baseline; 255 | } 256 | 257 | /** 258 | * Remove the default vertical scrollbar in IE 10+. 259 | */ 260 | 261 | textarea { 262 | overflow: auto; 263 | } 264 | 265 | /** 266 | * 1. Add the correct box sizing in IE 10. 267 | * 2. Remove the padding in IE 10. 268 | */ 269 | 270 | [type="checkbox"], 271 | [type="radio"] { 272 | box-sizing: border-box; /* 1 */ 273 | padding: 0; /* 2 */ 274 | } 275 | 276 | /** 277 | * Correct the cursor style of increment and decrement buttons in Chrome. 278 | */ 279 | 280 | [type="number"]::-webkit-inner-spin-button, 281 | [type="number"]::-webkit-outer-spin-button { 282 | height: auto; 283 | } 284 | 285 | /** 286 | * 1. Correct the odd appearance in Chrome and Safari. 287 | * 2. Correct the outline style in Safari. 288 | */ 289 | 290 | [type="search"] { 291 | -webkit-appearance: textfield; /* 1 */ 292 | outline-offset: -2px; /* 2 */ 293 | } 294 | 295 | /** 296 | * Remove the inner padding in Chrome and Safari on macOS. 297 | */ 298 | 299 | [type="search"]::-webkit-search-decoration { 300 | -webkit-appearance: none; 301 | } 302 | 303 | /** 304 | * 1. Correct the inability to style clickable types in iOS and Safari. 305 | * 2. Change font properties to `inherit` in Safari. 306 | */ 307 | 308 | ::-webkit-file-upload-button { 309 | -webkit-appearance: button; /* 1 */ 310 | font: inherit; /* 2 */ 311 | } 312 | 313 | /* Interactive 314 | ========================================================================== */ 315 | 316 | /* 317 | * Add the correct display in Edge, IE 10+, and Firefox. 318 | */ 319 | 320 | details { 321 | display: block; 322 | } 323 | 324 | /* 325 | * Add the correct display in all browsers. 326 | */ 327 | 328 | summary { 329 | display: list-item; 330 | } 331 | 332 | /* Misc 333 | ========================================================================== */ 334 | 335 | /** 336 | * Add the correct display in IE 10+. 337 | */ 338 | 339 | template { 340 | display: none; 341 | } 342 | 343 | /** 344 | * Add the correct display in IE 10. 345 | */ 346 | 347 | [hidden] { 348 | display: none; 349 | } 350 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Prefixed by https://autoprefixer.github.io 3 | * PostCSS: v7.0.29, 4 | * Autoprefixer: v9.7.6 5 | * Browsers: last 4 version 6 | */ 7 | 8 | @font-face { 9 | font-family: "Museo Sans"; 10 | src: url("../fonts/MuseoSansCyrl-500.woff2") format("woff2"), 11 | url("../fonts/MuseoSansCyrl-500.woff") format("woff"); 12 | font-weight: 500; 13 | } 14 | 15 | @font-face { 16 | font-family: "Museo Sans"; 17 | src: url("../fonts/MuseoSansCyrl-700.woff2") format("woff2"), 18 | url("../fonts/MuseoSansCyrl-700.woff") format("woff"); 19 | font-weight: 700; 20 | } 21 | 22 | @font-face { 23 | font-family: "Museo Sans"; 24 | src: url("../fonts/MuseoSansCyrl-900.woff2") format("woff2"), 25 | url("../fonts/MuseoSansCyrl-900.woff") format("woff"); 26 | font-weight: 900; 27 | } 28 | 29 | html { 30 | -webkit-box-sizing: border-box; 31 | box-sizing: border-box; 32 | } 33 | 34 | *, 35 | *::before, 36 | *::after { 37 | -webkit-box-sizing: inherit; 38 | box-sizing: inherit; 39 | } 40 | 41 | body { 42 | margin: 0; 43 | 44 | background-color: rgb(255, 255, 255); 45 | font-family: Museo Sans, Arial, sans-serif; 46 | font-weight: 500; 47 | font-size: 16px; 48 | color: black; 49 | } 50 | 51 | 52 | img { 53 | max-width: 100%; 54 | height: auto; 55 | } 56 | 57 | a { 58 | text-decoration: none; 59 | color: inherit; 60 | } 61 | 62 | ul { 63 | list-style: none; 64 | padding: 0; 65 | margin: 0; 66 | } 67 | 68 | h1, 69 | h2, 70 | h3, 71 | h4, 72 | p { 73 | padding: 0; 74 | margin: 0; 75 | } 76 | 77 | .visually-hidden { 78 | position: absolute !important; 79 | clip: rect(1px 1px 1px 1px); 80 | clip: rect(1px, 1px, 1px, 1px); 81 | padding: 0 !important; 82 | border: 0 !important; 83 | height: 1px !important; 84 | width: 1px !important; 85 | overflow: hidden; 86 | } 87 | 88 | .clearfix::after { 89 | content: ""; 90 | display: table; 91 | clear: both; 92 | } 93 | 94 | .hide { 95 | display: none !important; 96 | } 97 | 98 | .container { 99 | max-width: 1000px; 100 | margin: 0 auto; 101 | padding: 0 30px; 102 | } 103 | 104 | 105 | .left-menu { 106 | height: 50px; 107 | background-color: transparent; 108 | position: fixed; 109 | left: 0; 110 | top: 0; 111 | z-index: 900; 112 | width: 50px; 113 | overflow: hidden; 114 | -webkit-transition: .5s cubic-bezier(.8, .5, .2, 1.4); 115 | -o-transition: .5s cubic-bezier(.8, .5, .2, 1.4); 116 | transition: .5s cubic-bezier(.8, .5, .2, 1.4); 117 | } 118 | 119 | .left-menu:hover { 120 | height: 100%; 121 | background-color: #00838f; 122 | } 123 | 124 | .left-menu.openMenu { 125 | height: 100%; 126 | background-color: #00838f; 127 | } 128 | 129 | 130 | .hamburger { 131 | width: 40px; 132 | height: 40px; 133 | border-radius: 50%; 134 | background-color: #ffc107; 135 | float: right; 136 | margin-right: 5px; 137 | margin-top: 5px; 138 | text-align: center; 139 | cursor: pointer; 140 | -webkit-box-shadow: 0 3px 4px rgba(0, 0, 0, .5); 141 | box-shadow: 0 3px 4px rgba(0, 0, 0, .5); 142 | position: relative; 143 | -webkit-transform: rotate(0deg); 144 | -ms-transform: rotate(0deg); 145 | transform: rotate(0deg); 146 | } 147 | 148 | .hamburger.open { 149 | background-color: #FF637F; 150 | -webkit-transition: all ease .5s; 151 | -o-transition: all ease .5s; 152 | transition: all ease .5s; 153 | } 154 | 155 | .hamburger:hover { 156 | -webkit-box-shadow: none; 157 | box-shadow: none; 158 | -webkit-transition: all ease .5s; 159 | -o-transition: all ease .5s; 160 | transition: all ease .5s; 161 | -webkit-transform: rotate(360deg); 162 | -ms-transform: rotate(360deg); 163 | transform: rotate(360deg); 164 | 165 | } 166 | 167 | .hamburger span { 168 | width: 60%; 169 | height: 3px; 170 | background-color: #000; 171 | display: block; 172 | border-radius: 1px; 173 | float: left; 174 | margin-left: 20%; 175 | -webkit-transition: all ease .3s; 176 | -o-transition: all ease .3s; 177 | transition: all ease .3s; 178 | } 179 | 180 | .hamburger span:nth-child(1) { 181 | margin-top: 13px; 182 | } 183 | 184 | .hamburger span:nth-child(2) { 185 | margin-top: 3px; 186 | } 187 | 188 | .hamburger span:nth-child(3) { 189 | margin-top: 3px; 190 | } 191 | 192 | .open span:nth-child(1) { 193 | background-color: #fff; 194 | -webkit-transform: rotate(45deg); 195 | -ms-transform: rotate(45deg); 196 | transform: rotate(45deg); 197 | -webkit-transition-timing-function: ease-in-out; 198 | -o-transition-timing-function: ease-in-out; 199 | transition-timing-function: ease-in-out; 200 | position: absolute; 201 | top: 5px; 202 | right: 8px; 203 | width: 25px; 204 | -webkit-transition: all ease .5s; 205 | -o-transition: all ease .5s; 206 | transition: all ease .5s; 207 | border-radius: 10px; 208 | } 209 | 210 | .open span:nth-child(2) { 211 | background-color: #fff; 212 | -webkit-transition-timing-function: ease-in-out; 213 | -o-transition-timing-function: ease-in-out; 214 | transition-timing-function: ease-in-out; 215 | margin-top: 18px; 216 | opacity: 0; 217 | -webkit-transition: all ease .5s; 218 | -o-transition: all ease .5s; 219 | transition: all ease .5s; 220 | } 221 | 222 | .open span:nth-child(3) { 223 | background-color: #fff; 224 | -webkit-transform: rotate(-45deg); 225 | -ms-transform: rotate(-45deg); 226 | transform: rotate(-45deg); 227 | -webkit-transition-timing-function: ease-in-out; 228 | -o-transition-timing-function: ease-in-out; 229 | transition-timing-function: ease-in-out; 230 | margin-top: 0; 231 | position: absolute; 232 | top: 18px; 233 | right: 8px; 234 | width: 25px; 235 | -webkit-transition: all ease .5s; 236 | -o-transition: all ease .5s; 237 | transition: all ease .5s; 238 | border-radius: 10px; 239 | } 240 | 241 | .openMenu { 242 | width: 250px; 243 | overflow: hidden; 244 | -webkit-transition: .5s cubic-bezier(.8, .5, .2, 1.4); 245 | -o-transition: .5s cubic-bezier(.8, .5, .2, 1.4); 246 | transition: .5s cubic-bezier(.8, .5, .2, 1.4); 247 | } 248 | 249 | .left-menu__list { 250 | margin-top: 70px; 251 | list-style: none; 252 | padding: 0; 253 | } 254 | 255 | .left-menu__list li { 256 | width: 250px; 257 | /* height: 40px; */ 258 | line-height: 40px; 259 | color: #fff; 260 | /* padding : 5px; */ 261 | font-size: 13px; 262 | } 263 | 264 | .left-menu__list li:hover { 265 | background-color: #00bcd6; 266 | -webkit-transition: all ease .5s; 267 | -o-transition: all ease .5s; 268 | transition: all ease .5s; 269 | cursor: pointer; 270 | 271 | } 272 | 273 | .left-menu__list li a { 274 | text-decoration: none; 275 | color: #fff; 276 | width: 100%; 277 | display: block; 278 | } 279 | 280 | .left-menu__list li a svg { 281 | width: 40px; 282 | height: 40px; 283 | float: left; 284 | margin-left: 0; 285 | } 286 | 287 | .left-menu__list li a span { 288 | text-decoration: none; 289 | color: #fff; 290 | width: 100%; 291 | } 292 | 293 | .dropdown-list li a span { 294 | padding-left: 30px; 295 | } 296 | 297 | .left-menu__list i.fa { 298 | font-size: 25px; 299 | padding: 10px; 300 | width: 50px; 301 | text-align: center; 302 | } 303 | 304 | .left-menu__list li ul li { 305 | padding: 0; 306 | line-height: 30px; 307 | -webkit-transition: all .4s; 308 | -o-transition: all .4s; 309 | transition: all .4s; 310 | -webkit-box-sizing: border-box; 311 | box-sizing: border-box; 312 | } 313 | 314 | 315 | .left-menu__list li ul li:hover { 316 | background: #4DD0E1; 317 | -webkit-transition: all .4s; 318 | -o-transition: all .4s; 319 | transition: all .4s; 320 | 321 | } 322 | 323 | .left-menu__list li ul li ul li { 324 | padding: 5px; 325 | background: #B2EBF2; 326 | } 327 | 328 | .left-menu__list li ul li ul li a span { 329 | color: #00838f; 330 | } 331 | 332 | .left-menu__list li ul li ul li:hover { 333 | background: #B2EBF2; 334 | } 335 | 336 | .dropdown { 337 | color: #fff; 338 | text-decoration: none; 339 | margin-bottom: 5px; 340 | display: block; 341 | position: relative; 342 | } 343 | 344 | .active + .dropdown-list { 345 | width: 100%; 346 | height: auto; 347 | line-height: 30px; 348 | padding: 0; 349 | margin-left: 0; 350 | background: #4DD0E1; 351 | 352 | } 353 | 354 | .hide + .dropdown-list { 355 | height: 0; 356 | } 357 | 358 | .active + .dropdown-list:hover { 359 | background: #00bcd6; 360 | } 361 | 362 | .dropdown-list { 363 | width: 0; 364 | height: 0; 365 | overflow: hidden; 366 | } 367 | 368 | .dropdown:before { 369 | font-family: FontAwesome; 370 | content: "\f105"; 371 | -webkit-transition: all .4s; 372 | -o-transition: all .4s; 373 | transition: all .4s; 374 | padding-right: 5px; 375 | right: 20px; 376 | position: absolute; 377 | top: 4px; 378 | } 379 | 380 | .dropdown.active:before { 381 | font-family: FontAwesome; 382 | content: '\f107'; 383 | -webkit-transition: all .4s; 384 | -o-transition: all .4s; 385 | transition: all .4s; 386 | padding-right: 5px; 387 | 388 | } 389 | 390 | .left-menu:not(.openMenu) li > .dropdown-list { 391 | pointer-events: none; 392 | height: 0; 393 | } 394 | 395 | 396 | main { 397 | margin-top: 60px; 398 | } 399 | 400 | .title-wrapper { 401 | margin-right: 40px; 402 | } 403 | 404 | .title { 405 | font-size: 48px; 406 | font-weight: 900; 407 | text-transform: uppercase; 408 | } 409 | 410 | .subtitle { 411 | font-weight: 300; 412 | text-transform: uppercase; 413 | } 414 | 415 | .header-flex { 416 | margin-top: 60px; 417 | margin-bottom: 30px; 418 | display: -webkit-box; 419 | display: -ms-flexbox; 420 | display: flex; 421 | } 422 | 423 | .search { 424 | -webkit-box-flex: 1; 425 | -ms-flex-positive: 1; 426 | flex-grow: 1; 427 | } 428 | 429 | .search__form { 430 | padding-top: 15px; 431 | } 432 | 433 | .search__form-block { 434 | display: block; 435 | padding-top: 7px; 436 | padding-bottom: 7px; 437 | border-bottom: 2px solid #ccc; 438 | } 439 | 440 | .search__form-head { 441 | font-size: 20px; 442 | font-weight: 700; 443 | } 444 | 445 | .search__form-input { 446 | width: 100%; 447 | padding-top: 5px; 448 | border-style: none; 449 | outline: none; 450 | background-color: transparent; 451 | } 452 | 453 | .search__form-input:focus { 454 | border-top: 2px solid #ccc; 455 | } 456 | 457 | .tv-shows__head { 458 | margin: 15px 0; 459 | } 460 | 461 | .tv-shows__list { 462 | display: -ms-grid; 463 | display: grid; 464 | grid-template-columns: repeat(auto-fill, 185px); 465 | grid-gap: 1rem; 466 | -webkit-box-pack: justify; 467 | -ms-flex-pack: justify; 468 | justify-content: space-between; 469 | } 470 | 471 | 472 | .tv-shows__item { 473 | min-width: 185px; 474 | margin: 15px 10px 30px; 475 | } 476 | 477 | .tv-card { 478 | position: relative; 479 | max-width: 185px; 480 | min-height: 370px; 481 | margin: 0 auto; 482 | display: -webkit-box; 483 | display: -ms-flexbox; 484 | display: flex; 485 | -webkit-box-orient: vertical; 486 | -webkit-box-direction: normal; 487 | -ms-flex-direction: column; 488 | flex-direction: column; 489 | -webkit-box-shadow: 3px 3px 20px 1px rgba(200, 200, 200, .75); 490 | box-shadow: 3px 3px 20px 1px rgba(200, 200, 200, .75); 491 | } 492 | 493 | .tv-card__head { 494 | padding: 15px 15px 0; 495 | max-height: 80px; 496 | display: -webkit-box; 497 | -webkit-line-clamp: 3; 498 | -webkit-box-orient: vertical; 499 | overflow: hidden; 500 | -o-text-overflow: ellipsis; 501 | text-overflow: ellipsis; 502 | font-weight: 900; 503 | } 504 | 505 | 506 | .tv-card__vote { 507 | position: absolute; 508 | top: 18px; 509 | left: 1px; 510 | text-align: center; 511 | color: #FFFFFF; 512 | background-color: #FF637D; 513 | height: 25px; 514 | width: 44px; 515 | display: inline-block; 516 | line-height: 25px; 517 | font-weight: 900; 518 | } 519 | 520 | .tv-card__img { 521 | height: 278px; 522 | width: 185px; 523 | } 524 | 525 | .modal { 526 | position: fixed; 527 | top: 0; 528 | display: -webkit-box; 529 | display: -ms-flexbox; 530 | display: flex; 531 | -webkit-box-pack: center; 532 | -ms-flex-pack: center; 533 | justify-content: center; 534 | -webkit-box-align: center; 535 | -ms-flex-align: center; 536 | align-items: center; 537 | width: 100vw; 538 | height: 100vh; 539 | z-index: 990; 540 | background-color: #ffffff; 541 | } 542 | 543 | .modal__content { 544 | border: 32px solid #00addc; 545 | position: relative; 546 | min-width: 600px; 547 | max-width: 800px; 548 | min-height: 400px; 549 | max-height: 550px; 550 | padding: 35px 50px 35px 150px; 551 | background-color: #fff; 552 | font-size: 14px; 553 | line-height: 1.2; 554 | font-weight: 400; 555 | color: #030303; 556 | margin: 0 200px; 557 | } 558 | 559 | .modal__content h2 { 560 | font-size: 24px; 561 | font-weight: 800; 562 | } 563 | 564 | .modal__content h3 { 565 | font-size: 16px; 566 | font-weight: 800; 567 | } 568 | 569 | .modal__description { 570 | overflow-y: auto; 571 | max-height: 400px; 572 | } 573 | 574 | .modal__description section { 575 | margin-top: 15px; 576 | } 577 | 578 | .modal__link-wrapper { 579 | padding-top: 15px; 580 | color: #ff747f; 581 | } 582 | 583 | .modal__link { 584 | font-size: 12px; 585 | color: #ffc107; 586 | } 587 | 588 | .modal__link:hover { 589 | color: #FF637F; 590 | } 591 | 592 | .original__header { 593 | display: -webkit-box; 594 | display: -ms-flexbox; 595 | display: flex; 596 | -ms-flex-wrap: nowrap; 597 | flex-wrap: nowrap; 598 | } 599 | 600 | 601 | .image__content { 602 | position: absolute; 603 | top: 40px; 604 | left: -80px; 605 | width: 185px; 606 | height: 278px; 607 | box-shadow: 2px 2px 5px 1px rgba(53, 117, 184, 0.49); 608 | } 609 | 610 | .cross { 611 | position: absolute; 612 | top: -75px; 613 | right: -75px; 614 | width: 40px; 615 | height: 40px; 616 | border-radius: 50%; 617 | float: right; 618 | margin-right: 5px; 619 | margin-top: 5px; 620 | text-align: center; 621 | cursor: pointer; 622 | -webkit-box-shadow: 0 3px 4px rgba(0, 0, 0, .5); 623 | box-shadow: 0 3px 4px rgba(0, 0, 0, .5); 624 | -webkit-transform: rotate(0deg); 625 | -ms-transform: rotate(0deg); 626 | transform: rotate(0deg); 627 | background-color: #FF637F; 628 | -webkit-transition: all ease .5s; 629 | -o-transition: all ease .5s; 630 | transition: all ease .5s; 631 | } 632 | 633 | .cross span { 634 | width: 60%; 635 | height: 3px; 636 | background-color: #000; 637 | display: block; 638 | border-radius: 1px; 639 | float: left; 640 | margin-left: 20%; 641 | -webkit-transition: all ease .3s; 642 | -o-transition: all ease .3s; 643 | transition: all ease .3s; 644 | } 645 | 646 | .cross span:nth-child(1) { 647 | background-color: #fff; 648 | -webkit-transform: rotate(45deg); 649 | -ms-transform: rotate(45deg); 650 | transform: rotate(45deg); 651 | -webkit-transition-timing-function: ease-in-out; 652 | -o-transition-timing-function: ease-in-out; 653 | transition-timing-function: ease-in-out; 654 | position: absolute; 655 | top: 18px; 656 | right: 8px; 657 | width: 25px; 658 | -webkit-transition: all ease .5s; 659 | -o-transition: all ease .5s; 660 | transition: all ease .5s; 661 | border-radius: 10px; 662 | } 663 | 664 | 665 | .cross span:nth-child(2) { 666 | background-color: #fff; 667 | -webkit-transform: rotate(-45deg); 668 | -ms-transform: rotate(-45deg); 669 | transform: rotate(-45deg); 670 | -webkit-transition-timing-function: ease-in-out; 671 | -o-transition-timing-function: ease-in-out; 672 | transition-timing-function: ease-in-out; 673 | margin-top: 0; 674 | position: absolute; 675 | top: 18px; 676 | right: 8px; 677 | width: 25px; 678 | -webkit-transition: all ease .5s; 679 | -o-transition: all ease .5s; 680 | transition: all ease .5s; 681 | border-radius: 10px; 682 | 683 | } 684 | 685 | @media (max-width: 1024px) { 686 | .container { 687 | padding: 0 60px; 688 | } 689 | 690 | .cross { 691 | top: 0; 692 | right: 0; 693 | } 694 | } 695 | 696 | @media (max-width: 794px) { 697 | .header-flex { 698 | -ms-flex-wrap: wrap; 699 | flex-wrap: wrap; 700 | } 701 | 702 | .search { 703 | width: 100% 704 | } 705 | 706 | .tv-shows__list { 707 | -ms-flex-pack: distribute; 708 | justify-content: space-around; 709 | } 710 | 711 | .image__content { 712 | position: static; 713 | margin: 0 auto; 714 | } 715 | 716 | .modal__content { 717 | overflow-y: auto; 718 | max-height: 400px; 719 | padding: 30px; 720 | border-width: 16px; 721 | } 722 | 723 | .modal__description { 724 | overflow-y: visible; 725 | max-height: none; 726 | } 727 | 728 | .modal__content h2 { 729 | margin-top: 15px; 730 | } 731 | } 732 | 733 | @media (max-width: 655px) { 734 | .original__header { 735 | -ms-flex-wrap: wrap; 736 | flex-wrap: wrap; 737 | } 738 | 739 | .poster__wrapper { 740 | margin: 0 auto; 741 | } 742 | 743 | .modal__content { 744 | min-width: 320px; 745 | width: 100%; 746 | } 747 | 748 | 749 | } 750 | 751 | @media (max-width: 555px) { 752 | 753 | 754 | .tv-shows__item { 755 | -ms-flex-preferred-size: 100%; 756 | flex-basis: 100%; 757 | margin: 15px auto; 758 | } 759 | 760 | 761 | .left-menu { 762 | height: 50px; 763 | } 764 | 765 | .left-menu:hover { 766 | height: 50px; 767 | } 768 | 769 | .left-menu.openMenu { 770 | height: 100%; 771 | } 772 | } 773 | 774 | @media (max-width: 400px) { 775 | 776 | .container { 777 | padding: 0 30px; 778 | } 779 | 780 | .title { 781 | font-size: 42px; 782 | } 783 | 784 | } 785 | 786 | .preloader { 787 | display: none; 788 | background-color: rgba(0, 0, 0, 0.8); 789 | position: fixed; 790 | top: 0; 791 | left: 0; 792 | right: 0; 793 | bottom: 0; 794 | z-index: 999; 795 | } 796 | 797 | .preloader-wrapper { 798 | --skin-color: #e4c560; 799 | --tap-speed: 0.6s; 800 | --tap-stagger: 0.1s; 801 | position: relative; 802 | width: 8vw; 803 | height: 6vw; 804 | position: absolute; 805 | top: 50%; 806 | left: 50%; 807 | -webkit-transform: translate(-50%, -50%); 808 | -ms-transform: translate(-50%, -50%); 809 | transform: translate(-50%, -50%) 810 | } 811 | 812 | 813 | .preloader:before { 814 | content: ""; 815 | display: block; 816 | width: 180%; 817 | height: 75%; 818 | position: absolute; 819 | top: 70%; 820 | right: 20%; 821 | background-color: black; 822 | border-radius: 4vw 1vw; 823 | -webkit-filter: blur(10px); 824 | filter: blur(10px); 825 | opacity: 0.3; 826 | } 827 | 828 | .preloader-two { 829 | display: block; 830 | width: 100%; 831 | height: 100%; 832 | position: absolute; 833 | top: 0; 834 | left: 0; 835 | background-color: var(--skin-color); 836 | border-radius: 1vw 4vw; 837 | } 838 | 839 | .preloader-three { 840 | position: absolute; 841 | width: 120%; 842 | height: 3.2vw; 843 | background-color: var(--skin-color); 844 | bottom: -18%; 845 | right: 1%; 846 | -webkit-transform-origin: calc(100% - 2vw) 2vw; 847 | -ms-transform-origin: calc(100% - 2vw) 2vw; 848 | transform-origin: calc(100% - 2vw) 2vw; 849 | -webkit-transform: rotate(-20deg); 850 | -ms-transform: rotate(-20deg); 851 | transform: rotate(-20deg); 852 | border-radius: 3vw 2vw 2vw 1vw; 853 | border-bottom: 2px solid rgba(0, 0, 0, 0.1); 854 | border-left: 2px solid rgba(0, 0, 0, 0.1); 855 | } 856 | 857 | .preloader-three:after { 858 | width: 20%; 859 | height: 60%; 860 | content: ""; 861 | background-color: rgba(255, 255, 255, 0.3); 862 | position: absolute; 863 | bottom: -8%; 864 | left: 0.5vw; 865 | border-radius: 60% 10% 10% 30%; 866 | border-right: 2px solid rgba(0, 0, 0, 0.05); 867 | } 868 | 869 | .preloader-one { 870 | position: absolute; 871 | width: 80%; 872 | height: 3.5vw; 873 | background-color: var(--skin-color); 874 | bottom: 32%; 875 | right: 64%; 876 | -webkit-transform-origin: 100% 2vw; 877 | -ms-transform-origin: 100% 2vw; 878 | transform-origin: 100% 2vw; 879 | -webkit-animation-duration: calc(var(--tap-speed) * 2); 880 | animation-duration: calc(var(--tap-speed) * 2); 881 | -webkit-animation-timing-function: ease-in-out; 882 | animation-timing-function: ease-in-out; 883 | -webkit-animation-iteration-count: infinite; 884 | animation-iteration-count: infinite; 885 | -webkit-transform: rotate(10deg); 886 | -ms-transform: rotate(10deg); 887 | transform: rotate(10deg); 888 | } 889 | 890 | .preloader-one:before { 891 | content: ""; 892 | position: absolute; 893 | width: 140%; 894 | height: 3vw; 895 | background-color: var(--skin-color); 896 | bottom: 8%; 897 | right: 65%; 898 | -webkit-transform-origin: calc(100% - 2vw) 2vw; 899 | -ms-transform-origin: calc(100% - 2vw) 2vw; 900 | transform-origin: calc(100% - 2vw) 2vw; 901 | -webkit-transform: rotate(-60deg); 902 | -ms-transform: rotate(-60deg); 903 | transform: rotate(-60deg); 904 | border-radius: 2vw; 905 | } 906 | 907 | .preloader-one:nth-child(1) { 908 | -webkit-animation-delay: 0ms; 909 | animation-delay: 0ms; 910 | -webkit-filter: brightness(70%); 911 | filter: brightness(70%); 912 | -webkit-animation-name: tap-upper-1; 913 | animation-name: tap-upper-1; 914 | } 915 | 916 | .preloader-one:nth-child(2) { 917 | -webkit-animation-delay: var(--tap-stagger); 918 | animation-delay: var(--tap-stagger); 919 | -webkit-filter: brightness(80%); 920 | filter: brightness(80%); 921 | -webkit-animation-name: tap-upper-2; 922 | animation-name: tap-upper-2; 923 | } 924 | 925 | .preloader-one:nth-child(3) { 926 | -webkit-animation-delay: calc(var(--tap-stagger) * 2); 927 | animation-delay: calc(var(--tap-stagger) * 2); 928 | -webkit-filter: brightness(90%); 929 | filter: brightness(90%); 930 | -webkit-animation-name: tap-upper-3; 931 | animation-name: tap-upper-3; 932 | } 933 | 934 | .preloader-one:nth-child(4) { 935 | -webkit-animation-delay: calc(var(--tap-stagger) * 3); 936 | animation-delay: calc(var(--tap-stagger) * 3); 937 | -webkit-filter: brightness(100%); 938 | filter: brightness(100%); 939 | -webkit-animation-name: tap-upper-4; 940 | animation-name: tap-upper-4; 941 | } 942 | 943 | @-webkit-keyframes tap-upper-1 { 944 | 945 | 0%, 946 | 50%, 947 | 100% { 948 | -webkit-transform: rotate(10deg) scale(0.4); 949 | transform: rotate(10deg) scale(0.4); 950 | } 951 | 952 | 40% { 953 | -webkit-transform: rotate(50deg) scale(0.4); 954 | transform: rotate(50deg) scale(0.4); 955 | } 956 | } 957 | 958 | @keyframes tap-upper-1 { 959 | 960 | 0%, 961 | 50%, 962 | 100% { 963 | -webkit-transform: rotate(10deg) scale(0.4); 964 | transform: rotate(10deg) scale(0.4); 965 | } 966 | 967 | 40% { 968 | -webkit-transform: rotate(50deg) scale(0.4); 969 | transform: rotate(50deg) scale(0.4); 970 | } 971 | } 972 | 973 | @-webkit-keyframes tap-upper-2 { 974 | 975 | 0%, 976 | 50%, 977 | 100% { 978 | -webkit-transform: rotate(10deg) scale(0.6); 979 | transform: rotate(10deg) scale(0.6); 980 | } 981 | 982 | 40% { 983 | -webkit-transform: rotate(50deg) scale(0.6); 984 | transform: rotate(50deg) scale(0.6); 985 | } 986 | } 987 | 988 | @keyframes tap-upper-2 { 989 | 990 | 0%, 991 | 50%, 992 | 100% { 993 | -webkit-transform: rotate(10deg) scale(0.6); 994 | transform: rotate(10deg) scale(0.6); 995 | } 996 | 997 | 40% { 998 | -webkit-transform: rotate(50deg) scale(0.6); 999 | transform: rotate(50deg) scale(0.6); 1000 | } 1001 | } 1002 | 1003 | @-webkit-keyframes tap-upper-3 { 1004 | 1005 | 0%, 1006 | 50%, 1007 | 100% { 1008 | -webkit-transform: rotate(10deg) scale(0.8); 1009 | transform: rotate(10deg) scale(0.8); 1010 | } 1011 | 1012 | 40% { 1013 | -webkit-transform: rotate(50deg) scale(0.8); 1014 | transform: rotate(50deg) scale(0.8); 1015 | } 1016 | } 1017 | 1018 | @keyframes tap-upper-3 { 1019 | 1020 | 0%, 1021 | 50%, 1022 | 100% { 1023 | -webkit-transform: rotate(10deg) scale(0.8); 1024 | transform: rotate(10deg) scale(0.8); 1025 | } 1026 | 1027 | 40% { 1028 | -webkit-transform: rotate(50deg) scale(0.8); 1029 | transform: rotate(50deg) scale(0.8); 1030 | } 1031 | } 1032 | 1033 | @-webkit-keyframes tap-upper-4 { 1034 | 1035 | 0%, 1036 | 50%, 1037 | 100% { 1038 | -webkit-transform: rotate(10deg) scale(1); 1039 | transform: rotate(10deg) scale(1); 1040 | } 1041 | 1042 | 40% { 1043 | -webkit-transform: rotate(50deg) scale(1); 1044 | transform: rotate(50deg) scale(1); 1045 | } 1046 | } 1047 | 1048 | @keyframes tap-upper-4 { 1049 | 1050 | 0%, 1051 | 50%, 1052 | 100% { 1053 | -webkit-transform: rotate(10deg) scale(1); 1054 | transform: rotate(10deg) scale(1); 1055 | } 1056 | 1057 | 40% { 1058 | -webkit-transform: rotate(50deg) scale(1); 1059 | transform: rotate(50deg) scale(1); 1060 | } 1061 | } 1062 | 1063 | .loading { 1064 | position: fixed; 1065 | background-color: #00838f; 1066 | width: 12px; 1067 | height: 12px; 1068 | border-radius: 3px; 1069 | top: 50%; 1070 | left: 50%; 1071 | -webkit-transform: translate(-50%, -50%); 1072 | -ms-transform: translate(-50%, -50%); 1073 | transform: translate(-50%, -50%); 1074 | -webkit-animation: 1.4s linear infinite; 1075 | animation: 1.4s linear infinite; 1076 | -webkit-animation-name: uqlrk4ccc; 1077 | animation-name: uqlrk4ccc; 1078 | } 1079 | 1080 | @-webkit-keyframes uqlrk4ccc { 1081 | 20% { 1082 | -webkit-transform: rotate(-30deg) scale(1); 1083 | transform: rotate(-30deg) scale(1); 1084 | } 1085 | 50% { 1086 | -webkit-transform: rotate(360deg) scale(4); 1087 | transform: rotate(360deg) scale(4); 1088 | background-color: white; 1089 | } 1090 | 80% { 1091 | -webkit-transform: rotate(720deg) scale(0.8); 1092 | transform: rotate(720deg) scale(0.8); 1093 | } 1094 | 90%, 100% { 1095 | -webkit-transform: rotate(720deg) scale(1); 1096 | transform: rotate(720deg) scale(1); 1097 | background-color: #ffc107; 1098 | } 1099 | } 1100 | 1101 | @keyframes uqlrk4ccc { 1102 | 20% { 1103 | -webkit-transform: rotate(-30deg) scale(1); 1104 | transform: rotate(-30deg) scale(1); 1105 | } 1106 | 50% { 1107 | -webkit-transform: rotate(360deg) scale(4); 1108 | transform: rotate(360deg) scale(4); 1109 | background-color: white; 1110 | } 1111 | 80% { 1112 | -webkit-transform: rotate(720deg) scale(0.8); 1113 | transform: rotate(720deg) scale(0.8); 1114 | } 1115 | 90%, 100% { 1116 | -webkit-transform: rotate(720deg) scale(1); 1117 | transform: rotate(720deg) scale(1); 1118 | background-color: #ffc107; 1119 | } 1120 | } 1121 | 1122 | .loading:before, .loading:after { 1123 | content: ""; 1124 | position: absolute; 1125 | width: 100%; 1126 | height: 100%; 1127 | background-color: #ffc107; 1128 | border-radius: 3px; 1129 | } 1130 | 1131 | .loading:before { 1132 | right: calc(100% + 2px); 1133 | -webkit-animation: 1.4s 0.2s ease infinite; 1134 | animation: 1.4s 0.2s ease infinite; 1135 | -webkit-animation-name: uqlrk4cch; 1136 | animation-name: uqlrk4cch; 1137 | } 1138 | 1139 | @-webkit-keyframes uqlrk4cch { 1140 | 65% { 1141 | -webkit-transform: translate(-200%, -100%) scale(0.2) rotate(-180deg); 1142 | transform: translate(-200%, -100%) scale(0.2) rotate(-180deg); 1143 | background-color: white; 1144 | } 1145 | 70%, 100% { 1146 | -webkit-transform: translate(0, 0) scale(1) rotate(-360deg); 1147 | transform: translate(0, 0) scale(1) rotate(-360deg); 1148 | background-color: #00838f; 1149 | } 1150 | } 1151 | 1152 | @keyframes uqlrk4cch { 1153 | 65% { 1154 | -webkit-transform: translate(-200%, -100%) scale(0.2) rotate(-180deg); 1155 | transform: translate(-200%, -100%) scale(0.2) rotate(-180deg); 1156 | background-color: white; 1157 | } 1158 | 70%, 100% { 1159 | -webkit-transform: translate(0, 0) scale(1) rotate(-360deg); 1160 | transform: translate(0, 0) scale(1) rotate(-360deg); 1161 | background-color: #00838f; 1162 | } 1163 | } 1164 | 1165 | div:after { 1166 | left: calc(100% + 2px); 1167 | -webkit-animation: 1.4s 0.2s ease infinite; 1168 | animation: 1.4s 0.2s ease infinite; 1169 | -webkit-animation-name: uqlrk4ccp; 1170 | animation-name: uqlrk4ccp; 1171 | } 1172 | 1173 | @-webkit-keyframes uqlrk4ccp { 1174 | 65% { 1175 | -webkit-transform: translate(200%, 100%) scale(0.2) rotate(180deg); 1176 | transform: translate(200%, 100%) scale(0.2) rotate(180deg); 1177 | background-color: white; 1178 | } 1179 | 70%, 100% { 1180 | -webkit-transform: translate(0, 0) scale(1) rotate(360deg); 1181 | transform: translate(0, 0) scale(1) rotate(360deg); 1182 | background-color: #ffc107; 1183 | } 1184 | } 1185 | 1186 | @keyframes uqlrk4ccp { 1187 | 65% { 1188 | -webkit-transform: translate(200%, 100%) scale(0.2) rotate(180deg); 1189 | transform: translate(200%, 100%) scale(0.2) rotate(180deg); 1190 | background-color: white; 1191 | } 1192 | 70%, 100% { 1193 | -webkit-transform: translate(0, 0) scale(1) rotate(360deg); 1194 | transform: translate(0, 0) scale(1) rotate(360deg); 1195 | background-color: #00838f; 1196 | } 1197 | } -------------------------------------------------------------------------------- /fonts/MuseoSansCyrl-500.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvar91/netclicks-html-css-js/22cb88150fb00e199c7454ee22ea79fdb44f18b6/fonts/MuseoSansCyrl-500.woff -------------------------------------------------------------------------------- /fonts/MuseoSansCyrl-500.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvar91/netclicks-html-css-js/22cb88150fb00e199c7454ee22ea79fdb44f18b6/fonts/MuseoSansCyrl-500.woff2 -------------------------------------------------------------------------------- /fonts/MuseoSansCyrl-700.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvar91/netclicks-html-css-js/22cb88150fb00e199c7454ee22ea79fdb44f18b6/fonts/MuseoSansCyrl-700.woff -------------------------------------------------------------------------------- /fonts/MuseoSansCyrl-700.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvar91/netclicks-html-css-js/22cb88150fb00e199c7454ee22ea79fdb44f18b6/fonts/MuseoSansCyrl-700.woff2 -------------------------------------------------------------------------------- /fonts/MuseoSansCyrl-900.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvar91/netclicks-html-css-js/22cb88150fb00e199c7454ee22ea79fdb44f18b6/fonts/MuseoSansCyrl-900.woff -------------------------------------------------------------------------------- /fonts/MuseoSansCyrl-900.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvar91/netclicks-html-css-js/22cb88150fb00e199c7454ee22ea79fdb44f18b6/fonts/MuseoSansCyrl-900.woff2 -------------------------------------------------------------------------------- /img/favicon/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvar91/netclicks-html-css-js/22cb88150fb00e199c7454ee22ea79fdb44f18b6/img/favicon/android-chrome-192x192.png -------------------------------------------------------------------------------- /img/favicon/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvar91/netclicks-html-css-js/22cb88150fb00e199c7454ee22ea79fdb44f18b6/img/favicon/android-chrome-512x512.png -------------------------------------------------------------------------------- /img/favicon/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvar91/netclicks-html-css-js/22cb88150fb00e199c7454ee22ea79fdb44f18b6/img/favicon/apple-touch-icon.png -------------------------------------------------------------------------------- /img/favicon/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #00aba9 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /img/favicon/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvar91/netclicks-html-css-js/22cb88150fb00e199c7454ee22ea79fdb44f18b6/img/favicon/favicon-16x16.png -------------------------------------------------------------------------------- /img/favicon/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvar91/netclicks-html-css-js/22cb88150fb00e199c7454ee22ea79fdb44f18b6/img/favicon/favicon-32x32.png -------------------------------------------------------------------------------- /img/favicon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvar91/netclicks-html-css-js/22cb88150fb00e199c7454ee22ea79fdb44f18b6/img/favicon/favicon.ico -------------------------------------------------------------------------------- /img/favicon/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvar91/netclicks-html-css-js/22cb88150fb00e199c7454ee22ea79fdb44f18b6/img/favicon/mstile-150x150.png -------------------------------------------------------------------------------- /img/favicon/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-512x512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /img/netcliks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvar91/netclicks-html-css-js/22cb88150fb00e199c7454ee22ea79fdb44f18b6/img/netcliks.png -------------------------------------------------------------------------------- /img/netcliks.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 13 | 14 | 15 | 16 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /img/no-poster.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvar91/netclicks-html-css-js/22cb88150fb00e199c7454ee22ea79fdb44f18b6/img/no-poster.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 10 | 11 | 16 | 22 | 28 | 29 | 30 | 31 | 32 | 36 | 37 | 38 | Netclicks - все о сериалах 39 | 40 | 41 | 42 |
43 |
44 | 45 | 46 | 47 |
48 | 92 |
93 | 94 |
95 |
96 |
97 |

Netclicks

98 |

все о сериалах

99 |
100 | 101 |
102 |
103 |

Поиск

104 | 112 |
113 |
114 |
115 |
116 | 117 |
118 |
119 |
120 |

Результат поиска

121 |
    122 | 367 |
368 |
    369 |
    370 |
    371 |
    372 | 373 |
    374 |
    375 |
    376 |
    377 |
    378 | Название шоу 383 |
    384 |
    385 |
    386 | 387 |
    388 |

    389 | Название шоу 390 |

    391 | 392 |
    393 |

    Жанр:

    394 |
      395 |
    • Документальный
      • 396 |
    • Мелодрама
      • 397 |
    • Мультфильм для взрослых
      • 398 |
    399 |
    400 |
    401 |

    Рейтинг

    402 | 10 403 |
    404 | 405 |
    406 |

    Обзор:

    407 |
    408 |

    409 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. 410 | Perspiciatis ut vero, commodi quaerat quasi animi nam corporis 411 | hic debitis nulla, ullam non. Quia cupiditate quo obcaecati hic. 412 | Molestiae, numquam natus! 413 |

    414 |
    415 |

    416 | Официальная страница 419 |

    420 |
    421 | 422 |
    423 |

    Трейлеры

    424 |
      425 |
      426 |
      427 |
      428 | 429 | 430 |
      431 |
      432 |
      433 | 434 |
      435 |
      436 |
      437 |
      438 |
      439 |
      440 |
      441 |
      442 |
      443 |
      444 | 445 | 446 | 447 | 448 | 449 | -------------------------------------------------------------------------------- /script/main.js: -------------------------------------------------------------------------------- 1 | //Constants 2 | const IMG_URL = "https://image.tmdb.org/t/p/w185_and_h278_bestv2"; 3 | const SERVER = "https://api.themoviedb.org/3"; 4 | const API_KEY = "08f4b8dae8c78a5afed1fc1dd61130f4"; 5 | 6 | //Menu 7 | const leftMenu = document.querySelector(".left-menu"), 8 | hamburger = document.querySelector(".hamburger"), 9 | tvShowsList = document.querySelector(".tv-shows__list"), 10 | modal = document.querySelector(".modal"), 11 | tvShows = document.querySelector(".tv-shows"), 12 | tvCardImg = document.querySelector(".tv-card__img"), 13 | modalTitle = document.querySelector(".modal__title"), 14 | genresList = document.querySelector(".genres-list"), 15 | rating = document.querySelector(".rating"), 16 | description = document.querySelector(".description"), 17 | modalLink = document.querySelector(".modal__link"), 18 | searchForm = document.querySelector(".search__form"), 19 | searchFromInput = document.querySelector(".search__form-input"), 20 | preloader = document.querySelector(".preloader"), 21 | dropdown = document.querySelectorAll(".dropdown"), 22 | tvShowsHead = document.querySelector(".tv-shows__head"), 23 | posterWrapper = document.querySelector(".poster__wrapper"), 24 | modalContent = document.querySelector(".modal__content"), 25 | trailer = document.getElementById("trailer"), 26 | headTrailer = document.getElementById("headTrailer"); 27 | 28 | const loading = document.createElement("div"); 29 | loading.className = "loading"; 30 | 31 | //Open/close menu 32 | const closeDropdown = () => { 33 | dropdown.forEach((item) => { 34 | item.classList.remove("active"); 35 | }); 36 | }; 37 | 38 | hamburger.addEventListener("click", () => { 39 | leftMenu.classList.toggle("openMenu"); 40 | hamburger.classList.toggle("open"); 41 | closeDropdown(); 42 | }); 43 | 44 | document.addEventListener("click", (event) => { 45 | if (!event.target.closest(".left-menu")) { 46 | leftMenu.classList.remove("openMenu"); 47 | hamburger.classList.remove("open"); 48 | closeDropdown(); 49 | } 50 | }); 51 | 52 | leftMenu.addEventListener("click", (event) => { 53 | event.preventDefault(); 54 | const target = event.target; 55 | const dropdown = target.closest(".dropdown"); 56 | if (dropdown) { 57 | dropdown.classList.toggle("active"); 58 | leftMenu.classList.add("openMenu"); 59 | hamburger.classList.add("open"); 60 | } 61 | 62 | if (target.closest("#top-rated")) { 63 | dbService.getTopRated().then((response) => renderCard(response, target)); 64 | } 65 | if (target.closest("#popular")) { 66 | dbService.getPopular().then((response) => renderCard(response, target)); 67 | } 68 | if (target.closest("#week")) { 69 | dbService.getWeek().then((response) => renderCard(response, target)); 70 | } 71 | if (target.closest("#today")) { 72 | dbService.getToday().then((response) => renderCard(response, target)); 73 | } 74 | if (target.closest("#search")) { 75 | tvShowsList.textContent = ""; 76 | tvShowsHead.textContent = ""; 77 | } 78 | }); 79 | 80 | // Open modal window 81 | tvShowsList.addEventListener("click", (event) => { 82 | event.preventDefault(); 83 | 84 | const target = event.target; 85 | const card = target.closest(".tv-card"); 86 | 87 | if (card) { 88 | preloader.style.display = "block"; 89 | 90 | dbService 91 | .getTvShow(card.id) 92 | .then((response) => { 93 | if (response.poster_path) { 94 | tvCardImg.src = IMG_URL + response.poster_path; 95 | tvCardImg.alt = response.name; 96 | posterWrapper.style.display = ""; 97 | modalContent.style.paddingLeft = ""; 98 | } else { 99 | posterWrapper.style.display = "none"; 100 | modalContent.style.paddingLeft = "25px"; 101 | } 102 | 103 | modalTitle.textContent = response.name; 104 | genresList.innerHTML = response.genres.reduce((acc, item) => { 105 | return `${acc}
    • ${item.name}
      • `; 106 | }, ""); 107 | rating.textContent = response.vote_average; 108 | description.textContent = response.overview; 109 | modalLink.href = response.homepage; 110 | return response.id; 111 | }) 112 | .then(dbService.getVideo) 113 | .then((response) => { 114 | headTrailer.classList.add("hide"); 115 | trailer.textContent = ""; 116 | if (response.results.length) { 117 | headTrailer.classList.remove("hide"); 118 | response.results.forEach((item) => { 119 | const trailerItem = document.createElement("li"); 120 | trailerItem.innerHTML = ` 121 | 127 |

      ${item.name}

      128 | `; 129 | trailer.append(trailerItem); 130 | }); 131 | } 132 | }) 133 | .then(() => { 134 | document.body.style.overflow = "hidden"; 135 | modal.classList.remove("hide"); 136 | }) 137 | .finally(() => { 138 | preloader.style.display = "none"; 139 | }); 140 | } 141 | }); 142 | 143 | // Close modal window 144 | modal.addEventListener("click", (event) => { 145 | const target = event.target; 146 | const cross = target.closest(".cross"); 147 | const modalArea = target.classList.contains("modal"); 148 | 149 | if (cross || modalArea) { 150 | document.body.style.overflow = ""; 151 | modal.classList.add("hide"); 152 | } 153 | }); 154 | 155 | // Change card 156 | const changeImage = (event) => { 157 | const card = event.target.closest(".tv-shows__item"); 158 | 159 | if (card) { 160 | const img = card.querySelector(".tv-card__img"); 161 | 162 | if (img.dataset.backdrop) { 163 | [img.src, img.dataset.backdrop] = [img.dataset.backdrop, img.src]; 164 | } 165 | } 166 | }; 167 | 168 | tvShowsList.addEventListener("mouseover", changeImage); 169 | tvShowsList.addEventListener("mouseout", changeImage); 170 | 171 | //Cards render 172 | const DBService = class { 173 | getData = async (url) => { 174 | tvShows.append(loading); 175 | const res = await fetch(url); 176 | if (res.ok) { 177 | return res.json(); 178 | } else { 179 | throw new Error(`Не удалось получить данные по адресу: ${url}`); 180 | } 181 | }; 182 | 183 | getTestData = () => { 184 | return this.getData("test.json"); 185 | }; 186 | 187 | getTestCard = () => { 188 | return this.getData("card.json"); 189 | }; 190 | 191 | getSearchResult = (query) => { 192 | return this.getData( 193 | `${SERVER}/search/tv?api_key=${API_KEY}&language=ru-RU&query=${query}&include_adult=false` 194 | ); 195 | }; 196 | 197 | getTvShow = (id) => { 198 | return this.getData(`${SERVER}/tv/${id}?api_key=${API_KEY}&language=ru-RU`); 199 | }; 200 | 201 | getTopRated = () => { 202 | return this.getData( 203 | `${SERVER}/tv/top_rated?api_key=${API_KEY}&language=ru-RU` 204 | ); 205 | }; 206 | 207 | getPopular = () => { 208 | return this.getData( 209 | `${SERVER}/tv/popular?api_key=${API_KEY}&language=ru-RU` 210 | ); 211 | }; 212 | 213 | getToday = () => { 214 | return this.getData( 215 | `${SERVER}/tv/airing_today?api_key=${API_KEY}&language=ru-RU` 216 | ); 217 | }; 218 | 219 | getWeek = () => { 220 | return this.getData( 221 | `${SERVER}/tv/on_the_air?api_key=${API_KEY}&language=ru-RU` 222 | ); 223 | }; 224 | 225 | getVideo = (id) => { 226 | return this.getData( 227 | `${SERVER}/tv/${id}/videos?api_key=${API_KEY}&language=ru-RU` 228 | ); 229 | }; 230 | }; 231 | 232 | const dbService = new DBService(); 233 | 234 | const renderCard = (response, target) => { 235 | tvShowsList.textContent = ""; 236 | 237 | if (!response.total_results) { 238 | loading.remove(); 239 | tvShowsHead.textContent = 240 | "К сожалению по вашему запросу ничего не найдено..."; 241 | tvShowsHead.style.cssText = "color: red"; 242 | return; 243 | } 244 | tvShowsHead.textContent = target ? target.textContent : "Результат поиска:"; 245 | tvShowsHead.style.color = "green"; 246 | 247 | response.results.forEach((item) => { 248 | const { 249 | backdrop_path: backdrop, 250 | name: title, 251 | poster_path: poster, 252 | vote_average: vote, 253 | id, 254 | } = item; 255 | 256 | const posterIMG = poster ? IMG_URL + poster : "img/no-poster.jpg"; 257 | const backdropIMG = backdrop ? IMG_URL + backdrop : ""; 258 | const voteElem = vote ? `${vote}` : ""; 259 | 260 | const card = document.createElement("li"); 261 | card.idTV = id; 262 | card.classList.add("tv-shows__item"); 263 | card.innerHTML = ` 264 | 265 | ${voteElem} 266 | ${title} 272 |

      ${title}

      273 |       274 | `; 275 | loading.remove(); 276 | tvShowsList.append(card); 277 | }); 278 | }; 279 | 280 | searchForm.addEventListener("submit", (event) => { 281 | event.preventDefault(); 282 | const value = searchFromInput.value.trim(); 283 | if (value) { 284 | dbService.getSearchResult(value).then(renderCard); 285 | } 286 | searchFromInput.value = ""; 287 | }); 288 | -------------------------------------------------------------------------------- /test.json: -------------------------------------------------------------------------------- 1 | {"page":1,"total_results":67,"total_pages":4,"results":[{"original_name":"Marvel's Daredevil","genre_ids":[28,80],"name":"Сорвиголова","popularity":30.109,"origin_country":["US"],"vote_count":1785,"first_air_date":"2015-04-10","backdrop_path":"/qsnXwGS7KBbX4JLqHvICngtR8qg.jpg","original_language":"en","id":61889,"vote_average":7.9,"overview":"Ослеплённый с детства (из-за несчастного случая) адвокат Мэтт Мёрдок под именем «Сорвиголова» использует остальные, невероятно усиленные, чувства и бойцовские навыки для борьбы с преступностью на улицах ночной Адской кухни.","poster_path":"/c47xj2YlMKPEMbLXlLriZaRnlXu.jpg"},{"original_name":"Marvel's Runaways","id":67466,"name":"Беглецы","popularity":20.73,"vote_count":241,"vote_average":7.8,"first_air_date":"2017-11-21","poster_path":"/w92yjz1sYzPJdpc7fIAGJJt9nWr.jpg","genre_ids":[10759,80,18,10765],"original_language":"en","backdrop_path":"/7PYAUaJzzUVxS4xiJHFe338vJd1.jpg","overview":"История шести подростков, которые случайно узнают, что их родители входят в состав группы суперзлодеев под названием «Прайд». Эта группа руководит преступным миром Лос-Анджелеса. Дети узнают, что каждый из них, как и их родители, обладает какими-то способностями (а кто-то и вовсе не является человеком). Подростки решают, что не готовы принять такую судьбу, и пытаются сбежать от своих родителей.","origin_country":["US"]},{"original_name":"Marvel's Jessica Jones","id":38472,"name":"Джессика Джонс","popularity":32.033,"vote_count":1103,"vote_average":7.6,"first_air_date":"2015-11-20","poster_path":"/7K54OG3m8AJCC9yUCOc4DHG3kmw.jpg","genre_ids":[10765,18],"original_language":"en","backdrop_path":"/57JFnZqpG5OLgHdZY7Zf9dKcZ5U.jpg","overview":"После трагических событий, оборвавших короткую супергеройскую карьеру Джессики Джонс, девушка пытается восстановить свою личную жизнь и начать карьеру частного детектива, но все меняется, когда в жизнь бывшей героини врывается мужчина из её прошлого, способный контролировать разум людей.","origin_country":["US"]},{"original_name":"Marvel's Inhumans","genre_ids":[18,10759,10765],"name":"Сверхлюди","popularity":15.679,"origin_country":["US"],"vote_count":201,"first_air_date":"2017-09-29","backdrop_path":"/9GNdPoCSzWYeo2eYKFVLvzcG6Wg.jpg","original_language":"en","id":68716,"vote_average":5.5,"overview":"История Королевской семьи, принадлежащей к расе Сверхлюдей. Вследствие военного переворота члены королевской фамилии под предводительством Чёрного Грома вынуждены покинуть свой дом в лунном городе Аттилан и бежать на острова, как в дальнейшем оказывается — Гавайи, где им предстоит спасать не только себя, но и весь мир от гибели.","poster_path":"/y3aFlpB4Vwn1Qz0WOTUOTf6GmPl.jpg"},{"original_name":"Marvel's The Punisher","id":67178,"name":"Каратель","popularity":23.65,"vote_count":767,"vote_average":8.1,"first_air_date":"2017-11-17","poster_path":"/7Zyx8kQr2nEbtSl8XV7ljio4vff.jpg","genre_ids":[10759,80,18],"original_language":"en","backdrop_path":"/sRr5NdPic882T24dNwkiw2VMst6.jpg","overview":"После того, как семья Фрэнка Касла была убита во время перестрелки нескольких банд Нью-Йорка, он решает отомстить и начинает охоту на преступников города. В преступном мире он становится известен как Каратель.","origin_country":["US"]},{"original_name":"Marvel's Agent Carter","genre_ids":[28,12],"name":"Агент Картер","popularity":19.374,"origin_country":["US"],"vote_count":556,"first_air_date":"2015-01-06","backdrop_path":"/ryksnIn006p7lsd83L9Za20TePv.jpg","original_language":"en","id":61550,"vote_average":7.6,"overview":"В 1946 году мир нанес Пегги серьезный удар, когда она оказывается в неудобном для нее положении с возвращением домой мужчин со сражений за границей. Работая на секретную организацию СНР (Стратегический Научный Резерв), Пегги должна найти баланс между административной работой и секретными миссиями для Говарда Старка, одновременно пытаясь жить нормальной жизнью одинокой женщины в Америке после утраты любви всей ее жизни — Стива Роджерса.","poster_path":"/dEbTdu1sytRR4GtrMX5tRiNgLU3.jpg"},{"original_name":"Marvel's Luke Cage","genre_ids":[80,18,10759,10765],"name":"Люк Кейдж","popularity":17.666,"origin_country":["US"],"vote_count":803,"first_air_date":"2016-09-30","backdrop_path":"/j7AHhA0bH5FlVPVMFcKNOLC4PMv.jpg","original_language":"en","id":62126,"vote_average":7,"overview":"На первый взгляд Люк Кейдж — заурядный молчаливый и замкнутый житель Гарлема. Он обитает в скромной холостяцкой квартирке, старается не заводить знакомств, даже работу выбирает самую неприметную — уборщика в парикмахерской или посудомойщика в ночном клубе. На самом деле здоровяк скрывает удивительную тайну — уголовное прошлое принесло ему не только массу проблем и трагическую потерю возлюбленной, но и безграничную физическую силу вкупе со сверхпрочной кожей. Люк старается быть таким, как все, но однажды все равно оказывается втянутым в криминальные разборки, за которыми стоит могущественный преступный авторитет Корнелл Стоукс по прозвищу Коттонмут. Стоукс как раз и является владельцем популярного заведения «Гарлемский рай», в котором работает Люк. Однако он использует легальный бизнес как прикрытие для торговли оружием. Вскоре Кейдж понимает, что этот злодей, заручившись поддержкой кузины-политика Мэрайи Диллард, контролирует весь Гарлем, из-за чего страдают простые жители. Люк решает, что, обладая такой силой, он не имеет права оставаться в стороне и дальше скрываться от своего прошлого. Герой бросает вызов бандитам, чья незаконная деятельность ломает жизни людей в его родном районе. Но сможет ли Кейдж победить это зло? Ведь даже у такого сильного человека, который без труда ломает кости врагам и ловит пули голыми руками, есть свои страхи и демоны, раздирающие его на части…","poster_path":"/xOCM4VgKtjGbCjtKSiJ7W9xYwsB.jpg"},{"original_name":"Marvel's The Defenders","id":62285,"name":"Защитники","popularity":12.806,"vote_count":530,"vote_average":7.1,"first_air_date":"2017-08-18","poster_path":"/gg2FoujYjmG2Oha24sAhd9aogvI.jpg","genre_ids":[10759,80,10765],"original_language":"en","backdrop_path":"/7eV2vDrj1AwlTffUud66v9o0Ytq.jpg","overview":"Сорвиголова, Джессика Джонс, Люк Кейдж и Железный Кулак объединяются для борьбы с преступностью Нью-Йорка.","origin_country":["US"]},{"original_name":"Marvel Rising: Initiation","genre_ids":[16,10759],"name":"Marvel Rising: Initiation","popularity":3.163,"origin_country":["US"],"vote_count":9,"first_air_date":"2018-08-13","backdrop_path":"/gC3tTz9wqXcmlQhEy1NilvVUVpJ.jpg","original_language":"en","id":83043,"vote_average":8.7,"overview":"","poster_path":"/nanDD3g6hF7JcrckygjxCPqViPT.jpg"},{"original_name":"Marvel's Avengers Assemble","genre_ids":[16,10759],"name":"Команда «Мстители»","popularity":15.815,"origin_country":["US"],"vote_count":0,"first_air_date":"2013-11-09","backdrop_path":"/mGHdzDAyMbLaHdNN1Q9H4BgPrP3.jpg","original_language":"en","id":59427,"vote_average":0,"overview":"Сериал воссоединит самую популярную команду супергероев: Железный Человек, Халк, Капитан Америка, Тор, Соколиный Глаз, Черная Вдова, а также новичок Сокол. Впервые в истории анимации команда соберется в таком составе. Ведомые Железным Человеком, герои тренируются и живут вместе в своей новой штаб-квартире в Башне Мстителей. Самый опасные злодеи планеты не имеют ни единого шанса, когда речь идет о Мстителях. Остановить Доктора Дума или отвоевать Асгард, защитить Нью-Йорк от армии Аттумы или победить вампиров Дракулы — Мстители должны работать в команде, чтобы победить.","poster_path":"/aVYPq7FSvsdNQOXVIFnndXJPCXn.jpg"},{"original_name":"Marvel's Agents of S.H.I.E.L.D.","genre_ids":[18,10759,10765],"name":"Агенты «Щ.И.Т.»","popularity":76.961,"origin_country":["US"],"vote_count":1576,"first_air_date":"2013-09-24","backdrop_path":"/80BRASQnT9KT7BkFeEI0EdeRIF3.jpg","original_language":"en","id":1403,"vote_average":6.9,"overview":"Агент Фил Колсон набирает специальную группу для борьбы с преступностью после событий фильма «Мстители». Новоиспечённой команде придётся не только сойтись в оперативной, а также исследовательской работе, но и сойтись характерами, чтобы дать отпор всем врагам организации «Щ.И.Т.»","poster_path":"/vSt6VdhvT9gUa5wc6rkYYAlJpQJ.jpg"},{"original_name":"The Marvel Super Heroes","genre_ids":[16,10759,10762,10765],"name":"The Marvel Super Heroes","popularity":3.639,"origin_country":["CA","US"],"vote_count":2,"first_air_date":"1966-09-05","backdrop_path":"/vhbMTE6UVbIoyiD262wRYwFiNBa.jpg","original_language":"en","id":2164,"vote_average":7.8,"overview":"","poster_path":null},{"original_name":"Marvel's Cloak & Dagger","id":66190,"name":"Плащ и Кинжал","popularity":14.497,"vote_count":224,"vote_average":7.4,"first_air_date":"2018-06-07","poster_path":"/oa50wfpa5Ip1AdPw17epdHuqyq1.jpg","genre_ids":[10759,18,10765],"original_language":"en","backdrop_path":"/iEXdA9n9R7Cne2ZY8PQfAjiGyFP.jpg","overview":"Тэнди Боуэн и Тайрон Джонсон — двое подростков из разных слоев общества, которые недавно узнали о своих сверхспособностях. Тэнди может излучать световые кинжалы, а Тайрон может поглощать других во тьму. Они быстро понимают, что вместе им лучше, чем порознь, но их чувства по отношению друг к другу делают их уже сложный мир еще более запутанным.","origin_country":["US"]},{"original_name":"Marvel's Spider-Man","id":72705,"name":"Человек-паук","popularity":13.716,"vote_count":34,"vote_average":7.4,"first_air_date":"2017-08-19","poster_path":"/dKdcyyHUR5WTMnrbPdYN5y9xPVp.jpg","genre_ids":[16,10765],"original_language":"en","backdrop_path":"/9zIFxEiurX1zVuBffHjwFRJTXDT.jpg","overview":"Умный подросток по имени Питер Паркер укушен радиоактивным пауком в школьной поездке в Оскорп и получает супер-силы. Он становится героем по имени Человек-Паук после смерти своего дяди Бена, и он должен приспособиться к новому образу жизни.","origin_country":["US"]},{"original_name":"Marvel's Iron Fist","genre_ids":[18,10759,10765],"name":"Железный кулак","popularity":6.842,"origin_country":["US"],"vote_count":1022,"first_air_date":"2017-03-17","backdrop_path":"/xHCfWGlxwbtMeeOnTvxUCZRGnkk.jpg","original_language":"en","id":62127,"vote_average":6.3,"overview":"Спустя годы после исчезновения, Дэниэл Рэнд возвращается в Нью-Йорк и начинает борьбу с криминалом, используя свои невообразимые навыки кунг-фу и способность вызывать силу Железного кулака.","poster_path":"/hu9eGudTohsMTChNbqAlXuiKeIU.jpg"},{"original_name":"Ms. Marvel","genre_ids":[18,10759,10765],"name":"Мисс Марвел","popularity":1.126,"origin_country":[],"vote_count":0,"first_air_date":"2021-12-31","backdrop_path":"/qBFixm2UtNUrmOtGbBfwwNw94ir.jpg","original_language":"en","id":92782,"vote_average":0,"overview":"Сюжет сериала вращается вокруг девушки из Нью-Джерси Камалы Хан, которая получает сверхспособности.","poster_path":"/7UGKZ5c0HSwro6n7GChl8uyaIfy.jpg"},{"original_name":"Marvel Future Avengers","genre_ids":[16],"name":"Marvel Future Avengers","popularity":1.07,"origin_country":[],"vote_count":1,"first_air_date":"","backdrop_path":"/y9FhwCVyIqonm2XqwGrFtmalnkv.jpg","original_language":"ja","id":91278,"vote_average":10,"overview":"","poster_path":"/vtRxFVFa4MuhmWtIjbrp1yrxq8g.jpg"},{"original_name":"Marvel's Guardians of the Galaxy","genre_ids":[16,10759],"name":"Стражи Галактики","popularity":12.102,"origin_country":["US"],"vote_count":33,"first_air_date":"2015-09-05","backdrop_path":"/k9WCVeb0cm1gUNkorZXfpF1nsw4.jpg","original_language":"en","id":63181,"vote_average":7.6,"overview":"Прежде чем стать Стражами, каждому из них пришлось преодолеть немало трудностей на своём пути. \n\n \n\n«Стражи Галактики» – анимационный сериал, основанный на серии комиксов Marvel. \n\n \n\nПитер Квилл, дерзкий авантюрист и искатель приключений, которого зрители фильма запомнили как Звездного Лорда, собирается спасать вселенную от разного рода угроз и объединяет свои усилия с квартетом весьма разношерстных персонажей.","poster_path":"/oXwe3wVhdvvxiixL9UJf6PgBybZ.jpg"},{"original_name":"LEGO MARVEL Super Heroes: Maximum Overload","id":62576,"name":"LEGO MARVEL Super Heroes: Maximum Overload","popularity":1.938,"vote_count":4,"vote_average":7.4,"first_air_date":"2013-11-05","poster_path":null,"genre_ids":[16,10762],"original_language":"en","backdrop_path":null,"overview":"","origin_country":["US"]},{"original_name":"Marvel Mash-Up","genre_ids":[],"name":"Marvel Mash-Up","popularity":0.6,"origin_country":["US"],"vote_count":1,"first_air_date":"2012-01-04","backdrop_path":null,"original_language":"en","id":57083,"vote_average":8,"overview":"","poster_path":null}]} --------------------------------------------------------------------------------