Skip to content

M
makura-2025
Commit 091196fe by jhukal9@gmail.com
Options

updated the listing page layout

parent 5169d410
Showing with 735 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 0 → 100644
(function ($) {
$(function () {
const observer = new IntersectionObserver(
function (entries) {
entries.forEach((entry) => {
if (entry.isIntersecting) {
$(entry.target).addClass("animate");
observer.unobserve(entry.target);
}
});
},
{
threshold: 0.1,
root: null,
rootMargin: "150px",
},
);
$(".slide-up").each(function (e) {
observer.observe(this);
});
});
$(function () {
const resourceListObserver = new IntersectionObserver(function () {}, {});
});
})(jQuery);
dev/sass/base/_makura-new.scss 0 → 100644
.makura-new {
h6 {
font-size: 18px !important;
line-height: 24px;
letter-spacing: -0.294px;
}
ul,
ol {
margin: 0;
li {
list-style-type: none;
}
}
p {
margin: 0;
}
a {
&:has(img) {
height: 100%;
}
}
.mc-btn-underlined {
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
}
.sm-text {
font-size: 1.125rem !important;
line-height: 22px;
}
.section-title {
h2 {
+ p {
margin-top: 1rem;
}
}
}
.slide-up {
transform: translateY(150px);
transition: all 0.5s ease-in-out;
&.animate {
transform: translateY(0);
}
}
}
@media (min-width: 768px) {
.makura-new {
.section-title {
margin-bottom: 40px;
}
}
}
@media (max-width: 991px) {
.makura-new {
}
}
dev/sass/pages/resources/_resource-listing.scss 0 → 100644
.resource-listing {
.section-title {
max-width: 864px;
}
.resource-wrapper {
.resource-block {
.resource-item {
border: 1px solid rgba(0, 0, 0, 0.1);
.resource-image {
height: 220px;
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.resource-content {
padding: 16px;
h4,
h5,
h6 {
margin-bottom: 0.5rem;
a {
color: $background-dark;
}
}
> p {
margin-bottom: 1.25rem;
}
h4,
h5,
h6,
p {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.format-and-btn-wrapper {
p {
color: $background-dark;
}
}
}
&:hover {
.resource-content {
h3,
h4,
h5,
h6 {
a {
color: $primary;
}
}
}
}
}
.row {
> div {
&:not(:last-child) {
.resource-item {
margin-bottom: 1.25rem;
}
}
}
}
&:not(:last-child) {
margin-bottom: 40px;
}
}
}
.toc {
ul {
li {
a {
font-size: 14px !important;
}
&.active {
a {
color: $primary !important;
}
}
}
}
}
}
@media (min-width: 576px) {
.resource-listing {
.resource-wrapper {
.resource-block {
.row {
--bs-gutter-y: 20px;
> div {
&:not(:last-child) {
.resource-item {
margin-bottom: 0;
}
}
}
}
}
}
}
}
@media (min-width: 992px) {
.resource-listing {
.resource-wrapper {
position: relative;
&::before {
content: "";
position: absolute;
top: 0;
left: -24px;
bottom: 0;
width: 1px;
background-color: rgba(0, 0, 0, 0.1);
}
.resource-block {
&:not(:last-child) {
margin-bottom: 60px;
}
}
}
.toc {
position: sticky;
top: 80px;
}
}
}
@media (min-width: 1200px) {
.resource-listing {
.toc {
max-width: 78.5%;
}
.resource-wrapper {
&::before {
left: -32px;
}
.resource-block {
.row {
--bs-gutter-y: 16px;
}
.resource-item {
.resource-image {
height: unset;
max-width: 30%;
}
.resource-content {
padding: 16px 12px 16px 20px;
a.mc-btn-underlined {
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all 0.3s ease-in-out;
}
}
&:hover {
.resource-content {
a.mc-btn-underlined {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
}
}
}
&:not(:last-child) {
margin-bottom: 104px;
}
}
}
}
}
@media (min-width: 1440px) {
.resource-listing {
.resource-wrapper {
.resource-block {
.resource-item {
.resource-content {
display: flex;
flex-direction: column;
justify-content: center;
}
}
}
}
}
}
dev/sass/style.scss
......@@ -37,6 +37,7 @@ $body-font: "Sora", sans-serif;
@import "pages/course-detail";
@import "pages/responsive";
@import "base/global";
@import "base/makura-new";
@import "pages/service-detail/service-lisiting";
@import "pages/service-detail/service-plans";
@import "pages/service-detail/service-detail-form";
......@@ -55,3 +56,4 @@ $body-font: "Sora", sans-serif;
@import "pages/seo-audit/audit-quote";
@import "pages/site-comparision/inner-banner";
@import "pages/site-comparision/comparison-form";
@import "pages/resources/resource-listing";
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.4');
wp_enqueue_style('custom-css', get_template_directory_uri() . '/assets/css/style.css', null, '6.4.5');
......@@ -42,5 +42,8 @@ function conserve_register_styles()
'ajaxurl' => admin_url('admin-ajax.php'),
)
);
/** CUSTOM JS */
wp_enqueue_script('custom-JS', get_template_directory_uri() . '/assets/js/script.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'conserve_register_styles');
add_action('wp_enqueue_scripts', 'conserve_register_styles');
\ No newline at end of file
page-templates/resource-listing.php 0 → 100644
<?php
/**
* Template Name: Resource Listing
*/
get_header();
the_content();
get_template_part("/template-parts/resource-page/resource-list",null);
get_footer();
?>
\ No newline at end of file
template-parts/resource-page/resource-list.php 0 → 100644
<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>
<li class="active"><a href="#" class="sm-text"
data-target="business-and-administrative-documents">Business &
Administrative Documents</a></li>
<li><a href="#" class="sm-text" data-target="branding-and-design-resources">Branding & Design
Resources</a></li>
<li><a href="#" class="sm-text" data-target="content-and-social-media-management">Content & Social Media
Management</a></li>
<li><a href="#" class="sm-text" data-target="seo-and-digital-marketing">SEO & Digital Marketing</a></li>
<li><a href="#" class="sm-text" data-target="email-and-communication-tools">Email & Communication
Tools</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-8 col-xl-9">
<div class="resource-wrapper">
<div class="resource-block slide-up" id="business-and-administrative-documents">
<div class="section-title">
<h2>Business & Administrative Documents</h2>
<p>Access essential business and administrative templates to streamline processes, manage documentation,
and maintain professionalism.</p>
</div>
<div class="resources">
<div class="row">
<div class="col-sm-6">
<div class="resource-item d-xl-flex justify-content-start slide-up">
<div class="resource-image">
<a href="#" class="d-block">
<img src="<?php echo get_parent_theme_file_uri();?>/assets/img/placeholder-02.png" alt=""
class="img-fluid">
</a>
</div>
<div class="resource-content">
<h6><a href="#">Mercantile Domain Registration Cover Letter</a></h6>
<P class="sm-text">Cover Letter Generator for personal and official registration.</P>
<div class="format-and-btn-wrapper d-flex justify-content-between">
<p class="sm-text">Format: <img
src="<?php echo get_parent_theme_file_uri(); ?>/assets/img/pdf-icon.png" alt=""></p>
<a href="#" class="mc-btn-underlined sm-text">View in Detail</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="resource-item d-xl-flex justify-content-start slide-up">
<div class="resource-image">
<a href="#" class="d-block">
<img src="<?php echo get_parent_theme_file_uri();?>/assets/img/placeholder-03.png" alt=""
class="img-fluid">
</a>
</div>
<div class="resource-content">
<h6><a href="#">Mercantile Domain Ownership Transfer</a></h6>
<P class="sm-text">Cover Letter Generator for personal and official registration.</P>
<div class="format-and-btn-wrapper d-flex justify-content-between">
<p class="sm-text">Format: <img
src="<?php echo get_parent_theme_file_uri(); ?>/assets/img/pdf-icon.png" alt=""></p>
<a href="#" class="mc-btn-underlined sm-text">View in Detail</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="resource-item d-xl-flex justify-content-start slide-up">
<div class="resource-image">
<a href="#" class="d-block">
<img src="<?php echo get_parent_theme_file_uri();?>/assets/img/placeholder-04.png" alt=""
class="img-fluid">
</a>
</div>
<div class="resource-content">
<h6><a href="#">Quote Template</a></h6>
<P class="sm-text">Register free Cover Letter Generator for .np domain registration for personal
and official registration.</P>
<div class="format-and-btn-wrapper d-flex justify-content-between">
<p class="sm-text">Format: <img
src="<?php echo get_parent_theme_file_uri(); ?>/assets/img/pdf-icon.png" alt=""></p>
<a href="#" class="mc-btn-underlined sm-text">View in Detail</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="resource-item d-xl-flex justify-content-start slide-up">
<div class="resource-image">
<a href="#" class="d-block">
<img src="<?php echo get_parent_theme_file_uri();?>/assets/img/placeholder-05.png" alt=""
class="img-fluid">
</a>
</div>
<div class="resource-content">
<h6><a href="#">Invoice Template</a></h6>
<P class="sm-text">Register free Cover Letter Generator for .np domain registration for personal
and official registration.</P>
<div class="format-and-btn-wrapper d-flex justify-content-between">
<p class="sm-text">Format: <img
src="<?php echo get_parent_theme_file_uri(); ?>/assets/img/pdf-icon.png" alt=""></p>
<a href="#" class="mc-btn-underlined sm-text">View in Detail</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="resource-item d-xl-flex justify-content-start slide-up">
<div class="resource-image">
<a href="#" class="d-block">
<img src="<?php echo get_parent_theme_file_uri();?>/assets/img/placeholder-06.png" alt=""
class="img-fluid">
</a>
</div>
<div class="resource-content">
<h6><a href="#">Proposal Template (PPT)</a></h6>
<P class="sm-text">Register free Cover Letter Generator for .np domain registration for personal
and official registration.</P>
<div class="format-and-btn-wrapper d-flex justify-content-between">
<p class="sm-text">Format: <img
src="<?php echo get_parent_theme_file_uri(); ?>/assets/img/pdf-icon.png" alt=""></p>
<a href="#" class="mc-btn-underlined sm-text">View in Detail</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="resource-item d-xl-flex justify-content-start slide-up">
<div class="resource-image">
<a href="#" class="d-block">
<img src="<?php echo get_parent_theme_file_uri();?>/assets/img/placeholder-07.png" alt=""
class="img-fluid">
</a>
</div>
<div class="resource-content">
<h6><a href="#">Meeting Agenda Template</a></h6>
<P class="sm-text">Register free Cover Letter Generator for .np domain registration for personal
and official registration.</P>
<div class="format-and-btn-wrapper d-flex justify-content-between">
<p class="sm-text">Format: <img
src="<?php echo get_parent_theme_file_uri(); ?>/assets/img/pdf-icon.png" alt=""></p>
<a href="#" class="mc-btn-underlined sm-text">View in Detail</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="resource-block slide-up" id="branding-and-design-resources">
<div class="section-title">
<h2>Branding & Design Resources</h2>
<p>Access essential business and administrative templates to streamline processes, manage documentation,
and maintain professionalism.</p>
</div>
<div class="resources">
<div class="row">
<div class="col-sm-6">
<div class="resource-item d-xl-flex justify-content-start slide-up">
<div class="resource-image">
<a href="#" class="d-block">
<img src="<?php echo get_parent_theme_file_uri();?>/assets/img/placeholder-02.png" alt=""
class="img-fluid">
</a>
</div>
<div class="resource-content">
<h6><a href="#">Mercantile Domain Registration Cover Letter</a></h6>
<P class="sm-text">Cover Letter Generator for personal and official registration.</P>
<div class="format-and-btn-wrapper d-flex justify-content-between">
<p class="sm-text">Format: <img
src="<?php echo get_parent_theme_file_uri(); ?>/assets/img/pdf-icon.png" alt=""></p>
<a href="#" class="mc-btn-underlined sm-text">View in Detail</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="resource-item d-xl-flex justify-content-start slide-up">
<div class="resource-image">
<a href="#" class="d-block">
<img src="<?php echo get_parent_theme_file_uri();?>/assets/img/placeholder-03.png" alt=""
class="img-fluid">
</a>
</div>
<div class="resource-content">
<h6><a href="#">Mercantile Domain Ownership Transfer</a></h6>
<P class="sm-text">Cover Letter Generator for personal and official registration.</P>
<div class="format-and-btn-wrapper d-flex justify-content-between">
<p class="sm-text">Format: <img
src="<?php echo get_parent_theme_file_uri(); ?>/assets/img/pdf-icon.png" alt=""></p>
<a href="#" class="mc-btn-underlined sm-text">View in Detail</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="resource-item d-xl-flex justify-content-start slide-up">
<div class="resource-image">
<a href="#" class="d-block">
<img src="<?php echo get_parent_theme_file_uri();?>/assets/img/placeholder-04.png" alt=""
class="img-fluid">
</a>
</div>
<div class="resource-content">
<h6><a href="#">Quote Template</a></h6>
<P class="sm-text">Register free Cover Letter Generator for .np domain registration for personal
and official registration.</P>
<div class="format-and-btn-wrapper d-flex justify-content-between">
<p class="sm-text">Format: <img
src="<?php echo get_parent_theme_file_uri(); ?>/assets/img/pdf-icon.png" alt=""></p>
<a href="#" class="mc-btn-underlined sm-text">View in Detail</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="resource-item d-xl-flex justify-content-start slide-up">
<div class="resource-image">
<a href="#" class="d-block">
<img src="<?php echo get_parent_theme_file_uri();?>/assets/img/placeholder-05.png" alt=""
class="img-fluid">
</a>
</div>
<div class="resource-content">
<h6><a href="#">Invoice Template</a></h6>
<P class="sm-text">Register free Cover Letter Generator for .np domain registration for personal
and official registration.</P>
<div class="format-and-btn-wrapper d-flex justify-content-between">
<p class="sm-text">Format: <img
src="<?php echo get_parent_theme_file_uri(); ?>/assets/img/pdf-icon.png" alt=""></p>
<a href="#" class="mc-btn-underlined sm-text">View in Detail</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="resource-item d-xl-flex justify-content-start slide-up">
<div class="resource-image">
<a href="#" class="d-block">
<img src="<?php echo get_parent_theme_file_uri();?>/assets/img/placeholder-06.png" alt=""
class="img-fluid">
</a>
</div>
<div class="resource-content">
<h6><a href="#">Proposal Template (PPT)</a></h6>
<P class="sm-text">Register free Cover Letter Generator for .np domain registration for personal
and official registration.</P>
<div class="format-and-btn-wrapper d-flex justify-content-between">
<p class="sm-text">Format: <img
src="<?php echo get_parent_theme_file_uri(); ?>/assets/img/pdf-icon.png" alt=""></p>
<a href="#" class="mc-btn-underlined sm-text">View in Detail</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="resource-item d-xl-flex justify-content-start slide-up">
<div class="resource-image">
<a href="#" class="d-block">
<img src="<?php echo get_parent_theme_file_uri();?>/assets/img/placeholder-07.png" alt=""
class="img-fluid">
</a>
</div>
<div class="resource-content">
<h6><a href="#">Meeting Agenda Template</a></h6>
<P class="sm-text">Register free Cover Letter Generator for .np domain registration for personal
and official registration.</P>
<div class="format-and-btn-wrapper d-flex justify-content-between">
<p class="sm-text">Format: <img
src="<?php echo get_parent_theme_file_uri(); ?>/assets/img/pdf-icon.png" alt=""></p>
<a href="#" class="mc-btn-underlined sm-text">View in Detail</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="resource-block slide-up" id="content-and-social-media-management">
<div class="section-title">
<h2>Content & Social Media Management</h2>
<p>Access essential business and administrative templates to streamline processes, manage documentation,
and maintain professionalism.</p>
</div>
<div class="resources">
<div class="row">
<div class="col-sm-6">
<div class="resource-item d-xl-flex justify-content-start slide-up">
<div class="resource-image">
<a href="#" class="d-block">
<img src="<?php echo get_parent_theme_file_uri();?>/assets/img/placeholder-02.png" alt=""
class="img-fluid">
</a>
</div>
<div class="resource-content">
<h6><a href="#">Mercantile Domain Registration Cover Letter</a></h6>
<P class="sm-text">Cover Letter Generator for personal and official registration.</P>
<div class="format-and-btn-wrapper d-flex justify-content-between">
<p class="sm-text">Format: <img
src="<?php echo get_parent_theme_file_uri(); ?>/assets/img/pdf-icon.png" alt=""></p>
<a href="#" class="mc-btn-underlined sm-text">View in Detail</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="resource-item d-xl-flex justify-content-start slide-up">
<div class="resource-image">
<a href="#" class="d-block">
<img src="<?php echo get_parent_theme_file_uri();?>/assets/img/placeholder-03.png" alt=""
class="img-fluid">
</a>
</div>
<div class="resource-content">
<h6><a href="#">Mercantile Domain Ownership Transfer</a></h6>
<P class="sm-text">Cover Letter Generator for personal and official registration.</P>
<div class="format-and-btn-wrapper d-flex justify-content-between">
<p class="sm-text">Format: <img
src="<?php echo get_parent_theme_file_uri(); ?>/assets/img/pdf-icon.png" alt=""></p>
<a href="#" class="mc-btn-underlined sm-text">View in Detail</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="resource-item d-xl-flex justify-content-start slide-up">
<div class="resource-image">
<a href="#" class="d-block">
<img src="<?php echo get_parent_theme_file_uri();?>/assets/img/placeholder-04.png" alt=""
class="img-fluid">
</a>
</div>
<div class="resource-content">
<h6><a href="#">Quote Template</a></h6>
<P class="sm-text">Register free Cover Letter Generator for .np domain registration for personal
and official registration.</P>
<div class="format-and-btn-wrapper d-flex justify-content-between">
<p class="sm-text">Format: <img
src="<?php echo get_parent_theme_file_uri(); ?>/assets/img/pdf-icon.png" alt=""></p>
<a href="#" class="mc-btn-underlined sm-text">View in Detail</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="resource-item d-xl-flex justify-content-start slide-up">
<div class="resource-image">
<a href="#" class="d-block">
<img src="<?php echo get_parent_theme_file_uri();?>/assets/img/placeholder-05.png" alt=""
class="img-fluid">
</a>
</div>
<div class="resource-content">
<h6><a href="#">Invoice Template</a></h6>
<P class="sm-text">Register free Cover Letter Generator for .np domain registration for personal
and official registration.</P>
<div class="format-and-btn-wrapper d-flex justify-content-between">
<p class="sm-text">Format: <img
src="<?php echo get_parent_theme_file_uri(); ?>/assets/img/pdf-icon.png" alt=""></p>
<a href="#" class="mc-btn-underlined sm-text">View in Detail</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="resource-item d-xl-flex justify-content-start slide-up">
<div class="resource-image">
<a href="#" class="d-block">
<img src="<?php echo get_parent_theme_file_uri();?>/assets/img/placeholder-06.png" alt=""
class="img-fluid">
</a>
</div>
<div class="resource-content">
<h6><a href="#">Proposal Template (PPT)</a></h6>
<P class="sm-text">Register free Cover Letter Generator for .np domain registration for personal
and official registration.</P>
<div class="format-and-btn-wrapper d-flex justify-content-between">
<p class="sm-text">Format: <img
src="<?php echo get_parent_theme_file_uri(); ?>/assets/img/pdf-icon.png" alt=""></p>
<a href="#" class="mc-btn-underlined sm-text">View in Detail</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="resource-item d-xl-flex justify-content-start slide-up">
<div class="resource-image">
<a href="#" class="d-block">
<img src="<?php echo get_parent_theme_file_uri();?>/assets/img/placeholder-07.png" alt=""
class="img-fluid">
</a>
</div>
<div class="resource-content">
<h6><a href="#">Meeting Agenda Template</a></h6>
<P class="sm-text">Register free Cover Letter Generator for .np domain registration for personal
and official registration.</P>
<div class="format-and-btn-wrapper d-flex justify-content-between">
<p class="sm-text">Format: <img
src="<?php echo get_parent_theme_file_uri(); ?>/assets/img/pdf-icon.png" alt=""></p>
<a href="#" class="mc-btn-underlined sm-text">View in Detail</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</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