Files
Test/index.html
T
2026-05-04 17:16:03 +01:00

1121 lines
62 KiB
HTML
Executable File
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html class="no-js" lang="zxx">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Creastone</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.8.3/font/bootstrap-icons.min.css">
<!-- Place favicon.ico in the root directory -->
<link href="assets/images/favicon.ico" type="img/x-icon" rel="shortcut icon">
<!-- All css files are included here. -->
<link rel="stylesheet" href="assets/css/vendor/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/vendor/iconfont.min.css">
<link rel="stylesheet" href="assets/css/vendor/helper.css">
<link rel="stylesheet" href="assets/css/plugins/plugins.css">
<link rel="stylesheet" href="assets/css/style.css">
<!-- Modernizr JS -->
<script src="assets/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<div id="main-wrapper">
<!--Header section start-->
<header class="header header-transparent header-sticky header-absolute d-lg-block d-none">
<div class="header-deafult-area">
<div class="container">
<div class="row align-items-center">
<div class="col-xl-3 col-lg-2 col-md-4 col-12">
<!--Logo Area Start-->
<div class="logo-area">
<a href="#"><img src="./assets/images/logo.png" alt=""></a>
</div>
<!--Logo Area End-->
</div>
<div class="col-xl-6 col-lg-6 col-md-4 d-none d-lg-block col-12">
<!--Header Menu Area Start-->
<div class="header-menu-area text-center">
<nav class="main-menu">
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">About us</a>
</li>
<li><a href="#">Shop</a>
</li>
<li><a href="#">New Arrivals</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<!--Header Menu Area End-->
</div>
<div class="col-xl-3 col-lg-4 col-md-5 col-12">
<!--Header Search And Mini Cart Area Start-->
<div class="header-search-cart-area">
<ul>
<li><a class="header-search-toggle" href="#"><i class="bi bi-search"></i></a></li>
<li class="currency-menu"><a href="#"><i class="bi bi-person"></i></a>
<!--Crunccy dropdown-->
<ul class="currency-dropdown">
<!--Language Currency Start-->
<li><a href="#">language</a>
<ul>
<li class="active"><a href="#"><img src="./assets/images/icons/en-gb.png" alt="">English</a></li>
<li><a href="#"><img src="./assets/images/icons/de-de.png" alt="">French</a></li>
</ul>
</li>
<!--Language Currency End-->
<!--USD Currency Start-->
<li><a href="#">Currency</a>
<ul>
<li><a href="#"> € Euro</a></li>
<li><a href="#"> $ US Dollar</a></li>
</ul>
</li>
<!--USD Currency End-->
<!--Account Currency Start-->
<li><a href="#">My account</a>
<ul>
<li><a href="#">Login</a></li>
<li><a href="#">My account</a></li>
</ul>
</li>
<!--Account Currency End-->
</ul>
<!--Crunccy dropdown-->
</li>
<li class="mini-cart"><a href="#"><i class="bi bi-cart"></i> </a>
</li>
</ul>
</div>
<!--Header Search And Mini Cart Area End-->
</div>
</div>
</div>
</div>
</header>
<!--Header section end-->
<!--Header Mobile section start-->
<header class="header-mobile d-block d-lg-none">
<div class="header-bottom menu-right">
<div class="container">
<div class="row">
<div class="col-12">
<div class="header-mobile-navigation d-block d-lg-none">
<div class="row align-items-center">
<div class="col-6 col-md-6">
<div class="header-logo">
<a href="#">
<img src="./assets/images/logo.png" class="img-fluid" alt="">
</a>
</div>
</div>
<div class="col-6 col-md-6">
<div class="mobile-navigation text-right">
<div class="header-icon-wrapper">
<ul class="icon-list justify-content-end">
<li>
<div class="header-cart-icon">
<a href="#"><i class="bi bi-cart"></i></a>
</div>
</li>
<li>
<a href="javascript:void(0)" class="mobile-menu-icon" id="mobile-menu-trigger"><i class="bi bi-layout-text-sidebar"></i></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Mobile Menu start-->
<div class="row">
<div class="col-12 d-flex d-lg-none">
<div class="mobile-menu"></div>
</div>
</div>
<!--Mobile Menu end-->
</div>
</div>
</header>
<!--Header Mobile section end-->
<!-- Offcanvas Menu Start -->
<div class="offcanvas-mobile-menu d-block d-lg-none" id="offcanvas-mobile-menu">
<a href="javascript:void(0)" class="offcanvas-menu-close" id="offcanvas-menu-close-trigger">
<i class="bi bi-x"></i>
</a>
<div class="offcanvas-wrapper">
<div class="offcanvas-inner-content">
<div class="offcanvas-mobile-search-area">
<form action="#">
<input type="search" placeholder="Search ...">
<button type="submit"><i class="bi bi-search"></i></button>
</form>
</div>
<nav class="offcanvas-navigation">
<ul>
<li class="menu-item-has-children"><a href="#">Home</a>
</li>
<li class="menu-item-has-children"><a href="#">About Us</a>
</li>
<li class="menu-item-has-children"><a href="#">Shop</a>
</li>
<li><a href="#">New Arrivals</a></li>
<li class="menu-item-has-children"><a href="#">Contact</a>
</li>
</ul>
</nav>
<div class="offcanvas-settings">
<nav class="offcanvas-navigation">
<ul>
<li class="menu-item-has-children"><a href="#">MY ACCOUNT </a>
<ul class="submenu2">
<li><a href="#">Login</a></li>
<li><a href="#">My account</a></li>
</ul>
</li>
<li class="menu-item-has-children"><a href="#">CURRENCY: USD </a>
<ul class="submenu2">
<li><a href="javascript:void(0)">€ Euro</a></li>
<li><a href="javascript:void(0)">$ US Dollar</a></li>
</ul>
</li>
<li class="menu-item-has-children"><a href="#">LANGUAGE: EN-GB </a>
<ul class="submenu2">
<li><a href="javascript:void(0)"><img src="./assets/images/icons/en-gb.png" alt=""> English</a></li>
<li><a href="javascript:void(0)"><img src="./assets/images/icons/de-de.png" alt=""> Germany</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="offcanvas-widget-area">
<div class="off-canvas-contact-widget">
<div class="header-contact-info">
<ul class="header-contact-info-list">
<li><i class="ion-android-phone-portrait"></i> <a href="#">+213 558 72 88 25 </a></li>
<li><i class="ion-android-mail"></i> <a href="#">contact@dzcreastone.com</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Offcanvas Menu End -->
<!-- main-search start -->
<div class="main-search-active">
<div class="sidebar-search-icon">
<button class="search-close"><i class="bi bi-x"></i></button>
</div>
<div class="sidebar-search-input">
<form action="#">
<div class="form-search">
<input id="search" class="input-text" value="" placeholder="" type="search">
<button>
<i class="bi bi-search"></i>
</button>
</div>
</form>
<p class="form-description">Hit enter to search</p>
</div>
</div>
<!-- main-search start -->
<!--slider section start-->
<div class="hero-section section position-relative">
<div class="hero-slider section">
<!--Hero Item start-->
<div class="hero-item large-height bg-image" data-bg="assets/images/hero/hero-3.jpg">
<div class="container">
<div class="row">
<div class="col-12">
<!--Hero Content start-->
<div class="hero-content-2 margin-top center">
<h2>Where Creative Design <br>Flows</h2>
<a href="#" class="btn">SHOP NOW</a>
</div>
<!--Hero Content end-->
</div>
</div>
</div>
</div>
<!--Hero Item end-->
<!--Hero Item start-->
<div class="hero-item large-height bg-image" data-bg="assets/images/hero/hero-4.jpg">
<div class="container">
<div class="row">
<div class="col-12">
<!--Hero Content start-->
<div class="hero-content-2 margin-top center">
<h2>Redefining the Heart<br> of Your Kitchen</h2>
<a href="#" class="btn">SHOP NOW</a>
</div>
<!--Hero Content end-->
</div>
</div>
</div>
</div>
<!--Hero Item end-->
</div>
</div>
<!--slider section end-->
<!-- Banner section start -->
<div class="banner-section section pt-30">
<div class="container">
<div class="row">
<div class="col-lg-5 col-md-12 col-sm-12">
<!-- Single Banner Start -->
<div class="single-banner-item mb-30">
<div class="banner-image">
<a href="#">
<img src="./assets/images/banner/banner4.jpg" alt="">
</a>
</div>
<div class="banner-content tr-right">
<h3 class="title">Creative <br> Acier Inoxydable</h3>
<a href="#">SHOP NOW</a>
</div>
</div>
<!-- Single Banner End -->
</div>
<div class="col-lg-7 col-md-12 col-sm-12">
<!-- Single Banner Start -->
<div class="single-banner-item mb-30">
<div class="banner-image">
<a href="#">
<img src="./assets/images/banner/banner5.jpg" alt="">
</a>
</div>
<div class="banner-content tr-right">
<h3 class="title">Ceramic <br> Latest Collection</h3>
<a href="#">SHOP NOW</a>
</div>
</div>
<!-- Single Banner End -->
</div>
<div class="col-lg-7 col-md-12 col-sm-12">
<!-- Single Banner Start -->
<div class="single-banner-item mb-30">
<div class="banner-image">
<a href="#">
<img src="./assets/images/banner/banner6.jpg" alt="">
</a>
</div>
<div class="banner-content tl-left color-white">
<h3 class="title">2026<br> Granite Composite</h3>
<a href="#">SHOP NOW</a>
</div>
</div>
<!-- Single Banner End -->
</div>
<div class="col-lg-5 col-md-12 col-sm-12">
<!-- Single Banner Start -->
<div class="single-banner-item mb-30">
<div class="banner-image">
<a href="#">
<img src="./assets/images/banner/banner7.jpg" alt="">
</a>
</div>
<div class="banner-content tl-left">
<h3 class="title">Cuivre <br> & Laiton</h3>
<a href="#">SHOP NOW</a>
</div>
</div>
<!-- Single Banner End -->
</div>
</div>
</div>
</div>
<!-- Banner section End -->
<!--Product section start-->
<div class="product-section section pt-70 pt-lg-50 pt-md-40 pt-sm-30 pt-xs-20 pb-55 pb-lg-35 pb-md-25 pb-sm-15 pb-xs-5">
<div class="container">
<div class="row">
<div class="col">
<div class="section-title text-center mb-15">
<h2>Popular Products</h2>
</div>
<div class="product-tab mb-50 mb-sm-30 mb-xs-20">
<ul class="nav">
<li><a class="active show" data-toggle="tab" href="#home">Granite Composite</a></li>
<li><a data-toggle="tab" href="#office">Ceramic</a></li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div id="home" class="tab-pane fade active show">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single Grid product Start -->
<div class="single-grid-product mb-40">
<div class="product-image">
<div class="product-label">
<span>-20%</span>
</div>
<a href="#">
<img src="./assets/images/product/saldae1.jpg" class="img-fluid" alt="">
<img src="./assets/images/product/saldae2.jpg" class="img-fluid" alt="">
</a>
<div class="product-action">
<ul>
<li><a href="#"><i class="bi bi-cart-plus"></i></a></li>
<li><a href="#" data-toggle="modal" title="Quick View"><i class="bi bi-eye"></i></a></li>
<li><a href="#"><i class="bi bi-heart"></i></a></li>
</ul>
</div>
</div>
<div class="product-content">
<h3 class="title"> <a href="#">Saldae</a></h3>
<p class="product-price"><span class="discounted-price">$190.00</span> <span class="main-price discounted">$230.00</span></p>
</div>
</div>
<!-- Single Grid product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single Grid product Start -->
<div class="single-grid-product mb-40">
<div class="product-image">
<div class="product-label">
<span>-20%</span>
</div>
<a href="#">
<img src="./assets/images/product/tassili1.jpg" class="img-fluid" alt="">
<img src="./assets/images/product/tassili2.jpg" class="img-fluid" alt="">
</a>
<div class="product-action">
<ul>
<li><a href="#"><i class="bi bi-cart-plus"></i></a></li>
<li><a href="#" data-toggle="modal" title="Quick View"><i class="bi bi-eye"></i></a></li>
<li><a href="#"><i class="bi bi-heart"></i></a></li>
</ul>
</div>
</div>
<div class="product-content">
<h3 class="title"> <a href="#">Tassili</a></h3>
<p class="product-price"><span class="discounted-price">$113.00</span> <span class="main-price discounted">$180.00</span></p>
</div>
</div>
<!-- Single Grid product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single Grid product Start -->
<div class="single-grid-product mb-40">
<div class="product-image">
<div class="product-label">
<span>-20%</span>
</div>
<a href="#">
<img src="./assets/images/product/tidis1.jpg" class="img-fluid" alt="">
<img src="./assets/images/product/tidis2.jpg" class="img-fluid" alt="">
</a>
<div class="product-action">
<ul>
<li><a href="#"><i class="bi bi-cart-plus"></i></a></li>
<li><a href="#" data-toggle="modal" title="Quick View"><i class="bi bi-eye"></i></a></li>
<li><a href="#"><i class="bi bi-heart"></i></a></li>
</ul>
</div>
</div>
<div class="product-content">
<h3 class="title"> <a href="#">Tidis</a></h3>
<p class="product-price"><span class="discounted-price">$86.00</span> <span class="main-price discounted">$150.00</span></p>
</div>
</div>
<!-- Single Grid product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single Grid product Start -->
<div class="single-grid-product mb-40">
<div class="product-image">
<a href="#">
<img src="./assets/images/product/zirid1.jpg" class="img-fluid" alt="">
</a>
<div class="product-action">
<ul>
<li><a href="#"><i class="bi bi-cart-plus"></i></a></li>
<li><a href="#" data-toggle="modal" title="Quick View"><i class="bi bi-eye"></i></a></li>
<li><a href="#"><i class="bi bi-heart"></i></a></li>
</ul>
</div>
</div>
<div class="product-content">
<h3 class="title"> <a href="#">Zirid</a></h3>
<p class="product-price"><span class="discounted-price">$290.00</span> <span class="main-price discounted">$330.00</span></p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
</div>
</div>
</div>
<div id="office" class="tab-pane">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single Grid product Start -->
<div class="single-grid-product mb-40">
<div class="product-image">
<a href="#">
<img src="./assets/images/product/1.jpg" class="img-fluid" alt="">
<img src="./assets/images/product/1.jpg" class="img-fluid" alt="">
</a>
<div class="product-action">
<ul>
<li><a href="#"><i class="bi bi-cart-plus"></i></a></li>
<li><a href="#" data-toggle="modal" title="Quick View"><i class="bi bi-eye"></i></a></li>
<li><a href="#"><i class="bi bi-heart"></i></a></li>
</ul>
</div>
</div>
<div class="product-content">
<h3 class="title"> <a href="#">Normal Dining chair</a></h3>
<p class="product-price"><span class="discounted-price">$130.00</span> </p>
</div>
</div>
<!-- Single Grid product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single Grid product Start -->
<div class="single-grid-product mb-40">
<div class="product-image">
<div class="product-label">
<span class="sale">Sale</span>
</div>
<a href="#">
<img src="./assets/images/product/2.jpg" class="img-fluid" alt="">
<img src="./assets/images/product/2.jpg" class="img-fluid" alt="">
</a>
<div class="product-action">
<ul>
<li><a href="#"><i class="bi bi-cart-plus"></i></a></li>
<li><a href="#" data-toggle="modal" title="Quick View"><i class="bi bi-eye"></i></a></li>
<li><a href="#"><i class="bi bi-heart"></i></a></li>
</ul>
</div>
</div>
<div class="product-content">
<h3 class="title"> <a href="#">Tripod lampshade</a></h3>
<p class="product-price"><span class="discounted-price">$210.00</span> <span class="main-price discounted">$240.00</span></p>
</div>
</div>
<!-- Single Grid product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single Grid product Start -->
<div class="single-grid-product mb-40">
<div class="product-image">
<a href="#">
<img src="./assets/images/product/3.jpg" class="img-fluid" alt="">
<img src="./assets/images/product/3.jpg" class="img-fluid" alt="">
</a>
<div class="product-action">
<ul>
<li><a href="#"><i class="bi bi-cart-plus"></i></a></li>
<li><a href="#" data-toggle="modal" title="Quick View"><i class="bi bi-eye"></i></a></li>
<li><a href="#"><i class="bi bi-heart"></i></a></li>
</ul>
</div>
</div>
<div class="product-content">
<h3 class="title"> <a href="#">Hot Design Table</a></h3>
<p class="product-price"><span class="discounted-price">$250.00</span> <span class="main-price discounted">$280.00</span></p>
</div>
</div>
<!-- Single Grid product End -->
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<!-- Single Grid product Start -->
<div class="single-grid-product mb-40">
<div class="product-image">
<a href="#">
<img src="./assets/images/product/4.jpg" class="img-fluid" alt="">
</a>
<div class="product-action">
<ul>
<li><a href="#"><i class="bi bi-cart-plus"></i></a></li>
<li><a href="#" data-toggle="modal" title="Quick View"><i class="bi bi-eye"></i></a></li>
<li><a href="#"><i class="bi bi-heart"></i></a></li>
</ul>
</div>
</div>
<div class="product-content">
<h3 class="title"> <a href="#">Outdoor Lock Chair</a></h3>
<p class="product-price"><span class="discounted-price">$180.00</span></p>
</div>
</div>
<!-- Single Grid product End -->
</div>
</div>
</div>
</div>
</div>
</div>
<!--Product section end-->
</div>
</div>
</div>
</div>
<!-- Banner section End -->
<!--Features section start-->
<div class="features-section section pt-30 pt-lg-15 pt-md-0 pt-sm-0 pt-xs-15">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6">
<!-- Single Feature Start -->
<div class="single-feature mb-30">
<div class="feature-image">
<img src="./assets/images/icons/feature-1.png" class="img-fluid" alt="">
</div>
<div class="feature-content">
<h4 class="title">Free home delivery</h4>
<p class="short-desc">Provide free home delivery for the all product over $100 </p>
</div>
</div>
<!-- Single Feature End -->
</div>
<div class="col-lg-4 col-md-6">
<!-- Single Feature Start -->
<div class="single-feature mb-30">
<div class="feature-image">
<img src="./assets/images/icons/feature-2.png" class="img-fluid" alt="">
</div>
<div class="feature-content">
<h4 class="title">Quality Products</h4>
<p class="short-desc">We ensure the product quality that is our main goal </p>
</div>
</div>
<!-- Single Feature End -->
</div>
<div class="col-lg-4 col-md-6">
<!-- Single Feature Start -->
<div class="single-feature mb-30">
<div class="feature-image">
<img src="./assets/images/icons/feature-3.png" class="img-fluid" alt="">
</div>
<div class="feature-content">
<h4 class="title">3 Days Return</h4>
<p class="short-desc">Provide free home delivery for the all product over $100 </p>
</div>
</div>
<!-- Single Feature End -->
</div>
</div>
</div>
</div>
<!--Features section end-->
<!-- Testimonial Area Start -->
<div class="testimonial-section section pb-80 pb-lg-60 pb-md-50 pb-sm-40 pb-xs-40">
<div class="container">
<div class="row">
<div class="col-12">
<div class="testimonial-wrap bg-gray-two pt-45 pb-30">
<div class="row justify-content-center">
<div class="col-lg-12">
<div class="testimonial-wrapper section-space--inner">
<div class="testimonial-slider-content">
<div class="item">
<div class="row align-items-center">
<div class="col-md-5">
<div class="testimonial-image">
<img src="./assets/images/testimonial/testimonial-2.png" alt="">
</div>
</div>
<div class="col-md-7">
<div class="testimonial testimonial-style-2 gutter-item">
<div class="testimonial-inner">
<div class="testimonial-author">
<div class="author-thumb">
<img src="assets/images/author/author5.png" alt="">
</div>
<div class="author-info">
<h4>Ahmed</h4>
<span>CTO & CO Founder</span>
</div>
</div>
<div class="testimonial-description">
<blockquote class="testimonials-text">
<p>“I am extremely pleased with my experience at Creastone. The quality of their products exceeded my expectations, and everything feels solid and well-crafted. Their stylish and creative designs truly enhance the beauty of my home. I highly recommend them.”</p>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row align-items-center">
<div class="col-md-5">
<div class="testimonial-image">
<img src="./assets/images/testimonial/testimonial-1.png" alt="">
</div>
</div>
<div class="col-md-7">
<div class="testimonial testimonial-style-2 gutter-item">
<div class="testimonial-inner">
<div class="testimonial-author">
<div class="author-thumb">
<img src="assets/images/author/author5.png" alt="">
</div>
<div class="author-info">
<h4>Amine </h4>
<span>Manager</span>
</div>
</div>
<div class="testimonial-description">
<blockquote class="testimonials-text">
<p>“I am truly delighted to have purchased from Creastone. They deliver outstanding quality products and excellent service. The durability and finish are impressive. Their unique and modern designs really add elegance to my space and make me very satisfied.”</p>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Testimonial Area End -->
<!--Brand section start-->
<div class="brand-section section pb-100 pb-lg-80 pb-md-70 pb-sm-60 pb-xs-50">
<div class="container">
<div class="row">
<div class="brand-slider section">
<div class="col">
<!-- Single Brand Start -->
<div class="single-brand">
<div class="brand-image">
<img src="./assets/images/brands/brand-1.png" alt="">
</div>
</div>
<!-- Single Brand End -->
</div>
<div class="col">
<!-- Single Brand Start -->
<div class="single-brand">
<div class="brand-image">
<img src="./assets/images/brands/brand-2.png" alt="">
</div>
</div>
<!-- Single Brand End -->
</div>
<div class="col">
<!-- Single Brand Start -->
<div class="single-brand">
<div class="brand-image">
<img src="./assets/images/brands/brand-3.png" alt="">
</div>
</div>
<!-- Single Brand End -->
</div>
<div class="col">
<!-- Single Brand Start -->
<div class="single-brand">
<div class="brand-image">
<img src="./assets/images/brands/brand-4.png" alt="">
</div>
</div>
<!-- Single Brand End -->
</div>
<div class="col">
<!-- Single Brand Start -->
<div class="single-brand">
<div class="brand-image">
<img src="./assets/images/brands/brand-5.png" alt="">
</div>
</div>
<!-- Single Brand End -->
</div>
<div class="col">
<!-- Single Brand Start -->
<div class="single-brand">
<div class="brand-image">
<img src="./assets/images/brands/brand-1.png" alt="">
</div>
</div>
<!-- Single Brand End -->
</div>
<div class="col">
<!-- Single Brand Start -->
<div class="single-brand">
<div class="brand-image">
<img src="./assets/images/brands/brand-2.png" alt="">
</div>
</div>
<!-- Single Brand End -->
</div>
<div class="col">
<!-- Single Brand Start -->
<div class="single-brand">
<div class="brand-image">
<img src="./assets/images/brands/brand-3.png" alt="">
</div>
</div>
<!-- Single Brand End -->
</div>
<div class="col">
<!-- Single Brand Start -->
<div class="single-brand">
<div class="brand-image">
<img src="./assets/images/brands/brand-4.png" alt="">
</div>
</div>
<!-- Single Brand End -->
</div>
<div class="col">
<!-- Single Brand Start -->
<div class="single-brand">
<div class="brand-image">
<img src="./assets/images/brands/brand-5.png" alt="">
</div>
</div>
<!-- Single Brand End -->
</div>
</div>
</div>
</div>
</div>
<!--Brand section end-->
<!-- Newsletter Section Start -->
<div class="newsletter-section section bg-gray-two pt-100 pt-lg-80 pt-md-70 pt-sm-60 pt-xs-50 pb-95 pb-lg-75 pb-md-65 pb-sm-60 pb-xs-50">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<div class="newsletter-content">
<h2>Subscribe Our Newsletter</h2>
<p>Subscribe Today for free and save 10% on your first purchase.</p>
</div>
</div>
<div class="col-lg-6">
<div class="newsletter-wrap">
<div class="newsletter-form">
<form id="mc-form" class="mc-form">
<input type="email" placeholder="Enter Your Email Address Here..." required>
<button type="submit" value="submit">SUBSCRIBE!</button>
</form>
</div>
<!-- mailchimp-alerts Start -->
<div class="mailchimp-alerts">
<div class="mailchimp-submitting"></div>
<!-- mailchimp-submitting end -->
<div class="mailchimp-success"></div>
<!-- mailchimp-success end -->
<div class="mailchimp-error"></div>
<!-- mailchimp-error end -->
</div>
<!-- mailchimp-alerts end -->
</div>
</div>
</div>
</div>
</div>
<!-- Newsletter Section End -->
<!--Footer section start-->
<footer class="footer-section section bg-gray">
<!--Footer Top start-->
<div class="footer-top section pt-100 pt-lg-80 pt-md-70 pt-sm-60 pt-xs-50 pb-55 pb-lg-35 pb-md-25 pb-sm-15 pb-xs-10">
<div class="container">
<div class="row">
<!--Footer Widget start-->
<div class="footer-widget col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 mb-40 mb-xs-35">
<h4 class="title"><span class="text">Opening Time</span></h4>
<p class="mb-15">Sat Thur: 8AM 6PM</p>
<p class="mb-15">Fri: Closed</p>
<h4 class="opeaning-title">We Work All The Holidays</h4>
</div>
<!--Footer Widget end-->
<!--Footer Widget start-->
<div class="footer-widget col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 mb-40 mb-xs-35">
<h4 class="title"><span class="text">Quick Link</span></h4>
<ul class="ft-menu">
<li><a href="#">My account</a></li>
<li><a href="#">Wishlist</a></li>
<li><a href="#">Order Tracking</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Shipping Information</a></li>
</ul>
</div>
<!--Footer Widget end-->
<!--Footer Widget start-->
<div class="footer-widget col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 mb-40 mb-xs-35">
<h4 class="title"><span class="text">Information</span></h4>
<ul class="ft-menu">
<li><a href="#">About Us</a></li>
<li><a href="#">Shopping Guide</a></li>
<li><a href="#">Delivery Information</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Our Store</a></li>
</ul>
</div>
<!--Footer Widget end-->
<!--Footer Widget start-->
<div class="footer-widget text-lg-right text-left col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 mb-40 mb-xs-35">
<h2>Chateau rouge, les eucalyptus</h2>
<p class="contact-text">contact@dzcreastone.com</p>
<p class="contact-text">+213 558 72 88 25</p>
</div>
<!--Footer Widget end-->
</div>
</div>
</div>
<!--Footer Top end-->
<!--Footer bottom start-->
<div class="footer-bottom section">
<div class="container">
<div class="row no-gutters">
<div class="col-12 ft-border pt-25 pb-25">
<div class="row justify-content-between align-items-center">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="copyright text-left">
<p class="copyright">&copy; 2026 <strong>Creastone</strong> - All Rights Reserved.</p>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="payment-getway text-lg-right text-center">
<img src="./assets/images/payment.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Footer bottom end-->
</footer>
<!--Footer section end-->
<!-- Modal Area Strat -->
<div class="modal fade quick-view-modal-container" id="quick-view-modal-container" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="col-xl-12 col-lg-12">
<div class="row">
<div class="col-lg-4 col-md-6">
<!-- Product Details Left -->
<div class="product-details-left">
<div class="product-details-images">
<div class="lg-image">
<img src="./assets/images/product/large-product/l-product-1.jpg" alt="">
</div>
<div class="lg-image">
<img src="./assets/images/product/large-product/l-product-2.jpg" alt="">
</div>
<div class="lg-image">
<img src="./assets/images/product/large-product/l-product-3.jpg" alt="">
</div>
<div class="lg-image">
<img src="./assets/images/product/large-product/l-product-4.jpg" alt="">
</div>
<div class="lg-image">
<img src="./assets/images/product/large-product/l-product-5.jpg" alt="">
</div>
</div>
<div class="product-details-thumbs">
<div class="sm-image"><img src="./assets/images/product/small-product/s-product-1.jpg" alt="product image thumb"></div>
<div class="sm-image"><img src="./assets/images/product/small-product/s-product-2.jpg" alt="product image thumb"></div>
<div class="sm-image"><img src="./assets/images/product/small-product/s-product-3.jpg" alt="product image thumb"></div>
<div class="sm-image"><img src="./assets/images/product/small-product/s-product-4.jpg" alt="product image thumb"></div>
<div class="sm-image"><img src="./assets/images/product/small-product/s-product-5.jpg" alt="product image thumb"></div>
</div>
</div>
<!--Product Details Left -->
</div>
<div class="col-lg-8 col-md-6">
<!--Product Details Content Start-->
<div class="product-details-content">
<!--Product Nav Start-->
<div class="product-nav">
<a href="#"><i class="fa fa-angle-left"></i></a>
<a href="#"><i class="fa fa-angle-right"></i></a>
</div>
<!--Product Nav End-->
<h2>Aliquam lobortis est turpis mauris egestas eget</h2>
<div class="single-product-reviews">
<i class="fa fa-star active"></i>
<i class="fa fa-star active"></i>
<i class="fa fa-star active"></i>
<i class="fa fa-star active"></i>
<i class="fa fa-star-o"></i>
<a class="review-link" href="#">(1 customer review)</a>
</div>
<div class="single-product-price">
<span class="price new-price">$66.00</span>
<span class="regular-price">$77.00</span>
</div>
<div class="product-description">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco,Proin lectus ipsum, gravida
et mattis vulputate, tristique ut lectus</p>
</div>
<div class="single-product-quantity">
<form class="add-quantity" action="#">
<div class="product-quantity">
<input value="1" type="number">
</div>
<div class="add-to-link">
<button class="btn"><i class="ion-bag"></i>add to cart</button>
</div>
</form>
</div>
<div class="wishlist-compare-btn">
<a href="#" class="wishlist-btn">Add to Wishlist</a>
<a href="#" class="add-compare">Compare</a>
</div>
<div class="product-meta">
<span class="posted-in">
Categories:
<a href="#">Accessories</a>,
<a href="#">Electronics</a>
</span>
</div>
<div class="single-product-sharing">
<h3>Share this product</h3>
<ul>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#"><i class="fa fa-pinterest"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
<li><a href="#"><i class="fa fa-vimeo"></i></a></li>
</ul>
</div>
</div>
<!--Product Details Content End-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Area End -->
</div>
<!-- Placed js at the end of the document so the pages load faster -->
<!-- All jquery file included here -->
<script src="assets/js/vendor/jquery-1.12.4.min.js"></script>
<script src="https://maps.google.com/maps/api/js?sensor=false&libraries=geometry&v=3.22&key=AIzaSyDAq7MrCR1A2qIShmjbtLHSKjcEIEBEEwM"></script>
<script src="assets/js/vendor/popper.min.js"></script>
<script src="assets/js/vendor/bootstrap.min.js"></script>
<script src="assets/js/plugins/plugins.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>