Modèle HTML de site web de streaming de films

599 33emagonzalez

Ouvrir dans l'éditeur Publiez votre code

Modèle HTML de site web de streaming de films

Recommandé

12 July 2025

Titre collant piloté par défilement

16 October 2025

Arrière-plan animé CSS avec effet de chargement

29 April 2025

Site Web IA (NE FONCTIONNE PAS)

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