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

320 33emagonzalez

Abrir en el editor Publica tu código

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

Recomendado

12 December 2025

Demostración del juego de lucha Ragdoll (HTML, CSS, JS)

13 June 2025

Interfaz de usuario de la aplicación de despertador y cronómetro

27 November 2024

Página de inicio - Apple

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