LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
$

Change conversion settings in the user menu (top right)

CSS
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
@import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

body {
  font-family: 'Source Sans Pro', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

[href='#'] {
  color: inherit;
  text-decoration: none;
}

@-webkit-keyframes glow {
  from {
    opacity: 1;
    -webkit-animation-timing-function: ease-in;
  }
  50% {
    opacity: 0.2;
    -webkit-animation-timing-function: ease-out;
  }
  to {
    opacity: 1;
    -webkit-animation-timing-function: ease-in;
  }
}
@-moz-keyframes glow {
  from {
    opacity: 1;
    -moz-animation-timing-function: ease-in;
  }
  50% {
    opacity: 0.2;
    -moz-animation-timing-function: ease-out;
  }
  to {
    opacity: 1;
    -moz-animation-timing-function: ease-in;
  }
}
span {
  display: inline-block;
  padding: 0 10px;
  cursor: pointer;
}

header {
  background: #2c2c2c;
  color: #bbb;
  color: rgba(255, 255, 255, 0.5);
  line-height: 60px;
}

.subnav {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-size: 0.875em;
  background: #fff;
  border-bottom: 1px solid #ddd;
  color: #555;
  line-height: 40px;
  padding: 0 10px;
  transition: all 200ms;
}
.subnav.show {
  max-height: 50px;
  opacity: 1;
}
.subnav a {
  display: inline-block;
  margin: 0 10px;
  margin-bottom: -1px;
  padding: 0 5px;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  box-sizing: border-box;
}
.subnav a:hover {
  color: #333;
}
.subnav a.current {
  color: #e25d5b;
  border-bottom-color: #e25d5b;
}

.main-nav {
  padding: 0 10px;
}
.main-nav a {
  padding: 0 10px;
}
.main-nav a:hover, .main-nav a.current {
  color: white;
}

.user {
  float: right;
  position: relative;
  display: inline-block;
}
.user.expand .user-name {
  right: 100%;
}
.user.expand .entypo-left-open {
  transform: rotate(180deg);
}
.user.expand .user-nav {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.entypo-left-open {
  display: inline-block;
  transition: transform 250ms ease-in-out;
}

.user-name {
  white-space: nowrap;
  position: absolute;
  right: 0;
  top: 0;
  padding: 0 10px;
  background: #2c2c2c;
  z-index: 10;
  transition: right 200ms ease;
  box-sizing: border-box;
  border-right: 1px solid rgba(0, 0, 0, 0.85);
  height: 100%;
}
.user-name:hover {
  color: white;
}

.user:not(.expand) .entypo-left-open {
  animation: glow 1.5s infinite;
}

.user-nav {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  padding: 0 15px;
  font-size: 1.25em;
  box-shadow: inset 1px 0 4px rgba(0, 0, 0, 0.35);
  background: rgba(0, 0, 0, 0.25);
  transition: opacity 250ms;
}
.user-nav a {
  display: inline-block;
  text-align: center;
  min-width: 20px;
  padding: 0 15px;
  margin: 7px 0;
  color: rgba(255, 255, 255, 0.5);
  vertical-align: top;
  text-decoration: none;
}
.user-nav a:hover {
  color: white;
}
.user-nav a:last-child {
  padding: 0 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}
.user-nav label {
  font-size: 12px;
  line-height: 20px;
}
.user-nav label, .user-nav span {
  display: block;
  cursor: inherit;
}
.user-nav span {
  line-height: 24px;
  margin: 0;
}
.user-nav span:hover {
  color: white;
}

.currency-icon {
  font-weight: bold;
}

.close {
  float: right;
  font-size: 21px;
  font-weight: bold;
  line-height: 1;
  color: #000000;
  text-shadow: 0 1px 0 #ffffff;
  opacity: 0.2;
  filter: alpha(opacity=20);
}

.close:hover,
.close:focus {
  color: #000000;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.5;
  filter: alpha(opacity=50);
}

button.close {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
}

.modal-open {
  overflow: hidden;
}

.modal {
  font-size: 0.875em;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  outline: none;
  height: 100%;
  width: 100%;
  z-index: 1040;
  overflow: auto;
  overflow-y: scroll;
  visibility: hidden;
  display: table;
}
.modal.in {
  visibility: visible;
}

.modal.fade .modal-dialog {
  opacity: 0;
  transform: scale(0.8) translateZ(0);
  transition: all 250ms;
}

.modal.in .modal-dialog {
  opacity: 1;
  transform: scale(1) translateZ(0);
}

.modal-dialog {
  z-index: 1050;
  display: table-cell;
  vertical-align: middle;
}

.modal-content {
  position: relative;
  background-color: #ffffff;
  border: 1px solid #999999;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  outline: none;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
  background-clip: border-box;
  width: 50%;
  max-width: 630px;
  min-width: 320px;
  margin: auto;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
  background-color: #000000;
  visibility: hidden;
  transition: all 250ms;
}

.modal-backdrop.fade {
  opacity: 0;
}

.modal-backdrop.in {
  opacity: 0.5;
  visibility: visible;
}

.modal-header {
  min-height: 16.428571429px;
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
}

.modal-header .close {
  margin-top: -2px;
}

.modal-title {
  margin: 0;
  line-height: 1.428571429;
}

.modal-body {
  position: relative;
  padding: 30px;
}

html, body, .content {
  height: 100%;
}

.content {
  font-size: 0.875em;
  display: table;
  text-align: center;
  width: 100%;
}
.content .inner {
  display: table-cell;
  vertical-align: middle;
  height: 100%;
  padding-bottom: 60px;
  box-sizing: border-box;
}
JS
(function($){
  
  $.modal = function (el, options) {
      this.options = options;
      this.$el = $(el);
      this.$target = $(el.hash || this.$el.attr('data-target'));
      this.$backdrop = $('.modal-backdrop');
    
      if (this.$target.length) {
        this.$el.data("modal", this);
        this.init();
      }
    };
  
  $.modal.prototype = {
    
    init: function() {
      var self = this,
          settings,
          backdrop = $('
').addClass('modal-backdrop fade'); if (!self.$backdrop.length) { self.$backdrop = backdrop.appendTo('body'); } self.settings = settings = $.extend({}, self.defaults, self.options); self.$target.on('click', function(e) { self.hide(e) }); self.$el.on('click', function(e) { self.show(e) }); }, toggle: function(e) { return (this.$target.hasClass('in')) ? this.hide(e) : this.show(e); }, show: function(e) { e.preventDefault(); e.stopPropagation(); this.$target.addClass('in'); this.$backdrop.addClass('in'); $('body').addClass('modal-open'); }, hide: function(e) { e.preventDefault(); e.stopPropagation(); var className = e.target.className; if (className == 'modal-dialog' || className == 'close') { this.$target.removeClass('in'); this.$backdrop.removeClass('in'); $('body').removeClass('modal-open'); } }, defaults: { } }; $.fn.modal = function(options) { return this.each(function() { new $.modal(this, options); }); }; // self-instantiate on elements with // data-toggle='popover' $(document).ready(function() { $('[data-toggle=modal]').modal(); }); }(jQuery)); var appId = ''; url = 'http://openexchangerates.org/api/latest.json?app_id=' + appId; // Load exchange rates data via AJAX: $.getJSON( // NB: using Open Exchange Rates here, but you can use any source! url, function(data) { console.log(data); // Check money.js has finished loading: if ( typeof fx !== "undefined" && fx.rates ) { fx.rates = data.rates; fx.base = data.base; } else { // If not, apply to fxSetup global: var fxSetup = { rates : data.rates, base : data.base } } } ); var conversionDefault, currencyDefault = 'USD'; $.fn.updateCurrency = function() { var el = $(this), currency = parseFloat($.trim(el.val())); if (conversionDefault && currency && conversionDefault != currencyDefault) { var converted = fx.convert(currency, {from: currencyDefault, to: conversionDefault}).toFixed(3), text = [converted, conversionDefault].join(' '); console.log(text); el.attr('title', text); el.next('.conversion').remove(); $("").addClass('conversion').text(text).insertAfter(el); } } $(document).on('click', '.js-toggle-menu', function() { $(this).closest('.user').toggleClass('expand'); $('.conversionDefault').on('change', function() { conversionDefault = this.value; $('input.currency').each(function() { $(this).updateCurrency(); }); }); $('input.currency').on('keyup', function() { $(this).updateCurrency(); }); }); $(document).on('click', '.main-nav a', function() { $(this).addClass('current').siblings().removeClass('current'); $('.subnav').toggleClass('show'); });

Description

This is a couple things.
Term
Mon, 11/27/2017 - 21:22

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv