Un código de alejandrokundrah

232 alejandrokundrah

Abrir en el editor Publica tu código

Recomendado

24 November 2024

Tienda de zapatos

17 December 2024

Dirección de las páginas de inicio de sesión

23 August 2024

lector de mp3 en html, css y js

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

Recomendado

Tienda de zapatos

Dirección de las páginas de inicio de sesión

lector de mp3 en html, css y js

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS