• 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
• 129

  
<div id="floating-gift-wrap">
    <div class="gift-content-wrap">
      <h2>The gift that uplifts.</h2>
      <h3>Give <span>Rosetta Stone</span> for less than $50</h3>
      <img src="//rosettastone.com/lp/gift/assets/gift-catalog.png" alt="Gift">
      <a href="/gift" class="cta">SEND A GIFT</a>
    </div>       
      <a href="/gift" id="floating-gift-icon" alt='rosetta stone gift' title='Give Rosetta Stone as a gift'></a>    
  </div>
</div>





<style>
.masthead {
  height: 500px;
  
}

/* Desktop Floating Gift icon */
#floating-gift-wrap {
    
  position: relative;
  text-align: center;
  max-width: 500px;
  height: 368px;
  border: 2px solid red
  
}

#floating-gift-icon {        
  width: 70px;
  height: 70px;
  border-radius: 50px;
  display: block;  
  box-shadow: 0 0 0 30px rgba(0,0,0, 0.2);
  animation: pulse 1.5s infinite;       
  background: url(http://rosettastone.com/lp/gift/assets/gift-white.png) no-repeat #B61C00 center;
  background-size: 40%;
  position: absolute;
  bottom: 20px;
  left: 10px;
}

#floating-gift-icon:hover { animation: none; }

.gift-content-wrap {
  background: #E9B51E;
  padding: 2em 1em
}
.gift-content-wrap > h2 {
  font-size: 32px;
  margin: 0;
}

.gift-content-wrap > h3 {
  font-size: 22px;
  margin: 0;
}

.gift-content-wrap > h3 > span {
  color: #fff;
}

.gift-content-wrap > img {
  display: block;
  margin: 0 auto 2em;
  width: 65%;
  padding-left: 40px
}

.gift-content-wrap > a.cta {
  background: #323232;
  color: #fff;
  text-decoration: none;
  padding: 1em 3em;
  border-radius: 30px;
  font-weight: bold;
  display: inline-block;
  
}




@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0px rgba(0,0,0, 0.2);
    transform: scale(.9)
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 30px rgba(0,0,0, 0)
  }
  100% {
    transform: scale(.9);
    box-shadow: 0 0 0 30px rgba(0,0,0, 0)
  }
}



/* Desktop navbar icon */
topbar a {
  text-decoration: none;
}
.navgift {
  background: url(//rosettastone.com/lp/gift/assets/gift-white-header.png ) #B61C00 center no-repeat;
  display: inline-block;
  position: relative;
  top: -12px;
  width: 100px;
  height: 30px;
  background-size: 63%;
  border-radius: 20px;
}
</style>

<script>
var $gift =$('#floating-gift-wrap').detach()
$('.masthead').append($gift)
$('#floating-gift-icon').click(function() {
  $('.gift-content-wrap').fadeToggle();
})

</script>