Selamlar, bir top banner oluşturuyorum

19-12-2023, 14:54:47

Selamlar, e-ticaret sitemde kullanmak için dinamik bir top banner oluşturmak istiyorum. Bu top banner iframe etiketi ile farklı bir sayfadan alıyorum, bir close butonu var bu close butonu kullanılarak top banner kapatıldığında sayfanın tekrar eski haline yani topbannersız haline dönmesini istiyorum ancak sadece topbannerı siliyor, onun olduğu alan beyaz halde kalıyor. Yardımcı olabilecek var mı?

https://dukcreative.com.tr/demo1/

<html  lang="tr">
<head> <meta charset="utf-8"> </head>
<body >
    <style>
        .discount-container .close-btn {
  width: 20px;
}

.discount-container {
  
  top: 0;
  left: 0;
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: #023047;
  background-image: url(https://r.resimlink.com/4LZDW.png);
  color: #fff;
  font-family: "Inter", sans-serif;
  padding: 8px 0;
  position: fixed;
}

.discount-container .discount-heading {
  font-size: 14px;
  color: #000000;
  font-weight: bold;
  margin-bottom: 4px;
}



.discount-container .countdown-timer {
  display: flex;
  gap: 16px;
}

.countdown-timer .group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.countdown-timer .value {
  background: #fff;
  color: #222;
  font-size: 14px;
  font-weight: bold;
  padding: 8px;
  width: auto;
  text-align: center;
  border-radius: 6px;
}

.countdown-timer .unit {
  font-size: 13px;
}

.discount-container .discount-btn {
  padding: 8px 24px;
  background: #CC9999;
  
  font-size: 14px;
  font-weight: bold;
  color: #000;
  text-decoration: none;
  border-radius: 6px;
  border: 3px solid rgb(255, 255, 255);
  text-transform: uppercase;
  transition: all 400ms ease;
}

.discount-container .discount-btn:hover {
  transform: scale(1.03);
}

.discount-container .close-btn {
  position: fixed;
  top: 24px;
  right: 20px;
  background: #000;
  padding: 3px;
  border-radius: 50%;
  display: flex;
  cursor: pointer;
  transition: all 400ms ease;
}

.discount-container .close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

@media (max-width: 800px) {
  .discount-container {
    justify-content: flex-start;
    padding-left: 30px;
  }
}

@media (max-width: 640px) {
  .discount-container {
    flex-direction: column;
    text-align: center;
    padding-left: 0;
    gap: 16px;
  }
}
    </style>

 <div  class="discount-container" id="menu">

      <div class="info">
        <div class="discount-heading">Bu Bir Test Top Banner'ı Olarak Oluşturulmuştur!</div>
      </div>

      <div class="countdown-timer">
        <div class="group">
          <div class="value days">44</div>
          <div class="unit">Gün</div>
        </div>

        <div class="group">
          <div class="value hours">09</div>
          <div class="unit">Saat</div>
        </div>

        <div class="group">
          <div class="value minutes">45</div>
          <div class="unit">Dak</div>
        </div>

        <div class="group">
          <div class="value seconds">44</div>
          <div class="unit">San</div>
        </div>
      </div>

      <button class="discount-btn">Alışverişe Başla</button>

      <div class="close-btn" id="btn">
             <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

          <script>
        $(document).ready(function() {
 
        $("#btn").click(function() {
            $("#menu").remove();
        });
 
    });
          </script>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="w-6 h-6"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M6 18L18 6M6 6l12 12"
          />
        </svg>
      </div>
      
    </div>
     <script src="assets/js/main.js"></script>
  
</body>
</html>

19-12-2023, 15:17:34

#2

turkaz18

iframe height 0 yaparsanız düzelir