
<div class="custom-modal" id="news-modal">
    <div class="custom-modal-body bg-light text-center cornered">
        <img src="images/newsletter.jpg" class="img-fluid">
        <h1>Thank you for Subscribing</h1>
        <p>We will keep you updated in your email</p>
        <button class="btn btn-primary" onclick="$('#news-modal').hide()">Okay</button>
    </div>
</div>

<script>
    function validate(){
        $('#news-modal').show()
        return(false);
    }
</script>

<section class="site-section" style="background: linear-gradient(#232323f4,#151515f1), url(images/media-pattern.jpg);" id="contact-section" data-aos="fade">
      <div class="container">
        <div class="row mb-5">
          <div class="col-12 text-center">
            <h2 class="section-title mb-3">Subscribe to our <element style="color: rgb(93, 183, 252);">Newsletter</element></h2>
            <p class="text-center">
              Don’t miss out on the latest updates, exclusive content, and special offers! <br> By subscribing to our newsletter, you’ll be the first to know about:
            </p>
            <div>
              <form action="" onsubmit="return(validate())">
                <input type="email" class="form-control rounded-lg adjust-center w-sm-100" style="width: 400px;" placeholder="Email" required>
                <button class="mt-4 btn btn-primary">Subscribe</button>
              </form>
            </div>
          </div>
        </div>
        
      </div>
    </section>