我試著寫了一個小網站。

設計中的兩件事沒有成功地幫助我。 當然，花了幾個小時去理解CSS是如何工作的，我也沒有找到解決方案。

我的代碼添加在下面:

// Function to update the date of Netanya

function updateDateNetanya() {
  var dateNetanyaElement = document.getElementById("dateNetanya");
  var date = new Date();

  var options = {
    day: "numeric",
    month: "numeric",
  };

  var formattedDate = date.toLocaleDateString("en-GB", options);

  dateNetanyaElement.textContent = formattedDate;
}

// Fonction pour mettre à jour l'heure de Netanya

function updateHeureNetanya() {
  var heureNetanyaElement = document.getElementById("heureNetanya");

  var date = new Date();

  var options = {
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
  }; // Add 'second' option

  var formattedTime = date.toLocaleTimeString("en-GB", options);

  heureNetanyaElement.textContent = formattedTime;
}

// Function to update the Shabbat timings

function updateHorairesChabat() {
  var parashaSemaineElement = document.getElementById("parashaSemaine");

  var horairesChabatElement = document.getElementById("horairesChabat");

  // Sending a request to the hebcal API to get the Shabbat information

  fetch("https://www.hebcal.com/shabbat?cfg=json&geonameid=294071&m=50&v=1")
    .then((response) => response.json())

    .then((data) => {
      var parashaSemaine = data.items[1].hebrew; // Hebrew portion of the Torah
      var hebStart = data.items[0].title.slice(-5); //start of the shabbat
      var hebEnd = data.items[2].title.slice(-5); //end of the shabbat
      var horairesChabat =
        hebStart + " : ?????  " + "<br>" + hebEnd + " : ????? "; // Start and end of Shabbat in Hebrew

      parashaSemaineElement.innerHTML = parashaSemaine;
      horairesChabatElement.innerHTML = horairesChabat;
    })

    .catch((error) => {
      console.log("Error retrieving Shabbat information:", error);
    });
}

// Function to update the events and courses

function updateEventsAndCourses() {
  var box4Element = document.getElementById("box4");
  var box6Element = document.getElementById("box6");
  var box7Element = document.getElementById("box7");
  var box8Element = document.getElementById("box8");

  // Swap the content of box4 and box7

  var temp4 = box4Element.innerHTML;
  box4Element.innerHTML = box7Element.innerHTML;
  box7Element.innerHTML = temp4;

  // Swap the content of box6 and box8

  var temp6 = box6Element.innerHTML;
  box6Element.innerHTML = box8Element.innerHTML;
  box8Element.innerHTML = temp6;
}

// Update the elements on page load

updateDateNetanya();
updateHeureNetanya();
updateHorairesChabat();

// Update the elements every 24 hours

setInterval(updateDateNetanya, 24 * 60 * 60 * 1000);
setInterval(updateHeureNetanya, 1000);
setInterval(updateHorairesChabat, 60 * 60 * 1000);
setInterval(updateEventsAndCourses, 8 * 1000);

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-image: url("fond.png");
  background-size: cover;
  background-position: center;
  background-repeat: repeat;
  color: rgb(255, 255, 255);
  font-size: 52px;
  font-family: Arial, sans-serif;
}

.container {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  align-items: center;
  align-content: center;
  text-align: center;
  align-self: center;
}

.box {
  width: 33.3%;
}

.box1,
.box2,
.box3 {
  height: 33.5%;
  background-image: url("petit paysage.png");
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
}

.box1 p,
.box2 p,
.box3 p {
  margin: auto;
  font-size: 50px;
  font-weight: 600;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8);
}

.img-container {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.box4,
.box6 {
  background-image: url("portrait.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 33.3%;
  height: 66.5%;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8);
  font-size: 32px;
  font-weight: 700;
}

.box4 p span,
.box6 p {
  margin: auto;
  font-size: 36px;
  line-height: 55px;
}

.box5 {
  width: 33.3%;
  height: 66.5%;
  flex-grow: 1;
  text-align: center;
  justify-content: center;
  display: flex;
}

.box5 img {
  margin: auto;
}

.box7,
.box8 {
  display: none;
  background-image: url("portrait.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 33.3%;
  height: 66.5%;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8);
  font-size: 12px;
  font-weight: 600;
}

.paragraph-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

@media only screen and (max-width: 600px) {
  /* Styles spécifiques aux smartphones */
  html,
  body {
    font-size: 26px;
  }
  .box4 p span,
  .box6 p,
  .box7 p,
  .box8 p {
    font-size: 18px;
  }
}

.container {
  display: grid;
  gap: 10px;
}

.box {
  width: 100%;
  height: auto;
}

.box1,
.box2,
.box3 {
  height: 15vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.box1 p,
.box2 p,
.box3 p {
  font-size: 25px;
  display: flex !important;
  justify-content: center;
  align-items: center;
  animation: scroll infinite 15s linear;
}

.box1 {
  grid-row: 3;
}

.box2 {
  grid-row: 2;
}

.box3 {
  grid-row: 1;
}

.box4 {
  grid-row: 5;
  font-size: 18px;
}

.box5 {
  grid-row: 4;
}

.box6 {
  grid-row: 6;
}


}
@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  
  100% {
    transform: translateY(-100%);
  }
}

}

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <link rel="preconnect" >
      <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
      <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
      <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
      <link rel="manifest" href="/site.webmanifest">
      <link rel="preconnect"  crossorigin>
      <title>Ets Haim</title>
   </head>
   <body>
      <div class="container">
         <div class="box box1">
            <!-- élément 1: Date de Netanya -->
            <p id="dateNetanya"></p>
         </div>
         <div class="box box2">
            <!-- élément 2: Heure de Netanya -->
            <p id="heureNetanya"></p>
         </div>
         <div class="box box3">
            <!-- élément 3: Mois hébra?que avec le jour -->
            <p id="moisHebraique">
               <script src="https://www.hebcal.com/etc/hdate-he.js"></script>
            </p>
         </div>
         <div class="box box4">
            <!-- élément 4: Horaires de Chabat -->
            <div id="box4">
               <span> ???</span>
               <p id="parashaSemaine"></p>
               <p id="horairesChabat"></p>
               <span id="minhaerevshabat">19:15</span> : ???? ??? ??? <br>
               <span id="shabatshaharit1">08:00</span> : ????? <br>
               <span id="shabatshaharit2">08:30</span> : 2 ????? <br>
               <span id="shabatshiour">18:00</span> : ?????<br>
               <span id="shabatminha">19:00</span> : ???? <br>
               <span id="shabatarvit">20:00</span> : ?????
            </div>
         </div>
         <div class="box box5">
            <!-- élément 5: Photo -->
            <img src="1.png" class="img-container" alt="Photo">
         </div>
         <div class="box box6">
            <!-- élément 6: Offices de la semaine -->
            <div id="box6">
               <p id="officesSemaine">
                  <span id="shaharit1">07:00</span> : ????? <br>
                  <!-- <span id="shaharit2">07:30</span> : 2 ????? <br> -->
                  <!--  <span id="minha1">13:00</span>  :  ???? ?????<br>-->
                  <span id="minha2">19:25</span> : ???? ????<br>
                  <span id="arvit">20:00</span> : ?????
               </p>
            </div>
         </div>
         <div class="box box7">
            <!-- élément 7: ??????? -->
            <div id="box7">
               <p>
                  <span id="events">??????? ??????</span>
               </p>
            </div>
         </div>
         <div class="box box8">
            <!-- élément 8: ??????? -->
            <div id="box8">
               <p>
                  <span id="courses">??????? ?????</span>
               </p>
            </div>
         </div>
      </div>
   </body>
</html>