Un code par alejandrokundrah

1,404 alejandrokundrah

Ouvrir dans l'éditeur Publiez votre code

Recommandé

10 December 2024

Un code par hunganh

10 January 2026

Code HTML et CSS du formulaire de connexion animé

23 April 2025

Générateur de mots de passe par SENAPI

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FETFLIX - Sikandar</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
</head>
<body>
  <header class="header">
    <div class="header-container">
      <div class="logo">
        <h1>FETFLIX</h1>
      </div>
      <nav class="nav">
        <ul class="nav-list">
          <li><a href="#trailers">Trailers</a></li>
          <li><a href="#more">More to Watch</a></li>
          <li><a href="#plans">Plans</a></li>
        </ul>
      </nav>
      <div class="auth">
        <button class="sign-in-btn">Sign In</button>
      </div>
    </div>
  </header>

<div class="hero-text">
        <h1 class="title">Sikandar</h1>
        <div class="cta-section">
          <div class="email-signup">
            <input type="email" placeholder="Enter your email address" class="email-input">
            <button class="join-btn">Join Now</button>
          </div>
          <p class="pricing-text">Endless entertainment starting at USD 2.99</p>
        </div>
      </div>
    </div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  background-color: #000;
  color: #fff;
  overflow-x: hidden;
}

/* Header Styles */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, transparent 100%);
  padding: 20px 0;
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
}

.logo h1 {
  color: #e50914;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 2px;
}

.nav-list {
  display: flex;
  list-style: none;
  gap: 30px;
  background: rgba(0,0,0,0.8);
  padding: 12px 24px;
  border-radius: 25px;
  backdrop-filter: blur(10px);
}

.nav-list a {
  color: #fff;
  text-decoration: none;
  font-weight: 400;
  transition: color 0.3s ease;
}

.nav-list a:hover {
  color: #e50914;
}

.sign-in-btn {
  background: transparent;
  color: #fff;
  border: 1px solid #fff;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
}

.sign-in-btn:hover {
  background: #fff;
  color: #000;
}

/* Hero Section */
.hero-section {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, #1a1a1a 0%, #000 70%);
}

.mysterious-face {
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: 120%;
  background: radial-gradient(ellipse at center, 
    rgba(255, 215, 0, 0.1) 0%,
    rgba(255, 215, 0, 0.05) 30%,
    transparent 60%);
  opacity: 0.3;
}

.mysterious-face::before {
  content: '';
  position: absolute;
  top: 20%;
  left: 45%;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, #ffd700 0%, transparent 70%);
  border-radius: 50%;
  box-shadow: 0 0 100px rgba(255, 215, 0, 0.3);
}

.mysterious-face::after {
  content: '';
  position: absolute;
  top: 20%;
  right: 45%;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, #ffd700 0%, transparent 70%);
  border-radius: 50%;
  box-shadow: 0 0 100px rgba(255, 215, 0, 0.3);
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, 
    rgba(0,0,0,0.7) 0%, 
    rgba(0,0,0,0.3) 50%, 
    rgba(0,0,0,0.7) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  max-width: 1200px;
  width: 100%;
  padding: 0 40px;
  gap: 60px;
}

.hero-characters {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 20px;
}

.main-character {
  position: relative;
}

.character-image {
  width: 300px;
  height: 450px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8);
  filter: brightness(1.1) contrast(1.1);
}

.supporting-cast {
  margin-left: -50px;
}

.cast-image {
  width: 150px;
  height: 225px;
  object-fit: cover;
  border-radius: 8px;
  opacity: 0.8;
  box-shadow: 0 15px 40px rgba(0,0,0,0.6);
}

.hero-text {
  flex: 1;
  text-align: center;
}

.title {
  font-family: 'Playfair Display', serif;
  font-size: 5rem;
  font-weight: 700;
  color: #ffd700;
  text-shadow: 3px 3px 6px rgba(0,0,0,0.8);
  margin-bottom: 40px;
  letter-spacing: 3px;
}

.cta-section {
  max-width: 400px;
  margin: 0 auto;
}

.email-signup {
  display: flex;
  margin-bottom: 15px;
  gap: 0;
}

.email-input {
  flex: 1;
  padding: 15px 20px;
  border: none;
  border-radius: 5px 0 0 5px;
  font-size: 16px;
  background: rgba(255,255,255,0.9);
  color: #000;
}

.email-input::placeholder {
  color: #666;
}

.join-btn {
  background: #e50914;
  color: #fff;
  border: none;
  padding: 15px 30px;
  border-radius: 0 5px 5px 0;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
}

.join-btn:hover {
  background: #c40913;
}

.pricing-text {
  color: #ccc;
  font-size: 16px;
  font-weight: 300;
}

/* Video Controls */
.video-controls {
  position: fixed;
  bottom: 30px;
  right: 30px;
  display: flex;
  gap: 15px;
  z-index: 1000;
}

.control-btn {
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.control-btn:hover {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.6);
  transform: scale(1.1);
}

.play-btn:hover {
  background: rgba(229, 9, 20, 0.8);
  border-color: #e50914;
}

/* Responsive Design */
@media (max-width: 768px) {
  .header-container {
    padding: 0 20px;
    flex-wrap: wrap;
    gap: 20px;
  }

.nav-list {
    gap: 15px;
    padding: 8px 16px;
  }

.hero-content {
    flex-direction: column;
    text-align: center;
    padding: 0 20px;
    gap: 40px;
  }

.hero-characters {
    justify-content: center;
  }

.character-image {
    width: 200px;
    height: 300px;
  }

.cast-image {
    width: 100px;
    height: 150px;
    margin-left: -30px;
  }

.title {
    font-size: 3rem;
    margin-bottom: 30px;
  }

.email-signup {
    flex-direction: column;
    gap: 10px;
  }

.email-input {
    border-radius: 5px;
  }

.join-btn {
    border-radius: 5px;
  }

.video-controls {
    bottom: 20px;
    right: 20px;
    gap: 10px;
  }

.control-btn {
    width: 45px;
    height: 45px;
  }
}

@media (max-width: 480px) {
  .logo h1 {
    font-size: 24px;
  }

.title {
    font-size: 2.5rem;
  }

.nav-list {
    flex-wrap: wrap;
    justify-content: center;
  }
}