Seasons Grid by @jowinb - Codewith.it

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

Referenze

<form>Crea un modulo/form HTML per consentire all'utente di inviare dati al server
<thead>Definisce un gruppo di intestazione all'interno di una tabella.
<base>Specifica l'URL di base per tutti gli URL relativi all'interno della pagina.
<q>Indica una parte di testo come citazione breve
<video>Integra e controlla video in una pagina HTML
<a>Inserisce link e collegamenti ipertestuali

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Menu di Pizzeria Rebeka a Modena -

scheda paziente es esame

esercizio 2 esame

Even Odd High Low Guessing Game

RICORDATI DI ME

Un Giorno a Napoli: Itinerario Det

Heads Or Tails Tally

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