LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
Old New
Old New
Old New
CSS
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);
html,
body {
  width: 100%;
  height: 100%;
}
body {
  margin: 0;
  overflow: hidden;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}
.col {
  width: 33.33%;
  height: 100%;
  float: left;
  text-align: center;
  position: relative;
}
.col#green {
  background-color: #80b719;
  color: #ddd;
}
.col#green.new {
  background-color: #00d95a;
}
.col#black {
  background-color: #191414;
  color: #ccc;
}
.col#white {
  background-color: #fff;
  color: #ccc;
}
.col .image {
  width: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.col .image img {
  width: 100%;
}
[data-am-toggle-switch] {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  text-transform: uppercase;
  margin-top: 15px;
  font-size: 12.5px;
}
[data-am-toggle-switch] input {
  position: fixed;
  top: -9999px;
  left: -9999px;
}
[data-am-toggle-switch] input:checked + label {
  background-color: #8fe099;
}
[data-am-toggle-switch] input:checked + label:before {
  margin-left: 25px;
}
[data-am-toggle-switch] label {
  width: 50px;
  height: 25px;
  background-color: #f1f1f1;
  border: 1px solid #ddd;
  display: inline-block;
  vertical-align: middle;
  border-radius: 25px;
  position: relative;
  margin-left: 5px;
  margin-right: 5px;
  cursor: pointer;
  overflow: hidden;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}
[data-am-toggle-switch] label:before {
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  left: 0;
  top: 0;
  margin-left: 0;
  -webkit-transition: margin-left 0.2s ease;
  transition: margin-left 0.2s ease;
}
JS
$(function() {
	$('#input-b').on('change', function() { $('#black').find('img').toggle(); });
	$('#input-w').on('change', function() { $('#white').find('img').toggle(); });
	$('#input-g').on('change', function() { $('#green').toggleClass('new'); });
});
Host Instantly Drag and Drop Website Builder

 

Description

You don't like the new Spotify green? Compare it to the old green here!
Term
Mon, 11/27/2017 - 22:04

Related Codes

Pen ID
Pen ID
Pen ID