A Code by ashimadison8

Open In Editor Publish Your Code

<div class="movie-card">
  <div class="movie-img-container">
    <div class="movie-img" style="background-position: center;"></div>
    <div class="movie-overlay"></div>
  </div>
  <div class="movie-content">
    <div class="title-row">
      <h1 class="movie-title">Pulp Fiction <span class="year-badge">1994</span></h1>
      <span class="rating-badge">R</span>
    </div>

<div class="genres">
      <span class="genre-tag">Crime</span>
      <span class="genre-tag">Drama</span>
      <span class="genre-tag">Black Comedy</span>
    </div>

<div class="description-section">
      <h5 class="section-title">SUMMARY</h5>
      <p class="movie-description" id="description">
        The lives of two mob hitmen, a boxer, a gangster and his wife, and a pair of diner bandits intertwine in four tales of violence and redemption. With its nonlinear storytelling, eclectic dialogue and ironic mix of humour and violence, Pulp Fiction is widely regarded as Tarantino's masterpiece. The film weaves together stories of Los Angeles mobsters, fringe players, small-time criminals and a mysterious briefcase, all told out of chronological order.
      </p>
    </div>

<div class="cast-section">
      <h5 class="section-title">CAST</h5>
      <div class="cast-list">
        <div class="cast-item">
          <img src="https://assets.codepen.io/406785/travolta.jpg" class="cast-photo" alt="" />
          <span class="cast-name">John Travolta</span>
        </div>
        <div class="cast-item">
          <img src="https://assets.codepen.io/406785/jackson.jpeg" class="cast-photo" alt="" />
          <span class="cast-name">Samuel L. Jackson</span>
        </div>
        <div class="cast-item">
          <img src="https://assets.codepen.io/406785/thurman.jpg" class="cast-photo" alt="" />
          <span class="cast-name">Uma Thurman</span>
        </div>
        <div class="cast-item">
          <img src="https://assets.codepen.io/406785/willis.jpeg" class="cast-photo" alt="" />
          <span class="cast-name">Bruce Willis</span>
        </div>
      </div>
    </div>

<div class="action-row">
      <div class="watch-btn">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="white">
          <path d="M8 5v14l11-7z"/>
        </svg>
        <span class="watch-btn-text">WATCH TRAILER</span>
      </div>

CSS

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

:root {
  --brand-color: #fe4141;
  --dark-color: #1e1b26;
  --accent-color: #e7e7e7;
  --text-light: #b4b4b4;
  --text-lighter: #d7d7d7;
  --section-space: 16px;
  --card-padding: 24px;
  --poster-overlay: rgba(30, 27, 38, 0.8);
}

body {
  background: linear-gradient(
    rgba(30, 27, 38, 0.95), 
    rgba(30, 27, 38, 0.95)
  ), url("https://assets.codepen.io/406785/pulp2.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: repeat;
  font-family: 'Open Sans', sans-serif;
  color: var(--accent-color);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

a {
  text-decoration: none;
  color: var(--accent-color);
}

.movie-card {
  width: 100%;
/*   max-width: 450px; */
  background-color: var(--dark-color);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6);
  position: relative;
}

.movie-img-container {
  height: 380px;
  position: relative;
  overflow: hidden;
}

.movie-img {
  height: 100%;
  width: 100%;
  background: url("https://assets.codepen.io/406785/pulp1.avif") no-repeat;
  background-position: 37% 23% !important;
}

.movie-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(30,27,38,0) 30%,
    rgba(30,27,38,0.7) 60%,
    rgba(30,27,38,1) 100%
  );
  z-index: 1;
}

.movie-content {
  padding: var(--card-padding);
  position: relative;
  margin-top: -120px;
  z-index: 2;
}

.title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
}

.movie-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  flex: 1;
  line-height: 1.2;
}

.year-badge {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-lighter);
  margin-left: 8px;
  opacity: 0.85;
}

.rating-badge {
  background-color: var(--brand-color);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  margin-top: 3px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  letter-spacing: 0.5px;
}

.metadata {
  display: flex;
  align-items: center;
  margin: 8px 0 var(--section-space);
}

.duration {
  font-size: 13px;
  color: var(--text-light);
  margin-right: 16px;
  display: flex;
  align-items: center;
}

.duration-icon {
  width: 14px;
  height: 14px;
  fill: var(--text-light);
  margin-right: 4px;
}

.genres {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--section-space);
}

.genre-tag {
  background-color: rgba(254, 65, 65, 0.1);
  border: 1px solid rgba(254, 65, 65, 0.3);
  padding: 3px 10px;
  border-radius: 16px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-lighter);
  transition: all 0.2s ease;
}

.ratings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--section-space);
  padding-bottom: var(--section-space);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.star-rating {
  display: flex;
  align-items: center;
}

.stars {
  display: flex;
}

.star {
  width: 16px;
  height: 16px;
  margin-right: 2px;
}

.star-filled {
  fill: #FFD700;
}

.star-half {
  fill: url(#halfGradient);
}

.star-empty {
  fill: rgba(255, 255, 255, 0.2);
}

.rating-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-lighter);
  margin-left: 8px;
}

.likes {
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.05);
  padding: 5px 10px;
  border-radius: 20px;
  transition: background-color 0.2s ease;
}

.heart-icon {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  fill: var(--brand-color);
}

.likes-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-light);
}

.description-section {
  margin-bottom: var(--section-space);
}

.section-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 10px;
  color: var(--text-lighter);
}

.movie-description {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-light);
  text-align: justify;
}

.cast-section {
  margin-bottom: var(--section-space);
}

.cast-list {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.cast-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60px;
}

.cast-photo {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  margin-bottom: 5px;
  object-fit: cover;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.cast-name {
  font-size: 10px;
  text-align: center;
  color: var(--text-light);
  max-width: 100%;
  white-space: wrap;
}

.action-row {
  display: grid;
  grid-template-columns: 1fr repeat(3, auto);
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}

.watch-btn {
  background-color: var(--brand-color);
  border: none;
  border-radius: 4px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(254, 65, 65, 0.3);
}

.watch-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(254, 65, 65, 0.4);
  background-color: #ff5151;
}

.watch-btn-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: white;
  margin-left: 8px;
}

.action-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  transition: all 0.2s ease;
}

.action-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.action-icon {
  width: 18px;
  height: 18px;
  fill: var(--text-lighter);
}

@media (min-width: 768px) {
  .movie-card {
    max-width: 650px;
    display: flex;
  }

.movie-img-container {
    width: 40%;
    height: auto;
  }

.movie-content {
    width: 60%;
    margin-top: 0;
  }

.movie-overlay {
    background: linear-gradient(
      90deg, 
      rgba(30,27,38,0) 0%, 
      var(--poster-overlay) 100%
    );
  }
}

A Code by ashimadison8

Recommended

HTML Button Hover Effects Example

A Code by shasshan7236

Piedra, papel o tijera

HTML

CSS

JS

Recommended

HTML Button Hover Effects Example

A Code by shasshan7236

Piedra, papel o tijera

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS