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>