Bootstrap 5 Newsletter Components

<section class="py-12 py-lg-24 py-xl-32 position-relative overflow-hidden">
  <img class="position-absolute top-0 start-0" src="saturn-assets/images/newsletter/double-light.png" alt="">
  <div class="position-relative container">
    <div class="row">
      <div class="col-lg-6 mb-24 mb-lg-0">
        <div class="mw-lg mx-auto mx-lg-0">
          <h3 class="font-heading mb-8">Sign up for our newsletter</h3>
          <div class="d-sm-flex mb-14">
            <div>
              <svg width="84" height="10" viewBox="0 0 84 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 4.25C0.585786 4.25 0.25 4.58579 0.25 5C0.25 5.41421 0.585786 5.75 1 5.75L1 4.25ZM84 5.00001L76.5 0.669879L76.5 9.33013L84 5.00001ZM1 5.75L77.25 5.75001L77.25 4.25001L1 4.25L1 5.75Z" fill="#1E254C"></path>
              </svg>
            </div>
            <div class="mt-6 mt-sm-0 ps-sm-8 mw-sm">
              <p class="lead text-secondary mb-0">Stay in the loop with everything you need to know.</p>
            </div>
          </div>
          <form action="">
            <div class="d-flex flex-column flex-sm-row align-items-sm-center gap-4">
              <input class="form-control" type="email" name="" id="" placeholder="pat@shuffle.dev">
              <button class="flex-shrink-0 btn btn-sm h-100 btn-primary d-flex align-items-center justify-content-center fs-8" type="submit">
                <span>Subscribe</span>
                <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14.8299 12.04L10.5899 7.80001C10.497 7.70628 10.3864 7.63189 10.2645 7.58112C10.1427 7.53035 10.012 7.50421 9.87994 7.50421C9.74793 7.50421 9.61723 7.53035 9.49537 7.58112C9.37351 7.63189 9.26291 7.70628 9.16994 7.80001C8.98369 7.98737 8.87915 8.24082 8.87915 8.50501C8.87915 8.7692 8.98369 9.02265 9.16994 9.21001L12.7099 12.75L9.16994 16.29C8.98369 16.4774 8.87915 16.7308 8.87915 16.995C8.87915 17.2592 8.98369 17.5126 9.16994 17.7C9.26338 17.7927 9.3742 17.866 9.49604 17.9158C9.61787 17.9655 9.74834 17.9908 9.87994 17.99C10.0115 17.9908 10.142 17.9655 10.2638 17.9158C10.3857 17.866 10.4965 17.7927 10.5899 17.7L14.8299 13.46C14.9237 13.367 14.9981 13.2564 15.0488 13.1346C15.0996 13.0127 15.1257 12.882 15.1257 12.75C15.1257 12.618 15.0996 12.4873 15.0488 12.3654C14.9981 12.2436 14.9237 12.133 14.8299 12.04Z" fill="#FFF2EE"></path>
                </svg>
              </button>
            </div>
            <p class="fs-10 fw-semibold mt-2 mb-0">
              <span class="text-muted">We care about your data in our</span>
              <a class="btn btn-sm fs-10 btn-link fw-semibold p-0" href="#">privacy policy</a>
            </p>
          </form>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="position-relative">
          <img class="position-absolute top-0 end-0 me-24 me-lg-0 me-xl-32 my-n20 mt-xl-n24" style="z-index: -1;" src="saturn-assets/images/newsletter/circle-star-bg.png" alt="">
          <img class="position-relative img-fluid d-block ms-auto" src="saturn-assets/images/newsletter/image-yellow-ghost.png" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-sm-24 py-md-32 position-relative overflow-hidden"><img class="position-absolute top-0 end-0" src="flaro-assets/images/newsletter/gradient2.svg" alt=""/>
  <div class="container position-relative">
    <div class="mw-xl mx-auto text-center">
      <div class="position-relative d-flex mx-auto mb-6 align-items-center justify-content-center fs-5 text-white fw-bold bg-primary rounded-pill" style="width: 70px; height: 70px;"><img class="position-absolute top-0 start-0" src="flaro-assets/images/how-it-works/gradient.svg" alt=""/>
        <svg width="32" height="26" viewbox="0 0 32 26" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M1.00098 6.3335L14.152 15.1008C15.2716 15.8473 16.7303 15.8473 17.85 15.1008L31.001 6.3335M4.33431 24.6668H27.6676C29.5086 24.6668 31.001 23.1744 31.001 21.3335V4.66683C31.001 2.82588 29.5086 1.3335 27.6676 1.3335H4.33431C2.49336 1.3335 1.00098 2.82588 1.00098 4.66683V21.3335C1.00098 23.1744 2.49336 24.6668 4.33431 24.6668Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </div>
      <h3 class="mb-3" >Join Our Newsletter</h3>
      <p class="mw-md mx-auto mb-10 text-secondary" >Lorem ipsum dolor sit amet, to the consectr adipiscing elit. Volutpat tempor to the condimentum vitae vel purus.</p>
      <form action="">
        <input class="form-control text-center mb-5" type="text" placeholder="First &amp; last name"/>
        <input class="form-control text-center mb-5" type="text" placeholder="Email address"/>
        <button class="btn mb-8 w-100 btn-primary shadow" type="submit" >Subscribe Now</button>
        <div class="d-flex align-items-center justify-content-center">
          <svg width="14" height="14" viewbox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.00033 9.00024V10.3336M3.00033 13.0002H11.0003C11.7367 13.0002 12.3337 12.4033 12.3337 11.6669V7.66691C12.3337 6.93053 11.7367 6.33358 11.0003 6.33358H3.00033C2.26395 6.33358 1.66699 6.93053 1.66699 7.66691V11.6669C1.66699 12.4033 2.26395 13.0002 3.00033 13.0002ZM9.66699 6.33358V3.66691C9.66699 2.19415 8.47308 1.00024 7.00033 1.00024C5.52757 1.00024 4.33366 2.19415 4.33366 3.66691V6.33358H9.66699Z" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round"></path>
          </svg><span class="ms-2 fs-9 text-secondary" >We never share your information to any third party</span>
        </div>
      </form>
    </div>
  </div>
</section>

<section class="py-28 bg-black overflow-hidden">
  <div class="container">
    <div class="mw-md-lg mx-auto text-center mb-14">
      <h2 class="fs-10 fw-semibold text-white mb-5" >Join our newsletter</h2>
      <p class="fs-17 text-secondary-light mb-0" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim.</p>
    </div>
    <form class="mw-md-xl mx-auto">
      <div class="form-group mb-5">
        <input class="bg-transparent text-dark px-5 py-4 w-100 border border-dark-light" id="newsletterInput1-1" style="border-radius: 3px;" type="email" placeholder="Your full name"/>
      </div>
      <div class="form-group mb-5">
        <input class="bg-transparent text-dark px-5 py-4 w-100 border border-dark-light" id="newsletterInput1-2" style="border-radius: 3px;" type="email" placeholder="Your email address"/>
      </div>
      <button class="btn btn-light-light fs-20 w-100 px-11 py-5 text-uppercase mb-6" type="submit" style="letter-spacing: 1px; background: linear-gradient(98.24deg, #CEE9C1 0%, #83C8DE 100%); border-radius: 3px;">Subscribe now</button>
      <p class="fs-19 text-center text-dark mb-0" >We never share your information to any third party</p>
    </form>
  </div>
</section>

<section class="py-12 py-md-16 py-lg-24">
  <div class="container">
    <div class="mw-lg mw-lg-6xl mx-auto">
      <div class="row align-items-center">
        <div class="col-12 col-lg-6 col-xl-7 order-last order-lg-first">
          <img class="img-fluid" src="solstice-assets/images/newsletter/illustration-circle-light.png" alt="">
        </div>
        <div class="col-12 col-lg-6 col-xl-5 mb-12 mb-lg-0">
          <div class="mw-sm mx-auto me-lg-0">
            <span class="badge mb-4 d-inline-flex align-items-center bg-primary-light text-primary border border-info">
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8.62293 3.37707C8.567 3.32115 8.50813 3.21714 8.50077 3.02581C8.62835 3.19081 8.77541 3.3237 8.91729 3.42581C8.95382 3.45211 8.99065 3.47685 9.02752 3.5H9.015C8.79742 3.5 8.68271 3.43685 8.62293 3.37707ZM10.485 3.5H10.469C10.508 3.47551 10.547 3.44928 10.5856 3.42134C10.7259 3.31979 10.8723 3.18774 10.9993 3.02426C10.9922 3.21658 10.9331 3.321 10.8771 3.37707C10.8173 3.43685 10.7026 3.5 10.485 3.5Z" fill="#FF7100" stroke="#FF7100"></path>
                <path d="M9.015 4.75C8.04 4.75 7.25 3.96 7.25 2.985V1.5C7.25 1.225 7.025 1 6.75 1H3.5C2.12 1 1 2.115 1 3.49V6.975C1 8.355 2.12 9.475 3.5 9.475H4.25C4.39 9.475 4.57 9.565 4.65 9.675L5.4 10.67C5.73 11.11 6.27 11.11 6.6 10.67L7.35 9.675C7.445 9.55 7.595 9.475 7.75 9.475H8.505C9.885 9.475 11 8.36 11 6.98V5.25C11 4.975 10.775 4.75 10.5 4.75H9.015ZM4 6C3.72 6 3.5 5.775 3.5 5.5C3.5 5.225 3.72 5 4 5C4.275 5 4.5 5.225 4.5 5.5C4.5 5.775 4.28 6 4 6ZM6 6C5.72 6 5.5 5.775 5.5 5.5C5.5 5.225 5.72 5 6 5C6.275 5 6.5 5.225 6.5 5.5C6.5 5.775 6.28 6 6 6Z" fill="#FF7100"></path>
              </svg>
              <span class="ms-1">Newsletter</span>
            </span>
            <h3 class="font-heading mb-6">Subscribe</h3>
            <p class="text-light-dark mb-10">Fuel your curiosity by joining a vibrant community of learners.</p>
            <form action="">
              <input class="form-control mb-4 border-info" type="email" placeholder="Email address">
              <button class="btn py-4 w-100 btn-primary border-primary-dark">
                <span class="me-2">Subscribe</span>
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M4.99996 10H15.4166M15.4166 10L10.4166 5M15.4166 10L10.4166 15" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-32 bg-black bg-gradient position-relative overflow-hidden"><img class="d-none d-lg-block position-absolute top-0 end-0 col-lg-6 col-xl-5 h-100 rounded-start" src="nightsable-assets/images/newsletter/man.png" alt="">
  <div class="container position-relative">
    <div class="mw-sm mw-lg-md mx-auto mx-lg-0 pe-lg-10"><span class="badge mb-4 text-primary">Nightsable Card</span>
      <h1 class="font-heading h4 text-white mb-6" style="letter-spacing: -0.2rem;">Industry insights you wan`t delete. Delivered to your inbox weekly</h1>
      <p class="text-secondary-light mb-10">Join 10,000 founders, get early access to Nightsable features, and learn how to squeeze every drop of revenue</p>
      <form action="">
        <input class="form-control bg-transparent" type="email" placeholder="E-mail">
      </form>
      <button class="btn mt-6 btn-primary fw-medium" type="submit">Subscribe</button>
    </div>
  </div><img class="d-block d-lg-none mt-16 img-fluid rounded-top w-100" style="max-height: 500px; object-fit: cover; object-position: top;" src="nightsable-assets/images/newsletter/man.png" alt="">
</section>

<section class="py-20">
  <div class="container">
    <div class="bg-dark rounded px-6 px-lg-24 py-10 py-lg-20">
      <div class="row py-5 align-items-center">
        <div class="col-12 col-md-7 mb-6 mb-md-0">
          <div class="mb-3 mb-lg-0">
            <h3 class="mb-4 font-semibold font-heading text-white">Sign up to our newsletter</h3>
            <p class="h5 fw-normal text-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </div>
        <div class="col-12 col-md-5">
          <form action="#">
            <div class="row align-items-center">
              <div class="col-12 col-lg-8 mb-4 mb-lg-0">
                <div class="position-relative">
                  <input class="form-control bg-transparent text-white" type="text" placeholder="e.g hello@shuffle.dev"/><span class="position-absolute start-0 top-0 ms-3 mt-n2 px-1 bg-dark text-white small">Your email address</span>
                </div>
              </div>
              <div class="col-12 col-lg-4">
                <button class="btn btn-info w-100">Sign&nbsp;up</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="bg-secondary-dark py-24 py-md-40">
  <div class="container position-relative">
    <div class="position-relative mw-6xl mx-auto"><img class="position-absolute top-0 end-0 mt-n16 me-6 img-fluid" style="z-index: 1;" src="zospace-assets/images/stars.svg" alt=""/>
      <div class="position-relative px-6 ps-sm-12 ps-md-24 pe-sm-12 ps-xxl-36 pe-xxl-20 pt-20 pb-24 overflow-hidden rounded bg-secondary"><img class="position-absolute top-0 start-0 mt-n12 mw-6xl mw-md-none" src="zospace-assets/lines/blue-half-circle.svg" alt=""/><img class="position-absolute top-0 end-0 mt-n64 mw-sm mw-md-lg img-fluid" src="zospace-assets/lines/circle.svg" alt=""/>
        <div class="position-relative mw-lg"><span class="h6 text-white" >More news</span>
          <h4 class="text-white mt-2 mb-6" >Subscribe now</h4>
          <div class="input-group mb-8 bg-white rounded-pill">
            <input class="form-control ps-md-24 py-3 me-4 me-lg-14 border-0 bg-transparent" type="email" placeholder="Drop your Email" aria-label="Drop your Email" aria-describedby=""/>
            <svg class="d-none d-md-block position-absolute top-50 start-0 ms-10 translate-middle-y" width="37" height="37" viewbox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="18.5" cy="18.5" r="9.5" fill="#1F40FF" fill-opacity="0.15"></circle>
              <circle cx="18.5" cy="18.5" r="18.5" fill="#1F40FF" fill-opacity="0.06"></circle>
              <circle cx="18.5" cy="18.5" r="2.5" fill="#282C36"></circle>
            </svg>
            <button class="btn btn-primary px-md-12 rounded-pill" type="button" id="" >Subscribe</button>
          </div>
          <p class="text-secondary-light mb-0"><span >The brown fox jumps over </span><span class="text-white" >the lazy dog.</span></p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative pt-24 pt-xl-32 pb-40 pb-xl-64 bg-light">
  <div class="container">
    <div class="d-flex align-items-center mb-24"><span class="display-6 h5 mb-0" >03</span>
      <div class="mx-4 bg-light-dark rounded-circle" style="width: 4px; height: 4px;"></div><span class="display-6 h5 mb-0" >Newsletter</span>
    </div>
    <div class="mw-2xl mx-auto text-center">
      <h1 class="display-2 mb-24"><span >Sign up for</span><span class="d-block" >email newsletters</span></h1>
      <form action="#" method="post">
        <div class="row align-items-center justify-content-center">
          <div class="col-12 col-sm-8 col-md-9 me-auto mb-4 mb-sm-0">
            <div class="form-floating">
              <input class="form-control" type="email" placeholder="mat@shuffle.dev" value=""/>
              <label for="" >Your email</label>
            </div>
          </div>
          <div class="col-12 col-sm-4 col-md-auto">
            <button class="btn btn-primary" type="submit" >Sign Me</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</section>

<section class="position-relative py-20 bg-secondary-dark overflow-hidden" style="background-image: url('flex-assets/elements/pattern-dark.png')">
  <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(42, 51, 66, 0) 0%, #2A3342 100%);"></div>
  <img class="position-absolute top-0 start-0 mt-6 ms-6" style="z-index: 1;" src="flex-assets/elements/dots-blue.svg" alt="">
  <img class="position-absolute end-0 bottom-0 mb-6 me-6" style="z-index: 1;" src="flex-assets/elements/dots-blue.svg" alt="">
  <div class="position-relative container" style="z-index:1;">
    <div class="mb-8 text-center mw-md-2xl mx-auto">
      <h2 class="font-heading mb-4 fs-6 text-white" style="letter-spacing: -1px;">Sign up for our newsletter</h2>
      <p class="fs-9 fw-medium text-secondary-light">Stay in the loop with everything you need to know.</p>
    </div>
    <div class="mw-md-md mx-auto">
      <div class="mb-2 row justify-content-center g-4 g-md-6">
        <div class="col">
          <div class="form-group">
            <input class="form-control text-secondary p-3 shadow" id="newsletterInput3-1" type="email" aria-describedby="emailHelp" placeholder="Enter your email">
          </div>
        </div>
        <div class="col-12 col-md-auto"><a class="btn btn-lg btn-success fs-11 w-100 py-3 px-4 h-100 shadow" href="#">Subscribe</a></div>
      </div>
      <p class="mb-0 fs-13 fw-medium text-secondary">
        <span>We care about your data in our</span>
        <a class="text-sucess link-success" href="#">privacy policy</a>
      </p>
    </div>
  </div>
</section>

<section class="py-20 bg-light overflow-hidden">
  <div class="container">
    <div class="position-relative mw-4xl mx-auto">
      <div class="position-absolute top-50 start-0 end-0 translate-middle-y bg-info-light ms-n12 me-n12" style="height: 90%;"></div>
      <div class="position-relative pt-20 pb-32 px-8 bg-info text-center"><a class="d-inline-block mb-14" href="#" ><img class="img-fluid" src="yofte-assets/logos/yofte-logo-white.svg" alt=""/></a>
        <h2 class="mb-5 text-white" >Join Our Newsletter</h2>
        <p class="mb-6 text-light" >Sign me up for Yofte newsletters to get exclusive perks.</p><img class="mb-12 img-fluid" src="yofte-assets/elements/quote.svg" alt=""/>
        <div class="position-relative mw-xl mx-auto bg-white rounded-3"><img class="position-absolute top-0 end-0 mt-n12 me-n20" style="height: 160px;" src="yofte-assets/elements/quote-light.png" alt=""/>
          <div class="position-relative mw-lg-xl mx-lg-auto bg-white rounded-3">
            <div class="position-relative row align-items-center justify-content-between">
              <div class="position-relative col-12 col-md-9"><span class="position-absolute top-0 start-0 ms-11 mt-4 small lh-sm text-muted fw-bold" >Drop your e-mail</span>
                <input class="form-control w-100 pt-8 pb-4 px-8 border-0" type="text" placeholder="john@example.com"/>
              </div>
              <div class="col-12 col-md-auto"><a class="btn btn-dark d-block text-uppercase" href="#" >Join</a></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-5">
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-8 col-lg-6 mx-auto text-center">
        <h2 class="mb-3 fs-1 fw-bold">
          <span>Lorem ipsum</span>
          <span class="text-primary">dolor sit</span>
          <span>amet, consectetur adipiscing.</span>
        </h2>
        <p class="mb-4 text-muted">Integer felis tellus, rhoncus ac pulvinar vitae.</p>
        <div class="row justify-content-center">
          <div class="col-12 col-md-8 mb-3 mb-md-0">
            <div class="input-group">
              <span class="input-group-text px-3 bg-light rounded-left">
                <svg width="24" height="24" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                </svg>
              </span>
              <input class="form-control" type="text" placeholder="Type your e-mail">
            </div>
          </div>
          <div class="col-12 col-md-auto">
            <button class="w-100 btn btn-primary" type="submit">Sign Up</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-20">
  <div class="container">
    <div class="py-16 py-lg-24 px-10 px-lg-28 bg-primary position-relative"><img class="d-none d-md-block position-absolute top-0 start-0 translate-middle" src="cronos-assets/elements/left-squares.svg" alt=""/><img class="d-none d-md-block position-absolute top-100 start-100 translate-middle" src="cronos-assets/elements/right-squares.svg" alt=""/>
      <div class="row align-items-center">
        <div class="col-12 col-lg-7 mb-6 mb-lg-0">
          <h3 class="fw-bold text-white mb-4">Sign up to our newsletter</h3>
          <p class="text-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="col-12 col-lg-5">
          <form action="#">
            <div class="input-group">
              <input class="form-control" type="email" placeholder="E-mail address"/>
              <button class="btn btn-secondary">Sign Up</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative py-12 py-md-24 bg-danger-dark">
  <div class="container">
    <div class="mw-md mw-lg-4xl mw-xl-5xl mx-auto">
      <div class="text-center">
        <h3 class="font-heading mb-4">Stay in the loop</h3>
        <p class="mw-xs mx-auto mw-md-none mb-16">Join our newsletter to get top news before anyone else</p>
        <div class="position-relative mw-sm mx-auto mb-5" style="height: 48px;">
          <div class="bg-danger bg-opacity-50" style="height: 48px; filter: blur(25px);"></div>
          <div class="position-absolute w-100 top-0 start-0" style="height: 48px;">
            <input class="form-control bg-danger-dark bg-opacity-75 h-100" type="" placeholder="Email address">
            <div class="position-absolute top-0 end-0 h-100 p-1 d-flex align-items-center">
              <button class="btn h-100 d-flex align-items-center py-2 px-4 text-danger-dark btn-light border border-white border-opacity-10" type="submit">Subscribe</button>
            </div>
          </div>
        </div>
        <p class="fs-9 mb-0">No spam. You can unsubscribe anytime.</p>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 end-0 me-n24 mt-n80" src="casper-assets/blur/blur-center-right-violet.svg" alt=""/>
  <div class="container position-relative">
    <div class="mw-xl mx-auto mw-lg-none py-12 py-md-16 px-8 px-md-20 px-lg-16 border border-2 border-primary-dark bg-white bg-opacity-10 rounded" style="backdrop-filter: blur(10px);">
      <div class="row">
        <div class="col-lg-6 mb-10 mb-lg-0">
          <div>
            <h2 class="font-heading fw-medium text-white mb-6">Stay up to Date</h2>
            <p class="mw-lg fs-6 text-light-light mb-16">Nunc et tellus non erat accumsan aliquam eget non mi. Integer fringilla pellentesque finibus.</p>
            <div class="d-flex flex-column flex-sm-row align-items-sm-center">
              <div class="flex-shrink-0" style="width: 72px; height: 72px;"><img class="img-fluid" src="casper-assets/newsletter/avatar.png" alt=""/></div>
              <div class="mt-6 mt-sm-0 ms-sm-9"><span class="display-2 text-white fw-medium">50%</span>
                <p class="fs-6 text-light-light mb-0">Nunc et tellus non erat aliquam eget non mi.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="mw-md ms-lg-auto"><img class="img-fluid d-block ms-auto me-24 mb-10 mb-sm-16 animate-spinStar" src="casper-assets/newsletter/blink-star.png" alt=""/>
            <div>
              <label class="form-label text-white" for="">Email</label>
              <div class="d-flex flex-column flex-sm-row mb-5 align-items-sm-end">
                <input class="form-control rounded-1 bg-secondary-dark" type="email" placeholder="pat@saturn.dev"/>
                <button class="flex-shrink-0 mt-4 mt-sm-0 ms-sm-3 btn btn-sm px-5 py-2 btn-primary text-black" type="submit"><span class="me-1">Submit</span>
                  <svg width="25" height="24" viewbox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M18.4199 6.62C18.3185 6.37565 18.1243 6.18147 17.8799 6.08C17.7597 6.02876 17.6306 6.00158 17.4999 6H7.49994C7.23472 6 6.98037 6.10536 6.79283 6.29289C6.6053 6.48043 6.49994 6.73478 6.49994 7C6.49994 7.26522 6.6053 7.51957 6.79283 7.70711C6.98037 7.89464 7.23472 8 7.49994 8H15.0899L6.78994 16.29C6.69621 16.383 6.62182 16.4936 6.57105 16.6154C6.52028 16.7373 6.49414 16.868 6.49414 17C6.49414 17.132 6.52028 17.2627 6.57105 17.3846C6.62182 17.5064 6.69621 17.617 6.78994 17.71C6.8829 17.8037 6.9935 17.8781 7.11536 17.9289C7.23722 17.9797 7.36793 18.0058 7.49994 18.0058C7.63195 18.0058 7.76266 17.9797 7.88452 17.9289C8.00638 17.8781 8.11698 17.8037 8.20994 17.71L16.4999 9.41V17C16.4999 17.2652 16.6053 17.5196 16.7928 17.7071C16.9804 17.8946 17.2347 18 17.4999 18C17.7652 18 18.0195 17.8946 18.207 17.7071C18.3946 17.5196 18.4999 17.2652 18.4999 17V7C18.4984 6.86932 18.4712 6.74022 18.4199 6.62Z" fill="black"></path>
                  </svg>
                </button>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="checkbox" value=""/>
                <label class="form-check-label ms-2 text-light-light"><span>I agree with</span><a class="d-inline-block text-info" href="#">Privacy Policy</a><span>and</span><a class="d-inline-block text-info" href="#">Terms of Conditions</a></label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 pt-lg-32 pb-lg-16 overflow-hidden" style="background: linear-gradient(131deg, #E8E5FE 26.82%, #FFEED8 96.89%);">
  <div class="container mw-lg-7xl">
    <div class="text-center">
      <h2 class="font-heading fs-2 mb-8">Join the community, subscribe now</h2>
      <p class="lead mb-16">Shape Tomorrow with Digital Learning Today!</p>
      <form action="">
        <div class="d-flex mw-md mw-lg-lg mx-auto flex-column flex-sm-row gap-4">
          <input class="form-control" type="email" placeholder="Your Email">
          <button class="flex-shrink-0 btn btn-primary">Join now</button>
        </div>
      </form>
      <p class="mt-32 lead fs-9 mb-0">Get the ideas, tools and tips you need to grow your sound straight.</p>
    </div>
  </div>
</section>

<section class="py-5">
  <div class="container">
    <div class="p-3 p-md-5 bg-light rounded">
      <div class="row align-items-center">
        <div class="col-12 col-lg-8 mb-3 mb-lg-0">
          <div>
            <h3 class="fw-bold">Sign up to our newsletter</h3>
            <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </div>
        <div class="col-12 col-md-8 col-lg-4">
          <form action="#">
            <div class="d-flex">
              <input class="form-control me-2" type="email" placeholder="Type your e-mail">
              <button class="btn btn-primary">Action</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-5 bg-light">
  <div class="container">
    <div class="mw-lg mw-lg-none mx-auto">
      <div class="row">
        <div class="col-12 col-lg-6 col-xl-7">
          <div class="mw-xl py-20 py-lg-40"><span class="d-block mb-4 fw-medium fs-9" >Lorem Ipsum</span>
            <div class="mw-sm mw-md-md mw-lg-none mb-12">
              <h1 class="mb-8" >Keep up with our contant</h1>
              <p class="mw-sm fs-7 text-secondary-light mb-0" >
                It is a long established fact that a reader will be
                distracted by the readable content
              </p>
            </div>
            <div>
              <div class="d-sm-flex mw-xl">
                <div class="w-100 mb-3 mb-sm-0 me-4">
                  <input class="form-control bg-white border-0" type="email" placeholder="Enter your email"/>
                </div>
                <div class="flex-shrink-0">
                  <button class="btn w-100 h-100 btn-dark" type="submit" >Sign Up</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-lg-6 col-xl-5"><img class="img-fluid d-block h-100 w-100 rounded-5" style="object-fit: cover;" src="asitrastudio-assets/newsletter/photo1.png" alt=""/></div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 py-xl-32 bg-light-light">
  <div class="container">
    <h2 class="font-heading text-center mb-24">Stay in touch</h2>
    <div class="mw-4xl mx-auto px-6 px-sm-10 py-24 bg-white rounded-3">
      <div class="text-center mw-md mx-auto">
        <h3 class="font-heading fw-medium mb-6">Newsletter</h3>
        <p class="fs-7 fw-medium text-light-dark mb-14">Subscribe to our newsletter and receive the latest news and exclusive insight every week.</p>
        <div>
          <form action="">
            <div class="position-relative bg-light-light p-1 rounded-pill">
              <input class="form-control bg-transparent ps-4 ps-sm-8 text-dark" type="email" placeholder="Your email address">
              <button class="position-absolute top-50 end-0 me-1 translate-middle-y btn px-4 px-sm-10 py-5 fs-8 btn-primary" type="submit">Get started</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>