Pricing Table Using Elementor | Elementor Tutorial

All codes used in video is given below.

Please follow tutorial to put code in right place.

Page Background Color:
.page-id-168{
    background-color: #232427;
}

All Color Codes:

Box 1 Icon & Button Color:
#2196F3
Box 2 Icon & Button Color:
#E91E63
Box 3 Icon & Button Color:
#97DC47
Price list Icon Color:
#00FF00
Box Background Color:
#2a2b2f

Card & Card Hover Codes:

.card{
    border-radius: 15px;
    box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.2),
inset -5px -5px 15px rgba(255, 255, 255, 0.2),
5px 5px 15px rgba(0, 0, 0, 0.3),
-5px -5px 15px rgba(255, 255, 255, 0.1);
}
.card .box{
    border-radius: 15px;
   transition: transform 0.4s!important;
}
.box:hover{
     transform: translateY(-40px)
}

Toggle Button and Dark/Light Mode Codes:

.toggle{
    cursor: pointer;
    border-radius: 15px;
    background: #fff;
}
.switcher{
    background: #ebf5fc!important;
}
.switcher .toggle{
    background: #232427;
}
.switcher .toggle i{
    color: #fff;
}
.switcher .ourprices .elementor-heading-title{
    color: #32a3b1!important;
}
.switcher .prices .elementor-heading-title{
    color: #32a3b1!important;
}
.switcher .boxtitle .elementor-heading-title{
    color: #32a3b1!important;
}
.switcher .features .elementor-icon-list-text{
    color: #32a3b1!important;
}
.switcher .card{
    box-shadow: inset 10px 10px 10px rgba(0, 0, 0, 0.03),
inset -10px -10px 15px rgba(255, 255, 255, 0.5),
10px 10px 10px rgba(0, 0, 0, 0.03),
-10px -10px 15px rgba(255, 255, 255, 0.5);
}
.switcher .box{
    background: #ebf5fc!important;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1)!important;
}
.switcher .card:hover .box{
    background: #ebf5fc!important;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2)!important;
}

JavaScript Used In This Tutorial:

<script>
	const mainBody = document.querySelector(".page-id-29");
	let toggleIcon = document.querySelector("i.fas.fa-sun");
	document.querySelector(".toggle").addEventListener('click', function(){
		mainBody.classList.toggle("switcher");
		toggleIcon.classList.toggle("fa-sun");
		toggleIcon.classList.toggle("fa-moon");
	});
</script>

Share On

Facebook
Twitter
Pinterest
LinkedIn
Get The Latest Updates

Subscribe To Our Weekly Newsletter

No spam, notifications only about new products, updates.
On Key

Related Posts