Commit 1ec78d11 by jhukal9@gmail.com

updated the page layout for template detail

parent 9316e799
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.31539 16.4853L13.7894 5.0113L13.7894 15.5519L16.4575 15.5425V0.457528H1.37258L1.37258 3.11625L11.9038 3.12568L0.429776 14.5997L2.31539 16.4853Z" fill="#005AFF"/>
</svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4488_7514)">
<mask id="mask0_4488_7514" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
<path d="M0 1.90735e-06H24V24H0V1.90735e-06Z" fill="white"/>
</mask>
<g mask="url(#mask0_4488_7514)">
<path d="M5.45152 12.0924C5.37441 11.6457 5.53219 11.1908 5.86922 10.8878L13.4578 4.06512C13.9131 3.63471 14.162 3.02975 14.1415 2.40354L14.1143 1.57372C14.1012 1.1757 13.7816 0.856059 13.3836 0.843027L12.5538 0.815841C11.9275 0.795309 11.3226 1.04421 10.8922 1.49946L4.06955 9.08806C3.7665 9.42514 3.31158 9.58287 2.86491 9.50581L1.71792 9.30785L0.46875 10.557L3.30717 11.6501L4.40025 14.4885L5.64947 13.2394L5.45152 12.0924Z" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.03578 5.79004L2.02344 2.30427L3.16311 1.1647L9.22423 3.35624L7.03578 5.79004Z" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13.6142 11.6179L12.4745 12.7576L9.17969 7.90994L11.5996 5.73546L13.6142 11.6179Z" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M23.3021 11.5061C22.3474 7.21772 18.5207 4.0118 13.945 4.0118C13.7969 4.0118 13.6492 4.01508 13.5025 4.02211C13.488 4.03664 13.4734 4.05118 13.4584 4.06524L5.86994 10.8876C5.53295 11.1906 5.37517 11.6455 5.45219 12.0921L5.65009 13.2395L4.40078 14.4884L4.39844 14.4823C4.84417 19.3624 8.94808 23.1855 13.945 23.1855C18.5501 23.1855 22.3965 19.938 23.3202 15.6083" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M23.3002 11.5061C22.8911 9.66838 21.9554 8.02935 20.6584 6.75674H18.0793C17.4902 6.75674 17.0125 7.23444 17.0125 7.82408V8.3894C17.0125 8.97866 17.4902 9.45632 18.0793 9.45632C18.4516 9.45632 18.7891 9.60721 19.0328 9.85143C19.277 10.0952 19.428 10.4322 19.428 10.8049V12.5979C19.428 13.2386 19.1734 13.8531 18.7206 14.306L16.0768 16.9497C15.8326 17.1939 15.6953 17.5249 15.6953 17.8704V19.2808C15.6953 19.6263 15.8326 19.9573 16.0768 20.2014L18.1098 22.2349C20.7358 20.9658 22.6945 18.5342 23.3186 15.6083" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.7464 17.553L11.1503 19.1486C11.0139 19.285 10.9375 19.4697 10.9375 19.6624V22.7041C8.46348 21.8885 6.43516 20.0918 5.3125 17.7752L6.6902 16.398C6.82609 16.2616 7.01083 16.1852 7.20344 16.1852H9.74453C9.93719 16.1852 10.1219 16.1088 10.2583 15.9724L10.7121 15.5186C10.9956 15.235 11.4555 15.235 11.7391 15.5186L12.7464 16.526C13.03 16.8096 13.03 17.2694 12.7464 17.553Z" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</g>
<defs>
<clipPath id="clip0_4488_7514">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4488_7460)">
<mask id="mask0_4488_7460" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
<path d="M0 1.90735e-06H24V24H0V1.90735e-06Z" fill="white"/>
</mask>
<g mask="url(#mask0_4488_7460)">
<path d="M21.375 19.0781H2.625C1.58948 19.0781 0.75 18.2387 0.75 17.2031V2.57813C0.75 1.54256 1.58948 0.703126 2.625 0.703126H21.375C22.4106 0.703126 23.25 1.54256 23.25 2.57813V17.2031C23.25 18.2387 22.4106 19.0781 21.375 19.0781Z" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.375 23.2969H17.625" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14.8125 22.5938V19.7812" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.1875 22.5938V19.7812" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1.45312 14.8594H22.5469" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15.4219 4.92188L18.405 7.78125L15.4219 10.6406" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.48312 10.6406L5.5 7.78125L8.48312 4.92188" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.7031 4.92188L11.2969 10.6406" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</g>
<defs>
<clipPath id="clip0_4488_7460">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4488_7428)">
<path d="M11.5265 22.6445H2.4375V11.042C2.4375 9.98935 3.01889 9.02293 3.94842 8.53041L11.5265 4.51538V22.6445Z" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.5255 22.6445H6.50781V15.5298C6.50781 13.961 7.77958 12.6892 9.34839 12.6892H11.5255L11.5255 22.6445Z" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15.5 15.6196H17.5782" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15.5 7.61035H17.5782" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15.5 11.615H17.5782" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16.5469 19.7512V22.3995" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M0.9375 22.6445H23.0625" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M21.5589 17.957V6.89379C21.5589 5.80043 20.9321 4.804 19.9471 4.33132L14.122 1.53616C12.9177 0.958286 11.5234 1.83677 11.5234 3.17346V22.6444H19.9076" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_4488_7428">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4488_7370)">
<mask id="mask0_4488_7370" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
<path d="M0 1.90735e-06H24V24H0V1.90735e-06Z" fill="white"/>
</mask>
<g mask="url(#mask0_4488_7370)">
<path d="M4.29089 18.9258C2.30944 18.9258 0.703125 20.5321 0.703125 22.5135V23.2969H7.87861V22.5135C7.87861 20.5321 6.27234 18.9258 4.29089 18.9258Z" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.39844 16.8164C6.39844 17.9814 5.45405 18.9258 4.28906 18.9258C3.12408 18.9258 2.17969 17.9814 2.17969 16.8164C2.17969 15.6514 3.12408 14.707 4.28906 14.707C5.45405 14.707 6.39844 15.6514 6.39844 16.8164Z" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M19.7049 18.9258C17.7235 18.9258 16.1172 20.5321 16.1172 22.5135V23.2969H23.2927V22.5135C23.2927 20.5321 21.6864 18.9258 19.7049 18.9258Z" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M21.8203 16.8164C21.8203 17.9814 20.8759 18.9258 19.7109 18.9258C18.546 18.9258 17.6016 17.9814 17.6016 16.8164C17.6016 15.6514 18.546 14.707 19.7109 14.707C20.8759 14.707 21.8203 15.6514 21.8203 16.8164Z" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.0018 4.92188C10.0204 4.92188 8.41406 6.52819 8.41406 8.50959V9.29297H15.5896V8.50959C15.5896 6.52819 13.9833 4.92188 12.0018 4.92188Z" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14.1094 2.8125C14.1094 3.97748 13.165 4.92188 12 4.92188C10.835 4.92188 9.89062 3.97748 9.89062 2.8125C9.89062 1.64752 10.835 0.703125 12 0.703125C13.165 0.703125 14.1094 1.64752 14.1094 2.8125Z" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.96875 18.4683C9.90531 18.7645 10.9141 18.9258 11.9659 18.9258C13.0558 18.9258 14.0997 18.7528 15.0644 18.4359" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.00514 6.33318C5.29794 7.01488 4.67487 7.82446 4.17298 8.74888C3.65295 9.70668 3.30683 10.7066 3.125 11.7056" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.8723 11.7058C20.6905 10.7068 20.3444 9.70687 19.8244 8.74912C19.3225 7.8247 18.6994 7.01512 17.9922 6.33342" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</g>
<defs>
<clipPath id="clip0_4488_7370">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4478_4824)">
<mask id="mask0_4478_4824" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
<path d="M0 3.8147e-06H24V24H0V3.8147e-06Z" fill="white"/>
</mask>
<g mask="url(#mask0_4478_4824)">
<path d="M19.0898 23.2969H21.1852C22.3514 23.2969 23.2969 22.3514 23.2969 21.1852V6.32813V2.81485C23.2969 1.6486 22.3514 0.703129 21.1852 0.703129H2.81484C1.64859 0.703129 0.703125 1.6486 0.703125 2.81485V6.32813V21.1852C0.703125 22.3514 1.64859 23.2969 2.81484 23.2969H4.91016H19.0898Z" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M0.703125 6.32812H23.2969" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.14062 3.51562H20.4844" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.21875 3.51562C4.21875 3.90394 3.90394 4.21875 3.51562 4.21875C3.12731 4.21875 2.8125 3.90394 2.8125 3.51562C2.8125 3.12731 3.12731 2.8125 3.51562 2.8125C3.90394 2.8125 4.21875 3.12731 4.21875 3.51562Z" fill="#005AFF"/>
<path d="M7.03125 3.51562C7.03125 3.90394 6.71644 4.21875 6.32812 4.21875C5.93981 4.21875 5.625 3.90394 5.625 3.51562C5.625 3.12731 5.93981 2.8125 6.32812 2.8125C6.71644 2.8125 7.03125 3.12731 7.03125 3.51562Z" fill="#005AFF"/>
<path d="M18.1365 13.8058L16.9028 17.6709H8.62209L7.14844 11.5857H16.5148C17.6676 11.5857 18.4871 12.7075 18.1365 13.8058Z" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.0078 19.0781C11.0078 19.8548 10.3782 20.4844 9.60156 20.4844C8.82489 20.4844 8.19531 19.8548 8.19531 19.0781C8.19531 18.3015 8.82489 17.6719 9.60156 17.6719C10.3782 17.6719 11.0078 18.3015 11.0078 19.0781Z" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17.6172 19.0781C17.6172 19.8548 16.9876 20.4844 16.2109 20.4844C15.4343 20.4844 14.8047 19.8548 14.8047 19.0781C14.8047 18.3015 15.4343 17.6719 16.2109 17.6719C16.9876 17.6719 17.6172 18.3015 17.6172 19.0781Z" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.62594 13.5535L6.57031 9.14066" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.56453 9.14062H3.90625" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</g>
<defs>
<clipPath id="clip0_4478_4824">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4488_7298)">
<mask id="mask0_4488_7298" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
<path d="M0 1.90735e-06H24V24H0V1.90735e-06Z" fill="white"/>
</mask>
<g mask="url(#mask0_4488_7298)">
<path d="M18.8438 11.9063H23.0625V16.0781" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M23.0625 19.8281V23.0625" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M19.3125 19.8281V23.0625" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15.5625 19.8281V23.0625" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.8125 22.6875V23.0625" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M22.997 12.0283L18.4785 16.5469H13.3594L6.84375 23.0625" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<path d="M9.89062 13.6362V14.9531" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.89062 4.68744V5.95752" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<mask id="mask1_4488_7298" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
<path d="M0 1.90735e-06H24V24H0V1.90735e-06Z" fill="white"/>
</mask>
<g mask="url(#mask1_4488_7298)">
<path d="M8.15625 12.4686C8.44959 13.1213 9.12867 13.6003 9.89062 13.6003C10.9261 13.6003 11.7656 12.7609 11.7656 11.7253C11.7656 10.6898 10.9261 9.84364 9.89062 9.84364C8.85511 9.84364 8.01562 9.01086 8.01562 7.97534C8.01562 6.93978 8.85511 6.10034 9.89062 6.10034C10.6664 6.10034 11.2929 6.54687 11.5781 7.21864" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.65625 18.1626C3.31181 16.8803 0.9375 13.6393 0.9375 9.84369C0.9375 4.92491 4.92497 0.937443 9.84375 0.937443C14.235 0.937443 17.8839 4.11538 18.6162 8.29682" stroke="#005AFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</g>
<defs>
<clipPath id="clip0_4488_7298">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
(function ($) {
gsap.registerPlugin(ScrollTrigger);
/** INTERSECTION OBSERVER FOR SLIDE UP ANIMATION STARTS HERE */
$(function () {
const observer = new IntersectionObserver(
......@@ -19,6 +20,22 @@
$(".slide-up").each(function (e) {
observer.observe(this);
});
let $cards = $(".slide-up-delay");
function revealOnScroll() {
$cards.each(function () {
let $card = $(this);
let rectTop = $card[0].getBoundingClientRect().top;
if (rectTop < $(window).height() * 0.9) {
$card.addClass("visible");
}
});
}
$(window).on("scroll", revealOnScroll);
revealOnScroll();
});
/** INTERSECTION OBSERVER FOR SLIDE UP ANIMATION ENDS HERE*/
......@@ -87,11 +104,9 @@
});
/** MAKURA LATEST FAQ EXPAND COLLAPSE ENDS HERE */
/** STICKY TAB AT MASTER PORTFOLIO START HERE */
$(function () {
$(".sticky-tab");
});
/** STICKY TAB AT MASTER PORTFOLIO ENDS HERE */
/** HORIZONTAL SCROLL SLIDER START HERE */
$(function () {});
/** HORIZONTAL SCROLL SLIDER ENDS HERE */
/** GALLERY LIGHT BOX AND DYNAMIC SLIDER START HERE */
$(function () {
......@@ -131,7 +146,7 @@
$slider.trigger("next.owl.carousel");
});
});
$(".gallery-slider,.gallery-grid").each(function () {
$(".gallery-slider,.gallery-grid,.tg-items").each(function () {
$(this).lightGallery({
selector: ".gallery-item a",
thumbnail: true,
......
......@@ -3,6 +3,17 @@ footer {
z-index: 1;
}
.TOP-BANNER-SECTION {
+ .industry-listing,
+ .website-template {
padding-top: 5rem;
@media (max-width: 767.98px) {
padding-top: 2rem;
}
}
}
.makura-new {
h6 {
font-size: 18px !important;
......@@ -69,6 +80,16 @@ footer {
}
}
.btn-outlined {
color: $primary;
font-weight: 600;
svg {
margin-left: 12px;
transition: all 0.3s ease-in-out;
}
}
.sm-text {
font-size: 1.125rem !important;
line-height: 22px;
......@@ -83,10 +104,23 @@ footer {
}
.slide-up {
opacity: 0;
transform: translateY(150px);
transition: all 0.5s ease-in-out;
&.animate {
opacity: 1;
transform: translateY(0);
}
}
.slide-up-delay {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.3s ease-out, transform 0.3s ease-out;
&.visible {
opacity: 1;
transform: translateY(0);
}
}
......
.industry-card {
border: 1px solid #0000001a;
border-radius: 8px;
overflow: hidden;
.ic-image {
max-height: 200px;
overflow: hidden;
// border-radius: 8px 8px 0 0;
a {
display: block;
}
img {
transition: all 0.3s ease-in-out;
}
}
.ic-content {
padding: 24px 16px;
h2,
h3,
h4 {
position: relative;
// padding-left: 40px;
margin-bottom: 16px;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
display: flex;
font-size: 18px !important;
line-height: 24px;
img {
margin-right: 16px;
}
a {
position: relative;
display: block;
max-width: calc(100% - 32px);
&::after {
content: "";
width: 16px;
height: 16px;
position: absolute;
right: -32px;
top: 8px;
background: url(../img/arrow.svg) no-repeat center/contain;
opacity: 0;
visibility: hidden;
transform: translateY(5px);
transition: all 0.3s ease-in-out;
}
}
}
h2,
h3,
h4,
p {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
}
p {
font-size: 16px !important;
-webkit-line-clamp: 3;
}
}
&:hover {
border-color: $primary;
h2,
h3,
h4 {
a {
color: $primary;
&::after {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
}
}
.ic-image {
img {
transform: scale(1.1);
}
}
}
}
.industry-listing {
.row {
> div {
&:not(:last-child) {
.industry-card {
margin-bottom: 20px;
}
}
@for $i from 1 through 6 {
&:nth-child(#{$i}) {
.slide-up-delay {
transition-delay: #{$i * 0.1s};
}
}
}
}
}
}
@media (min-width: 576px) {
.industry-card {
height: 100%;
.ic-content {
p {
font-size: 14px !important;
}
}
}
.industry-listing {
.row {
--bs-gutter-y: 24px;
> div {
&:not(:last-child) {
.industry-card {
margin-bottom: 0;
}
}
}
}
}
}
@media (min-width: 768px) {
.industry-card {
.ic-content {
padding: 32px 24px;
h2,
h3,
h4 {
a {
&::after {
top: 4px;
}
}
}
}
}
}
.single-image-with-cta {
.content-wrapper {
padding-bottom: 24px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
&::before {
height: 220px;
}
.featured-image {
max-height: 584px;
overflow: hidden;
// background: #b1b2ab;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.cta-group {
margin-top: 24px;
.cta {
gap: 8px;
}
.btn-primary {
color: $white;
svg {
max-width: 10px;
margin-left: 12px;
}
}
.socials {
gap: 16px;
margin-top: 16px;
ul {
gap: 8px;
padding: 12px 0;
a {
&:hover {
svg {
fill: $primary;
rect {
stroke: $primary;
}
path {
fill: $white;
}
}
}
}
}
}
}
}
@media (min-width: 768px) {
.single-image-with-cta {
.cta-group {
.socials {
margin-top: 0;
}
}
}
}
@media (min-width: 1400px) {
.single-image-with-cta {
.cta-group {
.btn-primary {
svg {
max-width: 14px;
}
}
}
}
}
.template-gallery {
.tg-items {
display: flex;
flex-wrap: nowrap;
.tg-item {
strong {
margin-top: 16px;
}
}
}
}
.wt-item {
border: 1px solid #0000001a;
border-radius: 8px;
overflow: hidden;
.wt-image {
max-height: 236px;
overflow: hidden;
a {
display: block;
}
img {
transition: all 0.3s ease-in-out;
}
}
.wt-content {
padding: 16px;
.over-title {
font-size: 14px;
line-height: 18px;
letter-spacing: -0.3px;
background-color: #f2f7ff;
border-radius: 4px;
display: inline-block;
padding: 4px 8px;
color: $primary;
margin-bottom: 16px;
&:hover {
background-color: $primary;
color: $white;
}
}
h2,
h3,
h4 {
position: relative;
// padding-left: 40px;
margin-bottom: 16px;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
display: flex;
font-size: 18px !important;
line-height: 24px;
img {
margin-right: 16px;
}
a {
position: relative;
display: block;
max-width: calc(100% - 32px);
&::after {
content: "";
width: 16px;
height: 16px;
position: absolute;
right: -32px;
top: 8px;
background: url(../img/arrow.svg) no-repeat center/contain;
opacity: 0;
visibility: hidden;
transform: translateY(5px);
transition: all 0.3s ease-in-out;
}
}
}
h2,
h3,
h4,
p {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
}
p {
-webkit-line-clamp: 3;
font-size: 16px !important;
}
}
&:hover {
border-color: $primary;
h2,
h3,
h4 {
a {
color: $primary;
&::after {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
}
}
.wt-image {
img {
transform: scale(1.1);
}
}
}
}
.website-template {
.section-title {
max-width: 864px;
}
.row {
> div {
@for $i from 1 through 6 {
&:nth-child(#{$i}) {
.slide-up-delay {
transition-delay: #{$i * 0.1s};
}
}
}
.wt-item {
margin-bottom: 20px;
}
}
}
.footer-action-btn {
margin-top: 32px;
a {
&.show-less {
svg {
transform: rotate(180deg);
}
}
}
}
}
@media (min-width: 768px) {
.website-template {
.row {
--bs-gutter-y: 24px;
> div {
&:not(:last-child) {
.wt-item {
margin-bottom: 0;
}
}
}
}
}
.wt-item {
height: 100%;
.wt-content {
padding: 24px;
h2,
h3,
h4 {
a {
&::after {
top: 4px;
}
}
}
p {
font-size: 14px !important;
}
}
}
}
......@@ -72,8 +72,6 @@
grid-template-columns: repeat(5, 1fr);
.gallery-item {
// grid-column: span 1;
// grid-row: span 1;
&:nth-child(n + 4) {
display: block;
}
......@@ -102,6 +100,11 @@
}
}
}
@for $i from 1 through 6 {
&:nth-child(#{$i}) {
transition-delay: #{$i * 0.1s};
}
}
}
}
}
......
......@@ -62,3 +62,7 @@ $body-font: "Sora", sans-serif;
@import "pages/master-portfolio/sticky-tab";
@import "pages/master-portfolio/block-gallery";
@import "pages/master-portfolio/moment-gallery";
@import "pages/industry/industry-listing";
@import "pages/industry/website-template";
@import "pages/industry/single-image-with-cta";
@import "pages/industry/template-layout-gallery";
<?php
/**
* Template Name: Industry Detail
*/
get_header();
the_content();
get_template_part("/template-parts/industry/website-template", null);
get_template_part("/template-parts/industry/industry-list", null);
get_footer();
?>
\ No newline at end of file
<?php
/**
* Template Name: Industry Listing
*/
get_header();
the_content();
get_template_part("/template-parts/industry/industry-list", null);
get_template_part("/template-parts/industry/website-template", null);
get_footer();
?>
\ No newline at end of file
<?php
/**
* Template Name: Template Detail
*/
get_header();
the_content();
get_template_part("/template-parts/industry/single-image-with-cta", null);
get_template_part("/template-parts/industry/template-layout-gallery", null);
get_template_part("/template-parts/industry/website-template", null);
get_footer();
?>
\ No newline at end of file
<section class="industry-listing mb-120 makura-new">
<div class="container">
<div class="section-title">
<h3>More Industries you might want to check out</h3>
</div>
<div class="row">
<div class="col-sm-6 col-lg-4">
<div class="industry-card slide-up-delay">
<div class="ic-image">
<a href="#">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-17.png" class="img-fluid"
alt="">
</a>
</div>
<div class="ic-content">
<h4>
<a href="">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/industry-01.svg" alt="">
E-commerce (6)
</a>
</h4>
<p>Boost your online sales with modern, user-friendly templates.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="industry-card slide-up-delay">
<div class="ic-image">
<a href="#">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-16.png" class="img-fluid"
alt="">
</a>
</div>
<div class="ic-content">
<h4>
<a href="">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/industry-02.svg" alt="">
Finance (1)</a>
</h4>
<p>Deliver secure, professional templates for financial services.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="industry-card slide-up-delay">
<div class="ic-image">
<a href="#"> <img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-15.png"
class="img-fluid" alt="">
</a>
</div>
<div class="ic-content">
<h4>
<a href="">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/industry-03.svg" alt="">
INGO (2)</a>
</h4>
<p>Inspire travel with visually captivating web designs.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="industry-card slide-up-delay">
<div class="ic-image">
<a href="#"> <img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-14.png"
class="img-fluid" alt="">
</a>
</div>
<div class="ic-content">
<h4>
<a href="">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/industry-04.svg" alt="">
Real Estate (3)</a>
</h4>
<p>Showcase stunning properties with professional, responsive designs.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="industry-card slide-up-delay">
<div class="ic-image">
<a href="#"> <img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-13.png"
class="img-fluid" alt="">
</a>
</div>
<div class="ic-content">
<h4>
<a href="">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/industry-05.svg" alt="">
Technology (5)</a>
</h4>
<p>Showcase stunning properties with professional, responsive designs.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="industry-card slide-up-delay">
<div class="ic-image">
<a href="#">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-12.png" class="img-fluid"
alt="">
</a>
</div>
<div class="ic-content">
<h4>
<a href="">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/industry-06.svg" alt="">
Travel & Tourism (2)</a>
</h4>
<p>Inspire travel with visually captivating web designs.</p>
</div>
</div>
</div>
</div>
</div>
</section>
\ No newline at end of file
<section class="mb-100 single-image-with-cta makura-new top-primary">
<div class="container">
<div class="content-wrapper">
<div class="featured-image">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-19.png" alt="" class="img-fluid">
</div>
<div class="cta-group d-md-flex justify-content-between align-items-center">
<div class="cta d-flex justify-content-start ">
<a href=""
class="btn btn-primary btn-padding hover-up btn-start-project font-14 fw-500 btn-padding btn-submit">View
Demo
Site <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M2.19039 14.3603L12.1431 4.40755L12.1431 13.5506L14.4575 13.5425V0.457528H1.37258V2.76375L10.5075 2.77193L0.554775 12.7247L2.19039 14.3603Z"
fill="white" />
</svg>
</a>
<a href="" class="btn btn-outlined">Inquire Now</a>
</div>
<div class="socials d-flex justify-content-start justify-content-md-end align-items-center flex-wrap">
<strong>Share this Template</strong>
<ul class="d-flex justify-content-start align-items-center ">
<li><a href="">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="31" height="31" rx="15.5" stroke="#878787" />
<path
d="M19.7188 17H17.375V24H14.25V17H11.6875V14.125H14.25V11.9062C14.25 9.40625 15.75 8 18.0312 8C19.125 8 20.2812 8.21875 20.2812 8.21875V10.6875H19C17.75 10.6875 17.375 11.4375 17.375 12.25V14.125H20.1562L19.7188 17Z"
fill="#878787" />
</svg>
</a></li>
<li><a href=""><svg width="32" height="32" viewBox="0 0 32 32" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="31" height="31" rx="15.5" stroke="#878787" />
<path
d="M22.3438 12.75C22.3438 12.9062 22.3438 13.0312 22.3438 13.1875C22.3438 17.5312 19.0625 22.5 13.0312 22.5C11.1562 22.5 9.4375 21.9688 8 21.0312C8.25 21.0625 8.5 21.0938 8.78125 21.0938C10.3125 21.0938 11.7188 20.5625 12.8438 19.6875C11.4062 19.6562 10.1875 18.7188 9.78125 17.4062C10 17.4375 10.1875 17.4688 10.4062 17.4688C10.6875 17.4688 11 17.4062 11.25 17.3438C9.75 17.0312 8.625 15.7188 8.625 14.125V14.0938C9.0625 14.3438 9.59375 14.4688 10.125 14.5C9.21875 13.9062 8.65625 12.9062 8.65625 11.7812C8.65625 11.1562 8.8125 10.5938 9.09375 10.125C10.7188 12.0938 13.1562 13.4062 15.875 13.5625C15.8125 13.3125 15.7812 13.0625 15.7812 12.8125C15.7812 11 17.25 9.53125 19.0625 9.53125C20 9.53125 20.8438 9.90625 21.4688 10.5625C22.1875 10.4062 22.9062 10.125 23.5312 9.75C23.2812 10.5312 22.7812 11.1562 22.0938 11.5625C22.75 11.5 23.4062 11.3125 23.9688 11.0625C23.5312 11.7188 22.9688 12.2812 22.3438 12.75Z"
fill="#878787" />
</svg>
</a></li>
<li><a href="">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="31" height="31" rx="15.5" stroke="#878787" />
<path
d="M12.125 22H9.21875V12.6562H12.125V22ZM10.6562 11.4062C9.75 11.4062 9 10.625 9 9.6875C9 8.78125 9.75 8.03125 10.6562 8.03125C11.5938 8.03125 12.3438 8.78125 12.3438 9.6875C12.3438 10.625 11.5938 11.4062 10.6562 11.4062ZM22.9688 22H20.0938V17.4688C20.0938 16.375 20.0625 15 18.5625 15C17.0625 15 16.8438 16.1562 16.8438 17.375V22H13.9375V12.6562H16.7188V13.9375H16.75C17.1562 13.2188 18.0938 12.4375 19.5 12.4375C22.4375 12.4375 23 14.375 23 16.875V22H22.9688Z"
fill="#878787" />
</svg>
</a></li>
<li><a href="">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="31" height="31" rx="15.5" stroke="#878787" />
<path
d="M24.1562 11.9062C24.5312 13.2188 24.5312 16.0312 24.5312 16.0312C24.5312 16.0312 24.5312 18.8125 24.1562 20.1562C23.9688 20.9062 23.375 21.4688 22.6562 21.6562C21.3125 22 16 22 16 22C16 22 10.6562 22 9.3125 21.6562C8.59375 21.4688 8 20.9062 7.8125 20.1562C7.4375 18.8125 7.4375 16.0312 7.4375 16.0312C7.4375 16.0312 7.4375 13.2188 7.8125 11.9062C8 11.1562 8.59375 10.5625 9.3125 10.375C10.6562 10 16 10 16 10C16 10 21.3125 10 22.6562 10.375C23.375 10.5625 23.9688 11.1562 24.1562 11.9062ZM14.25 18.5625L18.6875 16.0312L14.25 13.5V18.5625Z"
fill="#878787" />
</svg>
</a></li>
<li><a href="">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="31" height="31" rx="15.5" stroke="#878787" />
<path
d="M16 12.4062C17.9688 12.4062 19.5938 14.0312 19.5938 16C19.5938 18 17.9688 19.5938 16 19.5938C14 19.5938 12.4062 18 12.4062 16C12.4062 14.0312 14 12.4062 16 12.4062ZM16 18.3438C17.2812 18.3438 18.3125 17.3125 18.3125 16C18.3125 14.7188 17.2812 13.6875 16 13.6875C14.6875 13.6875 13.6562 14.7188 13.6562 16C13.6562 17.3125 14.7188 18.3438 16 18.3438ZM20.5625 12.2812C20.5625 12.75 20.1875 13.125 19.7188 13.125C19.25 13.125 18.875 12.75 18.875 12.2812C18.875 11.8125 19.25 11.4375 19.7188 11.4375C20.1875 11.4375 20.5625 11.8125 20.5625 12.2812ZM22.9375 13.125C23 14.2812 23 17.75 22.9375 18.9062C22.875 20.0312 22.625 21 21.8125 21.8438C21 22.6562 20 22.9062 18.875 22.9688C17.7188 23.0312 14.25 23.0312 13.0938 22.9688C11.9688 22.9062 11 22.6562 10.1562 21.8438C9.34375 21 9.09375 20.0312 9.03125 18.9062C8.96875 17.75 8.96875 14.2812 9.03125 13.125C9.09375 12 9.34375 11 10.1562 10.1875C11 9.375 11.9688 9.125 13.0938 9.0625C14.25 9 17.7188 9 18.875 9.0625C20 9.125 21 9.375 21.8125 10.1875C22.625 11 22.875 12 22.9375 13.125ZM21.4375 20.125C21.8125 19.2188 21.7188 17.0312 21.7188 16C21.7188 15 21.8125 12.8125 21.4375 11.875C21.1875 11.2812 20.7188 10.7812 20.125 10.5625C19.1875 10.1875 17 10.2812 16 10.2812C14.9688 10.2812 12.7812 10.1875 11.875 10.5625C11.25 10.8125 10.7812 11.2812 10.5312 11.875C10.1562 12.8125 10.25 15 10.25 16C10.25 17.0312 10.1562 19.2188 10.5312 20.125C10.7812 20.75 11.25 21.2188 11.875 21.4688C12.7812 21.8438 14.9688 21.75 16 21.75C17 21.75 19.1875 21.8438 20.125 21.4688C20.7188 21.2188 21.2188 20.75 21.4375 20.125Z"
fill="#878787" />
</svg>
</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
\ No newline at end of file
<section class="template-gallery makura-new mb-120">
<div class="container">
<div class="section-title">
<h3>Layout of this Template</h3>
<p>Optimize your website effortlessly with powerful insights and analytics.</p>
</div>
<div class="tg-items">
<div class="gallery-item tg-item">
<a data-src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-10.png">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-10.png" alt="" class="img-fluid">
<strong class="d-block text-center">Homepage</strong>
</a>
</div>
<div class="gallery-item tg-item">
<a data-src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-10.png">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-10.png" alt="" class="img-fluid">
<strong class="d-block text-center">Homepage</strong>
</a>
</div>
<div class="gallery-item tg-item">
<a data-src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-10.png">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-10.png" alt="" class="img-fluid">
<strong class="d-block text-center">Homepage</strong>
</a>
</div>
<div class="gallery-item tg-item">
<a data-src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-10.png">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-10.png" alt="" class="img-fluid">
<strong class="d-block text-center">Homepage</strong>
</a>
</div>
<div class="gallery-item tg-item">
<a data-src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-10.png">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-10.png" alt="" class="img-fluid">
<strong class="d-block text-center">Homepage</strong>
</a>
</div>
<div class="gallery-item tg-item">
<a data-src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-10.png">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-10.png" alt="" class="img-fluid">
<strong class="d-block text-center">Homepage</strong>
</a>
</div>
<div class="gallery-item tg-item">
<a data-src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-10.png">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-10.png" alt="" class="img-fluid">
<strong class="d-block text-center">Homepage</strong>
</a>
</div>
<div class="gallery-item tg-item">
<a data-src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-10.png">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-10.png" alt="" class="img-fluid">
<strong class="d-block text-center">Homepage</strong>
</a>
</div>
</div>
</div>
</section>
\ No newline at end of file
<section class="website-template mb-120 makura-new">
<div class="container">
<div class="section-title slide-up">
<h3>Featured Website Templates</h3>
<p>Access essential business and administrative templates to streamline processes, manage documentation, and
maintain professionalism.</p>
</div>
<div class="row ">
<div class="col-md-6 col-lg-4">
<div class="wt-item slide-up-delay">
<div class="wt-image">
<a href="">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-16.png" alt=""></a>
</div>
<div class="wt-content">
<a href="#" class="over-title">E-commerce</a>
<h2>
<a href="">
Fujies E-commerce Website Template 2.0</a>
</h2>
<p>It offers a sleek, responsive design for an intuitive, and overall engaging shopping experience.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="wt-item slide-up-delay">
<div class="wt-image">
<a href="">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-17.png" alt=""></a>
</div>
<div class="wt-content">
<a href="#" class="over-title">
Travel and Tourism
</a>
<h2>
<a href="">
TripTrap Champ - Online Ticketing Website</a>
</h2>
<p>It offers a sleek, responsive design for an intuitive, and overall engaging shopping experience.</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="wt-item slide-up-delay">
<div class="wt-image">
<a href="">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-10.png" alt=""></a>
</div>
<div class="wt-content">
<a href="#" class="over-title">
Technology
</a>
<h2>
<a href="">
Courjoy - Online Course Mobile App</a>
</h2>
<p>It offers a sleek, responsive design for an intuitive, and overall engaging shopping experience.</p>
</div>
</div>
</div>
</div>
<div class="footer-action-btn text-center">
<a href="#" class="btn btn-outlined">Load More <svg width="17" height="16" viewBox="0 0 17 16" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M7.5 8.34742e-08L7.5 12.17L1.91 6.58L0.5 8L8.5 16L16.5 8L15.09 6.59L9.5 12.17L9.5 1.07324e-07L7.5 8.34742e-08Z"
fill="#005AFF" />
</svg>
</a>
</div>
</div>
</section>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment