粉色扁平风格html5分类商店平台网页模板



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

37 144 49



模板描述:html5分类商店平台。粉色扁平风格html5分类商店平台网页模板html模板下载

代码结构

1. 引入CSS

<link rel="stylesheet" href="dependencies/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="dependencies/fontawesome/css/all.min.css">
<link rel="stylesheet" href="dependencies/flaticon/flaticon.css">
<link rel="stylesheet" href="dependencies/owl.carousel/css/owl.carousel.min.css">
<link rel="stylesheet" href="dependencies/owl.carousel/css/owl.theme.default.min.css">
<link rel="stylesheet" href="dependencies/jquery-animated-headlines/css/jquery.animatedheadline.css">
<link rel="stylesheet" href="dependencies/magnific-popup/css/magnific-popup.css">
<link rel="stylesheet" href="dependencies/animate.css/css/animate.min.css">
<link rel="stylesheet" href="dependencies/meanmenu/css/meanmenu.min.css">
<link rel="stylesheet" href="assets/css/app.css">
<link href="https://fonts.googleapis.com/css?family=Nunito:300,300i,400,400i,600,600i,700,700i,800,800i&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet">
<link rel="stylesheet" href="dependencies/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="dependencies/fontawesome/css/all.min.css">
<link rel="stylesheet" href="dependencies/flaticon/flaticon.css">
<link rel="stylesheet" href="dependencies/owl.carousel/css/owl.carousel.min.css">
<link rel="stylesheet" href="dependencies/owl.carousel/css/owl.theme.default.min.css">
<link rel="stylesheet" href="dependencies/jquery-animated-headlines/css/jquery.animatedheadline.css">
<link rel="stylesheet" href="dependencies/magnific-popup/css/magnific-popup.css">
<link rel="stylesheet" href="dependencies/animate.css/css/animate.min.css">
<link rel="stylesheet" href="dependencies/meanmenu/css/meanmenu.min.css">
<link rel="stylesheet" href="assets/css/app.css">
<link href="https://fonts.googleapis.com/css?family=Nunito:300,300i,400,400i,600,600i,700,700i,800,800i&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet">

2. 引入JS

<script src="dependencies/jquery/js/jquery.min.js"></script>
<script src="dependencies/popper.js/js/popper.min.js"></script>
<script src="dependencies/bootstrap/js/bootstrap.min.js"></script>
<script src="dependencies/waypoints/js/jquery.waypoints.min.js"></script>
<script src="dependencies/jquery.counterup/js/jquery.counterup.min.js"></script>
<script src="dependencies/owl.carousel/js/owl.carousel.min.js"></script>
<script src="dependencies/imagesloaded/js/imagesloaded.pkgd.min.js"></script>
<script src="dependencies/isotope-layout/js/isotope.pkgd.min.js"></script>
<script src="dependencies/jquery-animated-headlines/js/jquery.animatedheadline.min.js"></script>
<script src="dependencies/magnific-popup/js/jquery.magnific-popup.min.js"></script>
<script src="dependencies/elevatezoom/js/jquery.elevateZoom-2.2.3.min.js"></script>
<script src="dependencies/bootstrap-validator/js/validator.min.js"></script>
<script src="dependencies/meanmenu/js/jquery.meanmenu.min.js"></script>
<script src="https://ditu.google.cn/maps/api/js?key=AIzaSyBtmXSwv4YmAKtcZyyad9W7D4AC08z0Rb4"></script>
<script src="assets/js/app.js"></script>
<script src="dependencies/jquery/js/jquery.min.js"></script>
<script src="dependencies/popper.js/js/popper.min.js"></script>
<script src="dependencies/bootstrap/js/bootstrap.min.js"></script>
<script src="dependencies/waypoints/js/jquery.waypoints.min.js"></script>
<script src="dependencies/jquery.counterup/js/jquery.counterup.min.js"></script>
<script src="dependencies/owl.carousel/js/owl.carousel.min.js"></script>
<script src="dependencies/imagesloaded/js/imagesloaded.pkgd.min.js"></script>
<script src="dependencies/isotope-layout/js/isotope.pkgd.min.js"></script>
<script src="dependencies/jquery-animated-headlines/js/jquery.animatedheadline.min.js"></script>
<script src="dependencies/magnific-popup/js/jquery.magnific-popup.min.js"></script>
<script src="dependencies/elevatezoom/js/jquery.elevateZoom-2.2.3.min.js"></script>
<script src="dependencies/bootstrap-validator/js/validator.min.js"></script>
<script src="dependencies/meanmenu/js/jquery.meanmenu.min.js"></script>
<script src="https://ditu.google.cn/maps/api/js?key=AIzaSyBtmXSwv4YmAKtcZyyad9W7D4AC08z0Rb4"></script>
<script src="assets/js/app.js"></script>

3. HTML代码

<!DOCTYPE html>
<html class="no-js" lang="">
<head>
    <!-- Meta Data -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Classima | Home One</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="media/favicon.png">
    <!-- Bootstrap CSS -->
    <!-- FontAwesome CSS -->
    <!-- Flaticon CSS -->
    <!-- Owl Carousel CSS -->
    <!-- Animated Headlines CSS -->
    <!-- Magnific Popup CSS -->
    <!-- Animate CSS -->
    <!-- Meanmenu CSS -->
    <!-- Site Stylesheet -->
    <!-- Google Web Fonts -->
</head>
<body class="sticky-header">
    <!--[if lte IE 9]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://www.51qianduan.com/">51前端</a> to improve your experience and security.</p>
  	<![endif]-->
    <!-- ScrollUp Start Here -->
    <a href="#wrapper" data-type="section-switch" class="scrollup">
        <i class="fas fa-angle-double-up"></i>
    </a>
    <!-- ScrollUp End Here -->
    <!-- Preloader Start Here -->
    <div id="preloader"></div>
    <!-- Preloader End Here -->
    <div id="wrapper" class="wrapper">
        <!--=====================================-->
        <!--=            Header Start           =-->
        <!--=====================================-->
        <header class="header">
            <div id="rt-sticky-placeholder"></div>
            <div id="header-menu" class="header-menu menu-layout1 pd-x-20">
                <div class="container-fluid">
                    <div class="row d-flex align-items-center">
                        <div class="col-lg-2">
                            <div class="logo-area">
                                <a href="index.html" class="temp-logo">
                                    <img src="media/main-logo.png" alt="logo" class="img-fluid">
                                </a>
                                <a href="index.html" class="sticky-logo">
                                    <img src="media/logo-dark.png" alt="logo" class="img-fluid">
                                </a>
                            </div>
                        </div>
                        <div class="col-lg-7 d-flex justify-content-end">
                            <nav id="dropdown" class="template-main-menu">
                                <ul>
                                    <li>
                                        <a href="#" class="has-dropdown">Home</a>
                                        <ul class="sub-menu">
                                            <li>
                                                <a href="index.html">Home 1</a>
                                            </li>
                                            <li>
                                                <a href="index2.html">Home 2</a>
                                            </li>
                                            <li>
                                                <a href="index3.html">Home 3</a>
                                            </li>
                                            <li>
                                                <a href="index4.html">Home 4</a>
                                            </li>
                                            <li>
                                                <a href="index5.html">Home 5</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="about.html" class="has-dropdown">All Ads</a>
                                        <ul class="mega-menu mega-menu-col-3">
                                            <li>
                                                <ul class="sub-menu">
                                                    <li>
                                                        <a href="grid-view1.html">Grid View 1</a>
                                                    </li>
                                                    <li>
                                                        <a href="grid-view2.html">Grid View 2</a>
                                                    </li>
                                                    <li>
                                                        <a href="grid-view3.html">Grid View 3</a>
                                                    </li>
                                                    <li>
                                                        <a href="grid-view4.html">Grid View 4</a>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li>
                                                <ul class="sub-menu">
                                                    <li>
                                                        <a href="list-view1.html">List View 1</a>
                                                    </li>
                                                    <li>
                                                        <a href="list-view2.html">List View 2</a>
                                                    </li>
                                                    <li>
                                                        <a href="list-view3.html">List View 3</a>
                                                    </li>
                                                    <li>
                                                        <a href="list-view4.html">List View 4</a>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li>
                                                <ul class="sub-menu">
                                                    <li>
                                                        <a href="single-product1.html">Single Ad 1</a>
                                                    </li>
                                                    <li>
                                                        <a href="single-product2.html">Single Ad 2</a>
                                                    </li>
                                                    <li>
                                                        <a href="store.html">All Stores</a>
                                                    </li>
                                                    <li>
                                                        <a href="store-detail.html">Store Details</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#" class="has-dropdown">Pages</a>
                                        <ul class="mega-menu mega-menu-col-2">
                                            <li>
                                                <ul class="sub-menu">
                                                    <li>
                                                        <a href="about.html">About Us</a>
                                                    </li>
                                                    <li>
                                                        <a href="faq.html">FAQ</a>
                                                    </li>
                                                    <li>
                                                        <a href="search-result.html">Search Result</a>
                                                    </li>
                                                    <li>
                                                        <a href="404.html">Error 404</a>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li>
                                                <ul class="sub-menu">
                                                    <li>
                                                        <a href="all-ad.html">All Ads</a>
                                                    </li>
                                                    <li>
                                                        <a href="single-product1.html">Single Ad 1</a>
                                                    </li>
                                                    <li>
                                                        <a href="single-product2.html">Single Ad 2</a>
                                                    </li>
                                                    <li>
                                                        <a href="https://www.51qianduan.com/">51前端</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#" class="has-dropdown">Stores</a>
                                        <ul class="sub-menu">
                                            <li>
                                                <a href="store.html">All Stores</a>
                                            </li>
                                            <li>
                                                <a href="store-detail.html">Store Details</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#" class="has-dropdown">Blog</a>
                                        <ul class="sub-menu">
                                            <li>
                                                <a href="blog1.html">Blog – Default Layout</a>
                                            </li>
                                            <li>
                                                <a href="blog2.html">Blog – Standard Layout</a>
                                            </li>
                                            <li>
                                                <a href="single-blog.html">Single Post</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="contact.html">Contact</a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                        <div class="col-lg-3 d-flex justify-content-end">
                            <div class="header-action-layout1">
                                <ul>
                                    <li class="header-login-icon">
                                        <a href="https://www.51qianduan.com/">51前端</a>
                                    </li>
                                    <li class="header-btn">
                                        <a href="post-ad.html" class="item-btn"><i class="fas fa-plus"></i>Post Your Ad</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <!--=====================================-->
        <!--=            Banner Start           =-->
        <!--=====================================-->
        <section class="main-banner-wrap-layout1 bg-dark-overlay bg-common minus-mgt-90" data-bg-image="media/banner/banner1.jpg">
            <div class="container">
                <div class="main-banner-box-layout1 animated-headline">
                    <h1 class="ah-headline item-title">
                        <span class="ah-words-wrapper">
                            <b class="is-visible">Buy, Sell, Rent &amp; Exchange in one click</b>
                            <b>Buy, Sell, Rent &amp; Exchange in one click</b>
                        </span>
                    </h1>
                    <div class="item-subtitle">Search from over 2000+ Active Ads in 29+ Categories for Free</div>
                    <div class="search-box-layout1">
                        <form action="#">
                            <div class="row no-gutters">
                                <div class="col-lg-3 form-group">
                                    <div class="input-search-btn search-location" data-toggle="modal" data-target="#modal-location">
                                        <i class="fas fa-map-marker-alt"></i>
                                        <label>Select Location</label>
                                    </div>
                                </div>
                                <div class="col-lg-3 form-group">
                                    <div class="input-search-btn search-category" data-toggle="modal" data-target="#modal-category">
                                        <i class="fas fa-tags"></i>
                                        <label>Select Category</label>
                                    </div>
                                </div>
                                <div class="col-lg-4 form-group">
                                    <div class="input-search-btn search-keyword">
                                        <i class="fas fa-text-width"></i>
                                        <input type="text" class="form-control" placeholder="Enter Keyword here ..." name="keyword">
                                    </div>
                                </div>
                                <div class="col-lg-2 form-group">
                                    <button type="submit" class="submit-btn"><i class="fas fa-search"></i>Search</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
        <!--=====================================-->
        <!--=            Category Start           =-->
        <!--=====================================-->
        <section class="section-padding-top-heading">
            <div class="container">
                <div class="heading-layout1">
                    <h2 class="heading-title">Popular Categories</h2>
                </div>
                <div class="row">
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="category-box-layout1">
                            <a href="#">
                                <div class="item-icon">
                                    <i class="far fa-building"></i>
                                </div>
                                <div class="item-content">
                                    <h3 class="item-title">Property</h3>
                                    <div class="item-count">1 Ad</div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="category-box-layout1">
                            <a href="#">
                                <div class="item-icon">
                                    <i class="fas fa-male"></i>
                                </div>
                                <div class="item-content">
                                    <h3 class="item-title">Home Appliances</h3>
                                    <div class="item-count">3 Ad</div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="category-box-layout1">
                            <a href="#">
                                <div class="item-icon">
                                    <i class="fas fa-glass-martini"></i>
                                </div>
                                <div class="item-content">
                                    <h3 class="item-title">Electronics</h3>
                                    <div class="item-count">6 Ad</div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="category-box-layout1">
                            <a href="#">
                                <div class="item-icon">
                                    <i class="fas fa-archive"></i>
                                </div>
                                <div class="item-content">
                                    <h3 class="item-title">Business & Industry</h3>
                                    <div class="item-count">0 Ad</div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="category-box-layout1">
                            <a href="#">
                                <div class="item-icon">
                                    <i class="fas fa-graduation-cap"></i>
                                </div>
                                <div class="item-content">
                                    <h3 class="item-title">Education</h3>
                                    <div class="item-count">0 Ad</div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="category-box-layout1">
                            <a href="#">
                                <div class="item-icon">
                                    <i class="far fa-futbol"></i>
                                </div>
                                <div class="item-content">
                                    <h3 class="item-title">Hobby, Sport & Kids</h3>
                                    <div class="item-count">4 Ad</div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="category-box-layout1">
                            <a href="#">
                                <div class="item-icon">
                                    <i class="fas fa-heart"></i>
                                </div>
                                <div class="item-content">
                                    <h3 class="item-title">Health & Beauty</h3>
                                    <div class="item-count">1 Ad</div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="category-box-layout1">
                            <a href="#">
                                <div class="item-icon">
                                    <i class="far fa-file-archive"></i>
                                </div>
                                <div class="item-content">
                                    <h3 class="item-title">Others</h3>
                                    <div class="item-count">1 Ad</div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--=====================================-->
        <!--=       Product Box Start           =-->
        <!--=====================================-->
        <section class="section-padding-top-heading bg-accent">
            <div class="container">
                <div class="heading-layout1">
                    <h2 class="heading-title">Featured Ads</h2>
                </div>
                <div class="row">
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="product-box-layout1">
                            <div class="item-img">
                                <a href="single-product1.html"><img src="media/product/product1.jpg" alt="Product"></a>
                            </div>
                            <div class="item-content">
                                <h3 class="item-title"><a href="single-product1.html">HD 27 inch Mac 1 year used only</a></h3>
                                <ul class="entry-meta">
                                    <li><i class="far fa-clock"></i>3 months ago</li>
                                    <li><i class="fas fa-map-marker-alt"></i>Port Chester, New York</li>
                                </ul>
                                <div class="item-price">
                                    <span class="currency-symbol">$</span>
                                    2,500
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="product-box-layout1">
                            <div class="item-img">
                                <a href="single-product1.html"><img src="media/product/product2.jpg" alt="Product"></a>
                            </div>
                            <div class="item-content">
                                <h3 class="item-title"><a href="single-product1.html">New Banded Smart Watch from China</a></h3>
                                <ul class="entry-meta">
                                    <li><i class="far fa-clock"></i>3 months ago</li>
                                    <li><i class="fas fa-map-marker-alt"></i>Kansas, Emporia</li>
                                </ul>
                                <div class="item-price">
                                    <span class="currency-symbol">$</span>
                                    47
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="product-box-layout1">
                            <div class="item-img">
                                <a href="single-product1.html" class="item-trending"><img src="media/product/product3.jpg" alt="Product"></a>
                            </div>
                            <div class="item-content">
                                <h3 class="item-title"><a href="single-product1.html">High quality brand new headphone</a></h3>
                                <ul class="entry-meta">
                                    <li><i class="far fa-clock"></i>3 months ago</li>
                                    <li><i class="fas fa-map-marker-alt"></i>New York, Mineola</li>
                                </ul>
                                <div class="item-price">
                                    <span class="currency-symbol">$</span>
                                    15
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="product-box-layout1">
                            <div class="item-img">
                                <a href="single-product1.html"><img src="media/product/product4.jpg" alt="Product"></a>
                            </div>
                            <div class="item-content">
                                <h3 class="item-title"><a href="single-product1.html">Running shoes imported from china</a></h3>
                                <ul class="entry-meta">
                                    <li><i class="far fa-clock"></i>3 months ago</li>
                                    <li><i class="fas fa-map-marker-alt"></i>California, Bakersfield</li>
                                </ul>
                                <div class="item-price">
                                    <span class="currency-symbol">$</span>
                                    36
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="product-box-layout1">
                            <div class="item-img">
                                <a href="single-product1.html"><img src="media/product/product5.jpg" alt="Product"></a>
                            </div>
                            <div class="item-content">
                                <h3 class="item-title"><a href="single-product1.html">Team Jersey available in reasonable price</a></h3>
                                <ul class="entry-meta">
                                    <li><i class="far fa-clock"></i>4 months ago</li>
                                    <li><i class="fas fa-map-marker-alt"></i>New Jersey, Bloomfield</li>
                                </ul>
                                <div class="item-price">
                                    <span class="currency-symbol">$</span>
                                    90
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="product-box-layout1">
                            <div class="item-img">
                                <a href="single-product1.html"><img src="media/product/product6.jpg" alt="Product"></a>
                            </div>
                            <div class="item-content">
                                <h3 class="item-title"><a href="single-product1.html">Export quality bag pack wholesale min 100 pcs</a></h3>
                                <ul class="entry-meta">
                                    <li><i class="far fa-clock"></i>4 months ago</li>
                                    <li><i class="fas fa-map-marker-alt"></i>Louisiana, Bogalusa</li>
                                </ul>
                                <div class="item-price">
                                    <span class="currency-symbol">$</span>
                                    180
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="product-box-layout1">
                            <div class="item-img">
                                <a href="single-product1.html"><img src="media/product/product7.jpg" alt="Product"></a>
                            </div>
                            <div class="item-content">
                                <h3 class="item-title"><a href="single-product1.html">Ultrabook 2018 core i7 with 16 GB RAM</a></h3>
                                <ul class="entry-meta">
                                    <li><i class="far fa-clock"></i>4 months ago</li>
                                    <li><i class="fas fa-map-marker-alt"></i>Kansas, Abilene</li>
                                </ul>
                                <div class="item-price">
                                    <span class="currency-symbol">$</span>
                                    1,300
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="product-box-layout1">
                            <div class="item-img">
                                <a href="single-product1.html"><img src="media/product/product8.jpg" alt="Product"></a>
                            </div>
                            <div class="item-content">
                                <h3 class="item-title"><a href="single-product1.html">Toy Bundle Export Quality form China wholesale</a></h3>
                                <ul class="entry-meta">
                                    <li><i class="far fa-clock"></i>4 months ago</li>
                                    <li><i class="fas fa-map-marker-alt"></i>New York, Brooklyn</li>
                                </ul>
                                <div class="item-price">
                                    <span class="currency-symbol">$</span>
                                    230
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--=====================================-->
        <!--=       Location Start           	=-->
        <!--=====================================-->
        <section class="section-padding-top-heading">
            <div class="container">
                <div class="heading-layout1">
                    <h2 class="heading-title">Our Top Locations</h2>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        <div class="location-box-layout1">
                            <a href="#">
                                <div class="item-img">
                                    <img src="media/location/location1.jpg" alt="Brooklyn">
                                </div>
                                <div class="item-content">
                                    <h3 class="item-title">New Jersey</h3>
                                    <div class="item-count">3 Ads</div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="location-box-layout1">
                            <a href="#">
                                <div class="item-img">
                                    <img src="media/location/location3.jpg" alt="Brooklyn">
                                </div>
                                <div class="item-content">
                                    <h3 class="item-title">Brooklyn</h3>
                                    <div class="item-count">1 Ads</div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="location-box-layout1">
                            <a href="#">
                                <div class="item-img">
                                    <img src="media/location/location2.jpg" alt="Brooklyn">
                                </div>
                                <div class="item-content">
                                    <h3 class="item-title">Bloomfield</h3>
                                    <div class="item-count">1 Ads</div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="location-box-layout1">
                            <a href="#">
                                <div class="item-img">
                                    <img src="media/location/location4.jpg" alt="Brooklyn">
                                </div>
                                <div class="item-content">
                                    <h3 class="item-title">Kansas</h3>
                                    <div class="item-count">3 Ads</div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="location-box-layout1">
                            <a href="#">
                                <div class="item-img">
                                    <img src="media/location/location5.jpg" alt="Brooklyn">
                                </div>
                                <div class="item-content">
                                    <h3 class="item-title">Englewood</h3>
                                    <div class="item-count">1 Ads</div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--=====================================-->
        <!--=       Counter Start           	=-->
        <!--=====================================-->
        <section class="counter-wrap-layout1 bg-attachment-fixed" data-bg-image="media/figure/counter-bg.jpg">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4 d-flex justify-content-center">
                        <div class="counter-box-layout1">
                            <div class="item-icon">
                                <i class="flaticon-gift"></i>
                            </div>
                            <div class="item-content">
                                <div class="counter-number">
                                    <span class="counter">5000</span>
                                    <span>+</span>
                                </div>
                                <div class="item-title">Published Ads</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 d-flex justify-content-center">
                        <div class="counter-box-layout1">
                            <div class="item-icon">
                                <i class="flaticon-users"></i>
                            </div>
                            <div class="item-content">
                                <div class="counter-number">
                                    <span class="counter">3265</span>
                                    <span>+</span>
                                </div>
                                <div class="item-title">Registered Users</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 d-flex justify-content-center">
                        <div class="counter-box-layout1">
                            <div class="item-icon">
                                <i class="flaticon-shield"></i>
                            </div>
                            <div class="item-content">
                                <div class="counter-number">
                                    <span class="counter">2000</span>
                                    <span>+</span>
                                </div>
                                <div class="item-title">Verified Users</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--=====================================-->
        <!--=       Pricing Start           	=-->
        <!--=====================================-->
        <section class="section-padding-top-heading">
            <div class="container">
                <div class="heading-layout1">
                    <h2 class="heading-title">Our Pricing and Packages</h2>
                </div>
                <div class="row">
                    <div class="col-xl-3 col-md-6">
                        <div class="pricing-box-layout1">
                            <h3 class="item-title">Free</h3>
                            <div class="price-box">
                                <span class="item-currency">$0</span>
                                <span class="item-duration">/ Per month</span>
                            </div>
                            <div class="item-features">
                                <ul>
                                    <li>3 Regular Ads</li>
                                    <li>No Featured Ads</li>
                                    <li>No Top Ads</li>
                                    <li>No Ads will be bumped up</li>
                                    <li>Limited Support</li>
                                </ul>
                            </div>
                            <div class="item-btn">
                                <a href="https://www.51qianduan.com/">51前端</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6">
                        <div class="pricing-box-layout1">
                            <h3 class="item-title">Basic</h3>
                            <div class="price-box">
                                <span class="item-currency">$19</span>
                                <span class="item-duration">/ Per month</span>
                            </div>
                            <div class="item-features">
                                <ul>
                                    <li>3 Regular Ads</li>
                                    <li>1 Featured Ads</li>
                                    <li>1 Top Ads</li>
                                    <li>1 Ads will be bumped up</li>
                                    <li>Basic Support</li>
                                </ul>
                            </div>
                            <div class="item-btn">
                                <a href="https://www.51qianduan.com/">51前端</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6">
                        <div class="pricing-box-layout1">
                            <h3 class="item-title">Gold</h3>
                            <div class="price-box">
                                <span class="item-currency">$39</span>
                                <span class="item-duration">/ Per month</span>
                            </div>
                            <div class="item-features">
                                <ul>
                                    <li>5 Regular Ads</li>
                                    <li>2 Featured Ads</li>
                                    <li>3 Top Ads</li>
                                    <li>3 Ads will be bumped up</li>
                                    <li>Basic Support</li>
                                </ul>
                            </div>
                            <div class="item-btn">
                                <a href="https://www.51qianduan.com/">51前端</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6">
                        <div class="pricing-box-layout1">
                            <h3 class="item-title">Business</h3>
                            <div class="price-box">
                                <span class="item-currency">$59</span>
                                <span class="item-duration">/ Per month</span>
                            </div>
                            <div class="item-features">
                                <ul>
                                    <li>Unlimited Regular Ads</li>
                                    <li>5 Featured Ads</li>
                                    <li>10 Top Ads</li>
                                    <li>15 Ads will be bumped up</li>
                                    <li>Priority Support</li>
                                </ul>
                            </div>
                            <div class="item-btn">
                                <a href="https://www.51qianduan.com/">51前端</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--=====================================-->
        <!--=       Blog Start           	=-->
        <!--=====================================-->
        <section class="section-padding-top-heading bg-accent">
            <div class="container">
                <div class="heading-layout1">
                    <h2 class="heading-title">Latest Blog Posts</h2>
                </div>
                <div class="row">
                    <div class="col-lg-4">
                        <div class="blog-box-layout1">
                            <div class="item-img">
                                <a href="single-blog.html"><img src="media/blog/blog1.jpg" alt="blog"></a>
                            </div>
                            <div class="item-content">
                                <ul class="post-meta">
                                    <li>July 10, 2019</li>
                                    <li>/ <a href="#">RadiusTheme</a></li>
                                </ul>
                                <h3 class="post-title"><a href="single-blog.html">Three Powerful Tricks for Online Advertising</a></h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="blog-box-layout1">
                            <div class="item-img">
                                <a href="single-blog.html"><img src="media/blog/blog2.jpg" alt="blog"></a>
                            </div>
                            <div class="item-content">
                                <ul class="post-meta">
                                    <li>July 9, 2019</li>
                                    <li>/ <a href="#">RadiusTheme</a></li>
                                </ul>
                                <h3 class="post-title"><a href="single-blog.html">Competitive Analysis for Entrepreneurs 2018</a></h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="blog-box-layout1">
                            <div class="item-img">
                                <a href="single-blog.html"><img src="media/blog/blog3.jpg" alt="blog"></a>
                            </div>
                            <div class="item-content">
                                <ul class="post-meta">
                                    <li>July 8, 2019</li>
                                    <li>/ <a href="#">RadiusTheme</a></li>
                                </ul>
                                <h3 class="post-title"><a href="single-blog.html">How To Explode Your Leads With Local Search</a></h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--=====================================-->
        <!--=       Footer Start           	=-->
        <!--=====================================-->
        <footer>
            <div class="footer-top-wrap">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-3 col-sm-6">
                            <div class="footer-box-layout1">
                                <div class="footer-logo">
                                    <img src="media/footer-logo.png" alt="logo">
                                </div>
                                <p>Classima a Largest Classified Listing Marketplace
                                    offers perfect WordPress Ads classified Themes to build
                                    your own classified websites.</p>
                                <ul class="footer-social">
                                    <li><a href="#" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
                                    <li><a href="#" target="_blank"><i class="fab fa-twitter"></i></a></li>
                                    <li><a href="#" target="_blank"><i class="fab fa-google-plus-g"></i></a></li>
                                    <li><a href="#" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
                                    <li><a href="#" target="_blank"><i class="fab fa-pinterest"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6">
                            <div class="footer-box-layout1">
                                <div class="footer-title">
                                    <h3>How to Sell Fast</h3>
                                </div>
                                <div class="footer-menu-box">
                                    <ul>
                                        <li><a href="#">Selling Tips</a></li>
                                        <li><a href="#">Buy and Sell Quickly</a></li>
                                        <li><a href="#">Membership</a></li>
                                        <li><a href="#">Banner Advertising</a></li>
                                        <li><a href="#">Promote Your Ad</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6">
                            <div class="footer-box-layout1">
                                <div class="footer-title">
                                    <h3>Information</h3>
                                </div>
                                <div class="footer-menu-box">
                                    <ul>
                                        <li><a href="#">Company & Contact Info</a></li>
                                        <li><a href="#">Blog & Articles</a></li>
                                        <li><a href="#">Sitemap</a></li>
                                        <li><a href="#">Terms of Service</a></li>
                                        <li><a href="#">Privacy Policy</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6">
                            <div class="footer-box-layout1">
                                <div class="footer-title">
                                    <h3>Help & Support</h3>
                                </div>
                                <div class="footer-menu-box">
                                    <ul>
                                        <li><a href="#">Live Chat</a></li>
                                        <li><a href="#">FAQ</a></li>
                                        <li><a href="#">How to Stay Safe</a></li>
                                        <li><a href="#">Terms & Conditions</a></li>
                                        <li><a href="#">Contact Us</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer-bottom-wrap">
                <div class="container">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="copyright-text">
                                © Copyright Classima 2019. Designed and Developed by <a href="https://www.51qianduan.com/">51前端</a>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="payment-option">
                                <a href="#">
                                    <img src="media/figure/payment.png" alt="payment">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!--=====================================-->
        <!--=       Modal Start           	 	=-->
        <!--=====================================-->
        <div class="modal fade modal-location" id="modal-location" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close">
                        <span class="fas fa-times" aria-hidden="true"></span>
                    </button>
                    <div class="location-list">
                        <h4 class="item-title">Location</h4>
                        <ul>
                            <li><a href="#">California</a></li>
                            <li><a href="#">Kansas</a></li>
                            <li><a href="#">Louisiana</a></li>
                            <li><a href="#">New Jersey</a></li>
                            <li><a href="#">New York</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade modal-location" id="modal-category" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close">
                        <span class="fas fa-times" aria-hidden="true"></span>
                    </button>
                    <div class="location-list">
                        <h4 class="item-title">Category</h4>
                        <ul>
                            <li>
                                <a href="#"><span class="item-icon"><img src="media/category/category5.png" alt="icon"></span>Business &amp; Industry</a>
                            </li>
                            <li>
                                <a href="#"><span class="item-icon"><img src="media/category/category7.png" alt="icon"></span>Cars &amp; Vehicles</a>
                            </li>
                            <li>
                                <a href="#"><span class="item-icon"><img src="media/category/category14.png" alt="icon"></span>Electronics</a>
                            </li>
                            <li>
                                <a href="#"><span class="item-icon"><img src="media/category/category4.png" alt="icon"></span>Health &amp; Beauty</a>
                            </li>
                            <li>
                                <a href="#"><span class="item-icon"><img src="media/category/category18.png" alt="icon"></span>Hobby, Sport &amp; Kids</a>
                            </li>
                            <li>
                                <a href="#"><span class="item-icon"><img src="media/category/category8.png" alt="icon"></span>Home Appliances</a>
                            </li>
                            <li>
                                <a href="#"><span class="item-icon"><img src="media/category/category6.png" alt="icon"></span>Jobs</a>
                            </li>
                            <li>
                                <a href="#"><span class="item-icon"><img src="media/category/category12.png" alt="icon"></span>Others</a>
                            </li>
                            <li>
                                <a href="#"><span class="item-icon"><img src="media/category/category11.png" alt="icon"></span>Pets &amp; Animals</a>
                            </li>
                            <li>
                                <a href="#"><span class="item-icon"><img src="media/category/category3.png" alt="icon"></span>Property</a>
                            </li>
                            <li>
                                <a href="#"><span class="item-icon"><img src="media/category/category1.png" alt="icon"></span>Services</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Jquery Js -->
    <!-- Popper Js -->
    <!-- Bootstrap Js -->
    <!-- Waypoints Js -->
    <!-- Counterup Js -->
    <!-- Owl Carousel Js -->
    <!-- ImagesLoaded Js -->
    <!-- Isotope Js -->
    <!-- Animated Headline Js -->
    <!-- Magnific Popup Js -->
    <!-- ElevateZoom Js -->
    <!-- Bootstrap Validate Js -->
    <!-- Meanmenu Js -->
    <!-- Google Map js -->
    <!-- Site Scripts -->
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 扁平化 养生会馆 植物花草 游戏 黑色 bootstrap自适应 IT网络科技 蓝色 普通自适应 欧美风 旅游 红色 中国风 金融理财保险 绿色 韩系 高校 灰色 日系 简洁简约 工业产品 黄色 炫酷 家居装饰 紫色 卡通动画 橙色 招聘猎头 精美 实用通用 艺术创意 粉色 政府 婚庆 大气 白色 新闻资讯 婚纱摄影 棕色 清新 教育培训 彩色 绘画 设计 餐饮美食 其他风格 外贸 服装服饰 建筑 化工企业 医药器械 美容美发 动漫 电影视频 包装印刷 机械 汽车4S店 农业产品 咨询管理 酒店 健身房 化妆品 食品 花卉 房地产 协会组织 快递货运 数码电器 搬家 珠宝首饰 酒业 文化传媒 装修装饰 医院医疗 律师 酒吧音乐 图书 动物宠物 航空航天 股票 能源 公益 饮品 生活用品 家政保洁 体育 房屋租赁 商务 电力公司 打车租车 环保 宗教寺庙 工具文具 企业行业 自适应响应式 风格类型 颜色色彩

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到