Skip to content

M
makura-2025
Commit 5a53e586 by jhukal9@gmail.com
Options

updated the resource detail page

parent 84823dd1
Showing with 250 additions and 2 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
(function ($) { (function ($) {
/** INTERSECTION OBSERVER FOR SLIDE UP ANIMATION STARTS HERE */
$(function () { $(function () {
const observer = new IntersectionObserver( const observer = new IntersectionObserver(
function (entries) { function (entries) {
...@@ -19,7 +20,9 @@ ...@@ -19,7 +20,9 @@
observer.observe(this); observer.observe(this);
}); });
}); });
/** INTERSECTION OBSERVER FOR SLIDE UP ANIMATION ENDS HERE*/
/** INTERSECTION OBSERVER AND SCROLL INTO VIEW FUNCTIONALITY FOR RESOURCE LISTING STARTS HERE */
$(function () { $(function () {
const resourceListObserver = new IntersectionObserver( const resourceListObserver = new IntersectionObserver(
function (entries) { function (entries) {
...@@ -56,4 +59,18 @@ ...@@ -56,4 +59,18 @@
} }
}); });
}); });
/** INTERSECTION OBSERVER AND SCROLL INTO VIEW FUNCTIONALITY FOR RESOURCE LISTING ENDS HERE */
/** MAKURA LATEST FAQ EXPAND COLLAPSE STARTS HERE */
$(function () {
$(".makura-new .faq-title").on("click", function (e) {
e.preventDefault();
$(this)
.parent(".faq-item")
.toggleClass("active")
.siblings(".faq-item")
.removeClass("active");
});
});
/** MAKURA LATEST FAQ EXPAND COLLAPSE ENDS HERE */
})(jQuery); })(jQuery);
dev/sass/base/_makura-new.scss
...@@ -49,6 +49,74 @@ ...@@ -49,6 +49,74 @@
transform: translateY(0); transform: translateY(0);
} }
} }
.faq-wrapper {
.faq-item {
padding: 16px 0;
&:not(:last-child) {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.faq-title {
position: relative;
cursor: pointer;
strong {
font-weight: 500;
display: block;
max-width: calc(100% - 48px);
color: $background-dark;
}
&::before,
&::after {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 16px;
height: 2px;
background-color: $background-dark;
transition: all 0.3s ease-in-out;
}
&::after {
transform: rotate(90deg);
transform-origin: center;
}
}
.faq-content-box {
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
transition: all 0.3s ease-in-out;
.faq-content {
overflow: hidden;
p {
&:first-child {
margin-top: 12px;
}
+ p {
margin-top: 12px;
}
}
}
}
&.active {
.faq-title {
&::after {
transform: rotate(0);
opacity: 0;
visibility: hidden;
}
}
.faq-content-box {
grid-template-rows: 1fr;
}
}
}
}
} }
@media (min-width: 768px) { @media (min-width: 768px) {
...@@ -59,7 +127,16 @@ ...@@ -59,7 +127,16 @@
} }
} }
@media (max-width: 991px) { @media (min-width: 991px) {
.makura-new { .makura-new {
.faq-wrapper {
.faq-item {
.faq-title {
strong {
font-size: 18px;
}
}
}
}
} }
} }
dev/sass/pages/resources/_resource-detail.scss 0 → 100644
.resource-detail {
.rd-content {
h2,
h3,
h4,
h5 {
margin-bottom: 16px;
&:not(:first-child) {
margin-top: 32px;
}
}
ul {
padding-left: 8px;
li {
position: relative;
padding-left: 24px;
color: $grey;
&::before {
content: "";
width: 8px;
height: 8px;
background-color: $primary;
transform: rotate(45deg);
transform-origin: center;
position: absolute;
top: 8px;
left: 0;
}
&:not(:last-child) {
margin-bottom: 8px;
}
}
}
li,
p,
strong {
font-size: 1.5rem;
}
}
}
@media (min-width: 768px) {
.resource-detail {
.rd-content {
h2,
h3,
h4,
h5 {
&:not(:first-child) {
margin-top: 48px;
}
}
li,
p,
strong {
font-size: 1.125rem;
}
}
}
}
dev/sass/style.scss
...@@ -57,3 +57,4 @@ $body-font: "Sora", sans-serif; ...@@ -57,3 +57,4 @@ $body-font: "Sora", sans-serif;
@import "pages/site-comparision/inner-banner"; @import "pages/site-comparision/inner-banner";
@import "pages/site-comparision/comparison-form"; @import "pages/site-comparision/comparison-form";
@import "pages/resources/resource-listing"; @import "pages/resources/resource-listing";
@import "pages/resources/resource-detail";
page-templates/resource-detail-layout.php 0 → 100644
<?php
/**
* Template Name: Resource Detail
*/
get_header();
the_content();
get_template_part("/template-parts/resource-page/resource-detail",null);
get_footer();
?>
\ No newline at end of file
template-parts/resource-page/resource-detail.php 0 → 100644
<section class="resource-detail py-80 makura-new">
<div class="container">
<div class="row">
<div class="col-lg-10 col-xl-8">
<div class="rd-content">
<h3>Overview</h3>
<p>The Mercantile Domain Registration Cover Letter is a professionally crafted template designed to simplify
the
process of registering a domain with Mercantile. This letter outlines the necessary details required for
domain
registration, ensuring clarity and professionalism in your communication. Whether you're registering a
domain
for personal or business purposes, this template provides a structured format that adheres to official
guidelines, saving you time and effort. Tailor the content to suit your specific needs and ensure a smooth
registration process.</p>
<h3>Highlights</h3>
<ul>
<li>Professional Format: Pre-designed layout adhering to official guidelines for ease of use.</li>
<li>Time-Saving: Eliminates the need to draft a cover letter from scratch.</li>
<li>Customizable: Fully editable to suit personal or business requirements.</li>
<li>Clarity and Precision: Ensures all necessary details are clearly communicated.</li>
<li>Seamless Process: Simplifies domain registration with a well-structured template.</li>
</ul>
<h3>Frequently Asked Questions</h3>
<div class="faq-wrapper">
<div class="faq-item">
<div class="faq-title">
<strong>Can I customize the template for my specific needs? Can I customize the template for my
specificCan I customize the template for my specific needs?
needs?</strong>
</div>
<div class="faq-content-box">
<div class="faq-content">
<p>You need to include your personal or business details, domain name, and any required identification
or
authorization documents.</p>
</div>
</div>
</div>
<div class="faq-item">
<div class="faq-title">
<strong>Can I customize the template for my specific needs?</strong>
</div>
<div class="faq-content-box">
<div class="faq-content">
<p>You need to include your personal or business details, domain name, and any required identification
or
authorization documents.</p>
<p>You need to include your personal or business details, domain name, and any required identification
or
authorization documents.</p>
<p>You need to include your personal or business details, domain name, and any required identification
or
authorization documents.</p>
</div>
</div>
</div>
<div class="faq-item">
<div class="faq-title">
<strong>Can I customize the template for my specific needs?</strong>
</div>
<div class="faq-content-box">
<div class="faq-content">
<p>You need to include your personal or business details, domain name, and any required identification
or
authorization documents.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
\ No newline at end of file
template-parts/resource-page/resource-list.php
...@@ -16,7 +16,6 @@ ...@@ -16,7 +16,6 @@
<li><a href="#" class="sm-text" data-target="email-and-communication-tools">Email & Communication <li><a href="#" class="sm-text" data-target="email-and-communication-tools">Email & Communication
Tools</a></li> Tools</a></li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
......
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