Modèle HTML de site web de streaming de films

321 33emagonzalez

Ouvrir dans l'éditeur Publiez votre code

Modèle HTML de site web de streaming de films

Recommandé

30 January 2025

Boutons Dégradé Hover

12 December 2025

Simulateur de pizzeria FNAF

24 August 2025

Solutions numériques : Web, mobile, marketing et design

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