Seasons Grid by @jowinb - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

headersDetermina la relazione tra celle e celle di intestazione di una tabella.
text/plainDefinisce un metodo di non codifica dei valori di un form
<strong>Definisce una parte del testo importante con formattazione in grassetto.
autoplayAttributo HTML autoplay per l'avvio automatico degli elementi audio e video
<source>Il tag HTML <source> si usa per indicare una o più risorse multimediali per elementi media
<h1>Titolo di intestazione di primo livello

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Download 7-Zip for PC Windows

GoUp Fitness Opz 2

venezia esercizio pretest

Esercizio sui cicli

Geyser NEW 25 Litri

Progetto DAPPS(2)

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Seasons Grid</title>

  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f2f2f2;
      padding: 20px;
    }

    h1 {
      text-align: center;
      font-size: 32px;
    }

    .season-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px;
      margin-top: 30px;
    }

    .season {
      background-color: #ffffff;
      border: 3px solid #333;
      border-radius: 10px;
      padding: 15px;
      text-align: center;
    }

    .season h2 {
      font-size: 24px;
      margin-bottom: 10px;
    }

    .months {
      font-size: 16px;
      margin-bottom: 15px;
    }

    .images {
      display: flex;
      justify-content: space-between;
      gap: 5px;
    }

    .images img {
      width: 90px;
      height: 90px;
      object-fit: cover;
      border-radius: 8px;
      border: 2px solid #555;
    }
  </style>
</head>

<body>

  <h1>? Seasons of the Year</h1>

  <div class="season-grid"></div>

  <script>
    // ====== Predefined Season Variables ======
    const Winter = "Winter";
    const Spring = "Spring";
    const Summer = "Summer";
    const Fall   = "Fall";

    // ====== Season Data (Arrays) ======
    const seasons = [
      {
        name: Winter,
        months: ["December", "January", "February"],
        images: [
          "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRW5PhbJbrp0n6QteWzyb9zSmRloegMKTy6gQ&s",
          "https://images.unsplash.com/photo-1519681393784-d120267933ba",
          "https://images.unsplash.com/photo-1542601906990-b4d3fb778b09"
        ]
      },
      {
        name: Spring,
        months: ["March", "April", "May"],
        images: [
          "https://images.unsplash.com/photo-1526045612212-70caf35c14df",
          "https://images.unsplash.com/photo-1490750967868-88aa4486c946",
          "https://images.unsplash.com/photo-1501004318641-b39e6451bec6"
        ]
      },
      {
        name: Summer,
        months: ["June", "July", "August"],
        images: [
          "https://images.unsplash.com/photo-1507525428034-b723cf961d3e",
          "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee",
          "https://images.unsplash.com/photo-1501785888041-af3ef285b470"
        ]
      },
      {
        name: Fall,
        months: ["September", "October", "November"],
        images: [
          "https://images.unsplash.com/photo-1501973801540-537f08ccae7b",
          "https://images.unsplash.com/photo-1477414348463-c0eb7f1359b6",
          "https://images.unsplash.com/photo-1508162245510-bf2772371e86"
        ]
      }
    ];

    // ====== DOM Selection ======
    const grid = document.querySelector(".season-grid");
    grid.innerHTML = "";

    // ====== Single Loop (Advanced Challenge) ======
    for (const season of seasons) {

      let imagesHTML = "";

      season.images.forEach((imgSrc, index) => {
        imagesHTML += `<img src="${imgSrc}" alt="${season.months[index]}">`;
      });

      const seasonHTML = `
        <div class="season">
          <h2>${season.name}</h2>
          <div class="months">${season.months.join(" • ")}</div>
          <div class="images">
            ${imagesHTML}
          </div>
        </div>
      `;

      grid.insertAdjacentHTML("beforeend", seasonHTML);
    }
  </script>

</body>
</html>

/* ===== Global Improvements ===== */
body {
  background: linear-gradient(to bottom, #e3f2fd, #f9f9f9);
}

/* Smooth hover animation */
.season {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.season:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
}

/* Month text styling */
.months {
  font-weight: bold;
  letter-spacing: 0.5px;
}

/* Image hover effect */
.images img {
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.images img:hover {
  transform: scale(1.08);
  border-color: #000;
}

/* ===== Season Color Themes ===== */
.season:nth-child(1) {
  background-color: #e3f2fd; /* Winter */
  border-color: #2196f3;
}

.season:nth-child(2) {
  background-color: #e8f5e9; /* Spring */
  border-color: #4caf50;
}

.season:nth-child(3) {
  background-color: #fffde7; /* Summer */
  border-color: #fbc02d;
}

.season:nth-child(4) {
  background-color: #fff3e0; /* Fall */
  border-color: #ef6c00;
}

/* Season title emphasis */
.season h2 {
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Responsive image sizing */
@media (max-width: 600px) {
  .images {
    flex-direction: column;
    align-items: center;
  }

  .images img {
    width: 100%;
    height: 160px;
  }
}