425 lines
27 KiB
HTML
425 lines
27 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pt-br">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Netflix Clone</title>
|
|
<!-- Tailwind CSS v4 via CDN -->
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
netflix: {
|
|
red: '#e50914',
|
|
black: '#141414',
|
|
dark: '#181818',
|
|
gray: '#808080',
|
|
light: '#e5e5e5'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style type="text/tailwindcss">
|
|
@layer utilities {
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
.movie-card:hover .movie-info {
|
|
opacity: 1;
|
|
}
|
|
.movie-card:hover {
|
|
transform: scale(1.05);
|
|
z-index: 10;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-netflix-black text-white min-h-screen">
|
|
<!-- Header -->
|
|
<header class="fixed top-0 w-full z-50 transition-all duration-500 bg-gradient-to-b from-black/80 to-transparent">
|
|
<div class="container mx-auto px-4 py-4 flex items-center justify-between">
|
|
<div class="flex items-center">
|
|
<h1 class="text-netflix-red text-3xl font-bold mr-10">NETFLIXCLONE</h1>
|
|
<nav class="hidden md:block">
|
|
<ul class="flex space-x-6">
|
|
<li><a href="#" class="text-white font-medium">Início</a></li>
|
|
<li><a href="#" class="text-netflix-light/80 hover:text-white">Séries</a></li>
|
|
<li><a href="#" class="text-netflix-light/80 hover:text-white">Filmes</a></li>
|
|
<li><a href="#" class="text-netflix-light/80 hover:text-white">Bombando</a></li>
|
|
<li><a href="#" class="text-netflix-light/80 hover:text-white">Minha lista</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
<div class="flex items-center space-x-4">
|
|
<button class="text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
</button>
|
|
<button class="text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
|
</svg>
|
|
</button>
|
|
<div class="relative">
|
|
<img src="https://placehold.co/32" alt="Perfil" class="rounded">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Hero Section (Filme em Destaque) -->
|
|
<section class="relative h-screen">
|
|
<div class="absolute inset-0 bg-gradient-to-r from-black/70 to-transparent z-10"></div>
|
|
<div class="absolute inset-0 bg-gradient-to-t from-netflix-black to-transparent z-10 mt-[70vh]"></div>
|
|
<img src="https://placehold.co/1920x1080/000000/FFFFFF?text=Filme+em+Destaque" alt="Filme em Destaque" class="w-full h-full object-cover">
|
|
|
|
<div class="absolute bottom-[20%] left-0 z-20 px-4 md:px-16 max-w-2xl">
|
|
<h2 class="text-5xl font-bold mb-4">Stranger Things</h2>
|
|
<p class="text-lg mb-6">
|
|
Quando um garoto desaparece, uma pequena cidade descobre um mistério envolvendo
|
|
experimentos secretos, forças sobrenaturais e uma garotinha estranha.
|
|
</p>
|
|
<div class="flex space-x-4">
|
|
<a href="#player" class="bg-white text-black py-2 px-6 rounded flex items-center font-bold hover:bg-white/80 transition">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
|
|
</svg>
|
|
Assistir
|
|
</a>
|
|
<button class="bg-gray-500/70 text-white py-2 px-6 rounded flex items-center font-bold hover:bg-gray-600/70 transition">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
|
|
</svg>
|
|
Mais informações
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Catálogo de Filmes -->
|
|
<section class="py-10 px-4 md:px-16 -mt-16 relative z-30">
|
|
<h3 class="text-xl md:text-2xl font-bold mb-4">Populares na Netflix</h3>
|
|
<div class="flex overflow-x-scroll scrollbar-hide space-x-4 pb-4 justify-center">
|
|
<a href="assistir.html">
|
|
<div class="movie-card flex-none w-[180px] transition-transform duration-300 relative">
|
|
<img src="https://placehold.co/180x270/000000/FFFFFF?text=Filme+1" alt="Filme 1" class="rounded-md w-full">
|
|
<div class="movie-info absolute inset-0 bg-gradient-to-t from-black to-transparent rounded-md p-4 flex flex-col justify-end opacity-0 transition-opacity duration-300">
|
|
<h4 class="font-bold">Filme 1</h4>
|
|
<div class="flex items-center text-xs mt-1">
|
|
<span class="text-green-500 font-bold">97% relevante</span>
|
|
<span class="mx-2 border border-white/40 px-1">16</span>
|
|
<span>2023</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="assistir.html">
|
|
<div class="movie-card flex-none w-[180px] transition-transform duration-300 relative">
|
|
<img src="https://placehold.co/180x270/000000/FFFFFF?text=Filme+1" alt="Filme 1" class="rounded-md w-full">
|
|
<div class="movie-info absolute inset-0 bg-gradient-to-t from-black to-transparent rounded-md p-4 flex flex-col justify-end opacity-0 transition-opacity duration-300">
|
|
<h4 class="font-bold">Filme 1</h4>
|
|
<div class="flex items-center text-xs mt-1">
|
|
<span class="text-green-500 font-bold">97% relevante</span>
|
|
<span class="mx-2 border border-white/40 px-1">16</span>
|
|
<span>2023</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="assistir.html">
|
|
<div class="movie-card flex-none w-[180px] transition-transform duration-300 relative">
|
|
<img src="https://placehold.co/180x270/000000/FFFFFF?text=Filme+1" alt="Filme 1" class="rounded-md w-full">
|
|
<div class="movie-info absolute inset-0 bg-gradient-to-t from-black to-transparent rounded-md p-4 flex flex-col justify-end opacity-0 transition-opacity duration-300">
|
|
<h4 class="font-bold">Filme 1</h4>
|
|
<div class="flex items-center text-xs mt-1">
|
|
<span class="text-green-500 font-bold">97% relevante</span>
|
|
<span class="mx-2 border border-white/40 px-1">16</span>
|
|
<span>2023</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="assistir.html">
|
|
<div class="movie-card flex-none w-[180px] transition-transform duration-300 relative">
|
|
<img src="https://placehold.co/180x270/000000/FFFFFF?text=Filme+1" alt="Filme 1" class="rounded-md w-full">
|
|
<div class="movie-info absolute inset-0 bg-gradient-to-t from-black to-transparent rounded-md p-4 flex flex-col justify-end opacity-0 transition-opacity duration-300">
|
|
<h4 class="font-bold">Filme 1</h4>
|
|
<div class="flex items-center text-xs mt-1">
|
|
<span class="text-green-500 font-bold">97% relevante</span>
|
|
<span class="mx-2 border border-white/40 px-1">16</span>
|
|
<span>2023</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="assistir.html">
|
|
<div class="movie-card flex-none w-[180px] transition-transform duration-300 relative">
|
|
<img src="https://placehold.co/180x270/000000/FFFFFF?text=Filme+1" alt="Filme 1" class="rounded-md w-full">
|
|
<div class="movie-info absolute inset-0 bg-gradient-to-t from-black to-transparent rounded-md p-4 flex flex-col justify-end opacity-0 transition-opacity duration-300">
|
|
<h4 class="font-bold">Filme 1</h4>
|
|
<div class="flex items-center text-xs mt-1">
|
|
<span class="text-green-500 font-bold">97% relevante</span>
|
|
<span class="mx-2 border border-white/40 px-1">16</span>
|
|
<span>2023</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="assistir.html">
|
|
<div class="movie-card flex-none w-[180px] transition-transform duration-300 relative">
|
|
<img src="https://placehold.co/180x270/000000/FFFFFF?text=Filme+1" alt="Filme 1" class="rounded-md w-full">
|
|
<div class="movie-info absolute inset-0 bg-gradient-to-t from-black to-transparent rounded-md p-4 flex flex-col justify-end opacity-0 transition-opacity duration-300">
|
|
<h4 class="font-bold">Filme 1</h4>
|
|
<div class="flex items-center text-xs mt-1">
|
|
<span class="text-green-500 font-bold">97% relevante</span>
|
|
<span class="mx-2 border border-white/40 px-1">16</span>
|
|
<span>2023</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="py-6 px-4 md:px-16">
|
|
<h3 class="text-xl md:text-2xl font-bold mb-4">Séries em alta</h3>
|
|
<div class="flex overflow-x-scroll scrollbar-hide space-x-4 pb-4 justify-center">
|
|
<a href="assistir.html">
|
|
<div class="movie-card flex-none w-[180px] transition-transform duration-300 relative">
|
|
<img src="https://placehold.co/180x270/000000/FFFFFF?text=Série+1" alt="Série 1" class="rounded-md w-full">
|
|
<div class="movie-info absolute inset-0 bg-gradient-to-t from-black to-transparent rounded-md p-4 flex flex-col justify-end opacity-0 transition-opacity duration-300">
|
|
<h4 class="font-bold">Série 1</h4>
|
|
<div class="flex items-center text-xs mt-1">
|
|
<span class="text-green-500 font-bold">99% relevante</span>
|
|
<span class="mx-2 border border-white/40 px-1">16</span>
|
|
<span>3 temporadas</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="assistir.html">
|
|
<div class="movie-card flex-none w-[180px] transition-transform duration-300 relative">
|
|
<img src="https://placehold.co/180x270/000000/FFFFFF?text=Série+1" alt="Série 1" class="rounded-md w-full">
|
|
<div class="movie-info absolute inset-0 bg-gradient-to-t from-black to-transparent rounded-md p-4 flex flex-col justify-end opacity-0 transition-opacity duration-300">
|
|
<h4 class="font-bold">Série 1</h4>
|
|
<div class="flex items-center text-xs mt-1">
|
|
<span class="text-green-500 font-bold">99% relevante</span>
|
|
<span class="mx-2 border border-white/40 px-1">16</span>
|
|
<span>3 temporadas</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="assistir.html">
|
|
<div class="movie-card flex-none w-[180px] transition-transform duration-300 relative">
|
|
<img src="https://placehold.co/180x270/000000/FFFFFF?text=Série+1" alt="Série 1" class="rounded-md w-full">
|
|
<div class="movie-info absolute inset-0 bg-gradient-to-t from-black to-transparent rounded-md p-4 flex flex-col justify-end opacity-0 transition-opacity duration-300">
|
|
<h4 class="font-bold">Série 1</h4>
|
|
<div class="flex items-center text-xs mt-1">
|
|
<span class="text-green-500 font-bold">99% relevante</span>
|
|
<span class="mx-2 border border-white/40 px-1">16</span>
|
|
<span>3 temporadas</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="assistir.html">
|
|
<div class="movie-card flex-none w-[180px] transition-transform duration-300 relative">
|
|
<img src="https://placehold.co/180x270/000000/FFFFFF?text=Série+1" alt="Série 1" class="rounded-md w-full">
|
|
<div class="movie-info absolute inset-0 bg-gradient-to-t from-black to-transparent rounded-md p-4 flex flex-col justify-end opacity-0 transition-opacity duration-300">
|
|
<h4 class="font-bold">Série 1</h4>
|
|
<div class="flex items-center text-xs mt-1">
|
|
<span class="text-green-500 font-bold">99% relevante</span>
|
|
<span class="mx-2 border border-white/40 px-1">16</span>
|
|
<span>3 temporadas</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="assistir.html">
|
|
<div class="movie-card flex-none w-[180px] transition-transform duration-300 relative">
|
|
<img src="https://placehold.co/180x270/000000/FFFFFF?text=Série+1" alt="Série 1" class="rounded-md w-full">
|
|
<div class="movie-info absolute inset-0 bg-gradient-to-t from-black to-transparent rounded-md p-4 flex flex-col justify-end opacity-0 transition-opacity duration-300">
|
|
<h4 class="font-bold">Série 1</h4>
|
|
<div class="flex items-center text-xs mt-1">
|
|
<span class="text-green-500 font-bold">99% relevante</span>
|
|
<span class="mx-2 border border-white/40 px-1">16</span>
|
|
<span>3 temporadas</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="assistir.html">
|
|
<div class="movie-card flex-none w-[180px] transition-transform duration-300 relative">
|
|
<img src="https://placehold.co/180x270/000000/FFFFFF?text=Série+1" alt="Série 1" class="rounded-md w-full">
|
|
<div class="movie-info absolute inset-0 bg-gradient-to-t from-black to-transparent rounded-md p-4 flex flex-col justify-end opacity-0 transition-opacity duration-300">
|
|
<h4 class="font-bold">Série 1</h4>
|
|
<div class="flex items-center text-xs mt-1">
|
|
<span class="text-green-500 font-bold">99% relevante</span>
|
|
<span class="mx-2 border border-white/40 px-1">16</span>
|
|
<span>3 temporadas</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="py-6 px-4 md:px-16">
|
|
<h3 class="text-xl md:text-2xl font-bold mb-4">Originais Netflix</h3>
|
|
<div class="flex overflow-x-scroll scrollbar-hide space-x-4 pb-4 justify-center">
|
|
<a href="assistir.html">
|
|
<div class="movie-card flex-none w-[180px] transition-transform duration-300 relative">
|
|
<img src="https://placehold.co/180x270/000000/FFFFFF?text=Original+1" alt="Original 1" class="rounded-md w-full">
|
|
<div class="movie-info absolute inset-0 bg-gradient-to-t from-black to-transparent rounded-md p-4 flex flex-col justify-end opacity-0 transition-opacity duration-300">
|
|
<h4 class="font-bold">Original 1</h4>
|
|
<div class="flex items-center text-xs mt-1">
|
|
<span class="text-green-500 font-bold">97% relevante</span>
|
|
<span class="mx-2 border border-white/40 px-1">16</span>
|
|
<span>2023</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="assistir.html">
|
|
<div class="movie-card flex-none w-[180px] transition-transform duration-300 relative">
|
|
<img src="https://placehold.co/180x270/000000/FFFFFF?text=Original+1" alt="Original 1" class="rounded-md w-full">
|
|
<div class="movie-info absolute inset-0 bg-gradient-to-t from-black to-transparent rounded-md p-4 flex flex-col justify-end opacity-0 transition-opacity duration-300">
|
|
<h4 class="font-bold">Original 1</h4>
|
|
<div class="flex items-center text-xs mt-1">
|
|
<span class="text-green-500 font-bold">97% relevante</span>
|
|
<span class="mx-2 border border-white/40 px-1">16</span>
|
|
<span>2023</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="assistir.html">
|
|
<div class="movie-card flex-none w-[180px] transition-transform duration-300 relative">
|
|
<img src="https://placehold.co/180x270/000000/FFFFFF?text=Original+1" alt="Original 1" class="rounded-md w-full">
|
|
<div class="movie-info absolute inset-0 bg-gradient-to-t from-black to-transparent rounded-md p-4 flex flex-col justify-end opacity-0 transition-opacity duration-300">
|
|
<h4 class="font-bold">Original 1</h4>
|
|
<div class="flex items-center text-xs mt-1">
|
|
<span class="text-green-500 font-bold">97% relevante</span>
|
|
<span class="mx-2 border border-white/40 px-1">16</span>
|
|
<span>2023</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="assistir.html">
|
|
<div class="movie-card flex-none w-[180px] transition-transform duration-300 relative">
|
|
<img src="https://placehold.co/180x270/000000/FFFFFF?text=Original+1" alt="Original 1" class="rounded-md w-full">
|
|
<div class="movie-info absolute inset-0 bg-gradient-to-t from-black to-transparent rounded-md p-4 flex flex-col justify-end opacity-0 transition-opacity duration-300">
|
|
<h4 class="font-bold">Original 1</h4>
|
|
<div class="flex items-center text-xs mt-1">
|
|
<span class="text-green-500 font-bold">97% relevante</span>
|
|
<span class="mx-2 border border-white/40 px-1">16</span>
|
|
<span>2023</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="assistir.html">
|
|
<div class="movie-card flex-none w-[180px] transition-transform duration-300 relative">
|
|
<img src="https://placehold.co/180x270/000000/FFFFFF?text=Original+1" alt="Original 1" class="rounded-md w-full">
|
|
<div class="movie-info absolute inset-0 bg-gradient-to-t from-black to-transparent rounded-md p-4 flex flex-col justify-end opacity-0 transition-opacity duration-300">
|
|
<h4 class="font-bold">Original 1</h4>
|
|
<div class="flex items-center text-xs mt-1">
|
|
<span class="text-green-500 font-bold">97% relevante</span>
|
|
<span class="mx-2 border border-white/40 px-1">16</span>
|
|
<span>2023</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="assistir.html">
|
|
<div class="movie-card flex-none w-[180px] transition-transform duration-300 relative">
|
|
<img src="https://placehold.co/180x270/000000/FFFFFF?text=Original+1" alt="Original 1" class="rounded-md w-full">
|
|
<div class="movie-info absolute inset-0 bg-gradient-to-t from-black to-transparent rounded-md p-4 flex flex-col justify-end opacity-0 transition-opacity duration-300">
|
|
<h4 class="font-bold">Original 1</h4>
|
|
<div class="flex items-center text-xs mt-1">
|
|
<span class="text-green-500 font-bold">97% relevante</span>
|
|
<span class="mx-2 border border-white/40 px-1">16</span>
|
|
<span>2023</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="py-10 px-4 md:px-16 text-netflix-gray">
|
|
<div class="max-w-6xl mx-auto">
|
|
<div class="flex space-x-6 mb-6">
|
|
<a href="#" class="text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z"/>
|
|
</svg>
|
|
</a>
|
|
<a href="#" class="text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723 10.054 10.054 0 01-3.127 1.184 4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
|
|
</svg>
|
|
</a>
|
|
<a href="#" class="text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
|
|
</svg>
|
|
</a>
|
|
<a href="#" class="text-white">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8">
|
|
<div>
|
|
<ul class="space-y-2 text-sm">
|
|
<li><a href="#" class="hover:underline">Audiodescrição</a></li>
|
|
<li><a href="#" class="hover:underline">Relações com investidores</a></li>
|
|
<li><a href="#" class="hover:underline">Avisos legais</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<ul class="space-y-2 text-sm">
|
|
<li><a href="#" class="hover:underline">Central de ajuda</a></li>
|
|
<li><a href="#" class="hover:underline">Carreiras</a></li>
|
|
<li><a href="#" class="hover:underline">Preferências de cookies</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<ul class="space-y-2 text-sm">
|
|
<li><a href="#" class="hover:underline">Cartão pré-pago</a></li>
|
|
<li><a href="#" class="hover:underline">Termos de uso</a></li>
|
|
<li><a href="#" class="hover:underline">Informações corporativas</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<ul class="space-y-2 text-sm">
|
|
<li><a href="#" class="hover:underline">Imprensa</a></li>
|
|
<li><a href="#" class="hover:underline">Privacidade</a></li>
|
|
<li><a href="#" class="hover:underline">Entre em contato</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="border border-netflix-gray px-2 py-1 text-sm mb-6">Código do serviço</button>
|
|
|
|
<p class="text-sm">© 1997-2023 Netflix, Inc.</p>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html> |