Seasons of the Year by @AnthonyK - Codewith.it

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

References

<em>Formatta il testo in corsivo/italico enfatizzato
<b>Formatta il testo in grassetto
animationDefinisce i parametri dell'animazione di un elemento o selettore
<caption>Definisce didascalie all'interno di una tabella
<datalist>Crea una lista di opzioni pre-definite ed editabili per elementi di input
<h2>Titolo di intestazione di secondo livello

Users

Log in to search for users

Explore

Find inspiration

Listino Scontistica test

esercitazione 3

Esame informatica

Form per il torneo misto disfo

Tabella con ricerca

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">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Seasons of the Year</title>

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

  <div class="container my-5">

    <!-- Spring Season -->
    <div class="season-container">
      <h3 class="text-center">Spring</h3>
      <div id ="sp" class="row spring">

        <!-- JavaScript Target -->

      </div>
    </div>

    <!-- Summer Season -->
    <div class="season-container">
      <h3 class="text-center">Summer</h3>
      <div class="row summer">

        <!-- JavaScript Target -->

      </div>
    </div>

    <!-- Fall Season -->
    <div class="season-container">
      <h3 class="text-center">Fall</h3>
      <div class="row fall">

        <!-- JavaScript Target -->

      </div>
    </div>

    <!-- Winter Season -->
    <div class="season-container">
      <h3 class="text-center">Winter</h3>
      <div class="row winter">

        <!-- JavaScript Target -->

      </div>
    </div>

  </div>


  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
  <script src="script.js"></script>
</body>

</html>

html {
	height: 100%;
	width: 100%;
}

.season-container {
	margin-bottom: 30px;
}

.month-card {
	border: 1px solid #ddd;
	border-radius: 5px;
	overflow: hidden;
	margin-bottom: 15px;
}

.month-card img {
	width: 100%;
	height: 150px;
	object-fit: cover;
}

.month-card-body {
	padding: 15px;
	text-align: center;
}

var winter = ["December","January","Feburary"];
var spring =["March","April","May"];
var summer =["June","July","August"];
var fall =["September","October","November"];


var winterImages = ["https://offbeatescapades.com/wp-content/uploads/2021/01/the-best-time-of-the-year-to-visit-new-york-december-in-new-york-4-1024x683.jpg","https://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Sneeuw1.jpg/220px-Sneeuw1.jpg","https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ1G5ZO8Vb-deeQ9sFd4xarX1EkxPZd8YiHug&s"];
var springImages = ["https://s7d2.scene7.com/is/image/TWCNews/NYC_Sunny_Roosevelt_Island_Spring_Erick","https://wherearethosemorgans.com/wp-content/uploads/2022/11/New-York-City-In-April-Weather-Rainy.jpg.optimal.jpg","https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQE5KY6mOKWRTaoAhDRIVSNcIQLp9OKzcPa_w&s"];
var summerImages = ["https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTR7hzHiXllxiPfB-hOrJ60tF362vW_-2JxrA&s","https://media.9news.com/assets/KUSA/images/db3efa77-f44a-48a4-bea4-1622db2e67db/db3efa77-f44a-48a4-bea4-1622db2e67db_1920x1080.jpg","https://www.weather2travel.com/images_blog/weather-in-august-in-mediterranean-sea.jpg"];
var fallImages = ["https://cdn.kimkim.com/files/a/images/9388432bd389bce9ecb148f4e610dee89f73dc00/original-87d4d59096156f96769e056813648fad.jpg","https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8qx4mXxIa-_yTkL5ZTyqRvr5iAq3gnifPQA&s","https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-UCEcs0oZyYDSHM9i5WiwNPdoZ-ZfHo1_og&s"];




function displayWinter() {
 const winterSection = document.querySelector('.winter');
  winter.forEach((month, index) => {
    const html = `
      <div class="col-md-4">
        <div class="month-card">
          <img src="${winterImages[index]}" alt="${month}">
          <div class="month-card-body">
            <h5>${month}</h5>
          </div>
        </div>
      </div>
    `;
    winterSection.insertAdjacentHTML('beforeend', html);
  });
}


function displaySpring() {
 const springImg = document.querySelector('.spring');
  spring.forEach((month, index) => {
    const html = `
      <div class="col-md-4">
        <div class="month-card">
          <img src="${springImages[index]}" alt="${month}">
          <div class="month-card-body">
            <h5>${month}</h5>
          </div>
        </div>
      </div>
    `;
    springImg.insertAdjacentHTML('beforeend', html);
  });
}

function displaySummer() {
 const summersec = document.querySelector('.summer');
  summer.forEach((month, index) => {
    const html = `
      <div class="col-md-4">
        <div class="month-card">
          <img src="${summerImages[index]}" alt="${month}">
          <div class="month-card-body">
            <h5>${month}</h5>
          </div>
        </div>
      </div>
    `;
    summersec.insertAdjacentHTML('beforeend', html);
  });
}

function displayFall() {
 const fallball = document.querySelector('.fall');
  fall.forEach((month, index) => {
    const html = `
      <div class="col-md-4">
        <div class="month-card">
          <img src="${fallImages[index]}" alt="${month}">
          <div class="month-card-body">
            <h5>${month}</h5>
          </div>
        </div>
      </div>
    `;
    fallball.insertAdjacentHTML('beforeend', html);
  });
}


function displayAllSeasons() {
	displayWinter();
	 displaySpring();
	 displaySummer();
	displayFall();

}

window.onload = displayAllSeasons;