Un code par ashimadison8

1,230 ashimadison8

Ouvrir dans l'éditeur Publiez votre code

Recommandé

5 December 2024

Un code par logicalcode2

19 April 2025

Un code de Metehan

11 September 2025

Exemple de bloc de code d'animation CSS

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