Seasons Grid by @jowinb - Codewith.it

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

References

<meta>Definisce i meta dati di una pagina web.
methodDetermina il metodo di invio dei dati di un form al server
<li>Inserisce voci all'interno di una lista
<!doctype>Dichiara la versione del linguaggio di sviluppo della pagina
_parentApre collegamenti ipertestuali nell'elemento genitore
_topApre collegamenti ipertestuali nell'elemento parent assoluto

Users

Log in to search for users

Explore

Find inspiration

quello che si vede in alto nella c

pianoforte.html

Ethical hacking

tabella ennesima

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

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