Copyright © 2021. pixelaxis All Rights Reserved.
This is Clean Dating html5 template.
All the file are well organized, its so easy to work with the template.
1. Unzip the files.
2. Open "Main File" folder.
You will find the
four folder arrange by different header version
file on the root that will be edited.
Also you will see 4 directories, css, js, fonts, img and images.
In the first folder Content you will find style.css and other styling files the all the other files expect the htmls.
Js folder contain only the jquery library. Fonts folder contain essetial font files for fonts.
├── assets/css/
├── assets/fonts
├── assets/images
├── assets/js
├── assets/sass
├── assets/webfonts
│
|
├── 404.html
├── aboutus.html
├── blog.html
├── blog-details.html
├── community.html
├── community-single.html
├── contact.html
├── index.html
├── index2.html
├── members.html
├── membership.html
├── profile-notfound.html
├── shop2.html
├── shop3.html
├── single-profile.html
├── single-profile2.html
├── single-profile3.html
├── single-shope.html
<!-- Header Area Start --> <header class="header"> <!-- Top Header Area Start --> <section class="top-header"> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="content"> <div class="left-content"> <ul class="left-list"> <li> <p> <i class="fas fa-headset"></i> Support </p> </li> <li> <div class="currency-selector"> <select name="currency" class="currency"> <option value="1">USD</option> <option value="2">BDT</option> <option value="3">BTC</option> </select> </div> </li> </ul> </div> <div class="right-content"> <ul class="right-list"> <li> <div class="language-selector"> <select name="language" class="language"> <option value="en">ENG</option> <option value="bn">BAN</option> <option value="cn">CN</option> <option value="jp">IN</option> </select> </div> </li> <li> <ul class="social-link"> <li> <a href="#"> <i class="fab fa-facebook-f"></i> </a> </li> <li> <a href="#"> <i class="fab fa-twitter"></i> </a> </li> <li> <a href="#"> <i class="fab fa-linkedin-in"></i> </a> </li> <li> <a href="#"> <i class="fab fa-instagram"></i> </a> </li> </ul> </li> </ul> </div> </div> </div> </div> </div> </section> <!-- Top Header Area End --> <!--Main-Menu Area Start--> <div class="mainmenu-area"> <div class="container"> <div class="row"> <div class="col-lg-12"> <nav class="navbar navbar-expand-lg navbar-light"> <a class="navbar-brand" href="index.html"> <img src="assets/images/logo.png" alt=""> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main_menu" aria-controls="main_menu" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse fixed-height" id="main_menu"> <ul class="navbar-nav ml-auto"> <li class="nav-item dropdown"> <a class="nav-link active dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Home </a> <ul class="dropdown-menu" > <li><a class="dropdown-item" href="index.html"> <i class="fa fa-angle-double-right"></i>Home 1</a></li> <li><a class="dropdown-item" href="index2.html"> <i class="fa fa-angle-double-right"></i> Home 2</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="aboutus.html">About</a> </li> <li class="nav-item"> <a class="nav-link" href="lend.html">Lend</a> </li> <li class="nav-item"> <a class="nav-link" href="borrow.html">Borrow</a> </li> <li class="nav-item"> <a class="nav-link" href="trade.html">Trade</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Pages </a> <ul class="dropdown-menu" > <li><a class="dropdown-item" href="affiliate.html"> <i class="fa fa-angle-double-right"></i>Affiliate</a></li> <li><a class="dropdown-item" href="blog.html"> <i class="fa fa-angle-double-right"></i>Blog</a></li> <li><a class="dropdown-item" href="blog-with-sidebar.html"> <i class="fa fa-angle-double-right"></i>Blog Sidebar</a></li> <li><a class="dropdown-item" href="single-blog.html"> <i class="fa fa-angle-double-right"></i> Blog Details</a></li> <li><a class="dropdown-item" href="help-center-1.html"> <i class="fa fa-angle-double-right"></i> Help Center</a></li> <li><a class="dropdown-item" href="help-center-2.html"> <i class="fa fa-angle-double-right"></i> Help Poats</a></li> <li><a class="dropdown-item" href="help-center-3.html"> <i class="fa fa-angle-double-right"></i> Help Single Post</a></li> <li><a class="dropdown-item" href="contact.html"> <i class="fa fa-angle-double-right"></i>Contact</a></li> <li><a class="dropdown-item" href="404.html"> <i class="fa fa-angle-double-right"></i>404</a></li> </ul> </li> </ul> <a href="#" class="mybtn1">Get Started </a> </div> </nav> </div> </div> </div> </div> <!--Main-Menu Area Start--> </header> <!-- Header Area End -->
/* Section Heading Css */ .section-heading { text-align: center; } .section-heading .subtitle { font-size: 28px; line-height: 38px; font-weight: 600; color: #2364d2; margin-bottom: 11px; } .section-heading .subtitle.extra-padding { margin-bottom: 17px; } .section-heading .title { font-size: 50px; line-height: 60px; font-weight: 700; color: #1e375a; margin-bottom: 10px; } .section-heading .title.extra-padding { margin-bottom: 20px; } .section-heading .text { font-size: 24px; line-height: 36px; font-weight: 300; } /* Preloader Css */ .preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; z-index: 9999999; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .preloader.hide { opacity: 0; display: none; } .loader { position: relative; width: 60px; height: 60px; border-radius: 50%; margin: 75px; display: inline-block; vertical-align: middle; } .loader-1 .loader-outter { position: absolute; border: 4px solid #2364d2; border-left-color: transparent; border-bottom: 0; width: 100%; height: 100%; border-radius: 50%; -webkit-animation: loader-1-outter 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite; animation: loader-1-outter 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite; } .loader-1 .loader-inner { position: absolute; border: 4px solid #2364d2; border-radius: 50%; width: 40px; height: 40px; left: calc(50% - 20px); top: calc(50% - 20px); border-right: 0; border-top-color: transparent; -webkit-animation: loader-1-inner 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite; animation: loader-1-inner 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite; } /* bottomtotop Css */ .bottomtotop i { width: 50px; height: 50px; line-height: 50px; position: fixed; font-size: 14px; text-align: center; border-radius: 50%; color: #fff; cursor: pointer; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); bottom: 15px; right: 15px; -webkit-box-shadow: 0px 0px 21px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 21px 0px rgba(0, 0, 0, 0.2); z-index: 999; -webkit-transition: all linear 0.3s; -o-transition: all linear 0.3s; transition: all linear 0.3s; background: #2364d2; } /* Breadcrumb Area Start */ .breadcrumb-area { padding: 215px 0px 115px; background: url(../images/bc-bg-2.jpg); background-repeat: no-repeat !important; background-position: center !important; background-size: cover !important; } .breadcrumb-area.extra-padding { padding: 215px 0px 171px; } .breadcrumb-area .title { font-size: 50px; line-height: 60px; font-weight: 600; margin-bottom: 15px; color: #fff; } .breadcrumb-area .title.extra-padding { margin-bottom: 26px; } .breadcrumb-area .breadcrumb-list li { display: inline-block; } .breadcrumb-area .breadcrumb-list li span { margin: 0px 7px; color: #fff; } .breadcrumb-area .breadcrumb-list li a { font-size: 16px; -webkit-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; color: #fff; } .breadcrumb-area .breadcrumb-list li a:hover { color: #f1f1f1; } .breadcrumb-area .breadcrumb-list li a.active { color: #f1f1f1; }
// Hero Area Slider var $review_slider = $('.review-slider'); $review_slider.owlCarousel({ loop: true, navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'], nav: true, dots: false, autoplay: false, margin: 30, autoplayTimeout: 6000, smartSpeed: 1000, responsive: { 0: { items: 1 }, 500: { items: 1 }, 768: { items: 2 }, 992: { items: 3 }, 1200: { items: 3 }, 1920: { items: 3 } } });
Thank you for reading the documentaion. If you still have any question or any problem, please contact with us. We will give you best support. Thanks.
pixelaxis
<!-- code will be here -->