Un code par ashimadison8

1,351 ashimadison8

Ouvrir dans l'éditeur Publiez votre code

Recommandé

27 June 2025

Un code de Mete

17 July 2025

Art polygonal SVG : code graphique vectoriel

27 May 2025

Un code par alejandrokundrah

HTML

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