How to Web Template free download HTML CSS JS

How to Web Template free download HTML CSS JS

    

How to Web Template free download HTML CSS JS



Step 1: assets/index.htm


Video Catalog has 4 different HTML pages. Main page has a video banner and a list of videos in grid layout. Second page is a video detail...

  • Free HTML5 Website Templates
  • Design and Photography Free Website Templates
    • Food & Restaurant Free Website Templates
    • Business and Consulting Company Templates Free Website Templates
    • Sport and Beauty Templates Free Templates
    • Transportation Free Website Templates
    • Hotel and Travel Website Templates Free
    • Entertainment website templates free
    • Wedding free responsive website templates
    • Other categories
  • Premium HTML5 Templates
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Web Template</title>
    <!-- Meta -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Landing page template for creative dashboard">
    <meta name="keywords" content="Landing page template">
    <!-- Favicon icon -->
    <link rel="icon" href="assets\logos\favicon.ico" type="image/png" sizes="16x16">
    <!-- Bootstrap -->
    <link href="assets\css\bootstrap.min.css" rel="stylesheet" type="text/css" media="all">
    <!-- Font -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Poppins:400,300,500,700,600" rel="stylesheet" type="text/css">
    <!-- Animate CSS -->
    <link rel="stylesheet" href="assets\css\animate.css">
    <!-- Owl Carousel -->
    <link rel="stylesheet" href="assets\css\owl.carousel.css">
    <link rel="stylesheet" href="assets\css\owl.theme.css">
    <!-- Magnific Popup -->
    <link rel="stylesheet" href="assets\css\magnific-popup.css">
    <!-- Full Page Animation -->
    <link rel="stylesheet" href="assets\css\animsition.min.css">
    <!-- Ionic Icons -->
    <link rel="stylesheet" href="assets\css\ionicons.min.css">
    <!-- Main Style css -->
    <link href="assets\css\style.css" rel="stylesheet" type="text/css" media="all">
</head>

<body>

    <div class="wrapper animsition" data-animsition-in-class="fade-in" data-animsition-in-duration="1000" data-animsition-out-class="fade-out" data-animsition-out-duration="1000">
        <div class="container">
             <nav class="navbar navbar-expand-lg navbar-light navbar-default navbar-fixed-top" role="navigation">
                <div class="container">
                    <a class="navbar-brand page-scroll" href="#main">SoengSouy.com</a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav mr-auto">
                        </ul>
                        <ul class="navbar-nav my-2 my-lg-0">
                            <li class="nav-item">
                                <a class="nav-link page-scroll" href="#main">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link page-scroll" href="#services">Important</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link page-scroll" href="#features">Benefits</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link page-scroll" href="#reviews">Testimonials</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link page-scroll" href="#pricing">Pricing</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Contact</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
        <div class="main" id="main">
            <!-- Main Section-->
            <div class="hero-section app-hero">
                <div class="container">
                    <div class="hero-content app-hero-content text-center">
                        <div class="row justify-content-md-center">
                            <div class="col-md-10">
                                <h1 class="wow fadeInUp" data-wow-delay="0s">Adminty Bootstrap 4 Admin Template</h1>
                                <p class="wow fadeInUp" data-wow-delay="0.2s">
                                    First ever Bootstrap 4 admin template with Flat UI Interface. <br class="hidden-xs"> Its best choice for your any complex project.
                                </p>
                                <a class="btn btn-primary btn-action" data-wow-delay="0.2s" href="#">Live Preview</a>
                                <a class="btn btn-primary btn-action" data-wow-delay="0.2s" href="#">Buy Now</a>
                            </div>
                            <div class="col-md-12">
                                <div class="hero-image">
                                    <img class="img-fluid" src="assets\images\app_hero_1.png" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="services-section text-center" id="services">
                <!-- Services section (small) with icons -->
                <div class="container">
                    <div class="row  justify-content-md-center">
                        <div class="col-md-8">
                            <div class="services-content">
                                <h1 class="wow fadeInUp" data-wow-delay="0s">We take care our products for more feature rich</h1>
                                <p class="wow fadeInUp" data-wow-delay="0.2s">
                                    Adminty is one of the finest Admin dashboard template in its category. Premium admin dashboard with high end feature rich possibilities.
                                </p>
                            </div>
                        </div>
                        <div class="col-md-12 text-center">
                            <div class="services">
                                <div class="row">
                                    <div class="col-sm-4 wow fadeInUp" data-wow-delay="0.2s">
                                        <div class="services-icon">
                                            <img src="assets\logos\icon1.png" height="60" width="60" alt="Service">
                                        </div>
                                        <div class="services-description">
                                            <h1>Mega feature rich</h1>
                                            <p>
                                                Adminty is one of unique dashboard template which come with tons of ready to use feature. We continuous working on it to provide latest updates in digital market.
                                            </p>
                                        </div>
                                    </div>
                                    <div class="col-sm-4 wow fadeInUp" data-wow-delay="0.3s">
                                        <div class="services-icon">
                                            <img class="icon-2" src="assets\logos\icon2.png" height="60" width="60" alt="Service">
                                        </div>
                                        <div class="services-description">
                                            <h1>Fast and Robust</h1>
                                            <p>
                                                We are contantly working on Adminty and improve its performance too. Your definitely give higher rating to Adminty for its performance.
                                            </p>
                                        </div>
                                    </div>
                                    <div class="col-sm-4 wow fadeInUp" data-wow-delay="0.4s">
                                        <div class="services-icon">
                                            <img class="icon-3" src="assets\logos\icon3.png" height="60" width="60" alt="Service">
                                        </div>
                                        <div class="services-description">
                                            <h1>FLAT UI-Interface</h1>
                                            <p>
                                                Adminty is first ever admin dashboard template which release in Bootstrap 4 framework. Intuitive feature rich design concept and color combination.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex-features" id="features">
                <div class="container">
                    <div class="flex-split">
                        <div class="f-left wow fadeInUp" data-wow-delay="0s">
                            <div class="left-content">
                                <img class="img-fluid" src="assets\images\feature_1.png" alt="">
                            </div>
                        </div>
                        <div class="f-right wow fadeInUp" data-wow-delay="0.2s">
                            <div class="right-content">
                                <h2>High performance and flexible code</h2>
                                <p>
                                    Guru Able is full flexible solution for your entire project development. You can easily maintain all of its module/components.
                                </p>
                                <ul>
                                    <li><i class="ion-android-checkbox-outline"></i>Neat n clean code structure.</li>
                                    <li><i class="ion-android-checkbox-outline"></i>Flexible module structure</li>
                                    <li><i class="ion-android-checkbox-outline"></i>Copy / Paste and Ready to use</li>
                                </ul>
                                <button class="btn btn-primary btn-action btn-fill">Learn More</button>
                            </div>
                        </div>
                    </div>
                    <div class="flex-split">
                        <div class="f-right">
                            <div class="right-content wow fadeInUp" data-wow-delay="0.2s">
                                <h2>Included Software Dependencies</h2>
                                <p>
                                    Bower - Grunt - Sass Dependencies for easy project flow management.
                                </p>
                                <ul>
                                    <li><i class="ion-android-checkbox-outline"></i>Grunt - No need to update plugins manually</li>
                                    <li><i class="ion-android-checkbox-outline"></i>Grunt - Less work you have to performance</li>
                                    <li><i class="ion-android-checkbox-outline"></i>Sass - Most Powerful CSS extension language</li>
                                </ul>
                                <button class="btn btn-primary btn-action btn-fill">Learn More</button>
                            </div>
                        </div>
                        <div class="f-left">
                            <div class="left-content wow fadeInUp" data-wow-delay="0.3s">
                                <img class="img-fluid" src="assets\images\feature_2.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="testimonial-section" id="reviews">
                <div class="container">
                    <div class="row text-center">
                        <div class="col-md-12">
                            <div class="testimonials owl-carousel owl-theme">
                                <div class="testimonial-single"><img class="img-circle" src="assets\images\testimonial2.jpg" alt="Client Testimonoal">
                                    <div class="testimonial-text wow fadeInUp" data-wow-delay="0.2s">
                                        <p>Totally flexible admin template. Easy to use and easy to manage all the elements in entire theme. <br class="hidden-xs"> Great support team behind this product. Low turnaround time with exact support which i needed.
                                        </p>
                                        <h3>Code Quality</h3>
                                        <h3> - amit1134 [Buyer - NZ]</h3>
                                        <i class="ion ion-star"></i>
                                        <i class="ion ion-star"></i>
                                        <i class="ion ion-star"></i>
                                        <i class="ion ion-star"></i>
                                        <i class="ion ion-star"></i>
                                    </div>
                                </div>
                                <div class="testimonial-single"><img class="img-circle" src="assets\images\testimonial1.jpg" alt="Client Testimonoal">
                                    <div class="testimonial-text">
                                        <p>The main reason for the Rating for Able pro admin template is that its is awesome template with tons of ready to use features.<br class="hidden-xs"> - Top quality - Regular updates - PHP version - Clean n Neat code
                                            - Saves lots of developing time
                                        </p>
                                        <h3>Flexibility</h3>
                                        <h3>- vishalmg [Buyer -India]</h3>
                                        <i class="ion ion-star"></i>
                                        <i class="ion ion-star"></i>
                                        <i class="ion ion-star"></i>
                                        <i class="ion ion-star"></i>
                                        <i class="ion ion-ios-star-half"></i>
                                    </div>
                                </div>
                                <div class="testimonial-single"><img class="img-circle" src="assets\images\testimonial3.jpg" alt="Client Testimonoal">
                                    <div class="testimonial-text">
                                        <p>5 stars are for the excellent support, that is brilliant! The design is very cool and the quality of code is excellent. <br class="hidden-xs">Compliments!</p>
                                        <h3>Code Quality</h3>
                                        <h3>- ab69aho [Buyer -Italy]</h3>
                                        <i class="ion ion-star"></i>
                                        <i class="ion ion-star"></i>
                                        <i class="ion ion-star"></i>
                                        <i class="ion ion-star"></i>
                                        <i class="ion ion-ios-star-half"></i>
                                    </div>
                                </div>
                                <div class="testimonial-single"><img class="img-circle" src="assets\images\testimonial2.jpg" alt="Client Testimonoal">
                                    <div class="testimonial-text">
                                        <p>The product is high end and high-end specialized assistance in solving problems. <br class="hidden-xs">I would highly recommend.</p>
                                        <h3>Customer Support</h3>
                                        <h3>- donpavulon [Buyer -US]</h3>
                                        <i class="ion ion-star"></i>
                                        <i class="ion ion-star"></i>
                                        <i class="ion ion-star"></i>
                                        <i class="ion ion-star"></i>
                                        <i class="ion ion-star"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Feature Image Big -->
            <div class="feature_huge text-center">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <img class="img-fluid wow fadeInUp" data-wow-delay="0.1s" src="assets\images\big_feature.png" alt="" style="max-width:100%">
                        </div>
                        <div class="col-md-12 feature_list">
                            <div class="row">
                                <div class="col-sm-4 wow fadeInUp" data-wow-delay="0.2s">
                                    <img src="assets\logos\feature_icon.png" alt="Feature">
                                    <h1>Tursted Product</h1>
                                    <p>
                                        We increasingly grow our talent and skills in admin dashboard development.
                                    </p>
                                </div>
                                <div class="col-sm-4 wow fadeInUp" data-wow-delay="0.4s">
                                    <img src="assets\logos\feature_icon_2.png" alt="Feature">
                                    <h1>Online Documentation</h1>
                                    <p>
                                        Documentation helps you in every steps on your entire project.
                                    </p>
                                </div>
                                <div class="col-sm-4 wow fadeInUp" data-wow-delay="0.6s">
                                    <img src="assets\logos\feature_icon_3.png" alt="Feature">
                                    <h1>Free Updates & Support</h1>
                                    <p>
                                        Fast and accurate outline during support. Low turnaround time.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Counter Section -->
            <div class="counter-section">
                <div class="container">
                    <div class="row text-center">
                        <div class="col-6 col-md-3">
                            <div class="counter-up">
                                <div class="counter-icon">
                                    <i class="ion-android-download"></i>
                                </div>
                                <h3><span class="counter">250</span>+</h3>
                                <div class="counter-text">
                                    <h4>Pages</h4>
                                </div>
                            </div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="counter-up">
                                <div class="counter-icon">
                                    <i class="ion-cube"></i>
                                </div>
                                <h3><span class="counter">1000</span>+</h3>
                                <div class="counter-text">
                                    <h4>UI Elements</h4>
                                </div>
                            </div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="counter-up">
                                <div class="counter-icon">
                                    <i class="ion-ios-people"></i>
                                </div>
                                <h3><span class="counter">500</span>+</h3>
                                <div class="counter-text">
                                    <h4>Form Elements</h4>
                                </div>
                            </div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="counter-up">
                                <div class="counter-icon">
                                    <i class="ion-ios-paper"></i>
                                </div>
                                <h3><span class="counter">80</span>+</h3>
                                <div class="counter-text">
                                    <h4>Widgets</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Counter Section Ends -->
            <div class="features-section">
                <!-- Feature section with flex layout -->
                <div class="f-left">
                    <div class="left-content wow fadeInLeft" data-wow-delay="0s">
                        <h2 class="wow fadeInLeft" data-wow-delay="0.1s">We are available for custom work development</h2>
                        <p class="wow fadeInLeft" data-wow-delay="0.2s">
                            We at Adminty available for custom work development with High end specialized developer.
                        </p>
                        <button class="btn btn-primary btn-action btn-fill wow fadeInLeft" data-wow-delay="0.2s">Click to send query</button>
                    </div>
                </div>
                <div class="f-right">
                </div>
            </div>
            <!-- Pricing Section -->
            <div class="pricing-section no-color text-center" id="pricing">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12 col-sm-12 ">
                            <div class="pricing-intro">
                                <h1 class="wow fadeInUp" data-wow-delay="0s">Pricing Table</h1>
                                <p class="wow fadeInUp" data-wow-delay="0.2s">
                                    Loream ipsum dummy text loream ipsum dummy text loream ipsum dummy text <br class="hidden-xs"> loream ipsum dummy text. Get the right plan that suits you.
                                </p>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="table-left wow fadeInUp" data-wow-delay="0.4s">
                                        <div class="icon">
                                            <img src="assets\logos\cart2.png" alt="Icon">
                                        </div>
                                        <div class="pricing-details">
                                            <h2>Beginner Plan</h2>
                                            <span>$5.90</span>
                                            <p>
                                                Pay little enjoy the product <br class="hidden-xs"> for life time.
                                            </p>
                                            <ul>
                                                <li>First basic feature </li>
                                                <li>Second feature goes here</li>
                                                <li>Any other third feature</li>
                                                <li>And the last one goes here</li>
                                            </ul>
                                            <button class="btn btn-primary btn-action btn-fill">Get Plan</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 ">
                                    <div class="table-right wow fadeInUp" data-wow-delay="0.6s">
                                        <div class="icon">
                                            <img src="assets\logos\cart1.png" alt="Icon">
                                        </div>
                                        <div class="pricing-details">
                                            <h2>Premium Plan</h2>
                                            <span>$19.99</span>
                                            <p>
                                                Pay only for what you use. Flexible <br class="hidden-xs"> payment options.
                                            </p>
                                            <ul>
                                                <li>First premium feature </li>
                                                <li>Second premium one goes here</li>
                                                <li>Third premium feature here</li>
                                                <li>Final premium feature</li>
                                            </ul>
                                            <button class="btn btn-primary btn-action btn-fill">Buy Now</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Client Section -->
            <div class="client-section">
                <div class="container text-center">
                    <div class="clients owl-carousel owl-theme">
                        <div class="single">
                            <img src="assets\logos\logo1.png" alt="">
                        </div>
                        <div class="single">
                            <img src="assets\logos\logo2.png" alt="">
                        </div>
                        <div class="single">
                            <img src="assets\logos\logo3.png" alt="">
                        </div>
                        <div class="single">
                            <img src="assets\logos\logo4.png" alt="">
                        </div>
                        <div class="single">
                            <img src="assets\logos\logo6.png" alt="">
                        </div>
                        <div class="single">
                            <img src="assets\logos\logo7.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <!-- Subscribe Form -->
            <div class="cta-sub text-center no-color">
                <div class="container">
                    <h1 class="wow fadeInUp" data-wow-delay="0s">New product notification subscription</h1>
                    <p class="wow fadeInUp" data-wow-delay="0.2s">
                        We sent you daily mail about product updates / releases / version change logs<br class="hidden-xs">Please write accurate email address below.
                    </p>
                    <div class="form wow fadeInUp" data-wow-delay="0.3s">
                        <form class="subscribe-form wow zoomIn" action="assets/php/subscribe.php" method="post" accept-charset="UTF-8" enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate="">
                            <input class="mail" type="email" name="email" placeholder="Email address" autocomplete="off"><input class="submit-button" type="submit" value="Subscribe">
                        </form>
                        <div class="success-message"></div>
                        <div class="error-message"></div>
                    </div>
                </div>
            </div>
            <!-- Footer Section -->
            <div class="footer">
                <div class="container">
                    <div class="col-md-12 text-center">
                        <img src="assets\logos\logo.png" alt="Adminty Logo"width=" 250em;">
                        <ul class="footer-menu">
                            <li><a href="http://demo.com">Site</a></li>
                            <li><a href="#">Support</a></li>
                            <li><a href="#">Terms</a></li>
                            <li><a href="#">Privacy</a></li>
                        </ul>
                        <div class="footer-text">
                            <p>
                                Copyright © 2020 SoengSouy. All Rights Reserved.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Scroll To Top -->
            <a id="back-top" class="back-to-top page-scroll" href="#main">
                <i class="ion-ios-arrow-thin-up"></i>
            </a>
            <!-- Scroll To Top Ends-->
        </div>
        <!-- Main Section -->
    </div>
    <!-- Wrapper-->

    <!-- Jquery and Js Plugins -->
    <script type="text/javascript" src="assets\js\jquery-2.1.1.js"></script>
    <script type="text/javascript" src="assets\js\bootstrap.min.js"></script>
    <script type="text/javascript" src="assets\js\plugins.js"></script>
    <script type="text/javascript" src="assets\js\menu.js"></script>
    <script type="text/javascript" src="assets\js\custom.js"></script>
</body>

</html>




Reactions

Post a Comment

0 Comments

close