B
Fri Jun 02 2017
Copied to clipboard! Copy reply
  • 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
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
<style>
body {
  background: #f0f0f0;
}
.header-wrapper {
  height: auto;
}
.header-wrapper p {
  margin-bottom: 0;
}
@media only screen and (min-width: 62em) {
  .header-wrapper {
    height: 625px;
    position: relative;
    z-index: -1;
  }
}
.nav ~ .devices {
  height: 150px;
  background-image: url("http://rosettastone.com/lp/globals/img/devices-3.png") !important;
  background-repeat: no-repeat;
  background-size: contain;
}
@media only screen and (min-width: 62em) {
  .nav ~ .devices {
    height: 250px !important;
  }
}
.nav ~ h1 {
  font-size: auto;
}
@media only screen and (min-width: 62em) {
  .nav ~ h1 {
    font-size: 240% !important;
    margin-top: 15px;
  }
}
@media only screen and (min-width: 62em) {
  .nav ~ h1 ~ p {
    margin-bottom: 0.9em;
  }
}
.select-language-wrapper {
  font-family: 'Gotham HTF Light';
  padding-top: 0;
}
.select-language-wrapper .devices {
  display: none;
}
@media only screen and (min-width: 62em) {
  .select-language-wrapper {
    margin-top: -190px;
    padding-top: 75px;
    background: transparent;
  }
}
.select-language-wrapper > .content {
  background: #392e07;
  overflow: auto;
  padding: 2em 1em;
}
.select-language-wrapper > .content h1 {
  color: #fff;
  margin-top: 0;
}
.select-language-wrapper > .content h1 a {
  font-size: 0.4em;
  color: #fbc000;
  font-weight: 700;
  text-decoration: none;
}
form > a.button {
  display: none;
}
div.languages {
  display: block !important;
}
div.languages a {
  border: 2px solid #fbc000 !important;
  color: #fbc000 !important;
}
div.languages a:hover {
  background: #fbc000 !important;
  color: #392e07 !important;
}
div.languages .button.submit-button {
  border-bottom: none !important;
  margin-bottom: 5px;
}
div.languages input[type=submit] {
  background: #4195d3 !important;
}
div.languages input[type=email] {
  display: none;
  margin-bottom: 7px;
}
div.languages input[type=email] ~ small,
div.languages input[type=email] ~ div.button {
  display: none;
}
@media only screen and (min-width: 62em) {
  div.languages .button.submit-button {
    width: 350px;
    min-width: auto;
  }
}
.hiw-wrapper {
  background: #f0f0f0;
  color: #392e07;
}
.hiw-wrapper p {
  font-size: 120%;
}
div.card-container:nth-of-type(1) .card .front,
div.card-container:nth-of-type(1) .card .back {
  background: #f5c206;
  border-left: 8px solid #ddaf05;
}
div.card-container:nth-of-type(2) .card .front,
div.card-container:nth-of-type(2) .card .back {
  background: #a6c531;
  border-left: 8px solid #95b12c;
}
div.card-container:nth-of-type(3) .card .front,
div.card-container:nth-of-type(3) .card .back {
  background: #ea391f;
  border-left: 8px solid #da2e14;
}
div.card-container:nth-of-type(4) .card .front,
div.card-container:nth-of-type(4) .card .back {
  background: #86ccdc;
  border-left: 8px solid #6bc0d4;
}
</style>

<script>
$(function() {

  // for exp c
  //$('.nav ~ h1').html('Discover the Rosetta Stone difference.').siblings('p').html('Language learning that really works.')

  var devicesImg = $('.devices').detach()
  $('.nav ~ h1').before(devicesImg)

  $('.select-language-wrapper h1').append("<div style='font-size:50%;margin-top:5px'>Select a language to get started.</div>")

  $('div.languages a').unbind()


  $('input[type=email]').hide()


  $('div.languages a').click(function(e) {
    e.preventDefault()
    $('input[type=email]').show()
    // hide languahes
    $('div.languages a').hide()
    var langname = $(this).html()
    langname = langname.charAt(0).toUpperCase() + langname.slice(1).toLowerCase()
    $(this).parent().find('.selected').removeClass('selected')
    $('.select-language-wrapper h1').html('<div>Ready to start  your <b>' + langname + '</b> Demo?</div><div><a href="#">(change language)</a>')
    selectedLang = $(this).data('lang')
    $('input[type=email], input[type=email] ~ small, input[type=email] ~ div.button').show()
  })

  $('div.select-language-wrapper').on('click', 'h1 a', function(e) {
    e.preventDefault()
    $('div.languages a').fadeIn('fast')
    $(this).parents('h1').html('Ready for a <b>FREE</b> Demo?<div style="font-size:50%;margin-top:5px>Select a language to get started.</div>')
    $('input[type=email], input[type=email] ~ small, input[type=email] ~ div.button').hide()
  })

})
</script>