Shopify - Get Fit / Get Fat

fit.liquid

{% comment %}
    @rotcl
{% endcomment %}
<div class="ft container">
  <input class="inp" type="radio" id="fat" name="fatfit">
  <input class="inp" type="radio" id="fit" name="fatfit">
  <div class="spans">
      GET F<span>A<span>A</span><span>I</span></span>T
  </div>
  <div>
      <label for="fat">🍕</label>
      <label for="fit">💪🏼</label>
  </div>
</div>

<style>
.inp{
 display:none; 
}
  .spans{
  margin-bottom: 30px;
  color:black;
  font-weight: 900!important;
  }
.ft {
display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-family: 'Raleway', sans-serif;
	font-size: 72px;
}
.ft input + div > span {
  display: inline-block;
  position: relative;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0);
  transition: all 0.5s ease-in-out;
}
.ft input + div > span span {
  display: inline-block;
  position: absolute;
  left: 50%;
  text-align: center;
  color: rgba(0, 0, 0, 1);
  transform: translateX(-50%);
  transform-origin: left;
  transition: all 0.5s ease-in-out;
}
.ft input + div > span span:first-of-type {
  transform: rotateY(0deg) translateX(-50%);
}
.ft input + div > span span:last-of-type {
  transform: rotateY(0deg) translateX(0%) scaleX(0.75) skew(23deg, 0deg);
}
.ft input#fat:checked ~ div > span span:first-of-type {
  transform: rotateY(0deg) translateX(-50%);
}
.ft input#fat:checked ~ div > span span:last-of-type {
  transform: rotateY(0deg) translateX(0%) scaleX(0.75) skew(23deg, 0deg);
}
.ft input#fit:checked ~ div > span {
  margin: 0 -10px;
}
.ft input#fit:checked ~ div > span span:first-of-type {
  transform: rotateY(90deg) translateX(-50%);
}
.ft input#fit:checked ~ div > span span:last-of-type {
  transform: rotateY(0deg) translateX(-50%) scaleX(1) skew(0deg, 0deg);
}
.ft input + div + div {
  width: 280px;
  margin-top: 10px;
}
.ft input + div + div label {
  display: block;
  padding: 40px 5px;
  text-align: center;
  transition: all 0.15s ease-in-out;
  background: #fff;
  border-radius: 10px;
  box-sizing: border-box;
  width: 48%;
  font-size: 64px;
  cursor: pointer;
}
.ft input + div + div label:first-child {
  float: left;
  box-shadow: inset 0 0 0 4px #1597ff, 0 15px 15px -10px rgba(0, 125, 225, 0.375);
}
.ft input + div + div label:last-child {
  float: right;
}
.ft input#fat:checked ~ div + div label:first-child {
  box-shadow: inset 0 0 0 4px #1597ff, 0 15px 15px -10px rgba(0, 125, 225, 0.375);
}
.ft input#fat:checked ~ div + div label:last-child {
  box-shadow: inset 0 0 0 0px #1597ff, 0 10px 15px -20px rgba(21, 151, 255, 0);
}
.ft input#fit:checked ~ div + div label:first-child {
  box-shadow: inset 0 0 0 0px #1597ff, 0 10px 15px -20px rgba(21, 151, 255, 0);
}
.ft input#fit:checked ~ div + div label:last-child {
  box-shadow: inset 0 0 0 4px #1597ff, 0 15px 15px -10px rgba(0, 125, 225, 0.375);
}
.fits{
 margin: 20px auto!important; 
}

</style>

{% schema %}
{
  "name": "GetFit",
  "class": "fits",
  "settings": [
	{	
		"type": "header",
		"content": "Static"
	}
  ],
  "presets": [{
    "name": "GetFat",
    "category": "Custom"
  }]

}
{% endschema %}

eCommerce - ⚡️ Shopify ⚡️

Cosas innecesarias que nadie pidió