Plantilla HTML para sitio web de transmisión de películas

598 33emagonzalez

Abrir en el editor Publica tu código

Plantilla HTML para sitio web de transmisión de películas

Recomendado

28 August 2025

Plantilla HTML para aplicación de transmisión de música con Tailwind

16 March 2024

Código de menú lateral HTML

18 August 2024

Casilla de verificación / ¿Desarrollador o diseñador?

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FlixFree | Stream Movies & TV Shows</title>
    <style>
        :root {
            --primary-color: #e50914;
            --bg-color: #141414;
            --card-bg: #2f2f2f;
            --text-color: #ffffff;
        }

body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            margin: 0;
            padding: 0;
        }

header {
            background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
            padding: 20px 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            box-sizing: border-box;
        }

.logo {
            color: var(--primary-color);
            font-size: 2rem;
            font-weight: bold;
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

nav a {
            color: white;
            text-decoration: none;
            margin-left: 20px;
            font-weight: 500;
            transition: color 0.3s;
        }

nav a:hover {
            color: var(--primary-color);
        }

.hero {
            height: 80vh;
            background: linear-gradient(rgba(0,0,0,0.5), var(--bg-color)), 
                        url('https://images.unsplash.com/photo-1626814026160-2237a95fc5a0?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
            background-size: cover;
            background-position: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0 50px;
        }

.hero h1 {
            font-size: 4rem;
            margin-bottom: 10px;
        }

.hero p {
            max-width: 600px;
            font-size: 1.2rem;
            margin-bottom: 20px;
        }

.btn {
            background-color: var(--primary-color);
            color: white;
            padding: 12px 30px;
            text-decoration: none;
            border-radius: 4px;
            font-weight: bold;
            display: inline-block;
            width: fit-content;
        }

.container {
            padding: 20px 50px;
        }

.section-title {
            font-size: 1.5rem;
            margin-bottom: 20px;
        }

.movie-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
        }

.movie-card {
            background-color: var(--card-bg);
            border-radius: 8px;
            overflow: hidden;
            transition: transform 0.3s;
            cursor: pointer;
            position: relative;
        }

.movie-card:hover {
            transform: scale(1.05);
        }

.movie-card img {
            width: 100%;
            height: 300px;
            object-fit: cover;
        }

.movie-info {
            padding: 10px;
        }

.movie-info h3 {
            margin: 0;
            font-size: 1rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

.movie-info span {
            font-size: 0.8rem;
            color: #aaa;
        }

.rating {
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgba(0,0,0,0.8);
            padding: 2px 8px;
            border-radius: 4px;
            color: #ffbd00;
            font-weight: bold;
            font-size: 0.9rem;
        }

footer {
            padding: 50px;
            text-align: center;
            color: #666;
            border-top: 1px solid #333;
            margin-top: 50px;
        }

@media (max-width: 768px) {
            header { padding: 20px; }
            .hero h1 { font-size: 2.5rem; }
            .container { padding: 20px; }
        }
    </style>
</head>
<body>

<header>
        <a href="#" class="logo">FlixFree</a>
        <nav>
            <a href="#">Home</a>
            <a href="#">Movies</a>
            <a href="#">TV Shows</a>
            <a href="#">New & Popular</a>
        </nav>
    </header>

<section class="hero">
        <h1>Interstellar</h1>
        <p>A team of explorers travel through a wormhole in space in an attempt to ensure humanity's survival. Experience the cinematic masterpiece for free.</p>
        <a href="#" class="btn">Play Now</a>
    </section>

<div class="container">
        <h2 class="section-title">Trending Now</h2>
        <div class="movie-grid">
            
            <div class="movie-card">
                <div class="rating">8.6</div>
                <img src="https://images.unsplash.com/photo-1536440136628-849c177e76a1?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Movie Poster">
                <div class="movie-info">
                    <h3>The Dark Knight</h3>
                    <span>2008 • Action</span>
                </div>
            </div>
            
            <div class="movie-card">
                <div class="rating">8.8</div>
                <img src="https://images.unsplash.com/photo-1440404653325-ab127d49abc1?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Movie Poster">
                <div class="movie-info">
                    <h3>Inception</h3>
                    <span>2010 • Sci-Fi</span>
                </div>
            </div>
            
            <div class="movie-card">
                <div class="rating">8.1</div>
                <img src="https://images.unsplash.com/photo-1594909122845-11baa439b7bf?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Movie Poster">
                <div class="movie-info">
                    <h3>Blade Runner 2049</h3>
                    <span>2017 • Sci-Fi</span>
                </div>
            </div>
            
            <div class="movie-card">
                <div class="rating">7.9</div>
                <img src="https://images.unsplash.com/photo-1509281373149-e957c6296406?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Movie Poster">
                <div class="movie-info">
                    <h3>Pulp Fiction</h3>
                    <span>1994 • Crime</span>
                </div>
            </div>
            
            <div class="movie-card">
                <div class="rating">8.4</div>
                <img src="https://images.unsplash.com/photo-1616530940355-351fabd9524b?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Movie Poster">
                <div class="movie-info">
                    <h3>The Matrix</h3>
                    <span>1999 • Action</span>
                </div>
            </div>
        </div>

<h2 class="section-title" style="margin-top: 40px;">Recently Added</h2>
        <div class="movie-grid">
            <div class="movie-card">
                <div class="rating">7.5</div>
                <img src="https://images.unsplash.com/photo-1517604931442-7e0c8ed2963c?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Movie Poster">
                <div class="movie-info">
                    <h3>Cinema Paradiso</h3>
                    <span>1988 • Drama</span>
                </div>
            </div>
            <div class="movie-card">
                <div class="rating">9.2</div>
                <img src="https://images.unsplash.com/photo-1485846234645-a62644f84728?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Movie Poster">
                <div class="movie-info">
                    <h3>The Godfather</h3>
                    <span>1972 • Crime</span>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

CSS