Seasons Grid by @jowinb - Codewith.it

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

Referenze

srcIndica la provenienza di una risorsa esterna (tramite URL).
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
<h5>Titolo di intestazione di quinto livello
_selfApre collegamenti ipertestuali nella stessa pagina del browser
<base>Specifica l'URL di base per tutti gli URL relativi all'interno della pagina.
<a>Inserisce link e collegamenti ipertestuali

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

esercizio perfetto

I benefici dell\\

form per il torneo misto disfor s

Tabella base (lezione 10)

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