• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88
• 89
• 90
• 91
• 92
• 93
• 94
• 95
• 96
• 97
• 98
• 99
• 100
• 101
• 102
• 103
• 104
• 105
• 106
• 107
• 108
• 109
• 110
• 111
• 112
• 113
• 114
• 115
• 116
• 117
• 118
• 119
• 120
• 121
• 122
• 123
• 124
• 125
• 126
• 127
• 128

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<!-- HTML FOR PUSH DOWN -->
<div class="rto-wrapper">
  <a href="" class="rto-close"></a>
  <div class="rto-header">
    <b>Holiday savings have arrived.</b>
    Sign up to get our best offers.
  </div>
  <div class="rto-body">
    <div class="rto-form">
      <input type='email' class='rto-email-input' placeholder="Enter your email">
      <a href="#" class="rto-submit">SIGN UP</a>
    </div>
    <div class="form-error">Invalid e-mail.</div>
    <div class="gdpr_target"></div>
    <p class="rto-policy">
      Rosetta Stone is committed to safeguarding your privacy.<br>
      Our complete Privacy Policy is available <a href="https://www.rosettastone.com/privacy" target='_blank'>here</a>.
    </p>
  </div>
</div>


<style>
/**********************************************
 * CSS FOR PUSHDOWN
 **********************************************/
.rto-wrapper {
  position: relative;
  
}

.rto-header {
  background: #CC092F;
  color: #fff;
  padding: 25px 0;
  text-align: center;
}
.rto-header b {
  font-weight: bold;
}

.rto-body {
  padding: 20px 0;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1) inset;
  background: url(https://www.rosettastone.com/lp/rtos/q418/redsnow.svg);
}

.rto-form {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

.rto-email-input {
  border: 0;
  padding: 10px 15px;
  border-radius: 9px;
  border: 1px solid #ccc;
  margin-right: 15px;
  width: 210px;
  font-size: 80%;
}

a.rto-submit {
  background: #009ADE;
  color: #fff;
  text-decoration: none;
  padding: 11px 20px;
  border-radius: 30px;
  font-weight: bold;
  letter-spacing: 1px;
}

.form-error {
  text-align: center;
  color: red;
  display: none;
  font-weight:bold;
  background: #fff;
  width: 330px;
  margin: 10px auto 0;
  padding: 5px 0;
  border: 2px solid red;
  background: pink;
  margin-bottom: -10px;
}
p.rto-policy {
  font-size: 80%;
  width: 400px;
  margin: 0 auto;
  text-align: center;
  margin-top: 30px;
  color: #fff;
}

p.rto-policy a {
  color: #ecc200;
  text-decoration: none;
}

.rto-close {
  height: 20px;
  width: 20px;
  background: url(https://www.rosettastone.com/lp/cyber-files/close-button-white.svg) no-repeat;
  position: absolute;
  top: 20px;
  right: 20px;  
}
  

.gdpr_container {
  font-size: 14px;
  padding: 10px;
  border: none;
  color: #fff;
  background-color: transparent;
}
.gdpr_more_info_link {
  color: #f0c23f;
}

.gdpr_more_info_text.gdpr_more_info_text_show {
  background: #fff;
  color: #333;
}
</style>