Un codice di alejandrokundrah

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

21 January 2025

Pagina di destinazione dell'agenzia immobiliare

3 April 2025

<!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;
  }
}

Un codice di alejandrokundrah

Consigliato

Pagina di destinazione dell'agenzia immobiliare

Un codice di simohdrca

Disposizione delle colonne

HTML

CSS

JS

Consigliato

Pagina di destinazione dell'agenzia immobiliare

Un codice di simohdrca

Disposizione delle colonne

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS