|
Server : Apache/2.4.18 (Ubuntu) System : Linux canvaswebdesign 3.13.0-71-generic #114-Ubuntu SMP Tue Dec 1 02:34:22 UTC 2015 x86_64 User : oppastar ( 1041) PHP Version : 7.0.33-0ubuntu0.16.04.15 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority, Directory : /var/www/laciasmara.com/public_html/shop/application/views/ |
Upload File : |
<div class="all-categories-container">
<!-- Main Content for Category Products -->
<div class="all-categories-main">
<div class="all-categories-header">
<h1 class="all-categories-heading">All Categories</h1>
</div>
<div class="all-categories-products">
<!-- Category List -->
<a class="all-categories-item" href="https://www.laciasmara.com/shop/category/vibrators">
<div class="all-categories-product-card">
<div class="all-categories-product-image" style="background-image: url('https://storage.googleapis.com/laciasmara-photos/laciaasmara_assets/laciasmara_category/category_vibrator.webp');"></div>
<div class="all-categories-product-info">
<h3 class="all-categories-product-name"><?= ucfirst(lang('category_vibrator')); ?></h3>
</div>
</div>
</a>
<a class="all-categories-item" href="https://www.laciasmara.com/shop/category/anal">
<div class="all-categories-product-card">
<div class="all-categories-product-image" style="background-image: url('https://storage.googleapis.com/laciasmara-photos/laciaasmara_assets/laciasmara_category/category_anal.webp');"></div>
<div class="all-categories-product-info">
<h3 class="all-categories-product-name"><?= ucfirst(lang('category_anal')); ?></h3>
</div>
</div>
</a>
<a class="all-categories-item" href="https://www.laciasmara.com/shop/category/wellness">
<div class="all-categories-product-card">
<div class="all-categories-product-image" style="background-image: url('https://storage.googleapis.com/laciasmara-photos/laciaasmara_assets/laciasmara_category/category_wellness.webp');"></div>
<div class="all-categories-product-info">
<h3 class="all-categories-product-name"><?= ucfirst(lang('category_wellness')); ?></h3>
</div>
</div>
</a>
<a class="all-categories-item" href="https://www.laciasmara.com/shop/category/male-toys">
<div class="all-categories-product-card">
<div class="all-categories-product-image" style="background-image: url('https://storage.googleapis.com/laciasmara-photos/laciaasmara_assets/laciasmara_category/category_male_toys.webp');"></div>
<div class="all-categories-product-info">
<h3 class="all-categories-product-name"><?= ucfirst(lang('category_male_toys')); ?></h3>
</div>
</div>
</a>
<a class="all-categories-item" href="https://www.laciasmara.com/shop/category/dildo">
<div class="all-categories-product-card">
<div class="all-categories-product-image" style="background-image: url('https://storage.googleapis.com/laciasmara-photos/laciaasmara_assets/laciasmara_category/category_dildo.webp');"></div>
<div class="all-categories-product-info">
<h3 class="all-categories-product-name"><?= ucfirst(lang('category_dildo')); ?></h3>
</div>
</div>
</a>
<a class="all-categories-item" href="https://www.laciasmara.com/shop/category/wellness/kegel">
<div class="all-categories-product-card">
<div class="all-categories-product-image" style="background-image: url('https://storage.googleapis.com/laciasmara-photos/laciaasmara_assets/laciasmara_category/category_kegel.webp');"></div>
<div class="all-categories-product-info">
<h3 class="all-categories-product-name"><?= ucfirst(lang('category_kegel')); ?></h3>
</div>
</div>
</a>
<a class="all-categories-item" href="https://www.laciasmara.com/shop/category/accessories/bdsm">
<div class="all-categories-product-card">
<div class="all-categories-product-image" style="background-image: url('https://storage.googleapis.com/laciasmara-photos/laciaasmara_assets/laciasmara_category/category_bondage.webp');"></div>
<div class="all-categories-product-info">
<h3 class="all-categories-product-name"><?= ucfirst(lang('category_bondage')); ?></h3>
</div>
</div>
</a>
<a class="all-categories-item" href="https://www.laciasmara.com/shop/category/wellness/condom">
<div class="all-categories-product-card">
<div class="all-categories-product-image" style="background-image: url('https://storage.googleapis.com/laciasmara-photos/laciaasmara_assets/laciasmara_category/category_condom_n_essential.webp');"></div>
<div class="all-categories-product-info">
<h3 class="all-categories-product-name"><?= ucfirst(lang('category_condoms_essential')); ?></h3>
</div>
</div>
</a>
<a class="all-categories-item" href="#">
<div class="all-categories-product-card">
<div class="all-categories-product-image" style="background-image: url('https://storage.googleapis.com/laciasmara-photos/laciaasmara_assets/laciasmara_category/category_merch.webp');"></div>
<div class="all-categories-product-info">
<h3 class="all-categories-product-name"><?= ucfirst(lang('category_merch')); ?></h3>
</div>
</div>
</a>
</div>
</div>
</div>
<style>
/* Container utama */
.all-categories-container {
margin: 0;
padding: 32px 120px;
box-sizing: border-box;
}
/* Konten Utama */
.all-categories-main {
display: flex;
flex-direction: column;
margin: 0;
}
.all-categories-header {
margin-bottom: 16px;
}
.all-categories-heading {
font-size: 1.5rem;
font-weight: 600;
color: #333;
text-align: center;
}
.all-categories-products {
display: grid;
grid-template-columns: repeat(3, minmax(250px, 1fr));
gap: 16px;
}
.all-categories-product-card {
background-color: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.all-categories-product-card:hover {
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
transform: translateY(-5px);
}
.all-categories-product-image {
width: 100%;
height: 250px;
background-size: cover;
background-position: center;
}
.all-categories-product-info {
padding: 12px;
text-align: center;
}
.all-categories-product-name {
font-size: 1rem;
font-weight: 500;
color: #333;
margin-top: 8px;
}
.all-categories-item {
text-decoration: none;
}
@media (max-width: 768px) {
.all-categories-container {
margin: 0;
padding: 20px;
}
.all-categories-heading {
font-size: 1.25rem;
}
/* Adjust grid layout for smaller screens */
.all-categories-products {
grid-template-columns: 1fr 1fr;
/* 2 columns on smaller screens */
gap: 12px;
}
.all-categories-product-card {
height: auto;
}
.all-categories-product-image {
height: 160px;
/* Reduce image height on mobile */
}
.all-categories-product-name {
font-size: 0.9rem;
/* Smaller font size for product names on mobile */
}
}
</style>