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



7 24 9



模板描述: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 bootstrap自适应 bootstrap响应式 电商 网店 商城 欧美风 欧美 欧洲 美洲 pc+wap 移动+电脑 手机+电脑 简洁 简约 简单 粉色 生活用品

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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