title = "Newsletter forms"
url = "/newsletter-forms"
layout = "default"
is_hidden = 0
==
<div class="newsletter-forms">
  <div class="container">
    <h1 class="form_title">Newsletter sign up forms</h1>
    <form action="#" method="post" class="flex-inner">
      <div class="row">
        <div class="col35">
          <div class="form-box">
            <h3>EXCLUSIVES DEALS VIA EMAIL</h3>
            <p>We'll send you discounts, exclusive offers, and the low-down on the best beaches out there.</p>
            <div class="input-row">
              <label>Email*</label>
              <input class="eq-inp" placeholder="Email*">
            </div>
            <div class="input-row">
              <label>First Name</label>
              <input class="eq-inp" placeholder="First Name">
            </div>
            <div class="input-row">
              <label>Last Name</label>
              <input class="eq-inp" placeholder="Last Name">
            </div>
            <div class="input-button">
              <button class="btn-lg">Subscribe</button>
            </div>
          </div>
        </div>
        <div class="col65">
         <div class="conditions_box">
          <label class="label_check"><input type="checkbox" name="alert1" id="alert1"><span>I agree to the <a href="#">TERMS AND CONDITIONS</a></span></label>
          <label  class="label_check"><input type="checkbox" name="alert1" id="alert1"><span>I would Ilike to subscribe to the BUSY ROOMS HOTEL EMEA newsletter</span></label>
          <label  class="label_check"><input type="checkbox" name="alert1" id="alert1"><span>I agree to the <a href="#">DATA PROTECTION POLICY</a></span></label>
         </div>
        </div>
      </div>
    </form>
  </div>
</div> 



<style>
.newsletter-forms .col35 {width: 35%;float: left;padding: 0 15px;}
.newsletter-forms .col65 {width: 65%;float: left;padding: 0 15px;}
.newsletter-forms  .row {align-items: center;}
.form-box {padding: 30px;background: #000;}
.form-box h3 {font-size: 18px;color: #ffff;margin-bottom: 18px;}
.newsletter-forms {margin: 50px 0;display: inline-block;width: 100%;}
.newsletter-forms .flex-inner {margin-top: 50px;}
.form-box p {color: #cacaca;margin-bottom: 20px;}
.form-box .input-row {width: 100%;display: inline-block;margin-bottom: 15px;}
.form-box .input-row label {color: #cacaca;width: 100%;line-height: 15px;}
.form-box .input-row 
 input {width: 100%;height: 40px;padding: 0 10px;border-radius: 5px;outline: none !important;border: 0 !important;}
.form-box .input-row input::placeholder {color: #919191;}
.form-box .input-button {margin-top: 15px;text-align: center;}
.form-box .input-button button {outline: none; line-height: 15px;font-size: 18px;padding: 14px 35px;color: #000;background: #fff;border: 0 !important;}
.label_check span {line-height: 24px;padding-left: 30px;position: relative;display: inline-block;cursor: pointer;font-size: 18px;text-align: left;}
.label_check span:after {content: "";position: absolute;left: 0px;width: 20px;height: 20px;top: 2px;border: 2px solid #7a7668;font-size: 15px;}
.label_check span:before {content: "✓";position: absolute;width: 20px;height: 20px;text-align: center;line-height: 22px;display: inline-block;left: 0px;top: 1px;opacity: 0;color: #7a7668;}
.label_check input {display: none;}
.label_check input[type="checkbox"]:checked+span:before {opacity: 1;}
.label_check span a {color: #7a7668;text-decoration: underline;}
.label_check span a:hover {color: #000;text-decoration: none;}
</style>