Services Page

In this video, I’d like to walk you through designing a page that is quite content heavy. We’ll keep this layout simple, so that the user can focus on the content. I will show you how to add an animated typing effect to the page hero section.

Please note that the main Maya Webdesign demo page shows the final version of the website. The exact layout created during this lesson can be viewed here.

Video Chapters

scripts.js

/* Typing Script */
(t=>{const e=(t,e,a,n)=>new Promise(i=>setTimeout(()=>{var n=0,r=setInterval(()=>{if(t.text(e.substr(0,++n)),n==e.length)return clearInterval(r),i()},a)},n)),a=(t,e,a)=>new Promise(n=>setTimeout(function(){var a=t.text(),i=setInterval(function(){if(a=a.substr(0,a.length-1),t.text(a),!a.length)return clearInterval(i),n()},e)},a));t(".animate-typing").each(function(n){const i=t(this),r=+i.data("type-speed")||200,s=+i.data("type-delay")||200,o=+i.data("remove-speed")||50,d=+i.data("remove-delay")||500,l=+i.data("cursor-speed")||300,m=i.data("animate-loop")||!1,c=i.text().split("|");i.text(""),((e,a,n)=>{e.attr("data-animate-index",a),t("head").append(`\n    \n `)})(i,n,l),(async()=>{var t=0;do{for(let n of c)t++&&await a(i,o,d),n.trim()&&await e(i,n.trim(),r,s)}while(m)})()}),(()=>t("head").append("\n \n "))()})(jQuery);

style.css

/*
______________________
   
   Services
______________________

*/


.maya-services .et_pb_row {
    display: flex;
}

@media (max-width: 980px) {
	.maya-services .et_pb_row .et_pb_column:first-child {
	    width: 105px!important;
	}
}
@media (max-width: 767px) {
	.maya-services .et_pb_row .et_pb_column:first-child {
	    width: 75px!important;
	}
}


.animate-typing:after {
    font-weight: 500;
    color: var(--gray8);
}