Homepage


Troubleshoot WordPress

How to Increase Maximum Upload File Size in WordPress


2 days ago

0Comments 36Views

There are few different ways to increase maximum upload file size in WordPress Method 1: .htaccess Go to your WordPress installed directory…

Read more

HTML & CSS

Pure CSS Product Card


October 18, 2020

0Comments 78Views

HTML CSS

Read more

HTML & CSS JavaScript & jQuery

Beautiful Expandable Sidebar Navigation


September 26, 2020

0Comments 46Views

Try this beautiful expandable sidebar navigation to your next project HTML CSS JS

Read more

Customize WordPress

How to Create Custom Post Types in WordPress


January 23, 2020

0Comments 41Views

WordPress is the most popular and easy to use content management system (CMS) platform right now. And day by day it’s going…

Read more


How to Increase Maximum Upload File Size in WordPress

Troubleshoot, WordPress

How to Increase Maximum Upload File Size in WordPress


2 days ago

0Comments 36Views

There are few different ways to increase maximum upload file size in WordPress

Method 1: .htaccess

Go to your WordPress installed directory from hosting file manager then open the .htaccess file. If the .htaccess file not showing in the directory then click on Settings from the upper right corner and mark check Show Hidden Files (dotfiles) option.

wordpress htaccess file

Change the value as your need then copy-paste this code in your .htaccess file. If your internet connection is slow then increase max_execution_time

php_value upload_max_filesize 512M
php_value post_max_size 512M
php_value memory_limit 256M
php_value max_execution_time 500
php_value max_input_time 500

Method 2: wp-config.php

Open wp-config.php from WordPress installation directory and paste the code

@ini_set( 'upload_max_filesize' , '512M' );
@ini_set( 'post_max_size', '512M');
@ini_set( 'memory_limit', '256M' );
@ini_set( 'max_execution_time', '500' );
@ini_set( 'max_input_time', '500' );

Method 3: php.ini

If you working on localhost or your hosting provider allows you to edit php.ini file then you can increase the values by searching upload_max_filesize, post_max_size, memory_limit, max_execution_time, max_input_time

If any of above method doesn’t work then contact with your hosting provider.
Read more



HTML & CSS

Pure CSS Product Card


October 18, 2020

0Comments 78Views

HTML

<div id='wrap'>
  <input class='initial' type='checkbox'>
  <input class='wheel1' name='wheel' type='radio'>
  <input class='wheel2' name='wheel' type='radio'>
  <input class='wheel3' name='wheel' type='radio'>
  <input class='wheel4' name='wheel' type='radio'>
  <input class='buy' type='checkbox'>
  <h1>Configure the Bike</h1>
  <h2>Added to Cart</h2>
  <h3>Wheels</h3>
  <div class='wheeltoggle'></div>
  <div class='wheeltoggle'></div>
  <div class='wheeltoggle'></div>
  <div class='wheeltoggle'></div>
  <div class='buy'></div>
  <div class='toggle expand'>
    <i class='fas fa-bicycle'></i>
  </div>
  <div class='toggle'>
    <i class='fas fa-bicycle'></i>
  </div>
  <div class='background'></div>
  <div class='frame'>
    <div class='rear'></div>
    <div class='stem'></div>
    <div class='shaft'></div>
    <div class='seat'></div>
    <div class='wheel one front'>
      <div class='inner'></div>
    </div>
    <div class='wheel one back'>
      <div class='inner'></div>
    </div>
  </div>
</div>
body {
  display: grid;
  place-items: center;
  height: 100vh;
  font-family: "Roboto";
  background: #dfe1eb;
}
body #wrap {
  width: 800px;
  height: 550px;
  background: #efefef;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.25);
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  grid-template-rows: repeat(15, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}
body #wrap h1,
body #wrap h2 {
  grid-area: 4 / 10 / 5 / 15;
  color: #000;
  position: relative;
  z-index: 9;
  font-size: 28px;
  -webkit-transition: 0.4s cubic-bezier(0.75, 0.885, 0.32, 1);
  transition: 0.4s cubic-bezier(0.75, 0.885, 0.32, 1);
  text-align: right;
  opacity: 0.25;
}
body #wrap h2 {
  grid-area: 4 / 2 / 5 / 7;
  text-align: left;
  -webkit-transform: translateY(100px);
          transform: translateY(100px);
  opacity: 0;
}
body #wrap h3 {
  position: relative;
  z-index: 9;
  grid-area: 10 / 11 / 11 / 12;
  opacity: 0.25;
  -webkit-transition: 0.4s cubic-bezier(0.75, 0.885, 0.32, 1);
  transition: 0.4s cubic-bezier(0.75, 0.885, 0.32, 1);
}
body #wrap .toggle {
  width: 30px;
  height: 30px;
  box-shadow: -5px 0 0 rgba(255, 255, 255, 0.15);
  z-index: 9;
  background: rgba(255, 255, 255, 0.05);
  position: relative;
  grid-area: 4 / 2 / 5 / 3;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}
body #wrap .toggle.expand:before {
  content: "IF Mode";
  position: absolute;
  color: #fff;
  top: -40px;
  width: 100px;
  font-weight: 900;
}
body #wrap .toggle i {
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
body #wrap .toggle:not(.expand) {
  margin-top: 40px;
  box-shadow: -5px 0 0 #ff6a5e;
}
body #wrap .toggle:not(.expand) i {
  -webkit-transform: translate(-50%, -50%) rotate(-90deg);
          transform: translate(-50%, -50%) rotate(-90deg);
}
body #wrap input {
  cursor: pointer;
  opacity: 0;
}
body #wrap .buy {
  grid-area: 14 / 3 / 15 / 5;
  background: #ff6a5e;
  position: relative;
  height: 50px;
  left: 40px;
  border-radius: 3px;
  z-index: 9;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
  -webkit-transform: translateY(200px);
          transform: translateY(200px);
}
body #wrap .buy:not(input) {
  pointer-events: none;
  -webkit-animation: fadein 0.2s ease-in-out 1 forwards;
          animation: fadein 0.2s ease-in-out 1 forwards;
}
@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
body #wrap .buy:not(input):after {
  content: "Buy Now";
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 0 1px #ff6a5e;
  border-radius: inherit;
  right: calc(100% + 10px);
  top: 0;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  color: #ff6a5e;
  cursor: pointer;
  -webkit-transition: 0.6s ease-in-out;
  transition: 0.6s ease-in-out;
  -webkit-transform: translateY(200px);
          transform: translateY(200px);
}
body #wrap .buy:before {
  content: "Check Out";
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  color: #fff;
  -webkit-animation: buynow 1s ease-in-out 1 forwards;
          animation: buynow 1s ease-in-out 1 forwards;
}
@-webkit-keyframes buynow {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    content: "Check Out";
  }
}
@keyframes buynow {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    content: "Check Out";
  }
}
body #wrap input.initial {
  position: relative;
  grid-area: 4 / 2 / 5 / 3;
  z-index: 999;
  width: 30px;
  height: 70px;
  opacity: 0;
}
body #wrap input.initial:first-of-type:hover ~ .toggle.expand {
  background: #ff6a5e;
}
body #wrap input.initial:checked {
  pointer-events: none;
}
body #wrap input.initial:checked ~ .toggle:not(.expand) {
  -webkit-transform: translateX(-100px);
          transform: translateX(-100px);
}
body #wrap input.initial:checked ~ input[type="radio"] {
  pointer-events: all;
}
body #wrap input.initial:checked ~ .wheeltoggle, body #wrap input.initial:checked ~ h3, body #wrap input.initial:checked ~ h1 {
  -webkit-filter: saturate(1);
          filter: saturate(1);
  opacity: 1;
}
body #wrap input.initial:checked ~ .buy {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  min-width: 110px;
  -webkit-transition-delay: 1s;
          transition-delay: 1s;
}
body #wrap input.initial:checked ~ .buy:after {
  -webkit-transform: translateY(200px);
          transform: translateY(200px);
}
body #wrap input.initial:checked ~ .buy:checked {
  -webkit-transform: translateY(-250px);
          transform: translateY(-250px);
}
body #wrap input.initial:checked ~ .buy:checked ~ .toggle {
  opacity: 0;
}
body #wrap input.initial:checked ~ .buy:checked ~ .frame .wheel .inner {
  -webkit-animation: wheelroll6 1.25s ease-in-out 1 forwards;
          animation: wheelroll6 1.25s ease-in-out 1 forwards;
}
body #wrap input.initial:checked ~ .buy:checked ~ h2 {
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
  opacity: 1;
}
body #wrap input.initial:checked ~ .buy:checked ~ .wheeltoggle, body #wrap input.initial:checked ~ .buy:checked ~ h1, body #wrap input.initial:checked ~ .buy:checked ~ h3 {
  -webkit-transform: translateY(100px);
          transform: translateY(100px);
  opacity: 0;
}
body #wrap input.initial:checked ~ .buy:checked ~ .wheeltoggle:nth-of-type(1) {
  -webkit-transition-delay: 0.05s;
          transition-delay: 0.05s;
}
body #wrap input.initial:checked ~ .buy:checked ~ .wheeltoggle:nth-of-type(2) {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}
body #wrap input.initial:checked ~ .buy:checked ~ .wheeltoggle:nth-of-type(3) {
  -webkit-transition-delay: 0.15s;
          transition-delay: 0.15s;
}
body #wrap input.initial:checked ~ .buy:checked ~ .wheeltoggle:nth-of-type(4) {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
body #wrap input.initial:checked ~ .buy:checked ~ h3 {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}
body #wrap input.initial:checked ~ .buy:checked ~ .buy {
  -webkit-animation: bounceback 1s ease-in-out 1 forwards;
          animation: bounceback 1s ease-in-out 1 forwards;
}
body #wrap input.initial:checked ~ .buy:checked ~ .buy:after {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}
body #wrap input.initial:checked ~ .buy:checked ~ .buy:before {
  -webkit-animation: buynow2 1s ease-in-out 1 forwards;
          animation: buynow2 1s ease-in-out 1 forwards;
}
@-webkit-keyframes buynow2 {
  100% {
    content: "Back";
  }
}
@keyframes buynow2 {
  100% {
    content: "Back";
  }
}
@-webkit-keyframes bounceback {
  0% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  50% {
    -webkit-transform: translateY(200px);
            transform: translateY(200px);
  }
  50.5% {
    -webkit-transform: translateY(200px);
            transform: translateY(200px);
    opacity: 0;
  }
  51% {
    -webkit-transform: translateY(-200px);
            transform: translateY(-200px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(-250px);
            transform: translateY(-250px);
  }
}
@keyframes bounceback {
  0% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  50% {
    -webkit-transform: translateY(200px);
            transform: translateY(200px);
  }
  50.5% {
    -webkit-transform: translateY(200px);
            transform: translateY(200px);
    opacity: 0;
  }
  51% {
    -webkit-transform: translateY(-200px);
            transform: translateY(-200px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(-250px);
            transform: translateY(-250px);
  }
}
body #wrap input.initial:checked ~ .buy:checked ~ .frame:not(.two):not(i):not(.buy) {
  -webkit-transform: scale(0.7) translateX(350px) translateY(50px);
          transform: scale(0.7) translateX(350px) translateY(50px);
  -webkit-transition: 0.75s cubic-bezier(0.75, 0.885, 0.32, 1);
  transition: 0.75s cubic-bezier(0.75, 0.885, 0.32, 1);
  -webkit-transition-delay: 0.25s;
          transition-delay: 0.25s;
}
body #wrap input.initial:checked ~ .buy:checked ~ .background:before {
  -webkit-transition: left 0.4s cubic-bezier(0.75, 0.885, 0.32, 1), -webkit-transform 0.4s cubic-bezier(0.75, 0.885, 0.32, 1) !important;
  transition: left 0.4s cubic-bezier(0.75, 0.885, 0.32, 1), -webkit-transform 0.4s cubic-bezier(0.75, 0.885, 0.32, 1) !important;
  transition: transform 0.4s cubic-bezier(0.75, 0.885, 0.32, 1), left 0.4s cubic-bezier(0.75, 0.885, 0.32, 1) !important;
  transition: transform 0.4s cubic-bezier(0.75, 0.885, 0.32, 1), left 0.4s cubic-bezier(0.75, 0.885, 0.32, 1), -webkit-transform 0.4s cubic-bezier(0.75, 0.885, 0.32, 1) !important;
  -webkit-transition-delay: 0.4s, 0.8s !important;
          transition-delay: 0.4s, 0.8s !important;
  -webkit-transform-origin: right;
          transform-origin: right;
  -webkit-transform: scaleX(2) !important;
          transform: scaleX(2) !important;
  left: -5%;
}
body #wrap input.initial:checked ~ .buy:checked ~ .background:after {
  -webkit-transform: scaleY(1.25) translateX(-40px) !important;
          transform: scaleY(1.25) translateX(-40px) !important;
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
body #wrap input.initial:checked ~ .buy:not(div) {
  pointer-events: all;
  z-index: 999;
}
body #wrap input.initial:checked ~ .buy:not(div):hover ~ .buy {
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
  background: #ff3b2b;
}
body #wrap .wheeltoggle {
  box-shadow: 0 0 0 1px #efefef, 0 10px 20px -20px #4e567d;
  border-radius: 3px;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  pointer-events: none;
  -webkit-filter: saturate(0);
          filter: saturate(0);
  opacity: 0.5;
  background: #fff;
  z-index: 9;
}
body #wrap .wheeltoggle:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 50px;
  top: 0;
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
}
body #wrap .wheeltoggle:nth-of-type(1):after {
  content: "Wheel Type 1";
  position: absolute;
  width: 100%;
  top: 55px;
  font-size: 10px;
  text-align: center;
  line-height: 1.25;
  color: #4e567d;
  text-transform: uppercase;
}
body #wrap .wheeltoggle:nth-of-type(1):before {
  background: url(https://assets.codepen.io/383755/wheel1.png) 50% 50%/80% auto no-repeat;
}
body #wrap .wheeltoggle:nth-of-type(2):after {
  content: "Wheel Type 2";
  position: absolute;
  width: 100%;
  top: 55px;
  font-size: 10px;
  text-align: center;
  line-height: 1.25;
  color: #4e567d;
  text-transform: uppercase;
}
body #wrap .wheeltoggle:nth-of-type(2):before {
  background: url(https://assets.codepen.io/383755/wheel2.png) 50% 50%/80% auto no-repeat;
}
body #wrap .wheeltoggle:nth-of-type(3):after {
  content: "Wheel Type 3";
  position: absolute;
  width: 100%;
  top: 55px;
  font-size: 10px;
  text-align: center;
  line-height: 1.25;
  color: #4e567d;
  text-transform: uppercase;
}
body #wrap .wheeltoggle:nth-of-type(3):before {
  background: url(https://assets.codepen.io/383755/wheel3.png) 50% 50%/80% auto no-repeat;
}
body #wrap .wheeltoggle:nth-of-type(4):after {
  content: "Wheel Type 4";
  position: absolute;
  width: 100%;
  top: 55px;
  font-size: 10px;
  text-align: center;
  line-height: 1.25;
  color: #4e567d;
  text-transform: uppercase;
}
body #wrap .wheeltoggle:nth-of-type(4):before {
  background: url(https://assets.codepen.io/383755/wheel4.png) 50% 50%/80% auto no-repeat;
}
body #wrap input[type="radio"],
body #wrap .wheeltoggle {
  position: absolute;
  z-index: 999;
  width: 50px;
  height: 90px;
  z-index: 999;
  pointer-events: none;
}
body #wrap input[type="radio"].wheel1, body #wrap input[type="radio"]:not(input):nth-of-type(1),
body #wrap .wheeltoggle.wheel1,
body #wrap .wheeltoggle:not(input):nth-of-type(1) {
  grid-area: 11 / 14 / 12 / 15;
}
body #wrap input[type="radio"].wheel2, body #wrap input[type="radio"]:not(input):nth-of-type(2),
body #wrap .wheeltoggle.wheel2,
body #wrap .wheeltoggle:not(input):nth-of-type(2) {
  grid-area: 11 / 13 / 12 / 14;
}
body #wrap input[type="radio"].wheel3, body #wrap input[type="radio"]:not(input):nth-of-type(3),
body #wrap .wheeltoggle.wheel3,
body #wrap .wheeltoggle:not(input):nth-of-type(3) {
  grid-area: 11 / 12 / 12 / 13;
}
body #wrap input[type="radio"].wheel4, body #wrap input[type="radio"]:not(input):nth-of-type(4),
body #wrap .wheeltoggle.wheel4,
body #wrap .wheeltoggle:not(input):nth-of-type(4) {
  grid-area: 11 / 11 / 12 / 12;
}
body #wrap input[type="radio"].wheel1:checked ~ .wheeltoggle:nth-of-type(1),
body #wrap .wheeltoggle.wheel1:checked ~ .wheeltoggle:nth-of-type(1) {
  box-shadow: 0 0 0 1px #ff6a5e, 0 10px 20px -30px #4e567d;
}
body #wrap input[type="radio"].wheel1:hover ~ .wheeltoggle:nth-of-type(1),
body #wrap .wheeltoggle.wheel1:hover ~ .wheeltoggle:nth-of-type(1) {
  box-shadow: 0 0 0 1px #efefef, 0 10px 20px -10px #4e567d;
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
body #wrap input[type="radio"].wheel1:hover ~ .wheeltoggle:nth-of-type(1):before,
body #wrap .wheeltoggle.wheel1:hover ~ .wheeltoggle:nth-of-type(1):before {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
body #wrap input[type="radio"].wheel1:checked ~ .frame > div.wheel,
body #wrap .wheeltoggle.wheel1:checked ~ .frame > div.wheel {
  -webkit-animation: wheelout1 0.75s ease-in-out 1 forwards 0.25s;
          animation: wheelout1 0.75s ease-in-out 1 forwards 0.25s;
}
body #wrap input[type="radio"].wheel1:checked ~ .frame > div.wheel .inner:before,
body #wrap .wheeltoggle.wheel1:checked ~ .frame > div.wheel .inner:before {
  background-image: url(https://assets.codepen.io/383755/wheel1.png);
  -webkit-animation: wheelroll1 1s ease-in-out 1 forwards 0s;
          animation: wheelroll1 1s ease-in-out 1 forwards 0s;
}
@-webkit-keyframes wheelroll1 {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(720deg);
            transform: rotate(720deg);
  }
}
@keyframes wheelroll1 {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(720deg);
            transform: rotate(720deg);
  }
}
@-webkit-keyframes wheelroll6 {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes wheelroll6 {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
body #wrap input[type="radio"].wheel1:checked ~ .frame > div.wheel.back,
body #wrap .wheeltoggle.wheel1:checked ~ .frame > div.wheel.back {
  -webkit-animation: wheelback1 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s;
          animation: wheelback1 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s;
}
@-webkit-keyframes wheelback1 {
  0% {
    -webkit-transform: translate(0px);
            transform: translate(0px);
  }
  50% {
    -webkit-transform: translateX(-700px);
            transform: translateX(-700px);
  }
  100% {
    -webkit-transform: translate(0px);
            transform: translate(0px);
  }
}
@keyframes wheelback1 {
  0% {
    -webkit-transform: translate(0px);
            transform: translate(0px);
  }
  50% {
    -webkit-transform: translateX(-700px);
            transform: translateX(-700px);
  }
  100% {
    -webkit-transform: translate(0px);
            transform: translate(0px);
  }
}
@-webkit-keyframes wheelout1 {
  0% {
    -webkit-transform: translate(0px);
            transform: translate(0px);
  }
  50% {
    -webkit-transform: translateX(700px);
            transform: translateX(700px);
  }
  100% {
    -webkit-transform: translate(0px);
            transform: translate(0px);
  }
}
@keyframes wheelout1 {
  0% {
    -webkit-transform: translate(0px);
            transform: translate(0px);
  }
  50% {
    -webkit-transform: translateX(700px);
            transform: translateX(700px);
  }
  100% {
    -webkit-transform: translate(0px);
            transform: translate(0px);
  }
}
body #wrap input[type="radio"].wheel1:checked ~ .frame > div:not(.wheel),
body #wrap .wheeltoggle.wheel1:checked ~ .frame > div:not(.wheel) {
  -webkit-animation: jump1 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s;
          animation: jump1 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s;
}
@-webkit-keyframes jump1 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-75px) rotate(-2.5deg);
            transform: translateY(-75px) rotate(-2.5deg);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes jump1 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-75px) rotate(-2.5deg);
            transform: translateY(-75px) rotate(-2.5deg);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
body #wrap input[type="radio"].wheel2:checked ~ .wheeltoggle:nth-of-type(2),
body #wrap .wheeltoggle.wheel2:checked ~ .wheeltoggle:nth-of-type(2) {
  box-shadow: 0 0 0 1px #ff6a5e, 0 10px 20px -30px #4e567d;
}
body #wrap input[type="radio"].wheel2:hover ~ .wheeltoggle:nth-of-type(2),
body #wrap .wheeltoggle.wheel2:hover ~ .wheeltoggle:nth-of-type(2) {
  box-shadow: 0 0 0 1px #efefef, 0 10px 20px -10px #4e567d;
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
body #wrap input[type="radio"].wheel2:hover ~ .wheeltoggle:nth-of-type(2):before,
body #wrap .wheeltoggle.wheel2:hover ~ .wheeltoggle:nth-of-type(2):before {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
body #wrap input[type="radio"].wheel2:checked ~ .frame > div.wheel,
body #wrap .wheeltoggle.wheel2:checked ~ .frame > div.wheel {
  -webkit-animation: wheelout2 0.75s ease-in-out 1 forwards 0.25s;
          animation: wheelout2 0.75s ease-in-out 1 forwards 0.25s;
}
body #wrap input[type="radio"].wheel2:checked ~ .frame > div.wheel .inner:before,
body #wrap .wheeltoggle.wheel2:checked ~ .frame > div.wheel .inner:before {
  background-image: url(https://assets.codepen.io/383755/wheel2.png);
  -webkit-animation: wheelroll2 1s ease-in-out 1 forwards 0s;
          animation: wheelroll2 1s ease-in-out 1 forwards 0s;
}
@-webkit-keyframes wheelroll2 {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(720deg);
            transform: rotate(720deg);
  }
}
@keyframes wheelroll2 {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(720deg);
            transform: rotate(720deg);
  }
}
@keyframes wheelroll6 {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
body #wrap input[type="radio"].wheel2:checked ~ .frame > div.wheel.back,
body #wrap .wheeltoggle.wheel2:checked ~ .frame > div.wheel.back {
  -webkit-animation: wheelback2 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s;
          animation: wheelback2 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s;
}
@-webkit-keyframes wheelback2 {
  0% {
    -webkit-transform: translate(0px);
            transform: translate(0px);
  }
  50% {
    -webkit-transform: translateX(-700px);
            transform: translateX(-700px);
  }
  100% {
    -webkit-transform: translate(0px);
            transform: translate(0px);
  }
}
@keyframes wheelback2 {
  0% {
    -webkit-transform: translate(0px);
            transform: translate(0px);
  }
  50% {
    -webkit-transform: translateX(-700px);
            transform: translateX(-700px);
  }
  100% {
    -webkit-transform: translate(0px);
            transform: translate(0px);
  }
}
@-webkit-keyframes wheelout2 {
  0% {
    -webkit-transform: translate(0px);
            transform: translate(0px);
  }
  50% {
    -webkit-transform: translateX(700px);
            transform: translateX(700px);
  }
  100% {
    -webkit-transform: translate(0px);
            transform: translate(0px);
  }
}
@keyframes wheelout2 {
  0% {
    -webkit-transform: translate(0px);
            transform: translate(0px);
  }
  50% {
    -webkit-transform: translateX(700px);
            transform: translateX(700px);
  }
  100% {
    -webkit-transform: translate(0px);
            transform: translate(0px);
  }
}
body #wrap input[type="radio"].wheel2:checked ~ .frame > div:not(.wheel),
body #wrap .wheeltoggle.wheel2:checked ~ .frame > div:not(.wheel) {
  -webkit-animation: jump2 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s;
          animation: jump2 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s;
}
@-webkit-keyframes jump2 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-75px) rotate(-2.5deg);
            transform: translateY(-75px) rotate(-2.5deg);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes jump2 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-75px) rotate(-2.5deg);
            transform: translateY(-75px) rotate(-2.5deg);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
body #wrap input[type="radio"].wheel3:checked ~ .wheeltoggle:nth-of-type(3),
body #wrap .wheeltoggle.wheel3:checked ~ .wheeltoggle:nth-of-type(3) {
  box-shadow: 0 0 0 1px #ff6a5e, 0 10px 20px -30px #4e567d;
}
body #wrap input[type="radio"].wheel3:hover ~ .wheeltoggle:nth-of-type(3),
body #wrap .wheeltoggle.wheel3:hover ~ .wheeltoggle:nth-of-type(3) {
  box-shadow: 0 0 0 1px #efefef, 0 10px 20px -10px #4e567d;
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
body #wrap input[type="radio"].wheel3:hover ~ .wheeltoggle:nth-of-type(3):before,
body #wrap .wheeltoggle.wheel3:hover ~ .wheeltoggle:nth-of-type(3):before {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
body #wrap input[type="radio"].wheel3:checked ~ .frame > div.wheel,
body #wrap .wheeltoggle.wheel3:checked ~ .frame > div.wheel {
  -webkit-animation: wheelout3 0.75s ease-in-out 1 forwards 0.25s;
          animation: wheelout3 0.75s ease-in-out 1 forwards 0.25s;
}
body #wrap input[type="radio"].wheel3:checked ~ .frame > div.wheel .inner:before,
body #wrap .wheeltoggle.wheel3:checked ~ .frame > div.wheel .inner:before {
  background-image: url(https://assets.codepen.io/383755/wheel3.png);
  -webkit-animation: wheelroll3 1s ease-in-out 1 forwards 0s;
          animation: wheelroll3 1s ease-in-out 1 forwards 0s;
}
@-webkit-keyframes wheelroll3 {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(720deg);
            transform: rotate(720deg);
  }
}
@keyframes wheelroll3 {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(720deg);
            transform: rotate(720deg);
  }
}
@keyframes wheelroll6 {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
body #wrap input[type="radio"].wheel3:checked ~ .frame > div.wheel.back,
body #wrap .wheeltoggle.wheel3:checked ~ .frame > div.wheel.back {
  -webkit-animation: wheelback3 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s;
          animation: wheelback3 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s;
}
@-webkit-keyframes wheelback3 {
  0% {
    -webkit-transform: translate(0px);
            transform: translate(0px);
  }
  50% {
    -webkit-transform: translateX(-700px);
            transform: translateX(-700px);
  }
  100% {
    -webkit-transform: translate(0px);
            transform: translate(0px);
  }
}
@keyframes wheelback3 {
  0% {
    -webkit-transform: translate(0px);
            transform: translate(0px);
  }
  50% {
    -webkit-transform: translateX(-700px);
            transform: translateX(-700px);
  }
  100% {
    -webkit-transform: translate(0px);
            transform: translate(0px);
  }
}
@-webkit-keyframes wheelout3 {
  0% {
    -webkit-transform: translate(0px);
            transform: translate(0px);
  }
  50% {
    -webkit-transform: translateX(700px);
            transform: translateX(700px);
  }
  100% {
    -webkit-transform: translate(0px);
            transform: translate(0px);
  }
}
@keyframes wheelout3 {
  0% {
    -webkit-transform: translate(0px);
            transform: translate(0px);
  }
  50% {
    -webkit-transform: translateX(700px);
            transform: translateX(700px);
  }
  100% {
    -webkit-transform: translate(0px);
            transform: translate(0px);
  }
}
body #wrap input[type="radio"].wheel3:checked ~ .frame > div:not(.wheel),
body #wrap .wheeltoggle.wheel3:checked ~ .frame > div:not(.wheel) {
  -webkit-animation: jump3 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s;
          animation: jump3 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s;
}
@-webkit-keyframes jump3 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-75px) rotate(-2.5deg);
            transform: translateY(-75px) rotate(-2.5deg);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes jump3 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-75px) rotate(-2.5deg);
            transform: translateY(-75px) rotate(-2.5deg);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
body #wrap input[type="radio"].wheel4:checked ~ .wheeltoggle:nth-of-type(4),
body #wrap .wheeltoggle.wheel4:checked ~ .wheeltoggle:nth-of-type(4) {
  box-shadow: 0 0 0 1px #ff6a5e, 0 10px 20px -30px #4e567d;
}
body #wrap input[type="radio"].wheel4:hover ~ .wheeltoggle:nth-of-type(4),
body #wrap .wheeltoggle.wheel4:hover ~ .wheeltoggle:nth-of-type(4) {
  box-shadow: 0 0 0 1px #efefef, 0 10px 20px -10px #4e567d;
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
body #wrap input[type="radio"].wheel4:hover ~ .wheeltoggle:nth-of-type(4):before,
body #wrap .wheeltoggle.wheel4:hover ~ .wheeltoggle:nth-of-type(4):before {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
body #wrap input[type="radio"].wheel4:checked ~ .frame > div.wheel,
body #wrap .wheeltoggle.wheel4:checked ~ .frame > div.wheel {
  -webkit-animation: wheelout4 0.75s ease-in-out 1 forwards 0.25s;
          animation: wheelout4 0.75s ease-in-out 1 forwards 0.25s;
}
body #wrap input[type="radio"].wheel4:checked ~ .frame > div.wheel .inner:before,
body #wrap .wheeltoggle.wheel4:checked ~ .frame > div.wheel .inner:before {
  background-image: url(https://assets.codepen.io/383755/wheel4.png);
  -webkit-animation: wheelroll4 1s ease-in-out 1 forwards 0s;
          animation: wheelroll4 1s ease-in-out 1 forwards 0s;
}
@-webkit-keyframes wheelroll4 {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(720deg);
            transform: rotate(720deg);
  }
}
@keyframes wheelroll4 {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(720deg);
            transform: rotate(720deg);
  }
}
@keyframes wheelroll6 {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
body #wrap input[type="radio"].wheel4:checked ~ .frame > div.wheel.back,
body #wrap .wheeltoggle.wheel4:checked ~ .frame > div.wheel.back {
  -webkit-animation: wheelback4 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s;
          animation: wheelback4 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s;
}
@-webkit-keyframes wheelback4 {
  0% {
    -webkit-transform: translate(0px);
            transform: translate(0px);
  }
  50% {
    -webkit-transform: translateX(-700px);
            transform: translateX(-700px);
  }
  100% {
    -webkit-transform: translate(0px);
            transform: translate(0px);
  }
}
@keyframes wheelback4 {
  0% {
    -webkit-transform: translate(0px);
            transform: translate(0px);
  }
  50% {
    -webkit-transform: translateX(-700px);
            transform: translateX(-700px);
  }
  100% {
    -webkit-transform: translate(0px);
            transform: translate(0px);
  }
}
@-webkit-keyframes wheelout4 {
  0% {
    -webkit-transform: translate(0px);
            transform: translate(0px);
  }
  50% {
    -webkit-transform: translateX(700px);
            transform: translateX(700px);
  }
  100% {
    -webkit-transform: translate(0px);
            transform: translate(0px);
  }
}
@keyframes wheelout4 {
  0% {
    -webkit-transform: translate(0px);
            transform: translate(0px);
  }
  50% {
    -webkit-transform: translateX(700px);
            transform: translateX(700px);
  }
  100% {
    -webkit-transform: translate(0px);
            transform: translate(0px);
  }
}
body #wrap input[type="radio"].wheel4:checked ~ .frame > div:not(.wheel),
body #wrap .wheeltoggle.wheel4:checked ~ .frame > div:not(.wheel) {
  -webkit-animation: jump4 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s;
          animation: jump4 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s;
}
@-webkit-keyframes jump4 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-75px) rotate(-2.5deg);
            transform: translateY(-75px) rotate(-2.5deg);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes jump4 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-75px) rotate(-2.5deg);
            transform: translateY(-75px) rotate(-2.5deg);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
body #wrap input[type="radio"]:checked ~ .frame > div:not(.wheel),
body #wrap .wheeltoggle:checked ~ .frame > div:not(.wheel) {
  -webkit-animation: jump 1s ease-in-out 1 forwards;
          animation: jump 1s ease-in-out 1 forwards;
}
body #wrap input.initial:checked ~ .toggle {
  box-shadow: -5px 0 0 #ff6a5e;
}
body #wrap input.initial:checked ~ .toggle:not(.expand) {
  box-shadow: -5px 0 0 rgba(255, 255, 255, 0.15);
}
body #wrap input.initial:checked ~ *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle) {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  margin-left: 0px;
}
body #wrap input.initial:checked ~ *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle) *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle) {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  margin-left: 0px;
}
body #wrap input.initial:checked ~ *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle) *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle):before, body #wrap input.initial:checked ~ *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle) *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle):after {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
body #wrap input.initial:checked ~ *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle).background:after {
  -webkit-transform: scaleY(1.25) translateX(30px);
          transform: scaleY(1.25) translateX(30px);
}
body #wrap input.initial:checked ~ *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle).background:before {
  -webkit-transition: 0.5s cubic-bezier(0.75, 0.885, 0.32, 1);
  transition: 0.5s cubic-bezier(0.75, 0.885, 0.32, 1);
}
body #wrap input.initial:checked ~ *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle).frame {
  -webkit-transform: scale(0.7) rotate(0deg) translateY(50px);
          transform: scale(0.7) rotate(0deg) translateY(50px);
  margin-left: -25px;
}
body #wrap input.initial:checked ~ *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle):before, body #wrap input.initial:checked ~ *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle):after {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
body #wrap * {
  -webkit-transition: margin-left 0.3s cubic-bezier(0.75, 0.885, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.75, 0.885, 0.32, 1);
  transition: margin-left 0.3s cubic-bezier(0.75, 0.885, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.75, 0.885, 0.32, 1);
  transition: transform 0.3s cubic-bezier(0.75, 0.885, 0.32, 1), margin-left 0.3s cubic-bezier(0.75, 0.885, 0.32, 1);
  transition: transform 0.3s cubic-bezier(0.75, 0.885, 0.32, 1), margin-left 0.3s cubic-bezier(0.75, 0.885, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.75, 0.885, 0.32, 1);
}
body #wrap *.frame {
  -webkit-transition: margin-left 0.4s cubic-bezier(0.75, 0.885, 0.32, 1), -webkit-transform 0.6s cubic-bezier(0.75, 0.885, 0.32, 1);
  transition: margin-left 0.4s cubic-bezier(0.75, 0.885, 0.32, 1), -webkit-transform 0.6s cubic-bezier(0.75, 0.885, 0.32, 1);
  transition: transform 0.6s cubic-bezier(0.75, 0.885, 0.32, 1), margin-left 0.4s cubic-bezier(0.75, 0.885, 0.32, 1);
  transition: transform 0.6s cubic-bezier(0.75, 0.885, 0.32, 1), margin-left 0.4s cubic-bezier(0.75, 0.885, 0.32, 1), -webkit-transform 0.6s cubic-bezier(0.75, 0.885, 0.32, 1);
  -webkit-transition-delay: 0.2s, 0.4s;
          transition-delay: 0.2s, 0.4s;
}
body #wrap *:before, body #wrap *:after {
  -webkit-transition: margin-left 0.3s cubic-bezier(0.75, 0.885, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.75, 0.885, 0.32, 1);
  transition: margin-left 0.3s cubic-bezier(0.75, 0.885, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.75, 0.885, 0.32, 1);
  transition: transform 0.3s cubic-bezier(0.75, 0.885, 0.32, 1), margin-left 0.3s cubic-bezier(0.75, 0.885, 0.32, 1);
  transition: transform 0.3s cubic-bezier(0.75, 0.885, 0.32, 1), margin-left 0.3s cubic-bezier(0.75, 0.885, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.75, 0.885, 0.32, 1);
}
body #wrap .background {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: #4e567d;
  overflow: hidden;
}
body #wrap .background:before {
  content: "";
  position: absolute;
  width: 65%;
  height: 100%;
  left: 35%;
  top: 0;
  background: #fff;
  z-index: 2;
  -webkit-transition: cubic-bezier(0.75, 0.885, 0.32, 1) 0.5s ease-in-out;
  transition: cubic-bezier(0.75, 0.885, 0.32, 1) 0.5s ease-in-out;
}
body #wrap .background:after {
  content: "IF Mode";
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 80%;
  top: 10%;
  left: 50px;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  font-size: 200px;
  font-weight: 900;
  color: #444b6d;
  -webkit-transition: 1s ease-in-out;
  transition: 1s ease-in-out;
  -webkit-transform: scaleY(1.25);
          transform: scaleY(1.25);
}
body #wrap .frame {
  position: absolute;
  top: 60px;
  left: 85px;
  width: 427px;
  height: 365px;
  z-index: 2;
  -webkit-transform-origin: 190px 210px;
          transform-origin: 190px 210px;
  -webkit-transform: scale(0.8) rotate(-62.5deg);
          transform: scale(0.8) rotate(-62.5deg);
}
body #wrap .frame div {
  position: absolute;
  background-size: cover;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
body #wrap .frame div.wheel.two.front, body #wrap .frame div.wheel.three.front, body #wrap .frame div.wheel.four.front {
  -webkit-transform: translateX(700px);
          transform: translateX(700px);
  margin-left: 0px;
}
body #wrap .frame div.wheel.two.back, body #wrap .frame div.wheel.three.back, body #wrap .frame div.wheel.four.back {
  -webkit-transform: translateX(-700px);
          transform: translateX(-700px);
}
body #wrap .frame div.wheel.front {
  -webkit-transform-origin: 273px 190px;
          transform-origin: 273px 190px;
  margin-left: -75px;
  -webkit-transform: rotate(115deg);
          transform: rotate(115deg);
  -webkit-transition-delay: 0.5s, 0.8s;
          transition-delay: 0.5s, 0.8s;
  z-index: 2;
}
body #wrap .frame div.wheel.back {
  z-index: -1;
}
body #wrap .frame div.wheel.back .inner {
  left: -40px;
}
body #wrap .frame div.wheel .inner {
  position: absolute;
  width: 210px;
  height: 210px;
  border-radius: 100%;
  z-index: -1;
  top: 170px;
  left: 300px;
}
body #wrap .frame div.wheel .inner:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("https://assets.codepen.io/383755/wheel1.png");
  background-size: contain;
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
  -webkit-transition: background-image 0s ease-in-out, -webkit-transform 1.25s cubic-bezier(0.75, 0.885, 0.32, 1);
  transition: background-image 0s ease-in-out, -webkit-transform 1.25s cubic-bezier(0.75, 0.885, 0.32, 1);
  transition: transform 1.25s cubic-bezier(0.75, 0.885, 0.32, 1), background-image 0s ease-in-out;
  transition: transform 1.25s cubic-bezier(0.75, 0.885, 0.32, 1), background-image 0s ease-in-out, -webkit-transform 1.25s cubic-bezier(0.75, 0.885, 0.32, 1);
  -webkit-transition-delay: 0.1s, 0.5s;
          transition-delay: 0.1s, 0.5s;
}
body #wrap .frame div.rear {
  background-image: url("https://assets.codepen.io/383755/rear.png");
}
body #wrap .frame div.stem {
  background-image: url("https://assets.codepen.io/383755/stem.png");
  -webkit-transform-origin: 273px 190px;
          transform-origin: 273px 190px;
  margin-left: -105px;
  -webkit-transform: rotate(115deg);
          transform: rotate(115deg);
  -webkit-transition-delay: 0.5s, 0.8s;
          transition-delay: 0.5s, 0.8s;
}
body #wrap .frame div.shaft {
  background-image: url("https://assets.codepen.io/383755/shaft.png");
  -webkit-transform-origin: 220px 200px;
          transform-origin: 220px 200px;
  -webkit-transform: translateX(-70px) translateY(40px);
          transform: translateX(-70px) translateY(40px);
  -webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
}
body #wrap .frame div.seat {
  background-image: url("https://assets.codepen.io/383755/seat.png");
  -webkit-transform: translateY(100px) translateX(40px);
          transform: translateY(100px) translateX(40px);
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
  -webkit-transition-delay: 0.65s;
          transition-delay: 0.65s;
  z-index: -1;
}

CSS
Read more

Beautiful Expandable Sidebar Navigation

HTML & CSS, JavaScript & jQuery

Beautiful Expandable Sidebar Navigation


September 26, 2020

0Comments 46Views

Try this beautiful expandable sidebar navigation to your next project

HTML

<div class="navigation-container" id="js_navigation-container">
  <div class="navigation-collapse-trigger">
    <span class="navigation-collapse-trigger__orb" id="js_navigation-collapse-trigger">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-left">
        <polyline points="15 18 9 12 15 6"></polyline>
      </svg>
    </span>
  </div>
  <div class="navigation">
    <!-- LOGO -->
    <a class="navigation-logo" href="#">
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-box navigation-logo__icon">
        <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
        <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
        <line x1="12" y1="22.08" x2="12" y2="12"></line>
      </svg>
      <span class="navigation-logo__name js_navigation-item-name">
        Productname
      </span>
    </a>
    <!-- SEARCH -->
    <div class="navigation-search">
      <input type="search" placeholder="search" class="navigation-search__input" />
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="navigation-search__icon">
        <circle cx="11" cy="11" r="8"></circle>
        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
      </svg>
    </div>
    <!-- NAVIGATION -->
    <nav role="navigation">
      <ul>
        <li>
          <a class="navigation-link" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="navigation-link__icon feather feather-grid">
              <rect x="3" y="3" width="7" height="7"></rect>
              <rect x="14" y="3" width="7" height="7"></rect>
              <rect x="14" y="14" width="7" height="7"></rect>
              <rect x="3" y="14" width="7" height="7"></rect>
            </svg>
            <span class="navigation-link__name js_navigation-item-name">
              Dashboard
            </span>
          </a>
        </li>
        <li>
          <a class="navigation-link" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="navigation-link__icon feather feather-activity">
              <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
            </svg>
            <span class="navigation-link__name js_navigation-item-name">
              Analytics
            </span>
          </a>
        </li>
        <li>
          <a class="navigation-link" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="navigation-link__icon feather feather-users">
              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
              <circle cx="9" cy="7" r="4"></circle>
              <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
              <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
            </svg>
            <span class="navigation-link__name js_navigation-item-name">
              Accounts
            </span>
          </a>
        </li>
        <li>
          <a class="navigation-link" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="navigation-link__icon feather feather-calendar">
              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
              <line x1="16" y1="2" x2="16" y2="6"></line>
              <line x1="8" y1="2" x2="8" y2="6"></line>
              <line x1="3" y1="10" x2="21" y2="10"></line>
            </svg>
            <span class="navigation-link__name js_navigation-item-name">
              Calendar
            </span>
          </a>
        </li>
        <li>
          <a class="navigation-link" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="navigation-link__icon feather feather-file-text">
              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
              <polyline points="14 2 14 8 20 8"></polyline>
              <line x1="16" y1="13" x2="8" y2="13"></line>
              <line x1="16" y1="17" x2="8" y2="17"></line>
              <polyline points="10 9 9 9 8 9"></polyline>
            </svg>
            <span class="navigation-link__name js_navigation-item-name">
              Documents
            </span>
          </a>
        </li>
      </ul>
    </nav>
    <!-- LOGOUT -->
    <a class="navigation-link logout" href="#">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="navigation-link__icon feather feather-power">
        <path d="M18.36 6.64a9 9 0 1 1-12.73 0"></path>
        <line x1="12" y1="2" x2="12" y2="12"></line>
      </svg>
      <span class="navigation-link__name js_navigation-item-name">
        Logout
      </span>
    </a>
  </div>
</div>

CSS

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:[email protected];500&amp;display=swap");
$white: #ffffff;
$body-background-color: #f4f4f8;
$navigation-background-color: #030303;
$navigation-link-color: #9e9fa4;
$navigation-link-hover-background-color: #313239;
$navigation-item-height: 45px;
$navigation-item-border-radius: 5px;
$navigation-item-tooltip-color: #6b6b6b;
$navigation-search-background-color: #2c2a30;
$navigation-search-background-focus-color: #313239;
$navigation-search-color: $white;
$navigation-search-icon-size: 25px;
$navigation-collapse-trigger-color: #408bff;
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
html,
body {
  height: 100%;
  width: 100%;
}
body {
  background-color: $body-background-color;
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.5;
  font-size: 16px;
  min-height: 700px;
}
// -------------- NAVIGATION CONTAINER
.navigation-container {
  position: relative;
  width: 275px;
}
// -------------- NAVIGATION COLLAPSE TRIGGER
.navigation-collapse-trigger {
  bottom: 0;
  position: absolute;
  right: -10px;
  top: 0;
  width: 20px;
  $this: &amp;;
  $navigation-collapse-trigger-orb-size: 25px;
  // -------------- ORB
  &amp;__orb {
    position: absolute;
    width: $navigation-collapse-trigger-orb-size;
    height: $navigation-collapse-trigger-orb-size;
    border-radius: $navigation-collapse-trigger-orb-size;
    background-color: $navigation-collapse-trigger-color;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 50%;
    transform: translate(calc(-50% + 2px), 100px) scale(0);
    transition: all 0.2s ease-out;
    transition-delay: 0.1s;
    &amp;:hover {
      cursor: pointer;
    }
    > svg {
      stroke: $white;
      width: 80%;
      height: auto;
      transition: transform 0.2s ease-out;
      [class$="--collapsed"] &amp; {
        transform: rotate(180deg);
      }
    }
  }
  // -------------- HOVER
  &amp;:hover {
    #{$this}__orb {
      transform: translate(calc(-50% + 2px), 100px) scale(1);
    }
    ~ .navigation::before {
      opacity: 1;
    }
  }
}
// -------------- NAVIGATION
.navigation {
  background-color: $navigation-background-color;
  color: $white;
  height: 90vh;
  min-height: 650px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  &amp;::before {
    background: linear-gradient(
      180deg,
      rgba($navigation-collapse-trigger-color, 0) 0%,
      rgba($navigation-collapse-trigger-color, 1) 5%,
      rgba($navigation-collapse-trigger-color, 1) 95%,
      rgba($navigation-collapse-trigger-color, 0) 100%
    );
    bottom: 0;
    pointer-events: none;
    position: absolute;
    right: -3px;
    top: 0;
    width: 2px;
    content: "";
    opacity: 0;
    transition: opacity 0.2s ease-out;
    transition-delay: 0.1s;
  }
  .logout {
    margin-top: auto;
  }
}
// -------------- NAVIGATION LOGO
.navigation-logo {
  color: $white;
  text-decoration: none;
  font-size: 24px;
  font-weight: 500;
  display: flex;
  align-items: center;
  margin: 8px;
  margin-bottom: 30px;
  &amp;__icon {
    min-width: 32px;
  }
  svg {
    margin-right: 8px;
  }
}
// -------------- NAVIGATION SEARCH
.navigation-search {
  $offset: ($navigation-item-height - $navigation-search-icon-size) / 2;
  margin-bottom: 24px;
  position: relative;
  $this: &amp;;
  // -------------- ICON
  &amp;__icon {
    height: $navigation-search-icon-size;
    left: $offset;
    opacity: 1;
    pointer-events: none;
    position: absolute;
    top: $offset;
    transition: all 0.1s ease-out;
    width: $navigation-search-icon-size;
    z-index: 1;
    [class$="--collapsed"] &amp; {
      left: 12px;
    }
  }
  // -------------- INPUT
  &amp;__input {
    background-color: $navigation-search-background-color;
    border-radius: $navigation-item-border-radius;
    border: 0;
    color: $navigation-search-color;
    font-family: inherit;
    font-size: inherit;
    height: $navigation-item-height;
    line-height: $navigation-item-height;
    outline: none;
    padding-left: $navigation-search-icon-size * 2;
    transition: all 0.2s ease-out;
    width: 100%;
    position: relative;
    z-index: 1;
    // -------------- CANCEL BUTTON
    &amp;::-webkit-search-cancel-button {
      -webkit-appearance: none;
      background: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x' %3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E")
        no-repeat center center/cover;
      cursor: pointer;
      height: 20px;
      position: relative;
      right: $offset;
      width: 20px;
    }
    [class$="--collapsed"] &amp;:not(:focus)::-webkit-search-cancel-button {
      display: none;
    }
    // -------------- FOCUS STYLES
    &amp;:focus {
      padding-left: $offset;
      background-color: $navigation-search-background-focus-color;
      border-radius: $navigation-item-border-radius;
      [class$="--collapsed"] &amp; {
        width: 250px;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
          0 10px 10px -5px rgba(0, 0, 0, 0.04);
      }
      + svg {
        opacity: 0;
        transform: translateX(-20%);
        z-index: 2;
      }
    }
  }
}
// -------------- NAVIGATION LINK
.navigation-link {
  display: block;
  color: $navigation-link-color;
  display: flex;
  align-items: center;
  padding: 0 8px;
  height: $navigation-item-height;
  line-height: $navigation-item-height;
  border-radius: $navigation-item-border-radius;
  text-decoration: none;
  transition: all 0.2s ease-out;
  white-space: nowrap;
  $this: &amp;;
  &amp;__icon {
    min-width: 32px;
  }
  &amp;__name {
    margin-left: 12px;
    // Collapsed state tooltip
    [class$="--collapsed"] &amp; {
      padding: 0.5em;
      line-height: 1;
      border-radius: ceil($navigation-item-border-radius / 2);
      color: $navigation-item-tooltip-color;
      transition: transform 0.2s ease-out;
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
      pointer-events: none;
      position: absolute;
      left: 48px;
      &amp;::before {
        width: 0;
        height: 0;
        border-top: 5px solid transparent;
        border-right: 7px solid $white;
        border-bottom: 5px solid transparent;
        left: -7px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
  &amp;:hover {
    background-color: $navigation-link-hover-background-color;
    color: $white;
    [class$="--collapsed"] &amp; #{$this}__name {
      position: absolute;
      opacity: 1 !important;
      font-size: 0.875rem;
      transform: translateX(4px);
      background: $white;
      left: 60px;
      &amp;::before {
        content: "";
      }
    }
  }
}

JS

const trigger = document.getElementById("js_navigation-collapse-trigger");
const navigationContainer = document.getElementById("js_navigation-container");
const navigationModifierClass = "navigation-container--collapsed";
const animationDuration = 400;
const widthChange = anime.timeline({
  autoplay: false,
  easing: "easeInOutBack",
});
widthChange
  .add({
    targets: navigationContainer,
    width: 80,
    duration: animationDuration,
  })
  .add(
    {
      targets: ".js_navigation-item-name",
      opacity: [1, 0],
      duration: animationDuration / 2,
    },
    `-=${animationDuration}`
  );
let navigationIsCollapsed = false;
trigger.addEventListener("click", function () {
  navigationIsCollapsed = !navigationIsCollapsed;
  if (navigationIsCollapsed) {
    navigationContainer.classList.add(navigationModifierClass);
  } else {
    navigationContainer.classList.remove(navigationModifierClass);
  }
  if (widthChange.began) {
    widthChange.reverse();
    if (widthChange.progress === 100 &amp;&amp; widthChange.direction === "reverse") {
      widthChange.completed = false;
    }
  }
  if (widthChange.paused) {
    widthChange.play();
  }
});
            <!-- .sc_blogger_item_excerpt --><!-- .entry-content --><a href="https://www.emuslearner.com/beautiful-expandable-sidebar-navigation/">Read more</a><!-- .sc_blogger_item -->




Customize, WordPress

How to Create Custom Post Types in WordPress


January 23, 2020

0Comments 41Views

WordPress is the most popular and easy to use content management system (CMS) platform right now. And day by day it’s going to more popular because anyone can easily develop any kind of website. A website has different types of content and WordPress use Post Types to divided theme. WordPress comes with these default post types-

  • Posts
  • Pages
  • Attachments
  • Revisions
  • Navigation Menus
  • Custom CSS
  • Changesets

Create Custom Post Types

Now, we’ll create a custom post types by adding code to functions.php file. Go to your child theme functions.php and edit.

Step 1: Register a post type

First, we’ll register a post type called Books with an array of arguments. These arguments contain labels, public visibility, archive, and slug.

// Custom post type function
function create_post_type() {
    register_post_type( 'books',
    // Array of arguments which are our CTP options
        array(
            'labels' => array(
                'name' => __( 'Books' ),
                'singular_name' => __( 'Book' )
            ),
            'public' => true,
            'has_archive' => true,
            'rewrite' => array('slug' => 'books'),
        )
    );
}
// Adding our function to theme setup
add_action( 'init', 'create_post_type' );

Step 2: Add detail option to Custom Post Type

/*
* Create our Custom Post Type
*/
function custom_post_type_books() {
    // Custom Post Type UI labels 
    $labels = array(
        'name'                => _x( 'Books', 'Post Type General Name'),
        'singular_name'       => _x( 'Book', 'Post Type Singular Name'),
        'menu_name'           => __( 'Books'),
        'parent_item_colon'   => __( 'Parent Book'),
        'all_items'           => __( 'All Books'),
        'view_item'           => __( 'View Book'),
        'add_new_item'        => __( 'Add New Book'),
        'add_new'             => __( 'Add New'),
        'edit_item'           => __( 'Edit Book'),
        'update_item'         => __( 'Update Book'),
        'search_items'        => __( 'Search Book'),
        'not_found'           => __( 'Not Found'),
        'not_found_in_trash'  => __( 'Not found in Trash'),
    );
    // Set other options for Custom Post Type
    $args = array(
        'label'               => __( 'Books'),
        'description'         => __( 'Book news and reviews'),
        'labels'              => $labels,
        // Which features are supports in Editor
        'supports'            => array( 
                                'title',
                                'editor', 
                                'excerpt', 
                                'author', 
                                'thumbnail', 
                                'comments', 
                                'revisions', 
                                'custom-fields', ),
        /* A hierarchical CPT is like Pages and can have
        * Parent and child items. A non-hierarchical CPT
        * is like Posts.
        */ 
        'hierarchical'        => false,
        'public'              => true,
        'show_ui'             => true,
        'show_in_menu'        => true,
        'show_in_nav_menus'   => true,
        'show_in_admin_bar'   => true,
        'menu_position'       => 5,
        'can_export'          => true,
        'has_archive'         => true,
        'exclude_from_search' => false,
        'publicly_queryable'  => true,
        'capability_type'     => 'post',
    );
    // Registering your Custom Post Type
    register_post_type( 'books', $args );
}
/* Hook into the 'init' action so that the function
* Containing our post type registration is not 
* unnecessarily executed. 
*/
add_action( 'init', 'custom_post_type_books', 0 );

Step 3: Display Custom Post Type

We created our custom post type now, need to display it on our website. We’ll display our custom post type books in default post and archive template. What we’ve to do is just duplicate the single.php file and rename it single-books.php. Now go to Settings->Permalinks->Post Name and click ‘Save Changes’. Now single posts and archives both will work fine. If the archive page doesn’t work then duplicate the archive.php and rename it archive-books.php
Read more



Customize, Tips & Tricks, WordPress

How to Create a WordPress Child Theme


December 28, 2019

0Comments 46Views

WordPress is highly recommended Child Theme for any modification of a parent theme. You can update your parent theme without destroying the modification or the customization which is made with Child Theme. Let’s create a WordPress child theme

1. Create a folder
First, You’ll need to create a folder in site_root/wp-content/themes/parent_theme_name-child. Let’s say your parent theme is Storefront so you’ll create folder name storefront-child

2. Create style.css
Now create a style.css file in your child theme folder storefront-child/style.css and write the code and change Template : PARENT THEME NAME with your theme name.

/*
Template: Storefront
Theme Name: Storefront Child
Theme URL: emuslearner.com
Description: A child theme of Stronefront theme
Author: Emuslearner
Author URL: emuslearner.com
Version: 1.0.0
Text Domain: storefront
*/

3. Create functions.php
Finally, you’ll need to enqueue parent and the child theme stylesheet. Create a functions.php file inside the child theme folder and write the code.

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
?>
Storefront parent and the child theme

Copy and paste the screenshot.png to see the preview in your child theme too.

            <!-- .sc_blogger_item_excerpt --><!-- .entry-content --><a href="https://www.emuslearner.com/how-to-create-a-wordpress-child-theme/">Read more</a><!-- .sc_blogger_item -->


How to Remove "Select Option" from Variable Products on Woocommerce Shop Page or Product Loop Page

Customize, WooCommerce, WordPress

How to Remove “Select Options” from Variable Products on Woocommerce Shop Page or Product Loop Page


December 11, 2019

0Comments 180Views

By default, WooCommerce added a “Select Options” button on the main shop page or product category pages for variable products. In this post, I’ll show how you can remove the button.

Just add the code to your theme function.php file

// Remove "Select options" button from (variable) products on WooCommerce shop page or category pages.
add_filter( 'woocommerce_loop_add_to_cart_link', function( $product ) {
    global $product;
    if ( is_shop() &amp;&amp; 'variable' === $product->product_type ) {
        return '';
    } else {
        sprintf( '<a href="%s" data-quantity="%s" class="%s" %s>%s</a>',
            esc_url( $product->add_to_cart_url() ),
            esc_attr( isset( $args['quantity'] ) ? $args['quantity'] : 1 ),
            esc_attr( isset( $args['class'] ) ? $args['class'] : 'button' ),
            isset( $args['attributes'] ) ? wc_implode_html_attributes( $args['attributes'] ) : '',
            esc_html( $product->add_to_cart_text() )
        );
    }
} );
            <!-- .sc_blogger_item_excerpt --><!-- .entry-content --><a href="https://www.emuslearner.com/how-to-remove-select-options-from-variable-products-on-woocommerce-shop-page-or-product-loop-page/">Read more</a><!-- .sc_blogger_item -->
        <a href="https://www.emuslearner.com/how-to-change-front-end-language-only-in-wordpress/" aria-hidden="true"></a>
                                <a href="https://www.emuslearner.com/how-to-change-front-end-language-only-in-wordpress/"  aria-hidden="true"></a>
        <a href="#">Share</a><a href="https://twitter.com/intent/tweet?text=How+to+Change+Front-end+Language+only+in+WordPress&#038;url=https%3A%2F%2Fwww.emuslearner.com%2Fhow-to-change-front-end-language-only-in-wordpress%2F" data-link="https://twitter.com/intent/tweet?text=How to Change Front-end Language only in WordPress&amp;url=https%3A%2F%2Fwww.emuslearner.com%2Fhow-to-change-front-end-language-only-in-wordpress%2F" data-count="twitter"><i>Twitter</i></a><a href="http://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.emuslearner.com%2Fhow-to-change-front-end-language-only-in-wordpress%2F" data-link="http://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.emuslearner.com%2Fhow-to-change-front-end-language-only-in-wordpress%2F" data-count="facebook"><i>Facebook</i></a><a href="https://plus.google.com/share?url=https%3A%2F%2Fwww.emuslearner.com%2Fhow-to-change-front-end-language-only-in-wordpress%2F" data-link="https://plus.google.com/share?url=https%3A%2F%2Fwww.emuslearner.com%2Fhow-to-change-front-end-language-only-in-wordpress%2F" data-count="gplus"><i>Google+</i></a>     <!-- .post_meta -->
                                                        <a href="https://www.emuslearner.com/how-to-change-front-end-language-only-in-wordpress/">
                            November 6, 2018                                </a>
                     <a href="https://www.emuslearner.com/how-to-change-front-end-language-only-in-wordpress/#respond">0Comments</a>  <a href="https://www.emuslearner.com/how-to-change-front-end-language-only-in-wordpress/">24Views</a>         <!-- .post_meta -->
    <h4><a href="https://www.emuslearner.com/how-to-change-front-end-language-only-in-wordpress/" rel="bookmark">How to Change Front-end Language only in WordPress</a></h4>                    <!-- .entry-header -->
                To change WordPress language just go to Settings&gt;&gt;General&gt;&gt;Site Language and then select your language from...                <!-- .entry-content -->
        <!-- .post_body -->
        <!-- .sc_blogger_item -->
        <a href="https://www.emuslearner.com/beautiful-expandable-sidebar-navigation/" aria-hidden="true"></a>
                                <a href="https://www.emuslearner.com/beautiful-expandable-sidebar-navigation/"  aria-hidden="true"></a>
        <a href="#">Share</a><a href="https://twitter.com/intent/tweet?text=Beautiful+Expandable+Sidebar+Navigation&#038;url=https%3A%2F%2Fwww.emuslearner.com%2Fbeautiful-expandable-sidebar-navigation%2F" data-link="https://twitter.com/intent/tweet?text=Beautiful Expandable Sidebar Navigation&amp;url=https%3A%2F%2Fwww.emuslearner.com%2Fbeautiful-expandable-sidebar-navigation%2F" data-count="twitter"><i>Twitter</i></a><a href="http://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.emuslearner.com%2Fbeautiful-expandable-sidebar-navigation%2F" data-link="http://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.emuslearner.com%2Fbeautiful-expandable-sidebar-navigation%2F" data-count="facebook"><i>Facebook</i></a><a href="https://plus.google.com/share?url=https%3A%2F%2Fwww.emuslearner.com%2Fbeautiful-expandable-sidebar-navigation%2F" data-link="https://plus.google.com/share?url=https%3A%2F%2Fwww.emuslearner.com%2Fbeautiful-expandable-sidebar-navigation%2F" data-count="gplus"><i>Google+</i></a>     <!-- .post_meta -->
                                                        <a href="https://www.emuslearner.com/beautiful-expandable-sidebar-navigation/">
                            September 26, 2020                              </a>
                     <a href="https://www.emuslearner.com/beautiful-expandable-sidebar-navigation/#respond">0Comments</a>  <a href="https://www.emuslearner.com/beautiful-expandable-sidebar-navigation/">46Views</a>       <!-- .post_meta -->
    <h4><a href="https://www.emuslearner.com/beautiful-expandable-sidebar-navigation/" rel="bookmark">Beautiful Expandable Sidebar Navigation</a></h4>                    <!-- .entry-header -->
                Try this beautiful expandable sidebar navigation to your next project HTML CSS JS                <!-- .entry-content -->
        <!-- .post_body -->
        <!-- .sc_blogger_item -->
        <a href="https://www.emuslearner.com/how-to-fix-wordpress-maximum-time-limit-exceeded/" aria-hidden="true"></a>
                                <a href="https://www.emuslearner.com/how-to-fix-wordpress-maximum-time-limit-exceeded/"  aria-hidden="true"></a>
        <a href="#">Share</a><a href="https://twitter.com/intent/tweet?text=How+To+Fix+WordPress+Maximum+Time+Limit+Exceeded&#038;url=https%3A%2F%2Fwww.emuslearner.com%2Fhow-to-fix-wordpress-maximum-time-limit-exceeded%2F" data-link="https://twitter.com/intent/tweet?text=How To Fix WordPress Maximum Time Limit Exceeded&amp;url=https%3A%2F%2Fwww.emuslearner.com%2Fhow-to-fix-wordpress-maximum-time-limit-exceeded%2F" data-count="twitter"><i>Twitter</i></a><a href="http://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.emuslearner.com%2Fhow-to-fix-wordpress-maximum-time-limit-exceeded%2F" data-link="http://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.emuslearner.com%2Fhow-to-fix-wordpress-maximum-time-limit-exceeded%2F" data-count="facebook"><i>Facebook</i></a><a href="https://plus.google.com/share?url=https%3A%2F%2Fwww.emuslearner.com%2Fhow-to-fix-wordpress-maximum-time-limit-exceeded%2F" data-link="https://plus.google.com/share?url=https%3A%2F%2Fwww.emuslearner.com%2Fhow-to-fix-wordpress-maximum-time-limit-exceeded%2F" data-count="gplus"><i>Google+</i></a>     <!-- .post_meta -->
                                                        <a href="https://www.emuslearner.com/how-to-fix-wordpress-maximum-time-limit-exceeded/">
                            November 28, 2019                               </a>
                     <a href="https://www.emuslearner.com/how-to-fix-wordpress-maximum-time-limit-exceeded/#respond">0Comments</a>  <a href="https://www.emuslearner.com/how-to-fix-wordpress-maximum-time-limit-exceeded/">35Views</a>         <!-- .post_meta -->
    <h4><a href="https://www.emuslearner.com/how-to-fix-wordpress-maximum-time-limit-exceeded/" rel="bookmark">How To Fix WordPress Maximum Time Limit Exceeded</a></h4>                    <!-- .entry-header -->
                You may notice, sometimes when we try to update or install themes/plugins WordPress shows this...                <!-- .entry-content -->
        <!-- .post_body -->
        <!-- .sc_blogger_item -->
        <a href="https://www.emuslearner.com/how-to-use-advanced-custom-fields-on-wordpress-archive-page/" aria-hidden="true"></a>
                                <a href="https://www.emuslearner.com/how-to-use-advanced-custom-fields-on-wordpress-archive-page/"  aria-hidden="true"></a>
        <a href="#">Share</a><a href="https://twitter.com/intent/tweet?text=How+to+use+Advanced+Custom+Fields+On+WordPress+Archive+Page&#038;url=https%3A%2F%2Fwww.emuslearner.com%2Fhow-to-use-advanced-custom-fields-on-wordpress-archive-page%2F" data-link="https://twitter.com/intent/tweet?text=How to use Advanced Custom Fields On WordPress Archive Page&amp;url=https%3A%2F%2Fwww.emuslearner.com%2Fhow-to-use-advanced-custom-fields-on-wordpress-archive-page%2F" data-count="twitter"><i>Twitter</i></a><a href="http://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.emuslearner.com%2Fhow-to-use-advanced-custom-fields-on-wordpress-archive-page%2F" data-link="http://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.emuslearner.com%2Fhow-to-use-advanced-custom-fields-on-wordpress-archive-page%2F" data-count="facebook"><i>Facebook</i></a><a href="https://plus.google.com/share?url=https%3A%2F%2Fwww.emuslearner.com%2Fhow-to-use-advanced-custom-fields-on-wordpress-archive-page%2F" data-link="https://plus.google.com/share?url=https%3A%2F%2Fwww.emuslearner.com%2Fhow-to-use-advanced-custom-fields-on-wordpress-archive-page%2F" data-count="gplus"><i>Google+</i></a>     <!-- .post_meta -->
                                                        <a href="https://www.emuslearner.com/how-to-use-advanced-custom-fields-on-wordpress-archive-page/">
                            April 30, 2019                              </a>
                     <a href="https://www.emuslearner.com/how-to-use-advanced-custom-fields-on-wordpress-archive-page/#respond">0Comments</a>  <a href="https://www.emuslearner.com/how-to-use-advanced-custom-fields-on-wordpress-archive-page/">158Views</a>      <!-- .post_meta -->
    <h4><a href="https://www.emuslearner.com/how-to-use-advanced-custom-fields-on-wordpress-archive-page/" rel="bookmark">How to use Advanced Custom Fields On WordPress Archive Page</a></h4>                    <!-- .entry-header -->
                The&nbsp;Advanced Custom Fields plugin is a handy way to extend the capabilities of your WordPress...                <!-- .entry-content -->
        <!-- .post_body -->
        <!-- .sc_blogger_item -->
        <a href="https://www.emuslearner.com/how-to-create-a-wordpress-child-theme/" aria-hidden="true"></a>
                                <a href="https://www.emuslearner.com/how-to-create-a-wordpress-child-theme/"  aria-hidden="true"></a>
        <a href="#">Share</a><a href="https://twitter.com/intent/tweet?text=How+to+Create+a+WordPress+Child+Theme&#038;url=https%3A%2F%2Fwww.emuslearner.com%2Fhow-to-create-a-wordpress-child-theme%2F" data-link="https://twitter.com/intent/tweet?text=How to Create a WordPress Child Theme&amp;url=https%3A%2F%2Fwww.emuslearner.com%2Fhow-to-create-a-wordpress-child-theme%2F" data-count="twitter"><i>Twitter</i></a><a href="http://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.emuslearner.com%2Fhow-to-create-a-wordpress-child-theme%2F" data-link="http://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.emuslearner.com%2Fhow-to-create-a-wordpress-child-theme%2F" data-count="facebook"><i>Facebook</i></a><a href="https://plus.google.com/share?url=https%3A%2F%2Fwww.emuslearner.com%2Fhow-to-create-a-wordpress-child-theme%2F" data-link="https://plus.google.com/share?url=https%3A%2F%2Fwww.emuslearner.com%2Fhow-to-create-a-wordpress-child-theme%2F" data-count="gplus"><i>Google+</i></a>     <!-- .post_meta -->
                                                        <a href="https://www.emuslearner.com/how-to-create-a-wordpress-child-theme/">
                            December 28, 2019                               </a>
                     <a href="https://www.emuslearner.com/how-to-create-a-wordpress-child-theme/#respond">0Comments</a>  <a href="https://www.emuslearner.com/how-to-create-a-wordpress-child-theme/">46Views</a>       <!-- .post_meta -->
    <h4><a href="https://www.emuslearner.com/how-to-create-a-wordpress-child-theme/" rel="bookmark">How to Create a WordPress Child Theme</a></h4>                    <!-- .entry-header -->
                WordPress is highly recommended Child Theme for any modification of a parent theme. You can...                <!-- .entry-content -->
        <!-- .post_body -->
        <!-- .sc_blogger_item -->