Skip to content

M
makura-2025
Commit 912412bf by rajshah
Options

Merge branch 'dev' of gitlab.makuracreations.xyz:rajshah/makura-2025 into dev

parents 953ab59a 9a912761
Showing with 2289 additions and 1067 deletions
assets/css/style.css
This source diff could not be displayed because it is too large. You can view the blob instead.
assets/js/script.js
......@@ -25,6 +25,7 @@
/** GLOBAL SCROLL INTO VIEW CONTROLLER START HERE*/
$(function () {
$(".makura-new a[data-target]").on("click", function (e) {
console.log("clicked data target");
e.preventDefault();
$(this).parent().addClass("active").siblings().removeClass("active");
const currentActive = $(this).data("target");
......@@ -37,6 +38,35 @@
});
}
});
const observer = new IntersectionObserver(
function (entries) {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const currentActive = entry.target.getAttribute("id");
console.log(currentActive);
$(".makura-new a[data-target]").each(function () {
if ($(this).data("target") === currentActive) {
$(this)
.parent()
.addClass("active")
.siblings()
.removeClass("active");
}
});
}
});
},
{
threshold: 0.2,
},
);
$(".portfolio-block").each(function () {
observer.observe(this);
});
});
/** GLOBAL SCROLL INTO VIEW CONTROLLER ENDS HERE*/
......@@ -80,51 +110,85 @@
/** MOBILE OFFCANVAS TOC START HERE */
$(function () {
$(".blog-side-bar h6").on("click", function () {
$(".toc h6").on("click", function () {
$(this).addClass("remove");
$(".category-list").addClass("active");
});
$(".category-list a").on("click", function () {
$(".blog-side-bar h6").removeClass("remove");
$(".toc h6").removeClass("remove");
$(".category-list").removeClass("active");
});
$(document).on("click", function (e) {
if (!$(e.target).closest(".blog-side-bar").length) {
$(".blog-side-bar h6").removeClass("remove");
if (!$(e.target).closest(".toc").length) {
$(".toc h6").removeClass("remove");
$(".category-list").removeClass("active");
}
});
$(window).on("scroll", function () {
$(".blog-side-bar h6").removeClass("remove");
$(".toc h6").removeClass("remove");
$(".category-list").removeClass("active");
});
const tocObserver = new IntersectionObserver(
function (entries) {
entries.forEach((entry) => {
if (entry.isIntersecting) {
$(".blog-side-bar h6").show();
} else {
$(".blog-side-bar h6").hide();
}
});
},
{
threshold: 0.1,
},
);
// const tocObserver = new IntersectionObserver(
// function (entries) {
// entries.forEach((entry) => {
// if (entry.isIntersecting) {
// $(".toc h6").show();
// console.log("is intersecting")
// } else {
// $(".toc h6").hide();
// console.log("is not intersecting")
// }
// });
// },
// {
// threshold: 0.1,
// },
// );
// const sections = [
// document.querySelector(".BLOGDETAIL-LIST-ITEM-SECTION"),
// document.querySelector(".BLOGLISTING-LIST-ITEM-SECTION"),
// document.querySelector(".case-study-general"),
// ];
// sections.length &&
// sections.forEach((section) => {
// if (section) tocObserver.observe(section);
// });
const sections = [
document.querySelector(".BLOGDETAIL-LIST-ITEM-SECTION"),
document.querySelector(".BLOGLISTING-LIST-ITEM-SECTION"),
document.querySelector(".case-study-general"),
];
sections.length &&
sections.forEach((section) => {
if (section) tocObserver.observe(section);
});
// Filter out any null sections
const validSections = sections.filter(Boolean);
if (validSections.length) {
const handleScroll = () => {
const scrollTop = $(window).scrollTop();
const viewportHeight = $(window).height();
if (scrollTop > viewportHeight) {
$(".toc h6").show();
console.log("Scrolled past 100vh");
} else {
$(".toc h6").hide();
console.log("Above 100vh");
}
};
// Bind scroll event
$(window).on("scroll", handleScroll);
// Run on page load too
$(document).ready(handleScroll);
}
});
/** MOBILE OFFCANVAS TOC ENDS HERE */
......@@ -178,4 +242,102 @@
});
});
/** GALLERY LIGHT BOX AND DYNAMIC SLIDER ENDS HERE */
/** CASE STUDY DETAIL */
$(function () {
// Handle click on TOC items
$(".case-study-general .category-list a[data-target]").on("click", function (e) {
e.preventDefault();
// Update active class on TOC items
$(this).parent("li").addClass("active").siblings("li").removeClass("active");
// Scroll to the target section
var currentActive = $(this).data("target");
document.getElementById(currentActive)?.scrollIntoView({
behavior: "smooth",
});
});
function handleTocActiveOnScroll(offset = 100) {
let currentId = null;
// Check all h2 elements with IDs in the content area
$(".case-study-general-content h2[id]").each(function () {
const elementTop = $(this).offset().top;
const scrollPosition = $(window).scrollTop() + offset;
if (elementTop <= scrollPosition) {
currentId = $(this).attr("id");
}
});
// Update active TOC item if a section is in view
if (currentId) {
$(".case-study-general .category-list li").removeClass("active");
$(`.case-study-general .category-list a[data-target="${currentId}"]`)
.parent("li")
.addClass("active");
}
}
// Handle scroll events
$(window).on("load scroll", function () {
handleTocActiveOnScroll();
});
});
$(function () {
// Wrap tables inside .table-responsive
$(".case-study-general-content table").each(function () {
const $table = $(this);
if (!$table.parent().hasClass("table-responsive")) {
$table.wrap('<div class="table-responsive"></div>');
}
});
})
/** CUSTOM FILTER */
// $(function () {
// $(".case-study-filter a").on("click", function (e) {
// e.preventDefault();
// $(".case-study-filter a").removeClass("active");
// $(this).addClass("active");
// const currentActive = $(this).data("filter"); // e.g. "design", "dev", etc.
// // Show all items first
// $(".case-study-listing .row > div").removeClass("d-none");
// if (currentActive !== "") {
// $(".case-study-listing .row > div").each(function () {
// if (!$(this).hasClass(currentActive)) {
// $(this).addClass("d-none");
// }
// });
// }
// });
// });
/** CASE STUDY LOAD MORE */
$(function () {
$(".load-hidden-item").on("click", function (e) {
e.preventDefault();
var items = $(".case-study-listing .extra-item");
var isVisible = items.is(":visible");
if (isVisible) {
items.slideUp();
$(this).find("span").text("Load More");
$(this).parent().removeClass("show-less");
} else {
items.slideDown();
$(this).find("span").text("Show Less");
$(this).parent().addClass("show-less");
}
})
})
})(jQuery);
assets/js/spider-animation.js
jQuery(document).ready(function () {
VerletJS.prototype.spider = function (origin) {
var i;
var legSeg1Stiffness = 0.99;
var legSeg2Stiffness = 0.99;
var legSeg3Stiffness = 0.99;
var legSeg4Stiffness = 0.99;
var joint1Stiffness = 1;
var joint2Stiffness = 0.4;
var joint3Stiffness = 0.9;
var bodyStiffness = 1;
var bodyJointStiffness = 1;
var composite = new this.Composite();
composite.legs = [];
composite.thorax = new Particle(origin);
composite.head = new Particle(origin.add(new Vec2(0, -5)));
composite.abdomen = new Particle(origin.add(new Vec2(0, 10)));
composite.particles.push(composite.thorax);
composite.particles.push(composite.head);
composite.particles.push(composite.abdomen);
composite.constraints.push(
new DistanceConstraint(composite.head, composite.thorax, bodyStiffness)
);
composite.constraints.push(
new DistanceConstraint(composite.abdomen, composite.thorax, bodyStiffness)
);
composite.constraints.push(
new AngleConstraint(
composite.abdomen,
composite.thorax,
composite.head,
0.4
)
);
for (i = 0; i < 4; ++i) {
composite.particles.push(
new Particle(composite.particles[0].pos.add(new Vec2(3, (i - 1.5) * 3)))
);
composite.particles.push(
new Particle(composite.particles[0].pos.add(new Vec2(-3, (i - 1.5) * 3)))
VerletJS.prototype.spider = function (origin) {
var i;
var legSeg1Stiffness = 0.99;
var legSeg2Stiffness = 0.99;
var legSeg3Stiffness = 0.99;
var legSeg4Stiffness = 0.99;
var joint1Stiffness = 1;
var joint2Stiffness = 0.4;
var joint3Stiffness = 0.9;
var bodyStiffness = 1;
var bodyJointStiffness = 1;
var composite = new this.Composite();
composite.legs = [];
composite.thorax = new Particle(origin);
composite.head = new Particle(origin.add(new Vec2(0, -5)));
composite.abdomen = new Particle(origin.add(new Vec2(0, 10)));
composite.particles.push(composite.thorax);
composite.particles.push(composite.head);
composite.particles.push(composite.abdomen);
composite.constraints.push(
new DistanceConstraint(composite.head, composite.thorax, bodyStiffness)
);
var len = composite.particles.length;
composite.constraints.push(
new DistanceConstraint(
composite.particles[len - 2],
composite.thorax,
legSeg1Stiffness
)
new DistanceConstraint(composite.abdomen, composite.thorax, bodyStiffness)
);
composite.constraints.push(
new DistanceConstraint(
composite.particles[len - 1],
new AngleConstraint(
composite.abdomen,
composite.thorax,
legSeg1Stiffness
composite.head,
0.4
)
);
var lenCoef = 1;
if (i == 1 || i == 2) lenCoef = 0.7;
else if (i == 3) lenCoef = 0.9;
composite.particles.push(
new Particle(
composite.particles[len - 2].pos.add(
new Vec2(20, (i - 1.5) * 30).normal().mutableScale(20 * lenCoef)
for (i = 0; i < 4; ++i) {
composite.particles.push(
new Particle(composite.particles[0].pos.add(new Vec2(3, (i - 1.5) * 3)))
);
composite.particles.push(
new Particle(composite.particles[0].pos.add(new Vec2(-3, (i - 1.5) * 3)))
);
var len = composite.particles.length;
composite.constraints.push(
new DistanceConstraint(
composite.particles[len - 2],
composite.thorax,
legSeg1Stiffness
)
)
);
composite.particles.push(
new Particle(
composite.particles[len - 1].pos.add(
new Vec2(-20, (i - 1.5) * 30).normal().mutableScale(20 * lenCoef)
);
composite.constraints.push(
new DistanceConstraint(
composite.particles[len - 1],
composite.thorax,
legSeg1Stiffness
)
)
);
len = composite.particles.length;
composite.constraints.push(
new DistanceConstraint(
composite.particles[len - 4],
composite.particles[len - 2],
legSeg2Stiffness
)
);
composite.constraints.push(
new DistanceConstraint(
composite.particles[len - 3],
composite.particles[len - 1],
legSeg2Stiffness
)
);
composite.particles.push(
new Particle(
);
var lenCoef = 1;
if (i == 1 || i == 2) lenCoef = 0.7;
else if (i == 3) lenCoef = 0.9;
composite.particles.push(
new Particle(
composite.particles[len - 2].pos.add(
new Vec2(20, (i - 1.5) * 30).normal().mutableScale(20 * lenCoef)
)
)
);
composite.particles.push(
new Particle(
composite.particles[len - 1].pos.add(
new Vec2(-20, (i - 1.5) * 30).normal().mutableScale(20 * lenCoef)
)
)
);
len = composite.particles.length;
composite.constraints.push(
new DistanceConstraint(
composite.particles[len - 4],
composite.particles[len - 2],
legSeg2Stiffness
)
);
composite.constraints.push(
new DistanceConstraint(
composite.particles[len - 3],
composite.particles[len - 1],
legSeg2Stiffness
)
);
composite.particles.push(
new Particle(
composite.particles[len - 2].pos.add(
new Vec2(20, (i - 1.5) * 50).normal().mutableScale(20 * lenCoef)
)
)
);
composite.particles.push(
new Particle(
composite.particles[len - 1].pos.add(
new Vec2(-20, (i - 1.5) * 50).normal().mutableScale(20 * lenCoef)
)
)
);
len = composite.particles.length;
composite.constraints.push(
new DistanceConstraint(
composite.particles[len - 4],
composite.particles[len - 2],
legSeg3Stiffness
)
);
composite.constraints.push(
new DistanceConstraint(
composite.particles[len - 3],
composite.particles[len - 1],
legSeg3Stiffness
)
);
var rightFoot = new Particle(
composite.particles[len - 2].pos.add(
new Vec2(20, (i - 1.5) * 50).normal().mutableScale(20 * lenCoef)
new Vec2(20, (i - 1.5) * 100).normal().mutableScale(12 * lenCoef)
)
)
);
composite.particles.push(
new Particle(
);
var leftFoot = new Particle(
composite.particles[len - 1].pos.add(
new Vec2(-20, (i - 1.5) * 50).normal().mutableScale(20 * lenCoef)
new Vec2(-20, (i - 1.5) * 100).normal().mutableScale(12 * lenCoef)
)
)
);
len = composite.particles.length;
composite.constraints.push(
new DistanceConstraint(
composite.particles[len - 4],
composite.particles[len - 2],
legSeg3Stiffness
)
);
composite.constraints.push(
new DistanceConstraint(
composite.particles[len - 3],
composite.particles[len - 1],
legSeg3Stiffness
)
);
var rightFoot = new Particle(
composite.particles[len - 2].pos.add(
new Vec2(20, (i - 1.5) * 100).normal().mutableScale(12 * lenCoef)
)
);
var leftFoot = new Particle(
composite.particles[len - 1].pos.add(
new Vec2(-20, (i - 1.5) * 100).normal().mutableScale(12 * lenCoef)
)
);
composite.particles.push(rightFoot);
composite.particles.push(leftFoot);
composite.legs.push(rightFoot);
composite.legs.push(leftFoot);
len = composite.particles.length;
composite.constraints.push(
new DistanceConstraint(
composite.particles[len - 4],
composite.particles[len - 2],
legSeg4Stiffness
)
);
composite.constraints.push(
new DistanceConstraint(
composite.particles[len - 3],
composite.particles[len - 1],
legSeg4Stiffness
)
);
composite.constraints.push(
new AngleConstraint(
composite.particles[len - 6],
composite.particles[len - 4],
composite.particles[len - 2],
joint3Stiffness
)
);
composite.constraints.push(
new AngleConstraint(
composite.particles[len - 6 + 1],
composite.particles[len - 4 + 1],
composite.particles[len - 2 + 1],
joint3Stiffness
)
);
composite.constraints.push(
new AngleConstraint(
composite.particles[len - 8],
composite.particles[len - 6],
composite.particles[len - 4],
joint2Stiffness
)
);
composite.constraints.push(
new AngleConstraint(
composite.particles[len - 8 + 1],
composite.particles[len - 6 + 1],
composite.particles[len - 4 + 1],
joint2Stiffness
)
);
composite.constraints.push(
new AngleConstraint(
composite.particles[0],
composite.particles[len - 8],
composite.particles[len - 6],
joint1Stiffness
)
);
composite.constraints.push(
new AngleConstraint(
composite.particles[0],
composite.particles[len - 8 + 1],
composite.particles[len - 6 + 1],
joint1Stiffness
)
);
composite.constraints.push(
new AngleConstraint(
composite.particles[1],
composite.particles[0],
composite.particles[len - 8],
bodyJointStiffness
)
);
composite.constraints.push(
new AngleConstraint(
composite.particles[1],
composite.particles[0],
composite.particles[len - 8 + 1],
bodyJointStiffness
)
);
}
this.composites.push(composite);
return composite;
};
VerletJS.prototype.spiderweb = function (origin, radius, segments, depth) {
var stiffness = 0.6;
var tensor = 0.3;
var stride = (2 * Math.PI) / segments;
var n = segments * depth;
var radiusStride = radius / n;
var i, c;
var composite = new this.Composite();
for (i = 0; i < n; ++i) {
var theta =
i * stride + Math.cos(i * 0.4) * 0.05 + Math.cos(i * 0.05) * 0.2;
var shrinkingRadius = radius - radiusStride * i + Math.cos(i * 0.1) * 20;
var offy = Math.cos(theta * 2.1) * (radius / depth) * 0.2;
composite.particles.push(
new Particle(
new Vec2(
origin.x + Math.cos(theta) * shrinkingRadius,
origin.y + Math.sin(theta) * shrinkingRadius + offy
);
composite.particles.push(rightFoot);
composite.particles.push(leftFoot);
composite.legs.push(rightFoot);
composite.legs.push(leftFoot);
len = composite.particles.length;
composite.constraints.push(
new DistanceConstraint(
composite.particles[len - 4],
composite.particles[len - 2],
legSeg4Stiffness
)
)
);
}
for (i = 0; i < segments; i += 4) composite.pin(i);
for (i = 0; i < n - 1; ++i) {
composite.constraints.push(
new DistanceConstraint(
composite.particles[i],
composite.particles[i + 1],
stiffness
)
);
var off = i + segments;
if (off < n - 1)
);
composite.constraints.push(
new DistanceConstraint(
composite.particles[i],
composite.particles[off],
stiffness
composite.particles[len - 3],
composite.particles[len - 1],
legSeg4Stiffness
)
);
composite.constraints.push(
new AngleConstraint(
composite.particles[len - 6],
composite.particles[len - 4],
composite.particles[len - 2],
joint3Stiffness
)
);
composite.constraints.push(
new AngleConstraint(
composite.particles[len - 6 + 1],
composite.particles[len - 4 + 1],
composite.particles[len - 2 + 1],
joint3Stiffness
)
);
composite.constraints.push(
new AngleConstraint(
composite.particles[len - 8],
composite.particles[len - 6],
composite.particles[len - 4],
joint2Stiffness
)
);
composite.constraints.push(
new AngleConstraint(
composite.particles[len - 8 + 1],
composite.particles[len - 6 + 1],
composite.particles[len - 4 + 1],
joint2Stiffness
)
);
composite.constraints.push(
new AngleConstraint(
composite.particles[0],
composite.particles[len - 8],
composite.particles[len - 6],
joint1Stiffness
)
);
composite.constraints.push(
new AngleConstraint(
composite.particles[0],
composite.particles[len - 8 + 1],
composite.particles[len - 6 + 1],
joint1Stiffness
)
);
composite.constraints.push(
new AngleConstraint(
composite.particles[1],
composite.particles[0],
composite.particles[len - 8],
bodyJointStiffness
)
);
composite.constraints.push(
new AngleConstraint(
composite.particles[1],
composite.particles[0],
composite.particles[len - 8 + 1],
bodyJointStiffness
)
);
}
this.composites.push(composite);
return composite;
};
VerletJS.prototype.spiderweb = function (origin, radius, segments, depth) {
var stiffness = 0.6;
var tensor = 0.3;
var stride = (2 * Math.PI) / segments;
var n = segments * depth;
var radiusStride = radius / n;
var i, c;
var composite = new this.Composite();
for (i = 0; i < n; ++i) {
var theta =
i * stride + Math.cos(i * 0.4) * 0.05 + Math.cos(i * 0.05) * 0.2;
var shrinkingRadius = radius - radiusStride * i + Math.cos(i * 0.1) * 20;
var offy = Math.cos(theta * 2.1) * (radius / depth) * 0.2;
composite.particles.push(
new Particle(
new Vec2(
origin.x + Math.cos(theta) * shrinkingRadius,
origin.y + Math.sin(theta) * shrinkingRadius + offy
)
)
);
else
}
for (i = 0; i < segments; i += 4) composite.pin(i);
for (i = 0; i < n - 1; ++i) {
composite.constraints.push(
new DistanceConstraint(
composite.particles[i],
composite.particles[n - 1],
composite.particles[i + 1],
stiffness
)
);
var off = i + segments;
if (off < n - 1)
composite.constraints.push(
new DistanceConstraint(
composite.particles[i],
composite.particles[off],
stiffness
)
);
else
composite.constraints.push(
new DistanceConstraint(
composite.particles[i],
composite.particles[n - 1],
stiffness
)
);
}
composite.constraints.push(
new DistanceConstraint(
composite.particles[0],
composite.particles[segments - 1],
stiffness
)
);
for (c in composite.constraints) composite.constraints[c].distance *= tensor;
this.composites.push(composite);
return composite;
};
function shuffle(o) {
for (
var j, x, i = o.length;
i;
j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x
);
return o;
}
composite.constraints.push(
new DistanceConstraint(
composite.particles[0],
composite.particles[segments - 1],
stiffness
)
);
for (c in composite.constraints) composite.constraints[c].distance *= tensor;
this.composites.push(composite);
return composite;
};
function shuffle(o) {
for (
var j, x, i = o.length;
i;
j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x
);
return o;
}
VerletJS.prototype.crawl = function (leg) {
var stepRadius = 100;
var minStepRadius = 35;
var spiderweb = this.composites[0];
var spider = this.composites[1];
var theta = spider.particles[0].pos.angle2(
spider.particles[0].pos.add(new Vec2(1, 0)),
spider.particles[1].pos
);
var boundry1 = new Vec2(Math.cos(theta), Math.sin(theta));
var boundry2 = new Vec2(
Math.cos(theta + Math.PI / 2),
Math.sin(theta + Math.PI / 2)
);
var flag1 = leg < 4 ? 1 : -1;
var flag2 = leg % 2 == 0 ? 1 : 0;
var paths = [];
var i;
for (i in spiderweb.particles) {
if (
spiderweb.particles[i].pos.sub(spider.particles[0].pos).dot(boundry1) *
VerletJS.prototype.crawl = function (leg) {
var stepRadius = 100;
var minStepRadius = 35;
var spiderweb = this.composites[0];
var spider = this.composites[1];
var theta = spider.particles[0].pos.angle2(
spider.particles[0].pos.add(new Vec2(1, 0)),
spider.particles[1].pos
);
var boundry1 = new Vec2(Math.cos(theta), Math.sin(theta));
var boundry2 = new Vec2(
Math.cos(theta + Math.PI / 2),
Math.sin(theta + Math.PI / 2)
);
var flag1 = leg < 4 ? 1 : -1;
var flag2 = leg % 2 == 0 ? 1 : 0;
var paths = [];
var i;
for (i in spiderweb.particles) {
if (
spiderweb.particles[i].pos.sub(spider.particles[0].pos).dot(boundry1) *
flag1 >=
0 &&
spiderweb.particles[i].pos.sub(spider.particles[0].pos).dot(boundry2) *
spiderweb.particles[i].pos.sub(spider.particles[0].pos).dot(boundry2) *
flag2 >=
0
) {
var d2 = spiderweb.particles[i].pos.dist2(spider.particles[0].pos);
if (
!(d2 >= minStepRadius * minStepRadius && d2 <= stepRadius * stepRadius)
)
continue;
var leftFoot = false;
var j;
for (j in spider.constraints) {
var k;
for (k = 0; k < 8; ++k) {
if (
spider.constraints[j] instanceof DistanceConstraint &&
spider.constraints[j].a == spider.legs[k] &&
spider.constraints[j].b == spiderweb.particles[i]
) {
leftFoot = true;
) {
var d2 = spiderweb.particles[i].pos.dist2(spider.particles[0].pos);
if (
!(d2 >= minStepRadius * minStepRadius && d2 <= stepRadius * stepRadius)
)
continue;
var leftFoot = false;
var j;
for (j in spider.constraints) {
var k;
for (k = 0; k < 8; ++k) {
if (
spider.constraints[j] instanceof DistanceConstraint &&
spider.constraints[j].a == spider.legs[k] &&
spider.constraints[j].b == spiderweb.particles[i]
) {
leftFoot = true;
}
}
}
if (!leftFoot) paths.push(spiderweb.particles[i]);
}
if (!leftFoot) paths.push(spiderweb.particles[i]);
}
}
for (i in spider.constraints) {
if (
spider.constraints[i] instanceof DistanceConstraint &&
spider.constraints[i].a == spider.legs[leg]
) {
spider.constraints.splice(i, 1);
break;
for (i in spider.constraints) {
if (
spider.constraints[i] instanceof DistanceConstraint &&
spider.constraints[i].a == spider.legs[leg]
) {
spider.constraints.splice(i, 1);
break;
}
}
}
if (paths.length > 0) {
shuffle(paths);
spider.constraints.push(
new DistanceConstraint(spider.legs[leg], paths[0], 1, 0)
);
}
};
window.onload = function () {
var canvas = document.getElementById("scratch");
var width = parseInt(canvas.style.width);
var height = parseInt(canvas.style.height);
var dpr = window.devicePixelRatio || 1;
canvas.width = width * dpr;
canvas.height = height * dpr;
canvas.getContext("2d").scale(dpr, dpr);
var sim = new VerletJS(width, height, canvas);
var spiderweb = sim.spiderweb(
new Vec2(width / 2, height / 2),
Math.min(width, height) / 2,
20,
7
);
var spider = sim.spider(new Vec2(width / 2, -300));
spiderweb.drawParticles = function (ctx, composite) {
var i;
for (i in composite.particles) {
var point = composite.particles[i];
ctx.beginPath();
ctx.arc(point.pos.x, point.pos.y, 1.3, 0, 2 * Math.PI);
ctx.fillStyle = "#7e7e7e";
ctx.fill();
if (paths.length > 0) {
shuffle(paths);
spider.constraints.push(
new DistanceConstraint(spider.legs[leg], paths[0], 1, 0)
);
}
};
spider.drawConstraints = function (ctx, composite) {
var i;
ctx.beginPath();
ctx.arc(spider.head.pos.x, spider.head.pos.y, 4, 0, 2 * Math.PI);
ctx.fillStyle = "#000";
ctx.fill();
ctx.beginPath();
ctx.arc(spider.thorax.pos.x, spider.thorax.pos.y, 4, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.arc(spider.abdomen.pos.x, spider.abdomen.pos.y, 8, 0, 2 * Math.PI);
ctx.fill();
for (i = 3; i < composite.constraints.length; ++i) {
var constraint = composite.constraints[i];
if (constraint instanceof DistanceConstraint) {
window.onload = function () {
var canvas = document.getElementById("scratch");
var width = parseInt(canvas.style.width);
var height = parseInt(canvas.style.height);
var dpr = window.devicePixelRatio || 1;
canvas.width = width * dpr;
canvas.height = height * dpr;
canvas.getContext("2d").scale(dpr, dpr);
var sim = new VerletJS(width, height, canvas);
var spiderweb = sim.spiderweb(
new Vec2(width / 2, height / 2),
Math.min(width, height) / 2,
20,
7
);
var spider = sim.spider(new Vec2(width / 2, -300));
spiderweb.drawParticles = function (ctx, composite) {
var i;
for (i in composite.particles) {
var point = composite.particles[i];
ctx.beginPath();
ctx.moveTo(constraint.a.pos.x, constraint.a.pos.y);
ctx.lineTo(constraint.b.pos.x, constraint.b.pos.y);
if (
(i >= 2 && i <= 4) ||
(i >= 2 * 9 + 1 && i <= 2 * 9 + 2) ||
(i >= 2 * 17 + 1 && i <= 2 * 17 + 2) ||
(i >= 2 * 25 + 1 && i <= 2 * 25 + 2)
) {
ctx.save();
constraint.draw(ctx);
ctx.strokeStyle = "#000";
ctx.lineWidth = 3;
ctx.stroke();
ctx.restore();
} else if (
(i >= 4 && i <= 6) ||
(i >= 2 * 9 + 3 && i <= 2 * 9 + 4) ||
(i >= 2 * 17 + 3 && i <= 2 * 17 + 4) ||
(i >= 2 * 25 + 3 && i <= 2 * 25 + 4)
) {
ctx.save();
constraint.draw(ctx);
ctx.strokeStyle = "#000";
ctx.lineWidth = 2;
ctx.stroke();
ctx.restore();
} else if (
(i >= 6 && i <= 8) ||
(i >= 2 * 9 + 5 && i <= 2 * 9 + 6) ||
(i >= 2 * 17 + 5 && i <= 2 * 17 + 6) ||
(i >= 2 * 25 + 5 && i <= 2 * 25 + 6)
) {
ctx.save();
ctx.strokeStyle = "#000";
ctx.lineWidth = 1.5;
ctx.stroke();
ctx.restore();
} else {
ctx.strokeStyle = "#000";
ctx.stroke();
ctx.arc(point.pos.x, point.pos.y, 1.3, 0, 2 * Math.PI);
ctx.fillStyle = "#ddd";
ctx.fill();
}
};
spider.drawConstraints = function (ctx, composite) {
var i;
ctx.beginPath();
ctx.arc(spider.head.pos.x, spider.head.pos.y, 4, 0, 2 * Math.PI);
ctx.fillStyle = "#000";
ctx.fill();
ctx.beginPath();
ctx.arc(spider.thorax.pos.x, spider.thorax.pos.y, 4, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.arc(spider.abdomen.pos.x, spider.abdomen.pos.y, 8, 0, 2 * Math.PI);
ctx.fill();
for (i = 3; i < composite.constraints.length; ++i) {
var constraint = composite.constraints[i];
if (constraint instanceof DistanceConstraint) {
ctx.beginPath();
ctx.moveTo(constraint.a.pos.x, constraint.a.pos.y);
ctx.lineTo(constraint.b.pos.x, constraint.b.pos.y);
if (
(i >= 2 && i <= 4) ||
(i >= 2 * 9 + 1 && i <= 2 * 9 + 2) ||
(i >= 2 * 17 + 1 && i <= 2 * 17 + 2) ||
(i >= 2 * 25 + 1 && i <= 2 * 25 + 2)
) {
ctx.save();
constraint.draw(ctx);
ctx.strokeStyle = "#000";
ctx.lineWidth = 3;
ctx.stroke();
ctx.restore();
} else if (
(i >= 4 && i <= 6) ||
(i >= 2 * 9 + 3 && i <= 2 * 9 + 4) ||
(i >= 2 * 17 + 3 && i <= 2 * 17 + 4) ||
(i >= 2 * 25 + 3 && i <= 2 * 25 + 4)
) {
ctx.save();
constraint.draw(ctx);
ctx.strokeStyle = "#000";
ctx.lineWidth = 2;
ctx.stroke();
ctx.restore();
} else if (
(i >= 6 && i <= 8) ||
(i >= 2 * 9 + 5 && i <= 2 * 9 + 6) ||
(i >= 2 * 17 + 5 && i <= 2 * 17 + 6) ||
(i >= 2 * 25 + 5 && i <= 2 * 25 + 6)
) {
ctx.save();
ctx.strokeStyle = "#000";
ctx.lineWidth = 1.5;
ctx.stroke();
ctx.restore();
} else {
ctx.strokeStyle = "#000";
ctx.stroke();
}
}
}
};
spider.drawParticles = function (ctx, composite) { };
var legIndex = 0;
var loop = function () {
if (Math.floor(Math.random() * 4) == 0) {
sim.crawl((legIndex++ * 3) % 8);
}
sim.frame(16);
sim.draw();
requestAnimFrame(loop);
};
loop();
function PinConstraint(a, pos) {
this.a = a;
this.pos = new Vec2().mutableSet(pos);
}
PinConstraint.prototype.relax = function (stepCoef) {
this.a.pos.mutableSet(this.pos);
};
PinConstraint.prototype.draw = function (ctx) {
ctx.beginPath();
ctx.arc(this.pos.x, this.pos.y, 6, 0, 2 * Math.PI);
ctx.fillStyle = "yellow";
ctx.fill();
};
};
spider.drawParticles = function (ctx, composite) {};
var legIndex = 0;
var loop = function () {
if (Math.floor(Math.random() * 4) == 0) {
sim.crawl((legIndex++ * 3) % 8);
}
sim.frame(16);
sim.draw();
requestAnimFrame(loop);
};
loop();
};
});
\ No newline at end of file
assets/js/spider-framework.js
......@@ -58,8 +58,8 @@
var m = normal.length2();
normal.mutableScale(
((this.distance * this.distance - m) / m) *
this.stiffness *
stepCoef
this.stiffness *
stepCoef
);
this.a.pos.mutableAdd(normal);
this.b.pos.mutableSub(normal);
......@@ -81,7 +81,7 @@
PinConstraint.prototype.draw = function (ctx) {
ctx.beginPath();
ctx.arc(this.pos.x, this.pos.y, 6, 0, 2 * Math.PI);
ctx.fillStyle = "rgba(0,153,255,0.1)";
ctx.fillStyle = "#ddd";
ctx.fill();
};
function AngleConstraint(a, b, c, stiffness) {
......@@ -109,7 +109,7 @@
ctx.lineTo(this.c.pos.x, this.c.pos.y);
var tmp = ctx.lineWidth;
ctx.lineWidth = 5;
ctx.strokeStyle = "rgba(255,255,0,0.2)";
ctx.strokeStyle = "red";
ctx.stroke();
ctx.lineWidth = tmp;
};
......@@ -286,7 +286,7 @@
assert(
"normal",
Math.abs(normal.length() - 1) <= 1e-5 &&
normal.epsilonEquals(new Vec2(0.4472, 0.89443), 1e-4)
normal.epsilonEquals(new Vec2(0.4472, 0.89443), 1e-4)
);
assert("dot", new Vec2(2, 3).dot(new Vec2(4, 1)) == 11);
assert(
......@@ -296,8 +296,8 @@
assert(
"angle2",
new Vec2(1, 1).angle2(new Vec2(1, 0), new Vec2(2, 1)) *
(180 / Math.PI) ==
90
(180 / Math.PI) ==
90
);
assert(
"rotate",
......@@ -466,7 +466,7 @@
this.mouseDown = false;
this.draggedEntity = null;
this.selectionRadius = 20;
this.highlightColor = "#4f545c";
this.highlightColor = "#fff";
this.bounds = function (particle) {
if (particle.pos.y > this.height - 1)
particle.pos.y = this.height - 1;
......
assets/js/style.js
......@@ -274,25 +274,38 @@
});
//customer-feedback-course-detail
$(".client-carouselwrapper").owlCarousel({
loop: false,
autoplay: true,
margin: 20,
nav: false,
dots: false,
responsive: {
0: {
items: 3,
},
600: {
items: 4,
$(".client-carouselwrapper").each(function (index) {
const isSecond = index === 1;
$(this).owlCarousel({
loop: true,
margin: 20,
nav: false,
dots: false,
autoplay: true,
rtl: isSecond,
slideTransition: "linear",
autoplayTimeout: 3000,
autoplaySpeed: 3000,
// autoplayHoverPause: true,
responsive: {
0: {
items: 3,
},
600: {
items: 4,
},
1000: {
items: 5,
},
1200: {
items: 8,
},
},
1000: {
items: 5,
},
},
});
});
//more-course-section
$(".more-course-section").owlCarousel({
loop: false,
......@@ -433,19 +446,6 @@
// });
// });
var lastScrollTop = 0;
$(window).scroll(function (event) {
$(".menu-item-has-children").removeClass("show");
var thisValue = $(this).scrollTop();
if (thisValue == 0) {
$(".navbar").removeClass("sticky-top");
} else if (thisValue > lastScrollTop) {
$(".navbar").removeClass("sticky-top");
} else {
$(".navbar").addClass("sticky-top");
}
lastScrollTop = thisValue;
});
$(".button-close").click(function () {
$(".modal-dialog").addClass("addCss");
......@@ -479,17 +479,53 @@
},
});
$(function () {
let lastScrollTop = 0;
let scrollTimeout;
$(window).on("scroll", function () {
clearTimeout(scrollTimeout);
const scrollTop = $(this).scrollTop();
scrollTimeout = setTimeout(() => {
$(".menu-item-has-children").removeClass("show");
if (scrollTop > 120 && scrollTop < lastScrollTop) {
$(".navbar").addClass("sticky-top");
$(".sticky-tab").addClass("sticky-with-header");
} else {
$(".navbar").removeClass("sticky-top");
$(".sticky-tab").removeClass("sticky-with-header");
}
lastScrollTop = scrollTop;
}, 100);
});
})
// returntotop
$(window).scroll(function () {
if ($(this).scrollTop() >= 200) {
$("#return-to-top").show(200);
} else {
$("#return-to-top").hide(200);
}
});
$("#return-to-top").click(function () {
$("body,html").animate({ scrollTop: 0 }, 1000);
});
$(function () {
let lastScrollTop = 0;
$(window).scroll(function () {
let currentScrollTop = $(this).scrollTop();
// Only show if scrolling up and scrolled at least 200px
if (currentScrollTop < lastScrollTop && currentScrollTop >= 200) {
$("#return-to-top").fadeIn(200);
} else {
$("#return-to-top").fadeOut(200);
}
lastScrollTop = currentScrollTop;
});
$("#return-to-top").click(function () {
$("html, body").animate({ scrollTop: 0 }, 1000);
});
})
//thankyou message for comment in blog-detail
$("#submitBtn").click(function () {
......
blocks/custom-banner-with-right-image.php
<?php if (get_field('enable_section')): ?>
<section class="background-dark pb-60 ABOUT TOP-BANNER-SECTION">
<div class="container">
<div class="inner-banner-wrapper">
<div class="row align-items-center justify-content-between">
<div class="col-lg-6 col-12">
<div class="position-relative left-text-wrapper">
<?php the_field('description'); ?>
</div>
<section class="background-dark pb-60 ABOUT TOP-BANNER-SECTION">
<div class="container">
<div class="inner-banner-wrapper">
<div class="row align-items-start justify-content-between">
<div class="col-lg-6 col-12">
<div class="position-relative left-text-wrapper">
<?php the_field('description'); ?>
</div>
<div class="col-lg-5 col-md-5 mx-auto col-12 text-center right-image">
<div class="image-wrapper">
<div class="image">
<?php
</div>
<div class="col-lg-5 col-md-5 mx-auto col-12 text-center right-image">
<div class="image-wrapper">
<div class="image">
<?php
$image = get_field('image');
$size = 'full';
if ($image) {
echo wp_get_attachment_image($image, $size);
} ?>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</section>
<?php endif; ?>
\ No newline at end of file
blocks/partners-carousel.php
<?php if (get_field('enable_partners_carousel_section')) : ?>
<section class="py-80 container-fluid HOME TOP-CAROUSEL-SECTION reversed">
<div class="container">
<div class="row mb-60 pb-60 border-bottom">
<div class="mb-3 text-center title-wrapper">
<h5><?php echo get_field('pc_title'); ?></h5>
</div>
<div class="col-lg-10 mx-auto">
<div class="client-carouselwrapper owl-carousel owl-theme">
<?php
<section class="py-80 container-fluid HOME TOP-CAROUSEL-SECTION reversed">
<div class="container">
<div class="row mb-60 pb-60 border-bottom">
<div class="mb-3 text-center title-wrapper">
<h5><?php echo get_field('pc_title'); ?></h5>
</div>
<div class="">
<div class="client-carouselwrapper owl-carousel owl-theme mb-4">
<?php
if (have_rows('pc_partners_list')) :
while (have_rows('pc_partners_list')) : the_row(); ?>
<!--<a target="_blank" href="<?php echo get_sub_field('link'); ?>" class="item">-->
<!--<a href="" onclick="return false;" class="item">-->
<?php
<!--<a target="_blank" href="<?php echo get_sub_field('link'); ?>" class="item">-->
<!--<a href="" onclick="return false;" class="item">-->
<?php
$image = get_sub_field('logo');
$size = 'full'; // (thumbnail, medium, large, full or custom size)
if ($image) {
echo wp_get_attachment_image($image, $size);
} ?>
<!--</a>-->
<?php endwhile;
<!--</a>-->
<?php endwhile;
endif; ?>
</div>
</div>
<div class="client-carouselwrapper owl-carousel owl-theme">
<?php
$partners = get_field('pc_partners_list'); // Get entire repeater as array
if ($partners) {
$partners = array_reverse($partners); // Reverse the order
foreach ($partners as $partner) {
$image = $partner['logo'];
$size = 'full'; // thumbnail, medium, large, full or custom size
if ($image) {
echo wp_get_attachment_image($image, $size);
}
}
}
?>
</div>
</div>
</div>
</section>
</div>
</section>
<?php endif; ?>
\ No newline at end of file
blocks/portfolio-banner.php
<section class="bg-primary pb-60 PD-TOP-SECTION makura-new">
<div class="container">
<div class="row justify-content-between">
<div class="col-lg-7 title-wrapper">
<div class="portfolio-detail-content-box pb-40">
<?php the_field('description'); ?>
<div class="container">
<div class="row justify-content-between">
<div class="col-lg-7 title-wrapper">
<div class="portfolio-detail-content-box pb-40">
<?php the_field('description'); ?>
</div>
<?php if ($link = get_field('link')):
$link_target = $link['target'] ? $link['target'] : '_self'; ?>
<a href="<?php echo $link['url']; ?>" target="_blank" class="open-in-new-tab d-none d-lg-inline-block">
<?php echo $link['title']; ?>
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M14.3379 4.552L2.8619 16.028L0.976562 14.1427L12.4512 2.66667H2.3379V0H17.0046V14.6667H14.3379V4.552Z"
fill="#005AFF" />
</svg>
</a>
<?php endif; ?>
</div>
<div class="col-lg-4 col-xl-3">
<div class="client-logo-wrapper d-none d-lg-block">
<?php if ($image = get_field('client_logo')):
echo wp_get_attachment_image($image, 'full');
endif; ?>
</div>
<?php
$sof_title = get_field('sof_title') ?: 'Scope of Work';
if ($scope = get_field('scope_of_work')): ?>
<div class="scope-work-wrapper">
<?php if (!empty($sof_title)): ?><span
class="sm-text"><?php echo $sof_title; ?></span><?php endif; ?>
<ul class="list-unstyled">
<?php echo $scope; ?>
</ul>
</div>
<?php endif; ?>
</div>
</div>
<?php if ($link = get_field('link')):
$link_target = $link['target'] ? $link['target'] : '_self'; ?>
<a href="<?php echo $link['url']; ?>" target="_blank" class="open-in-new-tab d-none d-lg-inline-block">
<?php echo $link['title']; ?>
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M14.3379 4.552L2.8619 16.028L0.976562 14.1427L12.4512 2.66667H2.3379V0H17.0046V14.6667H14.3379V4.552Z"
fill="#005AFF" />
</svg>
</a>
$link_target = $link['target'] ? $link['target'] : '_self'; ?>
<a href="<?php echo $link['url']; ?>" target="_blank" class="open-in-new-tab d-lg-none">
<?php echo $link['title']; ?>
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M14.3379 4.552L2.8619 16.028L0.976562 14.1427L12.4512 2.66667H2.3379V0H17.0046V14.6667H14.3379V4.552Z"
fill="#005AFF" />
</svg>
</a>
<?php endif; ?>
</div>
<div class="col-lg-4">
<div class="client-logo-wrapper d-none d-lg-block">
<?php if ($image = get_field('client_logo')):
echo wp_get_attachment_image($image, 'full');
endif; ?>
</div>
<?php
$sof_title = get_field('sof_title')?:'Scope of Work';
if ($scope = get_field('scope_of_work')): ?>
<div class="scope-work-wrapper">
<?php if (!empty($sof_title)): ?><span class="sm-text"><?php echo $sof_title; ?></span><?php endif; ?>
<ul class="list-unstyled">
<?php echo $scope; ?>
</ul>
</div>
<?php endif; ?>
</div>
</div>
<?php if ($link = get_field('link')):
$link_target = $link['target'] ? $link['target'] : '_self'; ?>
<a href="<?php echo $link['url']; ?>" target="_blank" class="open-in-new-tab d-lg-none">
<?php echo $link['title']; ?>
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.3379 4.552L2.8619 16.028L0.976562 14.1427L12.4512 2.66667H2.3379V0H17.0046V14.6667H14.3379V4.552Z"
fill="#005AFF" />
</svg>
</a>
<?php endif; ?>
</div>
</section>
\ No newline at end of file
blocks/portfolio-conclusion-section.php
......@@ -10,19 +10,19 @@
<div class="pc-content-box">
<?php echo get_field('description'); ?>
<?php if (have_rows('stats')): ?>
<div class="percentage-box">
<div class="row">
<?php while (have_rows('stats')):
<div class="percentage-box">
<div class="row">
<?php while (have_rows('stats')):
the_row(); ?>
<div class="col-sm-6 col-lg-5 col-xl-4">
<div class="inner-wrapper">
<span><?php the_sub_field('number'); ?></span>
<p><?php the_sub_field('title'); ?></p>
</div>
</div>
<?php endwhile; ?>
<div class="col-sm-6 col-lg-5 col-xl-4">
<div class="inner-wrapper">
<span><?php the_sub_field('number'); ?></span>
<p><?php the_sub_field('title'); ?></p>
</div>
</div>
<?php endwhile; ?>
</div>
</div>
<?php endif; ?>
</div>
</div>
......@@ -37,70 +37,70 @@ if (isset($cmws) && is_array($cmws) && !empty($cmws)):
$cmws_desc = $cmws['cmws_desc'] ?: '';
$cmws_gal = $cmws['cmws_gal'] ?: [];
?>
<section class="moment-worth-sharing makura-new mb-100">
<div class="container">
<?php if (!empty($cmws_title) || !empty($cmws_desc)): ?>
<div class="section-title slide-up">
<?php if (!empty($cmws_title)): ?>
<h2><?php echo $cmws_title; ?></h2><?php endif; ?>
<?php echo $cmws_desc ?: ''; ?>
</div>
<?php endif; ?>
<?php if (!empty($cmws_gal) && is_array($cmws_gal)): ?>
<div class="gallery-grid slide-up">
<?php foreach ($cmws_gal as $i => $gallery_item):
<section class="moment-worth-sharing makura-new mb-100">
<div class="container">
<?php if (!empty($cmws_title) || !empty($cmws_desc)): ?>
<div class="section-title slide-up">
<?php if (!empty($cmws_title)): ?>
<h2><?php echo $cmws_title; ?></h2><?php endif; ?>
<?php echo $cmws_desc ?: ''; ?>
</div>
<?php endif; ?>
<?php if (!empty($cmws_gal) && is_array($cmws_gal)): ?>
<div class="gallery-grid slide-up">
<?php foreach ($cmws_gal as $i => $gallery_item):
$img = $gallery_item['img'] ?: '';
$layout = $gallery_item['layout'] ?: '';
$class_name = !empty($layout) ? explode(':', $layout[0]) : 'none';
$class_name = $class_name[0];
if (!empty($img)):
?>
<div class="gallery-item <?php echo $class_name; ?>">
<a data-src="<?php echo esc_url($img); ?>">
<img src="<?php echo esc_url($img); ?>"
alt="<?php echo esc_attr(get_post_meta(attachment_url_to_postid($img), '_wp_attachment_image_alt', true)) ?: get_the_title(attachment_url_to_postid($img)); ?>"
class="img-fluid">
<?php if ($i === (count($cmws_gal) - 1)): ?><span><svg width="16" height="16" viewBox="0 0 16 16" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M4.78477 6.63253C5.80499 6.63253 6.63205 5.80548 6.63205 4.78526C6.63205 3.76504 5.80499 2.93799 4.78477 2.93799C3.76455 2.93799 2.9375 3.76504 2.9375 4.78526C2.9375 5.80548 3.76455 6.63253 4.78477 6.63253Z"
fill="white" />
<path
d="M4.78477 13.0617C5.80499 13.0617 6.63205 12.2347 6.63205 11.2145C6.63205 10.1942 5.80499 9.36719 4.78477 9.36719C3.76455 9.36719 2.9375 10.1942 2.9375 11.2145C2.9375 12.2347 3.76455 13.0617 4.78477 13.0617Z"
fill="white" />
<path
d="M11.2145 6.63253C12.2347 6.63253 13.0617 5.80548 13.0617 4.78526C13.0617 3.76504 12.2347 2.93799 11.2145 2.93799C10.1942 2.93799 9.36719 3.76504 9.36719 4.78526C9.36719 5.80548 10.1942 6.63253 11.2145 6.63253Z"
fill="white" />
<path
d="M11.2145 13.0617C12.2347 13.0617 13.0617 12.2347 13.0617 11.2145C13.0617 10.1942 12.2347 9.36719 11.2145 9.36719C10.1942 9.36719 9.36719 10.1942 9.36719 11.2145C9.36719 12.2347 10.1942 13.0617 11.2145 13.0617Z"
fill="white" />
</svg> View All
</span><?php endif; ?>
</a>
</div>
<?php endif; endforeach; ?>
</div>
<?php endif; ?>
<div class="gallery-item <?php echo $class_name; ?>">
<a data-src="<?php echo esc_url($img); ?>">
<img src="<?php echo esc_url($img); ?>"
alt="<?php echo esc_attr(get_post_meta(attachment_url_to_postid($img), '_wp_attachment_image_alt', true)) ?: get_the_title(attachment_url_to_postid($img)); ?>"
class="img-fluid">
<?php if ($i === (count($cmws_gal) - 1)): ?><span><svg width="16" height="16" viewBox="0 0 16 16" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M4.78477 6.63253C5.80499 6.63253 6.63205 5.80548 6.63205 4.78526C6.63205 3.76504 5.80499 2.93799 4.78477 2.93799C3.76455 2.93799 2.9375 3.76504 2.9375 4.78526C2.9375 5.80548 3.76455 6.63253 4.78477 6.63253Z"
fill="white" />
<path
d="M4.78477 13.0617C5.80499 13.0617 6.63205 12.2347 6.63205 11.2145C6.63205 10.1942 5.80499 9.36719 4.78477 9.36719C3.76455 9.36719 2.9375 10.1942 2.9375 11.2145C2.9375 12.2347 3.76455 13.0617 4.78477 13.0617Z"
fill="white" />
<path
d="M11.2145 6.63253C12.2347 6.63253 13.0617 5.80548 13.0617 4.78526C13.0617 3.76504 12.2347 2.93799 11.2145 2.93799C10.1942 2.93799 9.36719 3.76504 9.36719 4.78526C9.36719 5.80548 10.1942 6.63253 11.2145 6.63253Z"
fill="white" />
<path
d="M11.2145 13.0617C12.2347 13.0617 13.0617 12.2347 13.0617 11.2145C13.0617 10.1942 12.2347 9.36719 11.2145 9.36719C10.1942 9.36719 9.36719 10.1942 9.36719 11.2145C9.36719 12.2347 10.1942 13.0617 11.2145 13.0617Z"
fill="white" />
</svg> View All
</span><?php endif; ?>
</a>
</div>
</section>
<?php endif; endif; ?>
<?php endif; endforeach; ?>
</div>
<?php endif; ?>
</div>
</section>
<?php endif; endif; ?>
<?php if ($quote_text = get_field('quote_text')): ?>
<section class="quote PROJECT-CONCLUSION">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-10 col-xl-8 mx-auto">
<div class="position-relative pt-40 pb-100 quote-text">
<div class="icon-wrapper">
<svg width="136" height="114" viewBox="0 0 136 114" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.16"
d="M136 0V26.0755H127.977C121.514 26.0755 116.388 27.0784 112.599 29.0842C108.81 31.09 106.024 34.5444 104.241 39.4475C102.458 44.1277 101.567 50.4795 101.567 58.5027V83.241L91.8723 64.5201C93.4323 63.4058 95.661 62.5143 98.5583 61.8457C101.456 60.9542 104.464 60.5085 107.584 60.5085C114.939 60.5085 121.068 62.8486 125.971 67.5288C130.874 71.9862 133.326 78.2264 133.326 86.2497C133.326 93.8272 130.985 100.29 126.305 105.639C121.625 110.765 114.939 113.328 106.247 113.328C100.676 113.328 95.4381 112.102 90.5351 109.651C85.8548 106.976 82.0661 102.519 79.1688 96.2787C76.2715 89.8155 74.8229 81.0123 74.8229 69.8689V64.1858C74.8229 48.3622 76.9402 35.7702 81.1746 26.4098C85.632 17.0494 91.9837 10.3633 100.23 6.35172C108.476 2.11724 118.505 0 130.317 0H136ZM62.1195 0V26.0755H54.0962C47.6331 26.0755 42.5071 27.0784 38.7184 29.0842C34.9297 31.09 32.1438 34.5444 30.3609 39.4475C28.5779 44.1277 27.6865 50.4795 27.6865 58.5027V83.241L17.9917 64.5201C19.5518 63.4058 21.7805 62.5143 24.6778 61.8457C27.575 60.9542 30.5837 60.5085 33.7039 60.5085C41.0585 60.5085 47.1874 62.8486 52.0904 67.5288C56.9935 71.9862 59.4451 78.2264 59.4451 86.2497C59.4451 93.8272 57.105 100.29 52.4247 105.639C47.7445 110.765 41.0585 113.328 32.3667 113.328C26.795 113.328 21.5576 112.102 16.6545 109.651C11.9743 106.976 8.18557 102.519 5.2883 96.2787C2.39102 89.8155 0.942383 81.0123 0.942383 69.8689V64.1858C0.942383 48.3622 3.05962 35.7702 7.2941 26.4098C11.7514 17.0494 18.1032 10.3633 26.3493 6.35172C34.5954 2.11724 44.6244 0 56.4364 0H62.1195Z"
fill="#005AFF" />
</svg>
</div>
<?php echo $quote_text; ?>
<section class="quote PROJECT-CONCLUSION">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-10 col-xl-8 mx-auto">
<div class="position-relative pt-40 pb-100 quote-text">
<div class="icon-wrapper">
<svg width="136" height="114" viewBox="0 0 136 114" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.16"
d="M136 0V26.0755H127.977C121.514 26.0755 116.388 27.0784 112.599 29.0842C108.81 31.09 106.024 34.5444 104.241 39.4475C102.458 44.1277 101.567 50.4795 101.567 58.5027V83.241L91.8723 64.5201C93.4323 63.4058 95.661 62.5143 98.5583 61.8457C101.456 60.9542 104.464 60.5085 107.584 60.5085C114.939 60.5085 121.068 62.8486 125.971 67.5288C130.874 71.9862 133.326 78.2264 133.326 86.2497C133.326 93.8272 130.985 100.29 126.305 105.639C121.625 110.765 114.939 113.328 106.247 113.328C100.676 113.328 95.4381 112.102 90.5351 109.651C85.8548 106.976 82.0661 102.519 79.1688 96.2787C76.2715 89.8155 74.8229 81.0123 74.8229 69.8689V64.1858C74.8229 48.3622 76.9402 35.7702 81.1746 26.4098C85.632 17.0494 91.9837 10.3633 100.23 6.35172C108.476 2.11724 118.505 0 130.317 0H136ZM62.1195 0V26.0755H54.0962C47.6331 26.0755 42.5071 27.0784 38.7184 29.0842C34.9297 31.09 32.1438 34.5444 30.3609 39.4475C28.5779 44.1277 27.6865 50.4795 27.6865 58.5027V83.241L17.9917 64.5201C19.5518 63.4058 21.7805 62.5143 24.6778 61.8457C27.575 60.9542 30.5837 60.5085 33.7039 60.5085C41.0585 60.5085 47.1874 62.8486 52.0904 67.5288C56.9935 71.9862 59.4451 78.2264 59.4451 86.2497C59.4451 93.8272 57.105 100.29 52.4247 105.639C47.7445 110.765 41.0585 113.328 32.3667 113.328C26.795 113.328 21.5576 112.102 16.6545 109.651C11.9743 106.976 8.18557 102.519 5.2883 96.2787C2.39102 89.8155 0.942383 81.0123 0.942383 69.8689V64.1858C0.942383 48.3622 3.05962 35.7702 7.2941 26.4098C11.7514 17.0494 18.1032 10.3633 26.3493 6.35172C34.5954 2.11724 44.6244 0 56.4364 0H62.1195Z"
fill="#005AFF" />
</svg>
</div>
<?php echo $quote_text; ?>
</div>
</div>
</div>
</section>
</div>
</section>
<?php endif; ?>
\ No newline at end of file
blocks/portfolio-listing-section.php
<?php if (get_field('enable_section')) :
$terms = get_terms('portfolio-category');
if ($terms) :
<?php
$portfolio_listing = get_field('portfolio_listing') ?: [];
if (is_array($portfolio_listing) && !empty($portfolio_listing) && isset($portfolio_listing)):
$enable_portfolio_listing = $portfolio_listing['enable_portfolio_listing'] ?? '';
if ($enable_portfolio_listing && !empty($enable_portfolio_listing) && isset($enable_portfolio_listing)):
$terms = get_terms('portfolio-category');
?>
<section class="background-dark mb-60 ABOUT TOP-BANNER-SECTION">
<section class="case-study-filter background-dark mb-60 ABOUT TOP-BANNER-SECTION">
<div class="container">
<div class="row">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
......@@ -102,4 +105,5 @@
</div>
</section>
<?php endif;
endif; ?>
\ No newline at end of file
endif;
?>
\ No newline at end of file
blocks/portfolio-text-image-section.php
......@@ -128,6 +128,8 @@ if (isset($content) && is_array($content) && !empty($content)):
$galleries_desc = $galleries['galleries_desc'] ?: '';
$galleries_img = $galleries['galleries_img'] ?: [];
if (isset($galleries_img) && is_array($galleries_img) && !empty($galleries_img)):
$sanitized_title = !empty($galleries_title) ? sanitize_title_with_dashes(strtok($galleries_title, ' ')) : 'gallery';
$gallery_id = $sanitized_title . '-' . mt_rand(100000, 999999);
?>
<div class="block-gallery makura-new mb-120">
<div class="container">
......@@ -156,7 +158,7 @@ if (isset($content) && is_array($content) && !empty($content)):
</div>
</div>
<div class="gallery-slider-wrapper slide-up">
<div class="gallery-slider owl-carousel " id="ui-ux-gallery">
<div class="gallery-slider owl-carousel " id="ui-ux-<?php echo esc_attr($gallery_id); ?>">
<?php foreach ($galleries_img as $gi => $img):
?>
<div class="gallery-item">
......
blocks/related-portfolio-section.php
<?php if(get_field('enable_section')):?>
<section class="container-fluid YOU-MAY-LIKE">
<div class="container">
<div class="row">
<div class="main-wrapper">
<div class="col-lg-8 top-title-wrapper">
<h2><?php the_field('title');?></h2>
<?php the_field('description');?>
<?php if (get_field('enable_section')): ?>
<section class="container-fluid YOU-MAY-LIKE">
<div class="container">
<div class="row">
<div class="main-wrapper">
<div class="col-lg-8 top-title-wrapper">
<h2><?php the_field('title'); ?></h2>
<?php the_field('description'); ?>
</div>
</div>
</div>
<?php if($portfolios = get_field('related_portfolios')):?>
<div class="portfolio-carousel owl-carousel owl-theme">
<?php foreach($portfolios as $portfolio):
// Check if $portfolio is an object or an ID
$post_id = is_object($portfolio) ? $portfolio->ID : $portfolio;
?>
<div class="item">
<div class="recent-card-wrapper">
<a href="<?php echo get_the_permalink($post_id);?>">
<?php echo get_the_post_thumbnail($portfolio);?>
<div class="bottom-text">
<div class="d-flex align-items-center justify-content-between title">
<div class="heading">
<h3><?php echo get_the_title($portfolio);?></h3>
</div>
<div class="site-link">
<p>View Site <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M4 12L12 4" stroke="#58595A" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round" />
<path d="M5.5 4H12V10.5" stroke="#58595A" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</p>
</div>
</div>
<ul class="list-unstyled d-flex">
<?php
$terms = get_terms('portfolio-category');
foreach ($terms as $term) {
echo '<li>#' . $term->name . '</li>';
<?php
$portfolios = get_field('related_portfolios');
if (is_array($portfolios) && !empty($portfolios)): ?>
<div class="portfolio-carousel owl-carousel owl-theme">
<?php foreach ($portfolios as $portfolio):
$post_id = is_object($portfolio) ? $portfolio->ID : $portfolio;
?>
<div class="item">
<div class="recent-card-wrapper">
<a href="<?php echo get_the_permalink($post_id); ?>">
<?php
if (has_post_thumbnail($post_id)) {
echo get_the_post_thumbnail($portfolio);
} else {
if (is_singular('case-study')) {
$case_study_fallback_image = get_field('case-study_fallback_featured_image', 'option');
echo '<img src="' . esc_url($case_study_fallback_image) . '" alt="Case Study Placeholder">';
}
}
?>
</ul>
?>
<div class="bottom-text">
<div class="d-flex align-items-center justify-content-between title">
<div class="heading">
<h3><?php echo get_the_title($portfolio); ?></h3>
</div>
<div class="site-link">
<p>View Site <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M4 12L12 4" stroke="#58595A" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round" />
<path d="M5.5 4H12V10.5" stroke="#58595A" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</p>
</div>
</div>
<ul class="list-unstyled d-flex">
<?php
$portfolio_post = is_object($portfolio) ? $portfolio : get_post($portfolio);
$post_type = get_post_type($portfolio_post);
$taxonomy = ($post_type === 'case-study') ? 'case-study-category' : 'portfolio-category';
$terms = get_the_terms($portfolio_post, $taxonomy);
if ($terms && !is_wp_error($terms)) {
foreach ($terms as $term) {
echo '<li>#' . esc_html($term->name) . '</li>';
}
}
?>
</ul>
</div>
</a>
</div>
</div>
</a>
<?php endforeach; ?>
</div>
</div>
<?php endforeach;?>
<?php
else:
$current_post_id = get_the_ID();
$current_post_type = get_post_type($current_post_id);
$taxonomy = ($current_post_type === 'case-study') ? 'case-study-category' : 'portfolio-category';
$terms = get_the_terms($current_post_id, $taxonomy);
if ($terms && !is_wp_error($terms)) {
$term_ids = wp_list_pluck($terms, 'term_id');
$args = array(
'post_type' => $current_post_type,
'posts_per_page' => 6,
'post__not_in' => array($current_post_id),
'tax_query' => array(
array(
'taxonomy' => $taxonomy,
'field' => 'term_id',
'terms' => $term_ids,
),
),
);
$related_query = new WP_Query($args);
if ($related_query->have_posts()): ?>
<div class="portfolio-carousel owl-carousel owl-theme">
<?php while ($related_query->have_posts()): $related_query->the_post(); ?>
<div class="item">
<div class="recent-card-wrapper">
<a href="<?php the_permalink(); ?>">
<?php
if (has_post_thumbnail()) {
the_post_thumbnail();
} else {
if ($current_post_type === 'case-study') {
$case_study_fallback_image = get_field('case-study_fallback_featured_image', 'option');
if ($case_study_fallback_image) {
echo '<img src="' . esc_url($case_study_fallback_image) . '" alt="Case Study Placeholder">';
}
}
}
?>
<div class="bottom-text">
<div class="d-flex align-items-center justify-content-between title">
<div class="heading">
<h3><?php the_title(); ?></h3>
</div>
<div class="site-link">
<p>View Site
<!-- SVG here -->
</p>
</div>
</div>
<ul class="list-unstyled d-flex">
<?php
$related_terms = get_the_terms(get_the_ID(), $taxonomy);
if ($related_terms && !is_wp_error($related_terms)) {
foreach ($related_terms as $term) {
echo '<li>#' . esc_html($term->name) . '</li>';
}
}
?>
</ul>
</div>
</a>
</div>
</div>
<?php endwhile; ?>
</div>
<?php
endif;
wp_reset_postdata();
}
endif;
?>
<?php if ($link = get_field('link')) : $link_target = $link['target'] ? $link['target'] : '_self'; ?>
<a href="<?php echo $link['url']; ?>" target="<?php echo esc_attr($link_target); ?>" class="btn my-60 mx-auto d-flex align-items-center start-project btn-start-project-white"
style="width: fit-content;"><?php echo $link['title']; ?>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M4 13L16.17 13L10.58 18.59L12 20L20 12L12 4L10.59 5.41L16.17 11L4 11L4 13Z" fill="white">
</path>
</svg>
</a>
<?php endif; ?>
</div>
<?php endif; ?>
<?php if ($link = get_field('link')) : $link_target = $link['target'] ? $link['target'] : '_self';?>
<a href="<?php echo $link['url']; ?>" target="<?php echo esc_attr( $link_target ); ?>" class="btn my-60 mx-auto d-flex align-items-center start-project btn-start-project-white"
style="width: fit-content;"><?php echo $link['title']; ?>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M4 13L16.17 13L10.58 18.59L12 20L20 12L12 4L10.59 5.41L16.17 11L4 11L4 13Z" fill="white">
</path>
</svg>
</a>
<?php endif;?>
</div>
</div>
</section>
<?php endif;?>
\ No newline at end of file
</section>
<?php endif; ?>
\ No newline at end of file
blocks/resources/resource-listing.php
......@@ -7,43 +7,46 @@ if (isset($resources_listing) && is_array($resources_listing) && !empty($resourc
$resources_items = $resources_listing['resources_items'] ?: [];
if (isset($resources_items) && is_array($resources_items) && !empty($resources_items)):
?>
<section class="resource-listing py-80 makura-new">
<div class="container">
<div class="row">
<div class="col-lg-4 col-xl-3">
<div class="toc slide-up">
<div class="category-list">
<ul>
<?php foreach ($resources_items as $ri => $res_item):
<section class="resource-listing py-80 makura-new">
<div class="container">
<div class="row">
<div class="col-lg-4 col-xl-3">
<div class="toc slide-up">
<div class="toc-title">
<h6>Table of Content</h6>
</div>
<div class="category-list">
<ul>
<?php foreach ($resources_items as $ri => $res_item):
$title = $res_item['title'] ?: '';
?>
<li class="<?php echo ($ri === 0) ? 'active' : ''; ?>"><a href="#" class="sm-text"
data-target="<?php echo strtolower(str_replace(' ', '-', $title)); ?>"><?php echo esc_html($title); ?></a>
</li>
<?php endforeach; ?>
</ul>
</div>
</div>
</div>
<div class="col-lg-8 col-xl-9">
<div class="resource-wrapper">
<?php foreach ($resources_items as $ri => $res_item):
<li class="<?php echo ($ri === 0) ? 'active' : ''; ?>"><a href="#" class="sm-text"
data-target="<?php echo strtolower(str_replace(' ', '-', $title)); ?>"><?php echo esc_html($title); ?></a>
</li>
<?php endforeach; ?>
</ul>
</div>
</div>
</div>
<div class="col-lg-8 col-xl-9">
<div class="resource-wrapper">
<?php foreach ($resources_items as $ri => $res_item):
$title = $res_item['title'] ?: '';
$desc = $res_item['desc'] ?: '';
$select_resources = $res_item['select_resources'] ?: [];
?>
<div class="resource-block slide-up" id="<?php echo strtolower(str_replace(' ', '-', $title)); ?>">
<div class="section-title">
<?php if (!empty($title)): ?>
<h2><?php echo $title; ?></h2><?php endif; ?>
<?php if (!empty($desc)):
<div class="resource-block slide-up" id="<?php echo strtolower(str_replace(' ', '-', $title)); ?>">
<div class="section-title">
<?php if (!empty($title)): ?>
<h2><?php echo $title; ?></h2><?php endif; ?>
<?php if (!empty($desc)):
echo $desc ?: '';
endif; ?>
</div>
<?php if (!empty($select_resources) && isset($select_resources) && is_array($select_resources)): ?>
<div class="resources">
<div class="row">
<?php foreach ($select_resources as $sel_res):
</div>
<?php if (!empty($select_resources) && isset($select_resources) && is_array($select_resources)): ?>
<div class="resources">
<div class="row">
<?php foreach ($select_resources as $sel_res):
if ($sel_res instanceof WP_Post) {
$post_id = $sel_res->ID;
$post_url = get_permalink($post_id);
......@@ -55,24 +58,24 @@ if (isset($resources_listing) && is_array($resources_listing) && !empty($resourc
$post_content = $sel_res->post_content;
$post_excerpt = $sel_res->post_excerpt;
?>
<div class="col-sm-6">
<div class="resource-item d-sm-flex flex-sm-column flex-xl-row justify-content-xl-start slide-up">
<div class="resource-image">
<a href="<?php echo esc_url($post_url); ?>" class="d-block">
<img src="<?php echo esc_url($post_thumbnail_url); ?>"
alt="<?php echo esc_attr($post_title); ?>" class="img-fluid">
</a>
</div>
<div class="resource-content">
<div class="rc-detail">
<h6><a href="<?php echo esc_url($post_url); ?>">
<?php echo esc_html($post_title); ?></a></h6>
<P class="sm-text">
<?php echo wp_trim_words($post_excerpt, 8, '...') ?: wp_trim_words($post_content, 8, '...'); ?>
</P>
</div>
<div class="format-and-btn-wrapper d-flex justify-content-between">
<?php
<div class="col-sm-6">
<div class="resource-item d-sm-flex flex-sm-column flex-xl-row justify-content-xl-start slide-up">
<div class="resource-image">
<a href="<?php echo esc_url($post_url); ?>" class="d-block">
<img src="<?php echo esc_url($post_thumbnail_url); ?>"
alt="<?php echo esc_attr($post_title); ?>" class="img-fluid">
</a>
</div>
<div class="resource-content">
<div class="rc-detail">
<h6><a href="<?php echo esc_url($post_url); ?>">
<?php echo esc_html($post_title); ?></a></h6>
<P class="sm-text">
<?php echo wp_trim_words($post_excerpt, 8, '...') ?: wp_trim_words($post_content, 8, '...'); ?>
</P>
</div>
<div class="format-and-btn-wrapper d-flex justify-content-between">
<?php
$downloadable_resource = get_field('downloadable_resource', $post_id) ?: [];
if (isset($downloadable_resource) && is_array($downloadable_resource) && !empty($downloadable_resource)):
$enable_downloadable_resources = $downloadable_resource['enable_downloadable_resources'];
......@@ -105,24 +108,24 @@ if (isset($resources_listing) && is_array($resources_listing) && !empty($resourc
endif;
endif;
?>
<p class="sm-text">Format: <img src="<?php echo esc_url($icon_url); ?>"
alt="<?php echo esc_attr($subtype); ?>"></p>
<a href="<?php echo esc_url($post_url); ?>" class="mc-btn-underlined sm-text">View in
Detail</a>
</div>
</div>
</div>
</div>
<?php }endforeach; ?>
</div>
<p class="sm-text">Format: <img src="<?php echo esc_url($icon_url); ?>"
alt="<?php echo esc_attr($subtype); ?>"></p>
<a href="<?php echo esc_url($post_url); ?>" class="mc-btn-underlined sm-text">View in
Detail</a>
</div>
<?php endif; ?>
</div>
</div>
<?php endforeach; ?>
</div>
<?php }endforeach; ?>
</div>
</div>
<?php endif; ?>
</div>
<?php endforeach; ?>
</div>
</section>
<?php endif; endif; endif; ?>
</div>
</div>
</div>
</section>
<?php endif; endif; endif; ?>
<!-- !Resources - Resources Listing -->
\ No newline at end of file
blocks/testimonial-block.php
<?php if(get_field('enable_section')):?>
<section class="container-fluid background-dark py-80 HOME OUR-CUSTOMERS-SAY-SECTION <?php if (is_singular('portfolio')): ?>single-what-customers-say<?php endif; ?>">
<div class="container">
<div class="row top-title pb-60 justify-content-between">
<div class="col-lg-5 col-md-6 col-12">
<h2>
<?php the_field('title');?>
</h2>
</div>
<div class="col-lg-5 col-md-5 col-12">
<?php the_field('description');?>
<?php if (get_field('enable_section')):
if (is_singular('portfolio') || is_singular('case-study')) {
$single_customer_review = 'single-what-customers-say';
}
?>
<section class="container-fluid background-dark py-80 HOME OUR-CUSTOMERS-SAY-SECTION <?php echo esc_attr($single_customer_review); ?>">
<div class="container">
<div class="row top-title pb-60 justify-content-between">
<div class="col-lg-5 col-md-6 col-12">
<h2>
<?php the_field('title'); ?>
</h2>
</div>
<div class="col-lg-5 col-md-5 col-12">
<?php the_field('description'); ?>
</div>
</div>
</div>
<?php $testimonials = get_field('testimonials'); if($testimonials): $carousle_type = get_field('carousel_type'); ?>
<div class="row">
<div class="<?php if($carousle_type==3): echo 'customer-feedback'; elseif($carousle_type==2): echo ''; else: echo 'customer-feedback-portfolio'; endif;?> owl-carousel owl-theme">
<?php foreach($testimonials as $testimonial):?>
<div class="item feedback-wrapper p-40">
<svg width="29" height="25" viewBox="0 0 29 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M28.6018 0.0012207V5.52334H26.9027C25.5339 5.52334 24.4484 5.73573 23.646 6.16051C22.8437 6.58529 22.2537 7.31685 21.8761 8.3552C21.4985 9.34635 21.3097 10.6915 21.3097 12.3906V17.6295L19.2566 13.6649C19.587 13.4289 20.059 13.2402 20.6726 13.0986C21.2861 12.9098 21.9233 12.8154 22.5841 12.8154C24.1416 12.8154 25.4395 13.311 26.4779 14.3021C27.5162 15.2461 28.0354 16.5676 28.0354 18.2667C28.0354 19.8714 27.5398 21.2402 26.5487 22.3729C25.5575 23.4584 24.1416 24.0012 22.3009 24.0012C21.1209 24.0012 20.0118 23.7416 18.9735 23.2225C17.9823 22.6561 17.1799 21.7121 16.5664 20.3906C15.9528 19.0219 15.646 17.1576 15.646 14.7977V13.5941C15.646 10.2431 16.0944 7.57644 16.9912 5.59414C17.9351 3.61184 19.2802 2.19591 21.0265 1.34635C22.7729 0.449598 24.8968 0.0012207 27.3982 0.0012207H28.6018ZM12.9558 0.0012207V5.52334H11.2566C9.88791 5.52334 8.80236 5.73573 8 6.16051C7.19764 6.58529 6.60767 7.31685 6.23009 8.3552C5.85251 9.34635 5.66372 10.6915 5.66372 12.3906V17.6295L3.61062 13.6649C3.941 13.4289 4.41298 13.2402 5.02655 13.0986C5.64012 12.9098 6.27729 12.8154 6.93805 12.8154C8.49558 12.8154 9.79351 13.311 10.8319 14.3021C11.8702 15.2461 12.3894 16.5676 12.3894 18.2667C12.3894 19.8714 11.8938 21.2402 10.9027 22.3729C9.91151 23.4584 8.49558 24.0012 6.65487 24.0012C5.47493 24.0012 4.36578 23.7416 3.32743 23.2225C2.33628 22.6561 1.53392 21.7121 0.920354 20.3906C0.306785 19.0219 0 17.1576 0 14.7977V13.5941C0 10.2431 0.448378 7.57644 1.34513 5.59414C2.28909 3.61184 3.63422 2.19591 5.38053 1.34635C7.12684 0.449598 9.25074 0.0012207 11.7522 0.0012207H12.9558Z"
fill="#005AFF" />
</svg>
<?php echo get_the_content(null,false,$testimonial);?>
<hr>
<div class="author-info d-flex align-items-center">
<?php echo get_the_post_thumbnail($testimonial);?>
<div class="detail">
<div><?php the_field('name',$testimonial);?></div>
<span><?php the_field('profession',$testimonial);?></span>
<?php $testimonials = get_field('testimonials');
if ($testimonials): $carousle_type = get_field('carousel_type'); ?>
<div class="row">
<div class="<?php if ($carousle_type == 3): echo 'customer-feedback';
elseif ($carousle_type == 2): echo '';
else: echo 'customer-feedback-portfolio';
endif; ?> owl-carousel owl-theme">
<?php foreach ($testimonials as $testimonial): ?>
<div class="item feedback-wrapper p-40">
<svg width="29" height="25" viewBox="0 0 29 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M28.6018 0.0012207V5.52334H26.9027C25.5339 5.52334 24.4484 5.73573 23.646 6.16051C22.8437 6.58529 22.2537 7.31685 21.8761 8.3552C21.4985 9.34635 21.3097 10.6915 21.3097 12.3906V17.6295L19.2566 13.6649C19.587 13.4289 20.059 13.2402 20.6726 13.0986C21.2861 12.9098 21.9233 12.8154 22.5841 12.8154C24.1416 12.8154 25.4395 13.311 26.4779 14.3021C27.5162 15.2461 28.0354 16.5676 28.0354 18.2667C28.0354 19.8714 27.5398 21.2402 26.5487 22.3729C25.5575 23.4584 24.1416 24.0012 22.3009 24.0012C21.1209 24.0012 20.0118 23.7416 18.9735 23.2225C17.9823 22.6561 17.1799 21.7121 16.5664 20.3906C15.9528 19.0219 15.646 17.1576 15.646 14.7977V13.5941C15.646 10.2431 16.0944 7.57644 16.9912 5.59414C17.9351 3.61184 19.2802 2.19591 21.0265 1.34635C22.7729 0.449598 24.8968 0.0012207 27.3982 0.0012207H28.6018ZM12.9558 0.0012207V5.52334H11.2566C9.88791 5.52334 8.80236 5.73573 8 6.16051C7.19764 6.58529 6.60767 7.31685 6.23009 8.3552C5.85251 9.34635 5.66372 10.6915 5.66372 12.3906V17.6295L3.61062 13.6649C3.941 13.4289 4.41298 13.2402 5.02655 13.0986C5.64012 12.9098 6.27729 12.8154 6.93805 12.8154C8.49558 12.8154 9.79351 13.311 10.8319 14.3021C11.8702 15.2461 12.3894 16.5676 12.3894 18.2667C12.3894 19.8714 11.8938 21.2402 10.9027 22.3729C9.91151 23.4584 8.49558 24.0012 6.65487 24.0012C5.47493 24.0012 4.36578 23.7416 3.32743 23.2225C2.33628 22.6561 1.53392 21.7121 0.920354 20.3906C0.306785 19.0219 0 17.1576 0 14.7977V13.5941C0 10.2431 0.448378 7.57644 1.34513 5.59414C2.28909 3.61184 3.63422 2.19591 5.38053 1.34635C7.12684 0.449598 9.25074 0.0012207 11.7522 0.0012207H12.9558Z"
fill="#005AFF" />
</svg>
<?php echo get_the_content(null, false, $testimonial); ?>
<hr>
<div class="author-info d-flex align-items-center">
<?php echo get_the_post_thumbnail($testimonial); ?>
<div class="detail">
<div><?php the_field('name', $testimonial); ?></div>
<span><?php the_field('profession', $testimonial); ?></span>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<?php endforeach;?>
</div>
<?php endif; ?>
</div>
<?php endif;?>
</div>
</section>
<?php endif;?>
\ No newline at end of file
</section>
<?php endif; ?>
\ No newline at end of file
blocks/welcome-banner-spider.php
<?php if (get_field('enable_spider_welcome_banner_section')) : ?>
<section class="py-80 HOME TOP-BANNER-SECTION home2">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-5 col-md-5 col-12 mx-auto left-text">
<div class="position-relative left-text-wrapper">
<h1><?php echo get_field('wb_title') ?></h1>
<p><?php echo get_field('wb_subtitle') ?></p>
</div>
<div class="button-wrapper">
<a href="<?php echo get_field('wb_button_link') ?>" class="btn btn-start-project btn-primary"><?php echo get_field('wb_button_text') ?></a>
</div>
</div>
<div class="col-lg-6 col-md-6 col-12 mx-auto">
<div class="jumbotron showcase parallax-window" data-parallax="scroll"
data-image-src="images/showcase-bg.jpg" data-position="-80% -90%" style="margin-top:70px;">
<div class="col-md-5" style="margin-top:-50px;">
<canvas id="scratch" style="width: 500px; height: 400px;"></canvas>
</div>
<section class="py-80 HOME TOP-BANNER-SECTION home2">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 col-md-6 col-12 mx-auto order-md-2">
<canvas id="scratch" style="width: 375px; height: 400px;"></canvas>
</div>
<div class="col-lg-5 col-md-5 col-12 mx-auto left-text order-md-1">
<div class="position-relative left-text-wrapper">
<h1><?php echo get_field('wb_title') ?></h1>
<p><?php echo get_field('wb_subtitle') ?></p>
</div>
<div class="button-wrapper">
<a href="<?php echo get_field('wb_button_link') ?>" class="btn btn-start-project btn-primary">
<?php echo get_field('wb_button_text') ?><svg width="24" height="24" viewBox="0 0 24 24"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M4 13L16.17 13L10.58 18.59L12 20L20 12L12 4L10.59 5.41L16.17 11L4 11L4 13Z"
fill="white"></path>
</svg>
</a>
</div>
</div>
</div>
</section>
</div>
</section>
<?php endif; ?>
\ No newline at end of file
blocks/welcome-banner.php
<?php if (get_field('enable_welcome_banner_section')) : ?>
<section class="bg-secondary background-dark py-80 HOME TOP-BANNER-SECTION">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-5 col-md-5 col-12 mx-auto left-text">
<div class="position-relative left-text-wrapper">
<h1><?php echo get_field('wb_title') ?></h1>
<p><?php echo get_field('wb_subtitle') ?></p>
</div>
<div class="button-wrapper">
<a href="<?php echo get_field('wb_button_link') ?>" class="btn btn-start-project btn-primary"><?php echo get_field('wb_button_text') ?></a>
</div>
<section class="bg-secondary background-dark py-80 HOME TOP-BANNER-SECTION">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 col-md-6 col-12 mx-auto order-md-2">
<?php $enable_interactive_spider = get_field('enable_interactive_spider') ?: '';
if (isset($enable_interactive_spider) && $enable_interactive_spider):
if(wp_is_mobile()){
$spiderInlineCss = 'style="width: 350px; height: 400px;"';
}else{
$spiderInlineCss = 'style="width: 500px; height: 400px;"';
}
?>
<canvas id="scratch" <?php echo $spiderInlineCss; ?>></canvas>
<?php else:
$image = get_field('banner_image');
$size = 'full';
if ($image) {
echo wp_get_attachment_image($image, $size);
}
endif;
?>
</div>
<div class="col-lg-5 col-md-5 col-12 mx-auto left-text order-md-1">
<div class="position-relative left-text-wrapper">
<h1><?php echo get_field('wb_title') ?></h1>
<p><?php echo get_field('wb_subtitle') ?></p>
</div>
<div class="col-lg-6 col-md-6 col-12 mx-auto">
<?php
$image = get_field('banner_image');
$size = 'full'; // (thumbnail, medium, large, full or custom size)
if ($image) {
echo wp_get_attachment_image($image, $size);
} ?>
<div class="button-wrapper">
<a href="<?php echo get_field('wb_button_link') ?>"
class="btn btn-start-project btn-primary"><?php echo get_field('wb_button_text') ?><svg
width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M4 13L16.17 13L10.58 18.59L12 20L20 12L12 4L10.59 5.41L16.17 11L4 11L4 13Z"
fill="white"></path>
</svg></a>
</div>
<?php
$review_widget = get_field('review_widget') ?: [];
if (isset($review_widget) && is_array($review_widget) && !empty($review_widget)) :
$enable_review_widget = $review_widget['enable_review_widget'] ?: '';
if (!empty($enable_review_widget) && isset($enable_review_widget) && $enable_review_widget) :
$review_items = $review_widget['widget_items'] ?: '';
if (isset($review_items) && is_array($review_items) && !empty($review_items)) :
?>
<div class="review-block d-flex gap-2 flex-wrap">
<?php foreach ($review_items as $i => $item):
$widget = $item['widget'] ?? '';
if (empty($widget)) continue;
if ($i === 1) {
$widget = do_shortcode($widget);
};
?>
<div class="review d-flex align-items-center bg-white rounded-2">
<?php echo $widget; ?>
</div>
<?php endforeach; ?>
</div>
<?php endif;
endif;
endif; ?>
</div>
</div>
</section>
<?php endif; ?>
\ No newline at end of file
</div>
</section>
<?php endif; ?>
<script type="text/javascript" src="https://widget.clutch.co/static/js/widget.js"></script>
\ No newline at end of file
dev/sass/base/_base.scss
......@@ -40,6 +40,7 @@ body {
font-family: $body-font;
position: relative;
overflow-x: hidden;
&.no-scroll {
overflow: hidden !important;
}
......@@ -93,6 +94,7 @@ p {
font-size: 1.125rem;
color: #58595a;
letter-spacing: -0.5px;
@media (max-width: 991px) {
letter-spacing: 0;
}
......@@ -647,11 +649,14 @@ ul {
}
// 9: Return to Top Start
#return-to-top {
.fixed-button-wrapper {
position: fixed;
z-index: 99;
bottom: 20px;
right: 2%;
bottom: 80px;
right: 8px;
}
#return-to-top {
background: $primary;
width: 50px;
height: 50px;
......@@ -699,7 +704,7 @@ ul {
}
.text-content {
& > span {
&>span {
font-size: 1.25rem;
color: #000000;
letter-spacing: 0.28em;
......@@ -1054,60 +1059,14 @@ ul {
// transition: all 0.5s ease;
// transform: translateY(100%);
h6,
.category-list {
position: fixed;
top: 50vh;
left: 0;
z-index: 2;
}
h6 {
box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.1);
border-radius: 4px 4px 0 0;
padding: 8px 16px;
transform: rotate(90deg);
transform-origin: left bottom;
background-color: $primary;
color: $white !important;
font-size: 1rem !important;
word-spacing: 4px;
&.remove {
opacity: 0;
visibility: hidden;
transform: translateX(-100%);
}
}
.category-list {
border-radius: 8px;
padding: 16px;
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
opacity: 0;
visibility: hidden;
transform: translateX(-100%);
max-height: 240px;
overflow: auto !important;
background-color: $white;
max-width: 75%;
ul {
overflow: visible !important;
}
&.active {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
}
.blog-filter-bar-close {
display: block;
}
}
}
//blog-card-wrapper
.blog-card-wrapper {
margin-bottom: 1.875rem;
......@@ -1168,6 +1127,7 @@ ul {
}
.text-wrapper {
h1,
h2,
h3,
......@@ -1411,6 +1371,7 @@ ul {
display: flex !important;
.job-list {
h1,
h2,
h3,
......@@ -1455,12 +1416,15 @@ ul {
.breadcrumb-background-dark {
padding-bottom: 0;
padding-top: 4.5rem !important;
&.background-dark {
background: #005aff !important;
}
&.breadcrumb-background-dark {
padding-bottom: 2.5rem !important;
}
ol,
ul {
margin: 0;
......@@ -1472,7 +1436,7 @@ ul {
}
}
.breadcrumb-item + .breadcrumb-item {
.breadcrumb-item+.breadcrumb-item {
&::before {
content: "";
background-image: url("data:image/svg+xml,%3Csvg width='11' height='10' viewBox='0 0 11 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.51423 5.6495L10.1608 5.00193L10.1589 4.99999L9.50653 4.34468L7.70727 2.53727L5.44039 0.258179L3.16196 2.54886L1.36078 4.35628L0.721895 4.99999L0.719971 5.00193L1.36655 5.6495L3.16581 7.45886L5.44039 9.74181L7.71304 7.45886L9.51423 5.6495Z' fill='white'/%3E%3C/svg%3E%0A");
......@@ -1488,6 +1452,7 @@ ul {
.vacancy-detail-breadcrumb {
padding-top: 4.5rem !important;
background: #121526 !important;
ol,
ul {
margin: 0;
......@@ -1499,7 +1464,7 @@ ul {
}
}
.breadcrumb-item + .breadcrumb-item {
.breadcrumb-item+.breadcrumb-item {
&::before {
content: "";
background-image: url("data:image/svg+xml,%3Csvg width='11' height='10' viewBox='0 0 11 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.51423 5.6495L10.1608 5.00193L10.1589 4.99999L9.50653 4.34468L7.70727 2.53727L5.44039 0.258179L3.16196 2.54886L1.36078 4.35628L0.721895 4.99999L0.719971 5.00193L1.36655 5.6495L3.16581 7.45886L5.44039 9.74181L7.71304 7.45886L9.51423 5.6495Z' fill='white'/%3E%3C/svg%3E%0A");
......@@ -1517,11 +1482,13 @@ ul {
.col-lg-9 {
padding-left: 0.8125rem;
}
.terms-sidebar-wrapper {
position: sticky;
top: 20%;
margin-right: 2.5rem;
padding-bottom: 1.875rem;
ul {
margin: 0;
list-style-type: none;
......@@ -1615,6 +1582,7 @@ ul {
//YOU-MAY-LIKE
.YOU-MAY-LIKE {
.main-wrapper .top-title-wrapper p,
span {
color: #000 !important;
......@@ -1623,4 +1591,4 @@ ul {
.color-grey {
color: #6c757d;
}
}
\ No newline at end of file
dev/sass/base/_footer.scss
......@@ -2,26 +2,34 @@
.upper-footer {
position: relative;
min-height: 29.75rem;
@media (max-width: 1200px) {
min-height: 35rem;
}
@media (max-width: 991px) {
min-height: 33rem;
}
@media (max-width: 768px) {
min-height: 20rem;
}
@media (max-width: 576px) {
min-height: 20rem;
}
.inner-text-wrapper {
.inner-wrapper {
position: relative;
h2 {
margin-bottom: 4.0625rem;
@media (max-width: 767.98px) {
font-size: 1.5rem !important;
}
&:before {
content: "";
background-image: url("https://makuracreations.com/wp-content/themes/makura/assets/img/footer-left-arrow.png");
......@@ -31,26 +39,31 @@
background-repeat: no-repeat;
position: absolute;
left: -27%;
@media (max-width: 1023.98px) {
height: 150px;
width: 150px;
}
@media (max-width: 767.98px) {
height: 130px;
width: 130px;
left: -46%;
}
@media (max-width: 424.98px) {
display: none;
}
}
}
}
a {
position: relative;
width: 15.75rem;
display: block;
margin: 0 auto;
&::before {
content: "";
background-image: url("https://makuracreations.com/wp-content/themes/makura/assets/img/start-project.png");
......@@ -66,17 +79,21 @@
}
}
}
.left-img {
position: absolute;
bottom: 0;
left: 0;
img {
height: 100%;
width: 100%;
object-fit: contain;
@media (max-width: 1023.98px) {
height: 100%;
}
@media (max-width: 768px) {
height: 7rem;
width: 7rem;
......@@ -84,17 +101,21 @@
}
}
}
.right-img {
position: absolute;
bottom: 0;
right: 0;
img {
height: 100%;
width: 100%;
object-fit: contain;
@media (max-width: 1023.98px) {
height: 100%;
}
@media (max-width: 768px) {
height: 7rem;
width: 7rem;
......@@ -103,23 +124,32 @@
}
}
}
.section-footer {
padding: 64px 0 68px;
position: relative;
z-index: 1;
.row {
@media (max-width: 991px) {
justify-content: center;
margin: auto;
text-align: center;
.col-lg-5 {
margin-bottom: 1.25rem;
}
ul {
justify-content: center !important;
margin-top: 1rem;
}
}
}
.lower-footer {
padding: 0 0 2rem 0;
.nav-item {
.font-16 {
@media (max-width: 991px) {
......@@ -127,42 +157,52 @@
}
}
}
.top-ul {
justify-content: center;
margin: 0;
@media (max-width: 767.98px) {
flex-direction: column;
li {
padding-right: 0 !important;
margin: 0 auto;
margin-bottom: 1.25rem;
}
}
li {
padding-right: 1rem;
a {
color: rgba(255, 255, 255, 0.56);
transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
padding: 0 20px;
&:hover {
color: white;
text-decoration: underline;
}
}
&:last-of-type {
padding-right: 0;
}
}
}
}
.social-links {
margin-bottom: 2rem;
border-bottom: 2px solid #000;
padding-bottom: 2rem;
ul {
display: flex;
align-items: center;
margin-bottom: 0;
@media (max-width: 425px) {
li {
a {
......@@ -170,21 +210,25 @@
}
}
}
li {
@media screen and (max-width: 1024.98px) {
margin: 0;
text-align: center;
}
a {
color: rgba(255, 255, 255, 0.56);
padding: 0 2rem;
transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
svg {
&:hover {
path {
fill: #868fce;
}
}
path {
transition: 0.5s ease-in-out;
}
......@@ -193,14 +237,17 @@
}
}
}
span {
color: rgba(255, 255, 255, 0.56) !important;
}
.footer-bottom-right-content {
li {
&:first-child {
margin-right: 2rem;
}
a {
color: rgba(255, 255, 255, 0.56);
font-family: $body-font;
......@@ -208,11 +255,249 @@
font-weight: 400;
line-height: 180%;
letter-spacing: -0.4px;
&:hover {
text-decoration: underline;
}
}
}
}
.footer-links {
.footer-link-wrapper {
padding: 24px;
border-radius: 12px;
background-color: #6CAFF60A;
&:not(:last-child) {
margin-bottom: 20px;
}
}
strong {
display: block;
padding-bottom: 12px;
margin-bottom: 12px;
border-bottom: 1px solid rgba(119, 145, 250, 0.1);
}
ul {
margin-bottom: 0;
li {
text-align: start;
list-style-type: none;
a {
opacity: 0.56;
font-size: 14px;
line-height: 180%;
letter-spacing: 0;
&:hover {
opacity: 1;
svg {
path {
fill-opacity: 1;
fill: var(--white);
}
}
}
}
&:not(:last-child) {
margin-bottom: 8px;
}
}
&.socials {
li {
a {
display: flex;
align-items: center;
gap: 8px;
}
}
}
}
}
.footer-branch {
.branch-title {
margin-bottom: 12px;
gap: 8px;
span {
color: var(--white) !important;
font-family: "Sora", sans-serif;
font-weight: 600;
font-size: 14px;
line-height: 180%;
letter-spacing: -0.4px;
display: block;
}
}
ul {
li {
a {
display: flex;
align-items: flex-start;
justify-content: flex-start;
word-break: break-all;
svg {
margin-right: 8px;
}
}
}
}
}
.row {
>div {
&:not(:first-child) {
.footer-branch {
margin-top: 24px;
}
}
}
}
.footer-about {
text-align: center;
max-width: 568px;
margin: 48px auto 0;
.logo {
margin-bottom: 8px;
}
span {
display: block;
font-weight: 400;
font-size: 12px;
line-height: 180%;
letter-spacing: 0px;
margin: 8px 0;
}
p {
font-weight: 400;
font-size: 10px !important;
line-height: 150%;
letter-spacing: -0.4px;
margin-bottom: 0;
opacity: 0.56;
}
}
}
//section-footer
.scroll-animate {
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
span {
font-size: 20px;
line-height: 180%;
font-weight: 800;
letter-spacing: 0px;
mix-blend-mode: overlay;
opacity: 0.2;
color: #868fce;
}
}
@media (min-width:576px) {
.section-footer {
.footer-links {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
.footer-link-wrapper {
height: 100%;
}
}
}
.scroll-animate {
span {
font-size: 24px;
}
}
}
@media (min-width:768px) {
.section-footer {
.footer-links {
grid-template-columns: repeat(3, 1fr);
.footer-link-wrapper.location-wrapper {
// height: 100%;
grid-column: 1/-1;
}
}
&::before,
&::after {
content: "";
position: absolute;
bottom: 0;
width: 215px;
height: 216px;
}
&::before {
left: 0;
background: url(../img/footer-shape-left.svg) no-repeat center/cover;
}
&::after {
right: 0;
background: url(../img/footer-shape-right.svg) no-repeat center/cover;
}
}
}
@media (min-width:1200px) {
.section-footer {
.footer-links {
display: flex;
.footer-link-wrapper {
margin-bottom: 0 !important;
height: unset;
&:not(.location-wrapper) {
width: 232px;
}
.footer-branch {
margin-top: 0 !important;
}
}
}
}
}
@media (min-width:1440px) {
.section-footer {
.footer-links {
.footer-link-wrapper {
flex: 1 0 auto;
}
}
}
}
//section-footer
\ No newline at end of file
dev/sass/base/_global.scss
......@@ -2,8 +2,38 @@ a,
button {
transition: all 0.3s ease-in-out;
}
.new {
position: relative;
&::after {
content: "New";
position: absolute;
right: -10px;
top: -15px;
background-color: rgb(17, 170, 55);
border-radius: 4px;
font-size: 10px;
line-height: 12px;
padding: 2px 6px;
color: $white;
animation: glow 1.5s ease-in-out infinite alternate;
}
@keyframes glow {
0% {
box-shadow: 0 0 4px rgba(17, 170, 55, 0.5);
}
100% {
box-shadow: 0 0 12px rgba(17, 170, 55, 1);
}
}
}
.section-title {
margin-bottom: 3.75rem;
p {
margin-bottom: 0;
}
......@@ -11,6 +41,7 @@ button {
.input-field {
margin-bottom: 32px;
label {
color: $black;
font-size: 16px;
......@@ -19,6 +50,7 @@ button {
display: block;
margin-bottom: 8px;
}
input,
select,
textarea {
......@@ -45,6 +77,7 @@ button {
opacity: 0.4;
}
}
textarea {
resize: none;
}
......@@ -110,7 +143,7 @@ button {
}
}
> svg {
>svg {
position: absolute;
top: 50%;
transform: translateY(-50%);
......@@ -223,6 +256,11 @@ button {
}
}
figcaption {
font-style: italic;
color: $grey ;
}
@media (max-width: 767px) {
.section-title {
margin-bottom: 2rem;
......@@ -231,6 +269,7 @@ button {
font-size: 2rem !important;
}
}
.input-field {
margin-bottom: 24px;
}
......@@ -249,22 +288,81 @@ button {
.toc {
position: fixed !important;
display: block !important;
bottom: 0;
// bottom: 0;
left: 0;
right: 0;
top: 50%;
transform: translate(-100%, -50%);
z-index: 2;
// .category-list {
// display: grid;
// grid-template-rows: 0fr;
// overflow: hidden;
// ul {
// overflow: hidden;
// }
// }
&.active {
.category-list {
transform: translate(0%, -50%);
// grid-template-rows: 1fr;
}
}
}
}
@media (max-width: 1023px) {
.toc {
h6,
.category-list {
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
position: fixed;
top: 50%;
left: 0;
z-index: 2;
}
ul {
overflow: hidden;
h6 {
box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.1);
border-radius: 4px 4px 0 0;
padding: 8px 16px;
transform: translateY(-50%) rotate(90deg);
transform-origin: left bottom;
background-color: $primary;
color: $white !important;
font-size: 1rem !important;
word-spacing: 4px;
text-wrap: nowrap;
&.remove {
opacity: 0;
visibility: hidden;
transform: translateX(-100%) translateY(-50%);
}
}
&.active {
.category-list {
grid-template-rows: 1fr;
.category-list {
border-radius: 8px;
padding: 16px;
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
opacity: 0;
visibility: hidden;
transform: translateX(-100%) translateY(-50%);
max-height: 240px;
overflow: auto !important;
background-color: $white;
width: 24rem;
ul {
overflow: visible !important;
}
&.active {
opacity: 1;
visibility: visible;
transform: translateX(0) translateY(-50%);
}
}
}
......@@ -290,4 +388,4 @@ button {
padding: 0 16px 24px;
}
}
}
}
\ No newline at end of file
dev/sass/base/_header.scss
///top-nav
//top-nav
.header-placeholder {
height: 65px;
}
@media (min-width:992px) {
.header-placeholder {
height: 86px;
}
}
.top-nav {
width: 100%;
background-color: $white;
......@@ -7,11 +17,17 @@
left: 0;
z-index: 111;
transition: 0.4s ease-in-out;
position: absolute;
top: 0;
@media (max-width: 1030px) {
.navbar-nav {
flex-direction: column !important;
}
}
.side-menu-close {
@media (max-width: 1030px) {
display: block !important;
......@@ -117,6 +133,7 @@
@media (max-width: 1030px) {
margin-right: 0;
&:not(:last-child) {
margin-bottom: 1.875rem;
}
......@@ -174,6 +191,8 @@
}
}
&:last-of-type {
margin-right: 0;
}
......@@ -181,7 +200,7 @@
&.menu-item-has-children {
position: relative;
> a {
>a {
padding-right: 24px;
position: relative;
......@@ -199,11 +218,12 @@
&:hover,
&.show {
> ul {
>ul {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
a {
&::before {
transform: translateY(-50%) rotate(-90deg);
......@@ -231,6 +251,7 @@
left: 100%;
top: 0;
}
a {
display: block;
padding: 12px 36px 12px 24px;
......@@ -238,13 +259,15 @@
&::after {
content: unset;
}
&::before {
right: 24px;
}
}
&:hover,
&.active {
> a {
>a {
background-color: rgba(44, 92, 218, 20%);
}
}
......@@ -324,9 +347,12 @@
// brightness(140%);
-webkit-box-shadow: 0 6px 9px 0 rgba(0, 0, 0, 0.06);
animation: slideDown 0.8s ease forwards;
position: fixed;
// overflow: hidden;
@media (max-width: 1030px) {
animation: unset;
.navbar-nav {
flex-direction: column !important;
}
......@@ -414,6 +440,7 @@
li {
width: 100%;
a {
// padding-left: 0 !important;
color: $black !important;
......@@ -424,6 +451,7 @@
}
}
}
.top-nav {
.nav-wrapper {
.nav-right {
......@@ -443,6 +471,7 @@
padding-left: 12px;
// border-radius: 12px;
}
ul {
padding-left: 12px;
}
......@@ -451,7 +480,7 @@
&:hover,
&.show {
> ul {
>ul {
display: block;
}
}
......@@ -482,4 +511,4 @@
display: block;
height: 150px;
margin-top: -180px;
}
}
\ No newline at end of file
dev/sass/pages/_about.scss
//TOP-BANNER-SECTION
.TOP-BANNER-SECTION {
&.background-dark {
background: #005aff !important;
}
.TOP-BANNER-SECTION,
.PORTFOLIO-TOP-TITLE-SECTION {
.btn-start-project {
background-color: #121526;
svg {
margin-left: 8px;
transition: all 0.3s ease-in-out;
}
&:hover {
color: $primary !important;
border-color: $white;
&::before {
background-color: $white;
}
svg {
path {
fill: $primary;
}
}
}
}
}
.TOP-BANNER-SECTION {
&.background-dark {
background: #005aff !important;
}
.left-text-wrapper {
&::before {
display: none;
}
p {
margin: 1.5rem 0 0 0;
}
}
.nav-pills {
padding: 1.5rem 0;
@media (max-width: 767.98px) {
padding: 1.5rem;
}
border-top: 1px solid #58595a;
border-bottom: 1px solid #58595a;
margin-bottom: 0 !important;
li {
margin-right: 2.75rem;
&:last-child {
margin-right: 0;
}
}
button {
padding: 0;
background-color: unset !important;
......@@ -46,17 +72,20 @@
font-weight: 600;
line-height: 24px;
letter-spacing: -0.4px;
&.active {
color: #000000 !important;
}
}
}
}
//TOP-BANNER-SECTION
//ABOUTPAGE
.ABOUTPAGE-COUTER {
.card-wrapper {
.experience,
.client,
.experts {
......@@ -68,21 +97,25 @@
flex-direction: column;
align-items: center;
justify-content: center;
span {
font-weight: 600;
font-size: 44px;
}
p {
font-weight: 500;
}
}
}
}
//ABOUTPAGE
//ABOUT-TOP-AFTER-COUNTER-SECTION
.ABOUT-TOP-AFTER-COUNTER-SECTION {
@media (max-width: 767.98px) {
h1,
h2,
h3,
......@@ -91,9 +124,11 @@
h6 {
font-size: 2rem !important;
}
p {
font-size: 1.125rem !important;
}
.right-image-wrapper {
.image-wrapper {
img {
......@@ -105,17 +140,20 @@
}
}
}
.left-text-wrapper {
span {
font-weight: 600;
font-size: 14px;
color: #005aff;
}
.text-wrapper {
h2 {
font-size: 2.75rem;
margin-top: 1.25rem;
}
p {
color: #58595a;
font-family: $body-font;
......@@ -125,6 +163,7 @@
}
}
}
.right-image-wrapper {
.image-wrapper {
img {
......@@ -135,10 +174,12 @@
}
}
}
//ABOUT-TOP-AFTER-COUNTER-SECTION
//MISSION-VISION-SECTION
.MISSION-VISION-SECTION {
h1,
h2,
h3,
......@@ -148,43 +189,53 @@
font-weight: 600;
font-size: 2.5rem;
margin-bottom: 5.75rem;
@media (max-width: 767.98px) {
font-size: 2rem !important;
margin-bottom: 2rem;
}
}
.row {
padding-bottom: 7rem;
&:nth-child(odd) {
flex-direction: row-reverse;
.left-text-wrapper {
.text-wrapper {
padding-right: 0;
}
}
}
&:nth-last-of-type() {
padding-bottom: 0;
}
.left-text-wrapper {
.text-wrapper {
padding-right: 1.25rem;
h2 {
font-size: 2.75rem;
margin-bottom: 1.5rem;
}
p {
margin-bottom: 1.75rem;
color: #58595a;
font-family: $body-font;
font-size: 1.125rem;
font-weight: 400;
@media (max-width: 767.98px) {
font-size: 1.125rem !important;
}
}
}
}
.right-image-wrapper {
.image-wrapper {
img {
......@@ -197,6 +248,7 @@
}
}
}
//MISSION-VISION-SECTION
//technologies-use-innovating
......@@ -208,4 +260,4 @@
font-weight: 600;
letter-spacing: -0.6px;
}
}
}
\ No newline at end of file
dev/sass/pages/_index.scss
......@@ -17,16 +17,18 @@
}
.whats-app-icon-wrapper {
position: fixed;
bottom: 80px;
right: 2%;
// position: fixed;
// bottom: 80px;
// right: 2%;
max-width: 51px;
// padding: 10px;
border-radius: 5px;
text-decoration: none;
z-index: 10;
a {
display: block;
svg {
max-width: 100%;
}
......@@ -38,7 +40,8 @@
}
.whats-app-icon-wrapper .tooltip-wrapper {
top: 23%;
top: 50%;
transform: translateY(-50%);
left: -8rem;
background-color: #34c759;
border-radius: 8px;
......@@ -65,9 +68,9 @@
margin: auto;
}
body {
zoom: 90%;
}
// body {
// zoom: 90%;
// }
.modal-backdrop.show {
width: 100%;
......@@ -83,9 +86,11 @@ input[type="number"]::-webkit-inner-spin-button {
input[type="number"] {
-moz-appearance: textfield !important;
}
.wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors {
display: none !important;
}
// woocommerce css
.HOME {
......@@ -94,17 +99,38 @@ input[type="number"] {
background-repeat: no-repeat;
background-size: cover;
}
&.TOP-BANNER-SECTION {
.left-text {
.left-text-wrapper {
margin-bottom: 1.5rem;
}
}
img {
height: 100%;
width: 100%;
}
.review-block {
margin-top: 32px;
gap: 8px;
.review {
background-color: var(--white);
border-radius: 4px;
padding: 12px;
max-width: 205px;
padding: 8px;
}
img,
.clutch-widget {
max-height: 64px;
}
}
}
&.TOP-CAROUSEL-SECTION {
.row {
margin-bottom: 0 !important;
......@@ -112,6 +138,32 @@ input[type="number"] {
}
}
@media (max-width:576px) {
.HOME {
&.TOP-BANNER-SECTION {
.review-block {
.review {
&:first-child {
min-width: 210px;
}
}
}
}
}
}
@media (min-width:992px) {
.HOME {
&.TOP-BANNER-SECTION {
.review-block {
margin-top: 40px;
}
}
}
}
.project-diagram {
.top-row {
@media (max-width: 767.98px) {
......@@ -235,12 +287,15 @@ input[type="number"] {
flex-direction: column-reverse;
}
}
&.background-dark {
background-color: #005aff !important;
}
.col-lg-7 {
position: relative;
}
img {
width: 100%;
height: 23rem;
......@@ -248,15 +303,18 @@ input[type="number"] {
pointer-events: none;
position: absolute;
bottom: 0;
// padding: 0rem 5rem;
@media (max-width: 768px) {
margin-left: 0;
}
@media (max-width: 991px) {
position: relative;
height: 100%;
}
}
.right-content-wrapper {
span {
color: #005aff;
......@@ -266,6 +324,7 @@ input[type="number"] {
letter-spacing: -0.3px;
margin-bottom: 0.375rem;
}
h1,
h2,
h3,
......@@ -280,6 +339,7 @@ input[type="number"] {
letter-spacing: -1.4px;
margin-bottom: 1.5rem;
}
p {
color: $white !important;
font-family: $body-font;
......@@ -288,6 +348,7 @@ input[type="number"] {
line-height: 28px;
letter-spacing: -0.5px;
}
a {
width: fit-content;
background: white;
......@@ -371,21 +432,25 @@ input[type="number"] {
display: flex;
align-items: center;
}
img {
width: auto;
height: auto;
object-fit: contain;
}
.owl-carousel.owl-drag .owl-item {
display: flex;
justify-content: center;
}
}
.experience-card,
.clients-served,
.working-experts {
padding: 1.9375rem 0;
position: relative;
&::before {
content: "";
background-image: url("../../assets/img/makurajalo.svg");
......@@ -398,6 +463,7 @@ input[type="number"] {
transform: rotate(112.957deg);
opacity: 0.3;
}
h1,
h2,
h3,
......@@ -416,6 +482,7 @@ input[type="number"] {
// HOMEPAGE-TOP-AFTER-CAROUSEL-SECTION
.HOMEPAGE-TOP-AFTER-CAROUSEL-SECTION {
@media (max-width: 767.98px) {
h1,
h2,
h3,
......@@ -455,12 +522,15 @@ input[type="number"] {
&:last-child {
margin-bottom: 0;
}
&:nth-child(even) {
flex-direction: row-reverse;
padding-bottom: 0;
@media (max-width: 767.98px) {
flex-direction: column-reverse;
}
.left-text-wrapper {
.text-wrapper {
padding-right: 0;
......@@ -496,7 +566,9 @@ input[type="number"] {
margin-bottom: 1.75rem;
}
}
.technology-used {
h1,
h2,
h3,
......@@ -511,15 +583,19 @@ input[type="number"] {
letter-spacing: -0.6px;
margin-bottom: 1rem;
}
ul {
row-gap: 12px;
li {
margin-right: 1.25rem;
img {
width: auto;
height: 2.4375rem;
object-fit: contain;
}
&:last-child {
margin-right: 0;
}
......@@ -535,6 +611,7 @@ input[type="number"] {
width: 100%;
height: 100%;
object-fit: contain;
@media (max-width: 991.98px) {
margin-bottom: 2rem;
height: auto;
......@@ -565,6 +642,7 @@ input[type="number"] {
font-size: 2.75rem;
font-weight: 600;
}
p {
color: #58595a;
font-family: $body-font;
......@@ -577,14 +655,17 @@ input[type="number"] {
border: 1px solid #c0c0c0;
transition: 0.3s ease;
height: 100%;
&:hover {
border: 1px solid #005aff;
// background: #121526;
background: #005aff;
li {
color: $white;
border: 1px solid $white !important;
}
h1,
h2,
h3,
......@@ -593,11 +674,13 @@ input[type="number"] {
h6 {
color: $white;
}
a,
p,
.tag {
color: $white;
}
.tag {
border: 1px solid $white !important;
}
......@@ -633,6 +716,7 @@ input[type="number"] {
list-style-type: none;
display: flex;
flex-wrap: wrap;
li {
border: 1px solid rgba(0, 0, 0, 0.1);
padding: 0.375rem 1.25rem;
......@@ -667,6 +751,7 @@ input[type="number"] {
text-align: justify;
margin: 0;
}
.contact {
display: flex;
align-items: center;
......@@ -679,6 +764,7 @@ input[type="number"] {
//MEET-OUR-TEAM-SECTION
.MEET-OUR-TEAM-SECTION {
.title-wrapper {
h1,
h2,
h3,
......@@ -686,29 +772,34 @@ input[type="number"] {
h5,
h6 {
margin-bottom: 1.5rem;
@media (max-width: 767.98px) {
font-size: 2rem !important;
text-align: left;
}
}
p {
color: #58595a;
font-family: $body-font;
font-size: 1.125rem;
font-weight: 400;
margin: 0;
@media (max-width: 767.98px) {
font-size: 1.125rem !important;
text-align: left;
}
}
}
.meet-team-wrapper {
.team-card {
.card {
border: 1px solid #fff;
transition: 0.5s ease;
justify-content: center;
img {
width: 16.4375rem;
height: 16.375rem;
......@@ -753,6 +844,7 @@ input[type="number"] {
h5 {
color: #fff;
}
span {
color: $white;
}
......@@ -766,6 +858,7 @@ input[type="number"] {
h5 {
transition: 0.5s ease;
}
span {
color: #58595a;
text-align: center;
......@@ -778,15 +871,18 @@ input[type="number"] {
}
}
}
.about-team {
.btn-start-project-white {
margin-top: 3rem !important;
}
.team-card {
.card {
border: 1px solid #fff;
transition: 0.5s ease;
justify-content: center;
img {
width: 16.4375rem;
height: 16.375rem;
......@@ -831,6 +927,7 @@ input[type="number"] {
h5 {
color: #fff;
}
span {
color: $white;
}
......@@ -844,6 +941,7 @@ input[type="number"] {
h5 {
transition: 0.5s ease;
}
span {
color: #58595a;
text-align: center;
......@@ -863,6 +961,7 @@ input[type="number"] {
// OUR-CUSTOMERS-SAY-SECTION
.OUR-CUSTOMERS-SAY-SECTION {
@media (max-width: 767.98px) {
h1,
h2,
h3,
......@@ -872,12 +971,14 @@ input[type="number"] {
font-size: 1.875rem !important;
}
}
&.single-what-customers-say {
.customer-feedback-portfolio {
.feedback-wrapper {
p {
height: unset;
}
.author-info {
img {
width: auto;
......@@ -905,24 +1006,30 @@ input[type="number"] {
border: 2px solid rgba(0, 0, 0, 0.1);
background-color: $white;
transition: 0.3s ease-in-out;
img {
background-color: $white;
}
&:hover {
background-color: #121526;
p,
span {
color: $white !important;
}
svg {
path {
fill: $white;
}
}
hr {
border: 2px solid $white !important;
opacity: 1;
}
.author-info {
.detail {
span {
......@@ -930,16 +1037,19 @@ input[type="number"] {
}
}
}
.detail {
div {
color: $white !important;
}
}
}
.inner-content {
height: 17rem;
overflow: hidden;
}
svg {
margin-bottom: 1rem;
}
......@@ -954,6 +1064,7 @@ input[type="number"] {
line-height: 24px;
letter-spacing: -0.4px;
padding-right: 0.75rem;
&::-webkit-scrollbar {
width: 2px;
}
......@@ -976,6 +1087,7 @@ input[type="number"] {
margin-right: 1.125rem;
border-radius: 50%;
}
.detail {
div {
color: #121526;
......@@ -985,6 +1097,7 @@ input[type="number"] {
line-height: 30px;
margin-bottom: 0.125rem;
}
span {
color: #58595a !important;
font-family: $body-font;
......@@ -1019,6 +1132,7 @@ input[type="number"] {
.feedback-wrapper {
border: 2px solid rgba(0, 0, 0, 0.1);
background-color: $white;
svg {
margin-bottom: 1rem;
}
......@@ -1032,6 +1146,7 @@ input[type="number"] {
font-weight: 500;
line-height: 24px;
letter-spacing: -0.4px;
&::-webkit-scrollbar {
width: 2px;
display: none;
......@@ -1056,6 +1171,7 @@ input[type="number"] {
font-weight: 500;
line-height: 24px;
letter-spacing: -0.4px;
&::-webkit-scrollbar {
width: 2px;
display: none;
......@@ -1082,6 +1198,7 @@ input[type="number"] {
line-height: 30px !important;
margin-bottom: 0.125rem;
}
span {
color: #121526 !important;
font-family: $body-font !important;
......@@ -1103,6 +1220,7 @@ input[type="number"] {
object-fit: contain;
margin-right: 1.125rem;
}
.detail {
div {
color: #121526;
......@@ -1111,6 +1229,7 @@ input[type="number"] {
font-weight: 600;
line-height: 30px;
}
span {
color: #58595a;
font-family: $body-font;
......@@ -1167,6 +1286,7 @@ input[type="number"] {
a {
&:hover {
.text-wrapper {
h1,
h2,
h3,
......@@ -1176,15 +1296,18 @@ input[type="number"] {
color: $primary;
}
}
.bottom-section {
p {
color: $primary;
}
}
}
.blog-image-wrapper {
overflow: hidden;
height: 17.1875rem;
img {
margin-bottom: 1.25rem;
transition: 0.5s ease-in-out;
......@@ -1194,6 +1317,7 @@ input[type="number"] {
overflow: hidden;
}
}
.bottom-section {
p {
color: #58595a;
......@@ -1206,8 +1330,10 @@ input[type="number"] {
margin: 0;
}
}
.text-wrapper {
padding: 1.25rem 0;
h6 {
margin-bottom: 1.3125rem;
color: #333;
......@@ -1244,12 +1370,14 @@ input[type="number"] {
margin: 1.25rem auto;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.btn {
display: flex;
align-items: center;
justify-content: center;
margin: auto;
width: fit-content;
@media (max-width: 1400px) {
margin-top: 3rem;
}
......@@ -1266,12 +1394,14 @@ input[type="number"] {
color: #005aff;
margin-bottom: 1.25rem;
}
.accordion-wrapper {
.accordion {
position: sticky;
top: 18%;
}
}
.left-section {
.image-wrapper {
img {
......@@ -1280,6 +1410,7 @@ input[type="number"] {
object-fit: contain;
}
}
h2 {
margin-bottom: 1.5rem;
}
......@@ -1291,6 +1422,7 @@ input[type="number"] {
font-size: 1.125rem;
font-weight: 400;
letter-spacing: -0.5px;
span {
color: #58595a !important;
}
......@@ -1303,6 +1435,7 @@ input[type="number"] {
.accordion {
margin-bottom: 2.1875rem;
.accordion-body {
p {
color: #58595a;
......@@ -1313,6 +1446,7 @@ input[type="number"] {
letter-spacing: -0.5px;
}
}
.accordion-item {
&.classColor {
.accordion-header {
......@@ -1321,6 +1455,7 @@ input[type="number"] {
}
}
}
.accordion-button {
&::after {
background-image: url(../../assets/img/close-icon.png);
......@@ -1346,4 +1481,5 @@ input[type="number"] {
}
}
}
//FAQS-SECTION
//FAQS-SECTION
\ No newline at end of file
dev/sass/pages/_responsive.scss
......@@ -375,6 +375,8 @@
}
.TECHNOLOGY-USED-SECTION {
padding-bottom: 4rem;
.col-6 {
width: 100%;
}
......
dev/sass/pages/master-portfolio/_moment-gallery.scss
......@@ -21,8 +21,8 @@
height: 100%;
object-fit: cover;
}
&.horizontal {
grid-row: span 2;
&:nth-child(3) {
grid-column: span 2;
}
&:nth-child(n + 4) {
display: none;
......
dev/sass/pages/master-portfolio/_sticky-tab.scss
......@@ -24,6 +24,10 @@
}
}
}
&.sticky-with-header {
top: 66px;
}
}
@media (min-width: 768px) {
......@@ -51,5 +55,9 @@
}
}
}
&.sticky-with-header {
top: 88px;
}
}
}
dev/sass/pages/resources/_resource-detail.scss
.resource-detail {
.rd-content {
h2,
h3,
h4,
h5 {
margin-bottom: 16px;
&:not(:first-child) {
margin-top: 32px;
}
}
ul {
span.over-title {
display: block;
margin-top: 32px;
margin-bottom: 8px;
color: $primary;
+h2,
+h3,
+h4,
+h5 {
margin-top: 0;
}
}
ul,
ol {
padding-left: 8px;
li {
position: relative;
padding-left: 24px;
......@@ -33,6 +52,14 @@
}
}
}
a {
color: $primary;
&:hover {
text-decoration: underline;
}
}
}
li,
......@@ -41,6 +68,7 @@
a {
font-size: 1.5rem;
}
strong {
font-weight: 500;
}
......@@ -49,6 +77,7 @@
padding-top: 32px;
margin-top: 40px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
.rd-socials {
margin-top: 20px;
......@@ -56,16 +85,20 @@
display: block;
margin-bottom: 8px;
}
ul {
gap: 8px;
li {
a {
&:hover {
svg {
fill: $primary;
rect {
stroke: $primary;
}
path {
fill: #fff;
}
......@@ -76,11 +109,16 @@
}
}
}
.faq-wrapper {
margin-top: 2rem;
}
}
@media (min-width: 768px) {
.resource-detail {
.rd-content {
h2,
h3,
h4,
......@@ -90,6 +128,11 @@
}
}
}
span.over-title {
margin-top: 48px;
}
li,
p,
strong,
......@@ -117,4 +160,4 @@
}
}
}
}
}
\ No newline at end of file
dev/sass/pages/site-comparision/_inner-banner.scss
......@@ -12,6 +12,7 @@
&:hover {
background-color: $white !important;
color: $primary !important;
svg {
path {
stroke: $primary;
......@@ -23,6 +24,7 @@
.COMPARISON-FORM .section-title {
margin-bottom: 24px;
}
// &::before {
// content: "";
// width: 18px;
......@@ -35,6 +37,7 @@
margin-right: 12px;
}
}
h1 {
color: $white;
}
......@@ -47,3 +50,32 @@
}
}
}
.ti-widget-container {
margin-top: 0 !important;
}
.ti-footer {
box-shadow: none !important;
padding: 0 !important;
.ti-fade-container {
.ti-large-logo {
height: unset !important;
}
.ti-logo-fb {
max-width: 70px !important;
height: unset !important;
}
}
}
.TOP-BANNER-SECTION {
.ti-widget.ti-goog .ti-stars .ti-star {
max-width: 12px !important;
height: 12px !important;
}
}
\ No newline at end of file
dev/sass/style.scss
......@@ -8,6 +8,10 @@ $theme-colors: (
"red": #f71d24
);
:root {
--white: #fff;
}
//colors
// $primary: #121526;
$primary: #005aff;
......@@ -17,6 +21,7 @@ $primary-second: #005aff;
$grey: #58595a;
$red: #f71d24;
//fonts
$body-font: "Sora", sans-serif;
......@@ -62,3 +67,11 @@ $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/case-study/case-study-banner";
@import "pages/case-study/case-study-general";
@import "pages/case-study/case-study-list";
@import "pages/case-study/case-study-filter";
@import "pages/milestone";
@import "./base/cta";
@import "./pages/awards/award-listing";
@import "./pages/awards/award-detail";
\ No newline at end of file
footer.php
This source diff could not be displayed because it is too large. You can view the blob instead.
functions.php
......@@ -252,7 +252,9 @@ function my_custom_pagination($numpages = '', $pagerange = '', $paged = '', $sea
register_nav_menus(
array(
'menu-web' => esc_html__( 'Primary Menu', 'makura' )
'menu-web' => esc_html__( 'Primary Menu', 'makura' ),
'quick-link' => esc_html__( 'Quick Links', 'makura' ),
'services' => esc_html__( 'Services', 'makura' )
)
);
......
header.php
......@@ -2,48 +2,48 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<?php wp_head(); ?>
<meta name="google-site-verification" content="DPEItwBusmmpY1RLo_YnoM9jRctsvqfM0AJNpkGiKwc" />
<!-- Google Tag Manager -->
<script>
(function(w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({
'gtm.start': new Date().getTime(),
event: 'gtm.js'
});
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-T7SF2XRJ');
</script>
<!-- End Google Tag Manager -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<?php wp_head(); ?>
<meta name="google-site-verification" content="DPEItwBusmmpY1RLo_YnoM9jRctsvqfM0AJNpkGiKwc" />
<!-- Google Tag Manager -->
<script>
(function(w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({
'gtm.start': new Date().getTime(),
event: 'gtm.js'
});
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-T7SF2XRJ');
</script>
<!-- End Google Tag Manager -->
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T7SF2XRJ" height="0" width="0"
style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<nav class="navbar navbar-expand-lg navbar-light top-nav p-0" id="myTopnav">
<div class="container">
<div class="row align-items-center position-relative nav-wrapper justify-content-between w-100">
<div class="col-5 col-lg-1 d-flex align-items-center nav-left">
<div class="logo d-flex align-items-center">
<?php echo get_custom_logo(); ?>
</div>
</div>
<div class="col-6 col-lg-10 d-flex align-items-center justify-content-end nav-right">
<?php
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T7SF2XRJ" height="0" width="0"
style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<nav class="navbar navbar-expand-lg navbar-light top-nav p-0" id="myTopnav">
<div class="container">
<div class="row align-items-center position-relative nav-wrapper justify-content-between w-100">
<div class="col-5 col-lg-1 d-flex align-items-center nav-left">
<div class="logo d-flex align-items-center">
<?php echo get_custom_logo(); ?>
</div>
</div>
<div class="col-6 col-lg-10 d-flex align-items-center justify-content-end nav-right">
<?php
wp_nav_menu( array(
'theme_location' => 'menu-web',
'depth' => 9,
......@@ -55,27 +55,31 @@
</div>%3$s</ul>'
));
?>
<div class="book-button">
<a href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"
class="btn btn-primary btn-padding hover-up btn-start-project font-14 fw-500 btn-padding btn-submit">Start
your project
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M4 13L16.17 13L10.58 18.59L12 20L20 12L12 4L10.59 5.41L16.17 11L4 11L4 13Z" fill="white"></path>
</svg>
<span class="bg-hover" style="left: 108px; top: 62.1562px;"></span>
</a>
</div>
</div>
<div class="col-1 menu-toggler">
<div class="toggler-icon">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="32" width="32"
xmlns="http://www.w3.org/2000/svg">
<path fill="none" d="M0 0h24v24H0z"></path>
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
</svg>
</div>
<div class="book-button">
<a href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"
class="btn btn-primary btn-padding hover-up btn-start-project font-14 fw-500 btn-padding btn-submit">Start
your project
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M4 13L16.17 13L10.58 18.59L12 20L20 12L12 4L10.59 5.41L16.17 11L4 11L4 13Z"
fill="white"></path>
</svg>
<span class="bg-hover" style="left: 108px; top: 62.1562px;"></span>
</a>
</div>
</div>
<div class="col-1 menu-toggler">
<div class="toggler-icon">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="32"
width="32" xmlns="http://www.w3.org/2000/svg">
<path fill="none" d="M0 0h24v24H0z"></path>
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
\ No newline at end of file
</nav>
<div class="header-placeholder"></div>
\ No newline at end of file
includes/enqueuer.php
......@@ -12,7 +12,7 @@ function conserve_register_styles()
wp_enqueue_style('magnific-popup', 'https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css', null, $theme_version);
wp_enqueue_style('slick', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css', null, $theme_version);
wp_enqueue_style('flatpicker', 'https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.css', null, $theme_version);
wp_enqueue_style('custom-css', get_template_directory_uri() . '/assets/css/style.css', null, '6.4.5');
wp_enqueue_style('custom-css', get_template_directory_uri() . '/assets/css/style.css', null, '6.4.7');
......
includes/gutenberg/blocks.php
......@@ -494,7 +494,7 @@ function my_acf_init_block_types()
'render_template' => 'blocks/about-us/employe-feel.php',
'category' => 'formatting',
'icon' => 'admin-comments',
'keywords' => array('Employe Feel Section'),
'keywords' => array('Employe Feel Section', 'makura'),
'example' => [
'attributes' => [
'mode' => 'preview',
......@@ -510,7 +510,7 @@ function my_acf_init_block_types()
'render_template' => 'blocks/vacancy-listing.php',
'category' => 'formatting',
'icon' => 'admin-comments',
'keywords' => array('Vacancy Listing'),
'keywords' => array('Vacancy Listing', 'makura'),
'example' => [
'attributes' => [
'mode' => 'preview',
......@@ -526,7 +526,7 @@ function my_acf_init_block_types()
'render_template' => 'blocks/contact-us/contact-details.php',
'category' => 'formatting',
'icon' => 'admin-comments',
'keywords' => array('Contact Details Section'),
'keywords' => array('Contact Details Section', 'makura'),
'example' => [
'attributes' => [
'mode' => 'preview',
......@@ -541,7 +541,7 @@ function my_acf_init_block_types()
'render_template' => 'blocks/contact-us/contact-form.php',
'category' => 'formatting',
'icon' => 'admin-comments',
'keywords' => array('Contact Form Section'),
'keywords' => array('Contact Form Section', 'form', 'makura'),
'example' => [
'attributes' => [
'mode' => 'preview',
......@@ -557,7 +557,7 @@ function my_acf_init_block_types()
'render_template' => 'blocks/contact-us/map-section.php',
'category' => 'formatting',
'icon' => 'admin-comments',
'keywords' => array('Map Section'),
'keywords' => array('Map Section', 'map', 'contact', 'makura'),
'example' => [
'attributes' => [
'mode' => 'preview',
......@@ -573,7 +573,7 @@ function my_acf_init_block_types()
'render_template' => 'blocks/portfolio-listing-section.php',
'category' => 'formatting',
'icon' => 'admin-comments',
'keywords' => array('Portfolio Listing Section'),
'keywords' => array('Portfolio Listing Section', 'makura'),
'example' => [
'attributes' => [
'mode' => 'preview',
......@@ -589,7 +589,7 @@ function my_acf_init_block_types()
'render_template' => 'blocks/about-us/stat-section.php',
'category' => 'formatting',
'icon' => 'admin-comments',
'keywords' => array('About Us Stat Section'),
'keywords' => array('About Us Stat Section', 'makura'),
'example' => [
'attributes' => [
'mode' => 'preview',
......@@ -605,7 +605,7 @@ function my_acf_init_block_types()
'render_template' => 'blocks/service-list-section.php',
'category' => 'formatting',
'icon' => 'admin-comments',
'keywords' => array('Service List Section'),
'keywords' => array('Service List Section', 'makura'),
'example' => [
'attributes' => [
'mode' => 'preview',
......@@ -621,7 +621,7 @@ function my_acf_init_block_types()
'render_template' => 'blocks/service-content-list-section.php',
'category' => 'formatting',
'icon' => 'admin-comments',
'keywords' => array('Service Content List Section'),
'keywords' => array('Service Content List Section', 'makura'),
'example' => [
'attributes' => [
'mode' => 'preview',
......@@ -637,7 +637,7 @@ function my_acf_init_block_types()
'render_template' => 'blocks/new-service-content-list-section.php',
'category' => 'formatting',
'icon' => 'admin-comments',
'keywords' => array('New Service Content List Section'),
'keywords' => array('New Service Content List Section', 'makura'),
'example' => [
'attributes' => [
'mode' => 'preview',
......@@ -653,7 +653,7 @@ function my_acf_init_block_types()
'render_template' => 'blocks/service-work-process-section.php',
'category' => 'formatting',
'icon' => 'admin-comments',
'keywords' => array('Service Work Process Section'),
'keywords' => array('Service Work Process Section', 'makura'),
'example' => [
'attributes' => [
'mode' => 'preview',
......@@ -668,7 +668,7 @@ function my_acf_init_block_types()
'render_template' => 'blocks/service-portfolio-list-section.php',
'category' => 'formatting',
'icon' => 'admin-comments',
'keywords' => array('Service Portfolio List Section'),
'keywords' => array('Service Portfolio List Section', 'makura'),
'example' => [
'attributes' => [
'mode' => 'preview',
......@@ -683,7 +683,7 @@ function my_acf_init_block_types()
'render_template' => 'blocks/contact-us/contact-breadcrumb.php',
'category' => 'formatting',
'icon' => 'admin-comments',
'keywords' => array('Contact Us Breadcrumb'),
'keywords' => array('Contact Us Breadcrumb', 'makura'),
'example' => [
'attributes' => [
'mode' => 'preview',
......@@ -699,7 +699,7 @@ function my_acf_init_block_types()
'render_template' => 'blocks/seo/hero.php',
'category' => 'formatting',
'icon' => file_get_contents(get_template_directory() . '/assets/img/makura.svg'),
'keywords' => array('Hero Section'),
'keywords' => array('Hero Section', 'makura'),
'example' => [
'attributes' => [
'mode' => 'preview',
......@@ -715,7 +715,7 @@ function my_acf_init_block_types()
'render_template' => 'blocks/seo/icon-box.php',
'category' => 'formatting',
'icon' => file_get_contents(get_template_directory() . '/assets/img/makura.svg'),
'keywords' => array('SEO - Icon Box Section'),
'keywords' => array('SEO - Icon Box Section', 'icon', 'box', 'makura'),
'example' => [
'attributes' => [
'mode' => 'preview',
......@@ -731,7 +731,7 @@ function my_acf_init_block_types()
'render_template' => 'blocks/seo/quote.php',
'category' => 'formatting',
'icon' => file_get_contents(get_template_directory() . '/assets/img/makura.svg'),
'keywords' => array('SEO - Quote Section'),
'keywords' => array('SEO - Quote Section', 'quote', 'makura'),
'example' => [
'attributes' => [
'mode' => 'preview',
......@@ -747,7 +747,7 @@ function my_acf_init_block_types()
'render_template' => 'blocks/seo/compare.php',
'category' => 'formatting',
'icon' => file_get_contents(get_template_directory() . '/assets/img/makura.svg'),
'keywords' => array('SEO - Competitive Analysis Form Block'),
'keywords' => array('SEO - Competitive Analysis Form Block', 'competitive analysis', 'form', 'makura'),
'example' => [
'attributes' => [
'mode' => 'preview',
......@@ -763,7 +763,71 @@ function my_acf_init_block_types()
'render_template' => 'blocks/resources/resource-listing.php',
'category' => 'formatting',
'icon' => file_get_contents(get_template_directory() . '/assets/img/makura.svg'),
'keywords' => array('Resources - Resources Listing Block'),
'keywords' => array('Resources - Resources Listing Block', 'resources', 'listing', 'makura'),
'example' => [
'attributes' => [
'mode' => 'preview',
'data' => [],
],
],
));
// Case Study - Banner Block
acf_register_block_type(array(
'name' => 'Case Study Banner Block',
'title' => __('Case Study Banner Block'),
'description' => __('Case Study - Banner Block for Makura Projects'),
'render_template' => 'blocks/case-study/case-study-banner.php',
'category' => 'formatting',
'icon' => file_get_contents(get_template_directory() . '/assets/img/makura.svg'),
'keywords' => array('Case Study - Banner Block', 'case study', 'banner', 'hero', 'makura'),
'example' => [
'attributes' => [
'mode' => 'preview',
'data' => [],
],
],
));
// Case Study - Content Block
acf_register_block_type(array(
'name' => 'Case Study Content Block',
'title' => __('Case Study Content Block'),
'description' => __('Case Study - Content Block for Makura Projects'),
'render_template' => 'blocks/case-study/case-study-content.php',
'category' => 'formatting',
'icon' => file_get_contents(get_template_directory() . '/assets/img/makura.svg'),
'keywords' => array('Case Study - Content Block', 'case study', 'content', 'makura'),
'example' => [
'attributes' => [
'mode' => 'preview',
'data' => [],
],
],
));
// Case Study - CTA Block
acf_register_block_type(array(
'name' => 'Request a Free SEO Audit CTA Block',
'title' => __('Request a Free SEO Audit CTA Block'),
'description' => __('Request a Free SEO Audit - CTA Block for Makura Projects'),
'render_template' => 'blocks/case-study/cta.php',
'category' => 'formatting',
'icon' => file_get_contents(get_template_directory() . '/assets/img/makura.svg'),
'keywords' => array('Request a Free SEO Audit - CTA Block', 'case study', 'cta', 'makura'),
'example' => [
'attributes' => [
'mode' => 'preview',
'data' => [],
],
],
));
// Case Study - Listing Block
acf_register_block_type(array(
'name' => 'Case Study Listing Block',
'title' => __('Case Study Listing Block'),
'description' => __('Case Study - Listing Block for Makura Projects'),
'render_template' => 'blocks/case-study/case-study-listing.php',
'category' => 'formatting',
'icon' => file_get_contents(get_template_directory() . '/assets/img/makura.svg'),
'keywords' => array('Case Study - Listing Block', 'case study', 'listing', 'makura'),
'example' => [
'attributes' => [
'mode' => 'preview',
......@@ -772,4 +836,4 @@ function my_acf_init_block_types()
],
));
}
}
\ No newline at end of file
}
single-resource.php
......@@ -5,7 +5,7 @@ $post_thumbnail_url = get_the_post_thumbnail_url(get_the_ID(), 'full');
if (!$post_thumbnail_url) {
$post_thumbnail_url = get_field('resources_fallback_featured_image', 'option');
}
$downloadable_resource = get_field('downloadable_resource', $post_id) ?: [];
$downloadable_resource = get_field('downloadable_resource') ?: [];
if (isset($downloadable_resource) && is_array($downloadable_resource) && !empty($downloadable_resource)):
$enable_downloadable_resources = $downloadable_resource['enable_downloadable_resources'];
if ($enable_downloadable_resources && isset($enable_downloadable_resources)):
......@@ -44,7 +44,7 @@ endif;
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="<?php echo site_url('/'); ?>">Home</a></li>
<li class="breadcrumb-item"><a
href="<?php echo get_permalink(get_page_by_path('downloadable-resources')); ?>">Downloadable
href="<?php echo get_permalink(get_page_by_path('resources')); ?>">
Resources</a></li>
<li class="breadcrumb-item active" aria-current="page"><?php the_title(); ?></li>
</ol>
......@@ -59,12 +59,17 @@ endif;
<div class="col-lg-6 col-12">
<div class="position-relative left-text-wrapper">
<h1><?php echo get_the_title(); ?></h1>
<p><?php echo wp_trim_words(get_the_excerpt(), 8, ' [...]') ?: wp_trim_words(get_the_content(), 8, ' [...]'); ?>
<p><?php echo get_the_excerpt() ?: wp_trim_words(get_the_content(), 8, ' [...]'); ?>
</p>
<a href="<?php echo esc_url($url); ?>" target="_blank"
class="btn btn-primary btn-padding hover-up btn-start-project font-14 fw-500 btn-padding btn-submit"
download>Download
Now [<?php echo $icon; ?>]</a>
Now [<?php echo $icon; ?>]<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M4 13L16.17 13L10.58 18.59L12 20L20 12L12 4L10.59 5.41L16.17 11L4 11L4 13Z"
fill="white"></path>
</svg></a>
</div>
</div>
<div class="col-lg-5 col-md-5 mx-auto col-12 text-center right-image">
......@@ -87,26 +92,26 @@ endif;
<?php echo the_content(); ?>
<!-- faqs -->
<?php if (get_field('enable_section')): ?>
<span><?php the_field('subtitle'); ?></span>
<h3><?php the_field('title'); ?></h3>
<?php the_field('description'); ?>
<?php $faqs = get_field('faqs');
<span class="over-title"><?php the_field('subtitle'); ?></span>
<h3><?php the_field('title'); ?></h3>
<?php the_field('description'); ?>
<?php $faqs = get_field('faqs');
if ($faqs): ?>
<div class="faq-wrapper">
<?php foreach ($faqs as $key => $faq): ?>
<div class="faq-item">
<div class="faq-title">
<strong><?php echo get_the_title($faq); ?></strong>
</div>
<div class="faq-content-box">
<div class="faq-content">
<?php echo get_the_content(null, false, $faq); ?>
</div>
</div>
</div>
<?php endforeach; ?>
<div class="faq-wrapper">
<?php foreach ($faqs as $key => $faq): ?>
<div class="faq-item">
<div class="faq-title">
<strong><?php echo get_the_title($faq); ?></strong>
</div>
<?php endif; ?>
<div class="faq-content-box">
<div class="faq-content">
<?php echo get_the_content(null, false, $faq); ?>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
<?php endif; ?>
<!-- faqs -->
......
single-service.php
......@@ -11,7 +11,8 @@ get_header();
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="<?php echo site_url('/');?>">Home</a></li>
<li class="breadcrumb-item"><a href="<?php echo get_permalink(get_page_by_path('services'));?>">Services</a></li>
<li class="breadcrumb-item"><a
href="<?php echo get_permalink(get_page_by_path('services'));?>">Services</a></li>
<li class="breadcrumb-item active" aria-current="page"><?php the_title();?></li>
</ol>
</nav>
......@@ -24,16 +25,23 @@ get_header();
<div class="row align-items-center justify-content-between">
<div class="col-lg-5 col-md-5 col-12">
<h1 class="pb-20"><?php the_title();?></h1>
<p><?php the_field('banner_description');?></p>
<?php if(get_field('enable_inquiry')):?>
<p><?php the_field('banner_description');?></p>
<?php if(get_field('enable_inquiry')):?>
<div class="d-flex w-100 button-wrapper">
<button class="btn mb-20 btn-start-project btn-primary"><a href="<?php echo get_home_url().'/contact-us/';?>"><?php the_field('inquiry_text');?></a></button>
<a class="btn mb-20 btn-start-project btn-primary"
href="<?php echo get_home_url().'/contact-us/';?>"><?php the_field('inquiry_text');?><svg
width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M4 13L16.17 13L10.58 18.59L12 20L20 12L12 4L10.59 5.41L16.17 11L4 11L4 13Z"
fill="white"></path>
</svg>
</a>
</div>
<?php endif;?>
</div>
<div class="col-lg-5 col-md-5 mx-auto col-12 text-center right-image">
<?php if($image = get_field('banner_image')):?>
<?php echo wp_get_attachment_image($image,'full'); endif;?>
<?php echo wp_get_attachment_image($image,'full'); endif;?>
</div>
</div>
</div>
......
single-vacancy.php
......@@ -27,7 +27,13 @@ $interval = date_diff($now, $deadline);
<div class="col-lg-7" style="display: flex;flex-direction: column;justify-content: space-between;">
<div class="pb-60 title-wrapper">
<h1><?php the_title(); ?></h1>
<a href="#vacancyForm" class="btn mb-20 btn-start-project btn-primary"><?php the_field('apply_now_text'); ?></a>
<a href="#vacancyForm"
class="btn mb-20 btn-start-project btn-primary"><?php the_field('apply_now_text'); ?><svg
width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M4 13L16.17 13L10.58 18.59L12 20L20 12L12 4L10.59 5.41L16.17 11L4 11L4 13Z"
fill="white"></path>
</svg></a>
<?php the_field('text_after_apply_now'); ?>
</div>
<div class="validation d-flex align-items-center">
......@@ -49,13 +55,18 @@ $interval = date_diff($now, $deadline);
<h6><?php the_title(); ?></h6>
<span>Deadline : <?php the_field('deadline'); ?></span>
<p>(<?php echo $interval->format('%R%a days'); ?> Left)</p>
<a href="#vacancyForm" class="btn w-100 font-16 mb-20 fw-600 btn-start-project btn-secondary"><?php the_field('apply_now_text'); ?></a>
<a href="#vacancyForm"
class="btn w-100 font-16 mb-20 fw-600 btn-start-project btn-secondary"><?php the_field('apply_now_text'); ?></a>
<?php if ($linkedin_url = get_field('linkedin_url')) : ?>
<a class="btn w-100 font-16 mb-20 fw-600 btn-start-project view-linkedin" target="_blank" href="<?php echo $linkedin_url; ?>">View on LinkedIn <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 15L15 5" stroke="#F9F8F4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M6.875 5H15V13.125" stroke="#F9F8F4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
<a class="btn w-100 font-16 mb-20 fw-600 btn-start-project view-linkedin" target="_blank"
href="<?php echo $linkedin_url; ?>">View on LinkedIn <svg width="20" height="20"
viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 15L15 5" stroke="#F9F8F4" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
<path d="M6.875 5H15V13.125" stroke="#F9F8F4" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</a>
<?php endif; ?>
</div>
</div>
......@@ -79,19 +90,32 @@ $interval = date_diff($now, $deadline);
<div class="share-article">
<p class="font-18">Share this Vacancy</p>
<div class="d-flex social-icon justify-content-center">
<a href="https://www.addtoany.com/add_to/facebook?linkurl=<?php echo urlencode(get_the_permalink()); ?>&linkname=<?php echo urlencode(get_the_title()); ?>&linknote=" rel="nofollow noopener" target="_blank" class="a2a_button_facebook share-option-icon icon d-flex align-items-center justify-content-center facebook">
<svg width="12" height="21" viewBox="0 0 12 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.6484 11.75L11.1953 8.15625H7.71875V5.8125C7.71875 4.79688 8.1875 3.85938 9.75 3.85938H11.3516V0.773438C11.3516 0.773438 9.90625 0.5 8.53906 0.5C5.6875 0.5 3.8125 2.25781 3.8125 5.38281V8.15625H0.609375V11.75H3.8125V20.5H7.71875V11.75H10.6484Z" fill="#878787"></path>
<a href="https://www.addtoany.com/add_to/facebook?linkurl=<?php echo urlencode(get_the_permalink()); ?>&linkname=<?php echo urlencode(get_the_title()); ?>&linknote="
rel="nofollow noopener" target="_blank"
class="a2a_button_facebook share-option-icon icon d-flex align-items-center justify-content-center facebook">
<svg width="12" height="21" viewBox="0 0 12 21" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M10.6484 11.75L11.1953 8.15625H7.71875V5.8125C7.71875 4.79688 8.1875 3.85938 9.75 3.85938H11.3516V0.773438C11.3516 0.773438 9.90625 0.5 8.53906 0.5C5.6875 0.5 3.8125 2.25781 3.8125 5.38281V8.15625H0.609375V11.75H3.8125V20.5H7.71875V11.75H10.6484Z"
fill="#878787"></path>
</svg>
</a>
<a href="https://www.addtoany.com/add_to/twitter?linkurl=<?php echo urlencode(get_the_permalink()); ?>&linkname=<?php echo urlencode(get_the_title()); ?>&linknote=" class="share-option-icon a2a_button_twitter icon d-flex align-items-center justify-content-center twitter">
<svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.9297 4.4375C18.7109 3.85156 19.4141 3.14844 19.9609 2.32812C19.2578 2.64062 18.4375 2.875 17.6172 2.95312C18.4766 2.44531 19.1016 1.66406 19.4141 0.6875C18.6328 1.15625 17.7344 1.50781 16.8359 1.70312C16.0547 0.882812 15 0.414062 13.8281 0.414062C11.5625 0.414062 9.72656 2.25 9.72656 4.51562C9.72656 4.82812 9.76562 5.14062 9.84375 5.45312C6.44531 5.25781 3.39844 3.61719 1.36719 1.15625C1.01562 1.74219 0.820312 2.44531 0.820312 3.22656C0.820312 4.63281 1.52344 5.88281 2.65625 6.625C1.99219 6.58594 1.32812 6.42969 0.78125 6.11719V6.15625C0.78125 8.14844 2.1875 9.78906 4.0625 10.1797C3.75 10.2578 3.35938 10.3359 3.00781 10.3359C2.73438 10.3359 2.5 10.2969 2.22656 10.2578C2.73438 11.8984 4.25781 13.0703 6.05469 13.1094C4.64844 14.2031 2.89062 14.8672 0.976562 14.8672C0.625 14.8672 0.3125 14.8281 0 14.7891C1.79688 15.9609 3.94531 16.625 6.28906 16.625C13.8281 16.625 17.9297 10.4141 17.9297 4.98438C17.9297 4.78906 17.9297 4.63281 17.9297 4.4375Z" fill="#878787"></path>
<a href="https://www.addtoany.com/add_to/twitter?linkurl=<?php echo urlencode(get_the_permalink()); ?>&linkname=<?php echo urlencode(get_the_title()); ?>&linknote="
class="share-option-icon a2a_button_twitter icon d-flex align-items-center justify-content-center twitter">
<svg width="20" height="17" viewBox="0 0 20 17" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M17.9297 4.4375C18.7109 3.85156 19.4141 3.14844 19.9609 2.32812C19.2578 2.64062 18.4375 2.875 17.6172 2.95312C18.4766 2.44531 19.1016 1.66406 19.4141 0.6875C18.6328 1.15625 17.7344 1.50781 16.8359 1.70312C16.0547 0.882812 15 0.414062 13.8281 0.414062C11.5625 0.414062 9.72656 2.25 9.72656 4.51562C9.72656 4.82812 9.76562 5.14062 9.84375 5.45312C6.44531 5.25781 3.39844 3.61719 1.36719 1.15625C1.01562 1.74219 0.820312 2.44531 0.820312 3.22656C0.820312 4.63281 1.52344 5.88281 2.65625 6.625C1.99219 6.58594 1.32812 6.42969 0.78125 6.11719V6.15625C0.78125 8.14844 2.1875 9.78906 4.0625 10.1797C3.75 10.2578 3.35938 10.3359 3.00781 10.3359C2.73438 10.3359 2.5 10.2969 2.22656 10.2578C2.73438 11.8984 4.25781 13.0703 6.05469 13.1094C4.64844 14.2031 2.89062 14.8672 0.976562 14.8672C0.625 14.8672 0.3125 14.8281 0 14.7891C1.79688 15.9609 3.94531 16.625 6.28906 16.625C13.8281 16.625 17.9297 10.4141 17.9297 4.98438C17.9297 4.78906 17.9297 4.63281 17.9297 4.4375Z"
fill="#878787"></path>
</svg>
</a>
<a href="https://www.addtoany.com/add_to/linkedin?linkurl=<?php echo urlencode(get_the_permalink()); ?>&linkname=<?php echo urlencode(get_the_title()); ?>&linknote=" class="share-option-icon a2a_button_linkedin icon d-flex align-items-center justify-content-center linkedin">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.15625 18V6.32031H0.523438V18H4.15625ZM2.32031 4.75781C3.49219 4.75781 4.42969 3.78125 4.42969 2.60938C4.42969 1.47656 3.49219 0.539062 2.32031 0.539062C1.1875 0.539062 0.25 1.47656 0.25 2.60938C0.25 3.78125 1.1875 4.75781 2.32031 4.75781ZM17.7109 18H17.75V11.5938C17.75 8.46875 17.0469 6.04688 13.375 6.04688C11.6172 6.04688 10.4453 7.02344 9.9375 7.92188H9.89844V6.32031H6.42188V18H10.0547V12.2188C10.0547 10.6953 10.3281 9.25 12.2031 9.25C14.0781 9.25 14.1172 10.9688 14.1172 12.3359V18H17.7109Z" fill="#878787"></path>
<a href="https://www.addtoany.com/add_to/linkedin?linkurl=<?php echo urlencode(get_the_permalink()); ?>&linkname=<?php echo urlencode(get_the_title()); ?>&linknote="
class="share-option-icon a2a_button_linkedin icon d-flex align-items-center justify-content-center linkedin">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M4.15625 18V6.32031H0.523438V18H4.15625ZM2.32031 4.75781C3.49219 4.75781 4.42969 3.78125 4.42969 2.60938C4.42969 1.47656 3.49219 0.539062 2.32031 0.539062C1.1875 0.539062 0.25 1.47656 0.25 2.60938C0.25 3.78125 1.1875 4.75781 2.32031 4.75781ZM17.7109 18H17.75V11.5938C17.75 8.46875 17.0469 6.04688 13.375 6.04688C11.6172 6.04688 10.4453 7.02344 9.9375 7.92188H9.89844V6.32031H6.42188V18H10.0547V12.2188C10.0547 10.6953 10.3281 9.25 12.2031 9.25C14.0781 9.25 14.1172 10.9688 14.1172 12.3359V18H17.7109Z"
fill="#878787"></path>
</svg>
</a>
</div>
......@@ -131,41 +155,42 @@ $vac_query = new WP_Query([
]);
if ($vac_query->have_posts()) :
?>
<section class="bg-secondary py-80 container-fluid VACANCY-SECTION">
<div class="container">
<div class="row">
<div class="col-lg-9 col-md-9 mx-auto col-12 top-title">
<span><?php echo get_field('vacancy_subtitle', 'option'); ?></span>
<h2><?php echo get_field('vacancy_title', 'option'); ?></h2>
<?php echo get_field('vacancy_description', 'option'); ?>
</div>
<section class="bg-secondary py-80 container-fluid VACANCY-SECTION">
<div class="container">
<div class="row">
<div class="col-lg-9 col-md-9 mx-auto col-12 top-title">
<span><?php echo get_field('vacancy_subtitle', 'option'); ?></span>
<h2><?php echo get_field('vacancy_title', 'option'); ?></h2>
<?php echo get_field('vacancy_description', 'option'); ?>
</div>
<div class="row mb-80">
<?php while ($vac_query->have_posts()) : $vac_query->the_post(); ?>
<?php
</div>
<div class="row mb-80">
<?php while ($vac_query->have_posts()) : $vac_query->the_post(); ?>
<?php
$now = date_create('now');
$deadline = date_create(get_field('deadline'));
$interval = date_diff($now, $deadline);
?>
<div class="col-lg-9 col-md-9 mx-auto col-12 align-items-center job-lists-wrapper">
<div class="inner-wrapper py-40 d-flex align-items-center justify-content-between">
<div class="job-list">
<h2><?php the_title(); ?></h2>
<div class="font-16 fw-600 vacancy-duration d-flex">
<span>Deadline : <?php the_field('deadline'); ?></span>
<p>(<?php echo $interval->format('%R%a days'); ?> Left)</p>
</div>
</div>
<div class="button-wrapper">
<a href="<?php the_permalink(); ?>" class="btn m-auto d-flex align-items-center btn-start-project-white">Find out more
</a>
</div>
<div class="col-lg-9 col-md-9 mx-auto col-12 align-items-center job-lists-wrapper">
<div class="inner-wrapper py-40 d-flex align-items-center justify-content-between">
<div class="job-list">
<h2><?php the_title(); ?></h2>
<div class="font-16 fw-600 vacancy-duration d-flex">
<span>Deadline : <?php the_field('deadline'); ?></span>
<p>(<?php echo $interval->format('%R%a days'); ?> Left)</p>
</div>
</div>
<?php endwhile;
wp_reset_postdata(); ?>
<div class="button-wrapper">
<a href="<?php the_permalink(); ?>"
class="btn m-auto d-flex align-items-center btn-start-project-white">Find out more
</a>
</div>
</div>
</div>
<?php endwhile;
wp_reset_postdata(); ?>
</div>
</section>
</div>
</section>
<?php endif; ?>
<?php get_footer(); ?>
\ No newline at end of file
style.css
/*
Theme Name: Makura Theme
Text Domain: makura-theme
Version: 1.2
Version: 1.2025.07
Description: Custom theme for Makura
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
......
template-parts/home/milestone.php 0 → 100644
<section class="milestone makura-new">
<div class="container">
<div class="section-title">
<h2>
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/milestone-title.svg?>" alt="">
Recognition & Milestones
</h2>
<p>Our work has been recognized for pushing creative boundaries and delivering real impact. These milestones
reflect our passion for design and the trust our clients place in us.</p>
</div>
<div class="row">
<div class="col-lg-6">
<div class="milestone-card">
<div class="milestone-card-content">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/milestone.svg" alt=""
class="img-fluid milestone-logo">
<span class="over-title">24 october 2023</span>
<h3>Recognition from World Health Organization</h3>
<p>Proud moments that highlight our dedication to impactful and innovative design.Breathing new
life, Makura Creations changed the overall look of CAN. Boosting their social media presence
and
updating their </p>
<a href="#">Learn More →</a>
</div>
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/blog-banner.png" alt=""
class="img-fluid ">
</div>
</div>
<div class="col-lg-6">
<div class="milestone-card">
<div class="milestone-card-content">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/milestone.svg" alt=""
class="img-fluid milestone-logo">
<span class="over-title">24 october 2023</span>
<h3>Recognition from World Health Organization</h3>
<p>Proud moments that highlight our dedication to impactful and innovative design.Breathing new
life, Makura Creations changed the overall look of CAN. Boosting their social media presence
and
updating their </p>
<a href="#">Learn More →</a>
</div>
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/blog-banner.png" alt=""
class="img-fluid">
</div>
</div>
</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