Seasons of the Year by @AnthonyK - Codewith.it

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

References

<address> Definisce una sezione contenente indirizzi, contatti e informazioni
<hr>Inserisce una linea orizzontale
<a>Inserisce link e collegamenti ipertestuali
<!doctype>Dichiara la versione del linguaggio di sviluppo della pagina
animationDefinisce i parametri dell'animazione di un elemento o selettore
crossoriginGestisce richieste tra documenti provenienti da origini differenti.

Users

Log in to search for users

Explore

Find inspiration

RICORDATI DI ME

prova che si muove

Esercizio media Prof

Proposta di Matrimonio

Custom JS alert box

curricculum Nicola Pochiero

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;