├── .gitignore ├── README.md ├── assets ├── ai │ ├── lg.ai │ ├── md.ai │ ├── sm.ai │ ├── xl.ai │ └── xs.ai ├── css │ └── style.css ├── images │ ├── avatar.jpg │ ├── better-call-saul.jpg │ ├── capitao-america-o-primeiro-vingador.jpg │ ├── eu-sou-a-lenda.jpg │ ├── full-banner.jpg │ ├── greys-anatomy.jpg │ ├── guardios-da-galaxia-banner.webp │ ├── guardios-da-galaxia.jpg │ ├── hamburger.gif │ ├── header_gradient.png │ ├── homem-de-ferro-2.jpg │ ├── homem-de-ferro.jpg │ ├── logo.png │ ├── nosso-planeta.jpg │ ├── o-menino-que-descobriu-o-vento.jpg │ ├── the-rain.jpg │ ├── thor-o-mundo-sombrio.jpg │ └── vingadores-era-de-ultron.jpg ├── package-lock.json └── videos │ ├── Iron Man 2 Official Trailer #1 (2010) - Marvel Movie HD.mp4 │ ├── capitao_america_guerra_civil_1080p.mp4 │ ├── capitao_america_o_primeiro_vingador_trailer__360p.mp4 │ ├── homem_de_ferro_3_trailer_oficial_1080p.mp4 │ └── trailer_guardioes_da_galaxia_1080p.mp4 ├── favicon.ico ├── index.html ├── package-lock.json ├── package.json └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Optional REPL history 57 | .node_repl_history 58 | 59 | # Output of 'npm pack' 60 | *.tgz 61 | 62 | # Yarn Integrity file 63 | .yarn-integrity 64 | 65 | # dotenv environment variables file 66 | .env 67 | .env.test 68 | 69 | # parcel-bundler cache (https://parceljs.org/) 70 | .cache 71 | 72 | # next.js build output 73 | .next 74 | 75 | # nuxt.js build output 76 | .nuxt 77 | 78 | # vuepress build output 79 | .vuepress/dist 80 | 81 | # Serverless directories 82 | .serverless/ 83 | 84 | # FuseBox cache 85 | .fusebox/ 86 | 87 | # DynamoDB Local files 88 | .dynamodb/ -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Netflix Clone 2 | 3 | O projeto Netflix clone é educacional e foi desenvolvido como parte do curso online Bootstrap 4 - Curso Completo com 6 Projetos reais que será lançado em breve e usado na [playlist de Angular 8 no canal da Hcode no YouTube](https://www.youtube.com/playlist?list=PL-u8JWLN6xasUXsbNeDZSMQTq5T4_Utko). 4 | 5 | ![enter image description here](https://firebasestorage.googleapis.com/v0/b/hcode-com-br.appspot.com/o/netflix-clone.jpg?alt=media&token=c72c552c-cccb-41d3-b90b-50743875f063) -------------------------------------------------------------------------------- /assets/ai/lg.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hcodebr/netflix-layout-clone/5ae8c01a9e84345f4af1590b68fbf2bfdcc0a6a4/assets/ai/lg.ai -------------------------------------------------------------------------------- /assets/ai/md.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hcodebr/netflix-layout-clone/5ae8c01a9e84345f4af1590b68fbf2bfdcc0a6a4/assets/ai/md.ai -------------------------------------------------------------------------------- /assets/ai/sm.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hcodebr/netflix-layout-clone/5ae8c01a9e84345f4af1590b68fbf2bfdcc0a6a4/assets/ai/sm.ai -------------------------------------------------------------------------------- /assets/ai/xl.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hcodebr/netflix-layout-clone/5ae8c01a9e84345f4af1590b68fbf2bfdcc0a6a4/assets/ai/xl.ai -------------------------------------------------------------------------------- /assets/ai/xs.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hcodebr/netflix-layout-clone/5ae8c01a9e84345f4af1590b68fbf2bfdcc0a6a4/assets/ai/xs.ai -------------------------------------------------------------------------------- /assets/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #1B1B1B!important; 3 | padding-top: 60px; 4 | } 5 | .backdrop { 6 | background-color: rgba(0,0,0,.4); 7 | position: fixed; 8 | top: 60px; 9 | left: 0; 10 | right: 0; 11 | bottom: 0; 12 | z-index: 999; 13 | } 14 | .navbar { 15 | z-index: 1000; 16 | } 17 | .navbar.bg-dark { 18 | background-color: rgba(0,0,0,.6)!important; 19 | } 20 | .navbar .form-control { 21 | background-color: #1B1B1B!important; 22 | color: #FFF; 23 | border-color: #FFF; 24 | border-radius: 0; 25 | max-width: 115px; 26 | line-height: 28px; 27 | height: 28px; 28 | } 29 | .navbar img { 30 | height: 24px; 31 | } 32 | .navbar ul.sidebar { 33 | color: #999898; 34 | max-width: 250px; 35 | background-color: #1B1B1B!important; 36 | position: absolute; 37 | top: 60px; 38 | left: -250px; 39 | height: calc(100vh - 60px); 40 | overflow-y: auto; 41 | transition: all 0.1s ease-out; 42 | opacity: .5; 43 | } 44 | .navbar.sidebar-open ul { 45 | left: 0; 46 | opacity: 1; 47 | } 48 | .navbar ul li { 49 | padding: .3em 1em; 50 | } 51 | .navbar ul li.divider { 52 | border-bottom: #999898 1px solid; 53 | margin: .3em auto; 54 | } 55 | .navbar-dark .navbar-toggler { 56 | color: #FFF; 57 | border: none; 58 | padding-left: 0; 59 | padding-right: 0; 60 | } 61 | .media-avatar img { 62 | height: 38px; 63 | } 64 | .full-banner { 65 | background-image: url('../images/full-banner.jpg'); 66 | min-height: 120px; 67 | background-size: contain; 68 | background-repeat: no-repeat; 69 | background-position: right; 70 | } 71 | .full-banner small { 72 | color: #999898; 73 | } 74 | .full-banner .btn-primary { 75 | background-color: #E30F19; 76 | border-radius: 0; 77 | border: none; 78 | min-width: 100px; 79 | } 80 | .list-titles img { 81 | min-width: 160px; 82 | } 83 | h2 { 84 | color: #e5e5e5; 85 | } 86 | footer { 87 | color: #999898; 88 | } 89 | .title-item { 90 | position: relative; 91 | margin-right: 10px; 92 | } 93 | .title-item img { 94 | width: 100%; 95 | } 96 | .title-item video { 97 | width: 100%; 98 | display: none; 99 | position: absolute; 100 | top: 0; 101 | left: 0; 102 | } 103 | .title-item:hover .items { 104 | opacity: 1; 105 | } 106 | .title-item:hover img { 107 | opacity: 0; 108 | } 109 | .title-item:hover video { 110 | display: block; 111 | } 112 | .title-item .items { 113 | position: absolute; 114 | bottom: 0; 115 | left: 0; 116 | right: 0; 117 | color: #fff; 118 | height: 100%; 119 | padding: 10px; 120 | background: -prefix-linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,.7)); 121 | background: linear-gradient(to bottom, rgba(0,0,0,.1), rgba(0,0,0,.7)); 122 | display: flex; 123 | align-items: flex-end; 124 | transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); 125 | opacity: 0; 126 | } 127 | .title-item h2 { 128 | color: #fff; 129 | font-size: 20px; 130 | margin: 5px auto; 131 | } 132 | .title-item .btn-play { 133 | background: none; 134 | border: #fff 2px solid; 135 | border-radius: 16px; 136 | display: flex; 137 | justify-content: center; 138 | align-items: center; 139 | width: 32px; 140 | height: 32px; 141 | } 142 | .title-item .btn-play i { 143 | color: red; 144 | } 145 | .title-item ul { 146 | display: flex; 147 | flex-direction: row; 148 | justify-content: flex-start; 149 | list-style: none; 150 | padding: 0; 151 | margin: 0; 152 | } 153 | .title-item ul li { 154 | margin-right: 10px; 155 | } 156 | .relevance { 157 | color: #3FAD56; 158 | font-weight: bold; 159 | } 160 | .age { 161 | padding: 2px; 162 | font-weight: bold; 163 | display: flex; 164 | justify-content: center; 165 | align-items: center; 166 | width: 24px; 167 | font-size: 12px; 168 | height: 24px; 169 | border-radius: 2px; 170 | color: #FFF; 171 | } 172 | .age-free { 173 | background-color: rgb(0, 156, 76); 174 | } 175 | .age-free:before { 176 | content: 'L'; 177 | } 178 | .age-12 { 179 | background-color: #CDA521; 180 | color: #000; 181 | } 182 | .age-12:before { 183 | content: '12'; 184 | } 185 | .age-14 { 186 | background-color: rgb(231, 121, 43); 187 | } 188 | .age-14:before { 189 | content: '14'; 190 | } 191 | .age-16 { 192 | background-color: rgb(215, 38, 45); 193 | } 194 | .age-16:before { 195 | content: '16'; 196 | } 197 | .age-18 { 198 | background-color: rgb(19, 17, 17); 199 | } 200 | .age-18:before { 201 | content: '18'; 202 | } 203 | .parts { 204 | font-weight: bold; 205 | } 206 | @media (min-width: 576px) { 207 | .full-banner { 208 | min-height: 256px; 209 | } 210 | .navbar .form-control { 211 | max-width: 180px; 212 | } 213 | } 214 | @media (min-width: 768px) { 215 | .full-banner .d-flex { 216 | align-items: center; 217 | } 218 | } 219 | @media (min-width: 992px) { 220 | body { 221 | padding-top: 0; 222 | } 223 | .navbar.bg-dark { 224 | background-color: transparent!important; 225 | background-image: url('../images/header_gradient.png'); 226 | background-repeat: repeat-x; 227 | } 228 | .full-banner { 229 | min-height: 50vh; 230 | } 231 | .full-banner p { 232 | color: #999898; 233 | max-width: 50vw; 234 | } 235 | .navbar-brand.flex-grow-1 { 236 | flex-grow: initial!important; 237 | } 238 | .navbar ul.nav { 239 | flex-grow: 1!important; 240 | } 241 | .navbar ul.nav .active { 242 | color: #E30F19!important; 243 | font-weight: bold; 244 | } 245 | .navbar img { 246 | height: 34px; 247 | } 248 | } 249 | @media (min-width: 1200px) { 250 | .navbar ul.nav li { 251 | padding: 0; 252 | } 253 | .navbar ul.nav { 254 | color: rgba(255, 255, 255, .5)!important; 255 | } 256 | .navbar ul.nav .active { 257 | color: rgba(255, 255, 255, 1)!important; 258 | font-weight: bold; 259 | } 260 | } -------------------------------------------------------------------------------- /assets/images/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hcodebr/netflix-layout-clone/5ae8c01a9e84345f4af1590b68fbf2bfdcc0a6a4/assets/images/avatar.jpg -------------------------------------------------------------------------------- /assets/images/better-call-saul.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hcodebr/netflix-layout-clone/5ae8c01a9e84345f4af1590b68fbf2bfdcc0a6a4/assets/images/better-call-saul.jpg -------------------------------------------------------------------------------- /assets/images/capitao-america-o-primeiro-vingador.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hcodebr/netflix-layout-clone/5ae8c01a9e84345f4af1590b68fbf2bfdcc0a6a4/assets/images/capitao-america-o-primeiro-vingador.jpg -------------------------------------------------------------------------------- /assets/images/eu-sou-a-lenda.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hcodebr/netflix-layout-clone/5ae8c01a9e84345f4af1590b68fbf2bfdcc0a6a4/assets/images/eu-sou-a-lenda.jpg -------------------------------------------------------------------------------- /assets/images/full-banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hcodebr/netflix-layout-clone/5ae8c01a9e84345f4af1590b68fbf2bfdcc0a6a4/assets/images/full-banner.jpg -------------------------------------------------------------------------------- /assets/images/greys-anatomy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hcodebr/netflix-layout-clone/5ae8c01a9e84345f4af1590b68fbf2bfdcc0a6a4/assets/images/greys-anatomy.jpg -------------------------------------------------------------------------------- /assets/images/guardios-da-galaxia-banner.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hcodebr/netflix-layout-clone/5ae8c01a9e84345f4af1590b68fbf2bfdcc0a6a4/assets/images/guardios-da-galaxia-banner.webp -------------------------------------------------------------------------------- /assets/images/guardios-da-galaxia.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hcodebr/netflix-layout-clone/5ae8c01a9e84345f4af1590b68fbf2bfdcc0a6a4/assets/images/guardios-da-galaxia.jpg -------------------------------------------------------------------------------- /assets/images/hamburger.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hcodebr/netflix-layout-clone/5ae8c01a9e84345f4af1590b68fbf2bfdcc0a6a4/assets/images/hamburger.gif -------------------------------------------------------------------------------- /assets/images/header_gradient.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hcodebr/netflix-layout-clone/5ae8c01a9e84345f4af1590b68fbf2bfdcc0a6a4/assets/images/header_gradient.png -------------------------------------------------------------------------------- /assets/images/homem-de-ferro-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hcodebr/netflix-layout-clone/5ae8c01a9e84345f4af1590b68fbf2bfdcc0a6a4/assets/images/homem-de-ferro-2.jpg -------------------------------------------------------------------------------- /assets/images/homem-de-ferro.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hcodebr/netflix-layout-clone/5ae8c01a9e84345f4af1590b68fbf2bfdcc0a6a4/assets/images/homem-de-ferro.jpg -------------------------------------------------------------------------------- /assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hcodebr/netflix-layout-clone/5ae8c01a9e84345f4af1590b68fbf2bfdcc0a6a4/assets/images/logo.png -------------------------------------------------------------------------------- /assets/images/nosso-planeta.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hcodebr/netflix-layout-clone/5ae8c01a9e84345f4af1590b68fbf2bfdcc0a6a4/assets/images/nosso-planeta.jpg -------------------------------------------------------------------------------- /assets/images/o-menino-que-descobriu-o-vento.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hcodebr/netflix-layout-clone/5ae8c01a9e84345f4af1590b68fbf2bfdcc0a6a4/assets/images/o-menino-que-descobriu-o-vento.jpg -------------------------------------------------------------------------------- /assets/images/the-rain.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hcodebr/netflix-layout-clone/5ae8c01a9e84345f4af1590b68fbf2bfdcc0a6a4/assets/images/the-rain.jpg -------------------------------------------------------------------------------- /assets/images/thor-o-mundo-sombrio.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hcodebr/netflix-layout-clone/5ae8c01a9e84345f4af1590b68fbf2bfdcc0a6a4/assets/images/thor-o-mundo-sombrio.jpg -------------------------------------------------------------------------------- /assets/images/vingadores-era-de-ultron.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hcodebr/netflix-layout-clone/5ae8c01a9e84345f4af1590b68fbf2bfdcc0a6a4/assets/images/vingadores-era-de-ultron.jpg -------------------------------------------------------------------------------- /assets/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "requires": true, 3 | "lockfileVersion": 1, 4 | "dependencies": { 5 | "bootstrap": { 6 | "version": "4.3.1", 7 | "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.3.1.tgz", 8 | "integrity": "sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag==" 9 | }, 10 | "jquery": { 11 | "version": "3.4.1", 12 | "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz", 13 | "integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw==" 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /assets/videos/Iron Man 2 Official Trailer #1 (2010) - Marvel Movie HD.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hcodebr/netflix-layout-clone/5ae8c01a9e84345f4af1590b68fbf2bfdcc0a6a4/assets/videos/Iron Man 2 Official Trailer #1 (2010) - Marvel Movie HD.mp4 -------------------------------------------------------------------------------- /assets/videos/capitao_america_guerra_civil_1080p.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hcodebr/netflix-layout-clone/5ae8c01a9e84345f4af1590b68fbf2bfdcc0a6a4/assets/videos/capitao_america_guerra_civil_1080p.mp4 -------------------------------------------------------------------------------- /assets/videos/capitao_america_o_primeiro_vingador_trailer__360p.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hcodebr/netflix-layout-clone/5ae8c01a9e84345f4af1590b68fbf2bfdcc0a6a4/assets/videos/capitao_america_o_primeiro_vingador_trailer__360p.mp4 -------------------------------------------------------------------------------- /assets/videos/homem_de_ferro_3_trailer_oficial_1080p.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hcodebr/netflix-layout-clone/5ae8c01a9e84345f4af1590b68fbf2bfdcc0a6a4/assets/videos/homem_de_ferro_3_trailer_oficial_1080p.mp4 -------------------------------------------------------------------------------- /assets/videos/trailer_guardioes_da_galaxia_1080p.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hcodebr/netflix-layout-clone/5ae8c01a9e84345f4af1590b68fbf2bfdcc0a6a4/assets/videos/trailer_guardioes_da_galaxia_1080p.mp4 -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hcodebr/netflix-layout-clone/5ae8c01a9e84345f4af1590b68fbf2bfdcc0a6a4/favicon.ico -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Netflix 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 80 | 81 |
82 | 83 |
84 | 85 |
86 |
87 |
88 |

Vingadores: Ultimato

89 | 90 | 2019 91 | 12 92 | 182min 93 | 94 |

Após Thanos eliminar metade das criaturas vivas, os Vingadores têm de lidar com a perda de amigos e entes queridos. Com Tony Stark vagando perdido no espaço sem água e comida, Steve Rogers e Natasha Romanov lideram a resistência contra o titã louco.

95 | Assistir 96 |
97 |
98 |
99 | 100 |
101 | 102 |
103 | 104 |

Adicionados recentemente

105 | 106 |
107 | 108 |
109 | 110 | Título 111 |
112 |
113 | 114 |

Guardiões da Galaxia

115 |
    116 |
  • 98% relevante
    • 117 |
  • 118 |
  • 2 partes
    • 119 |
120 |
    121 |
  • Épico
    • 122 |
  • Filme de fantasia
    • 123 |
  • Viagem no espaço
    • 124 |
125 |
126 |
127 | 128 |
129 | 130 |
131 | 132 | Título 133 |
134 |
135 | 136 |

Guardiões da Galaxia

137 |
    138 |
  • 98% relevante
    • 139 |
  • 140 |
  • 2 partes
    • 141 |
142 |
    143 |
  • Épico
    • 144 |
  • Filme de fantasia
    • 145 |
  • Viagem no espaço
    • 146 |
147 |
148 |
149 | 150 |
151 | 152 |
153 | 154 | Título 155 |
156 |
157 | 158 |

Guardiões da Galaxia

159 |
    160 |
  • 98% relevante
    • 161 |
  • 162 |
  • 2 partes
    • 163 |
164 |
    165 |
  • Épico
    • 166 |
  • Filme de fantasia
    • 167 |
  • Viagem no espaço
    • 168 |
169 |
170 |
171 | 172 |
173 | 174 |
175 | 176 |
177 | 178 |
179 | 180 |

Em alta

181 | 182 |
183 | 184 |
185 | 186 | Título 187 |
188 |
189 | 190 |

Guardiões da Galaxia

191 |
    192 |
  • 98% relevante
    • 193 |
  • 194 |
  • 2 partes
    • 195 |
196 |
    197 |
  • Épico
    • 198 |
  • Filme de fantasia
    • 199 |
  • Viagem no espaço
    • 200 |
201 |
202 |
203 | 204 |
205 | 206 |
207 | 208 | Título 209 |
210 |
211 | 212 |

Guardiões da Galaxia

213 |
    214 |
  • 98% relevante
    • 215 |
  • 216 |
  • 2 partes
    • 217 |
218 |
    219 |
  • Épico
    • 220 |
  • Filme de fantasia
    • 221 |
  • Viagem no espaço
    • 222 |
223 |
224 |
225 | 226 |
227 | 228 |
229 | 230 | Título 231 |
232 |
233 | 234 |

Guardiões da Galaxia

235 |
    236 |
  • 98% relevante
    • 237 |
  • 238 |
  • 2 partes
    • 239 |
240 |
    241 |
  • Épico
    • 242 |
  • Filme de fantasia
    • 243 |
  • Viagem no espaço
    • 244 |
245 |
246 |
247 | 248 |
249 | 250 |
251 | 252 |
253 | 254 |
255 | 256 |

Continuar assistindo como Djalma Sindeaux

257 | 258 | 259 |
260 | 261 |
262 | 263 | Título 264 |
265 |
266 | 267 |

Guardiões da Galaxia

268 |
    269 |
  • 98% relevante
    • 270 |
  • 271 |
  • 2 partes
    • 272 |
273 |
    274 |
  • Épico
    • 275 |
  • Filme de fantasia
    • 276 |
  • Viagem no espaço
    • 277 |
278 |
279 |
280 | 281 |
282 | 283 |
284 | 285 | Título 286 |
287 |
288 | 289 |

Guardiões da Galaxia

290 |
    291 |
  • 98% relevante
    • 292 |
  • 293 |
  • 2 partes
    • 294 |
295 |
    296 |
  • Épico
    • 297 |
  • Filme de fantasia
    • 298 |
  • Viagem no espaço
    • 299 |
300 |
301 |
302 | 303 |
304 | 305 |
306 | 307 | Título 308 |
309 |
310 | 311 |

Guardiões da Galaxia

312 |
    313 |
  • 98% relevante
    • 314 |
  • 315 |
  • 2 partes
    • 316 |
317 |
    318 |
  • Épico
    • 319 |
  • Filme de fantasia
    • 320 |
  • Viagem no espaço
    • 321 |
322 |
323 |
324 | 325 |
326 | 327 |
328 | 329 |
330 | 331 |
332 | 333 | 341 | 392 | 393 | 394 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "netflix-layout-clone", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "bootstrap": { 8 | "version": "4.3.1", 9 | "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.3.1.tgz", 10 | "integrity": "sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag==" 11 | }, 12 | "jquery": { 13 | "version": "3.4.1", 14 | "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz", 15 | "integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw==" 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "netflix-layout-clone", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "dependencies": { 7 | "bootstrap": "^4.3.1", 8 | "jquery": "^3.4.1" 9 | }, 10 | "devDependencies": {}, 11 | "scripts": { 12 | "test": "echo \"Error: no test specified\" && exit 1" 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": "git+https://github.com/hcodebr/netflix-layout-clone.git" 17 | }, 18 | "author": "Hcode", 19 | "license": "ISC", 20 | "bugs": { 21 | "url": "https://github.com/hcodebr/netflix-layout-clone/issues" 22 | }, 23 | "homepage": "https://github.com/hcodebr/netflix-layout-clone#readme" 24 | } 25 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | .title-item { 2 | position: relative; 3 | margin-right: 10px; 4 | } 5 | .title-item:hover .items { 6 | opacity: 1; 7 | } 8 | .title-item img { 9 | width: 100%; 10 | } 11 | .title-item .items { 12 | position: absolute; 13 | bottom: 0; 14 | left: 0; 15 | right: 0; 16 | color: #fff; 17 | height: 100%; 18 | padding: 10px; 19 | background: -prefix-linear-gradient(top, rgba(0,0,0,.1), rgba(0,0,0,.7)); 20 | background: linear-gradient(to bottom, rgba(0,0,0,.1), rgba(0,0,0,.7)); 21 | display: flex; 22 | align-items: flex-end; 23 | transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); 24 | opacity: 0; 25 | } 26 | .title-item h2 { 27 | color: #fff; 28 | font-size: 20px; 29 | margin: 5px auto; 30 | } 31 | .title-item .btn-play { 32 | background: none; 33 | border: #fff 2px solid; 34 | border-radius: 16px; 35 | display: flex; 36 | justify-content: center; 37 | align-items: center; 38 | width: 32px; 39 | height: 32px; 40 | } 41 | .title-item .btn-play i { 42 | color: red; 43 | } 44 | .title-item ul { 45 | display: flex; 46 | flex-direction: row; 47 | justify-content: flex-start; 48 | list-style: none; 49 | padding: 0; 50 | margin: 0; 51 | } 52 | .title-item ul li { 53 | margin-right: 10px; 54 | } 55 | .relevance { 56 | color: #3FAD56; 57 | font-weight: bold; 58 | } 59 | .age { 60 | padding: 2px; 61 | font-weight: bold; 62 | display: flex; 63 | justify-content: center; 64 | align-items: center; 65 | width: 24px; 66 | font-size: 12px; 67 | height: 24px; 68 | border-radius: 2px; 69 | } 70 | .age-12 { 71 | background-color: #CDA521; 72 | color: #000; 73 | } 74 | .age-12:before { 75 | content: '12'; 76 | } 77 | .parts { 78 | font-weight: bold; 79 | } --------------------------------------------------------------------------------