Un código de alejandrokundrah

Abrir en el editor Publica tu código

Recomendado

3 March 2025

Tienda de comercio electrónico

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

Un código de alejandrokundrah

Recomendado

Cuadro de búsqueda

Ninja de la fruta

Tienda de comercio electrónico

HTML

CSS

JS

Recomendado

Cuadro de búsqueda

Ninja de la fruta

Tienda de comercio electrónico

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS