Seasons of the Year by @AnthonyK - Codewith.it

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

References

<map>Inserisce immagini mappa cliccabili in un documento
multipleConverte in lista a selezione multipla
forSpecifica a quale id è associato l'elemento in cui è dichiarato.
<strong>Definisce una parte del testo importante con formattazione in grassetto.
valueValore alfanumerico o booleano contenuto in un elemento
<tfoot>Definisce il footer o sezione inferiore di una tabella.

Users

Log in to search for users

Explore

Find inspiration

angoli e shadow

project-freecodecamp.org

Snapchat URL Viewer

Registration Form php pazienti

Heads Or Tails Random Tally

Gesù nostro signore(2)

Scheda Tecnica iPhone 15 Pro

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;