<!DOCTYPE html>
<html>
<head>
<title> Web Design </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://xofile.com/css/style.php?key=5OPYeoMOY50RFd1KaYTW">
<script>
  $("#navbarNav").on("click", "a", function() {
  $(".navbar-toggle").click();
  //or $("#nav").slideToggle();
});
</script>
</head>
<script type="text/javascript">
    (function(i, s, o, g, r, a, m) {
        i['GoogleAnalyticsObject'] = r;
        i[r] = i[r] || function() {
            (i[r].q = i[r].q || []).push(arguments)
        }, i[r].l = 1 * new Date();
        a = s.createElement(o),
            m = s.getElementsByTagName(o)[0];
        a.async = 1;
        a.src = g;
        m.parentNode.insertBefore(a, m)
    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

    ga('create', 'UA-96875843-3', 'auto');
    ga('send', 'pageview');
</script>
<style>

</style>
</head>
<body>

<nav id="navbar" class="navbar fixed-top navbar-expand-lg navbar-header navbar-mobile">
        <div class="navbar-container container">

            <div class="navbar-brand">
                <a class="navbar-brand-logo" href="#">
                    <img src="https://xofile.com/images/templates/1595230349.png" width="155px">
                </a>
            </div>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-around" id="navbarNav">
                <ul class="navbar-nav menu-navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#top">
                            <p class="nav-link-number"></p>
                            <p class="nav-link-menu">Home</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#services">
                            <p class="nav-link-number"></p>
                            <p class="nav-link-menu">Services</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#pricing">
                            <p class="nav-link-number"></p>
                            <p class="nav-link-menu">Pricing</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#clients">
                            <p class="nav-link-number"></p>
                            <p class="nav-link-menu">Clients</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#news">
                            <p class="nav-link-number"></p>
                            <p class="nav-link-menu">News</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contact">
                            <p class="nav-link-number"></p>
                            <p class="nav-link-menu">Contact</p>
                        </a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link learn-more-btn" href="#">Signup</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div id="top"></div>

    <div class="wrapper">
        <div class="header">
            <div class="container header-container">
                <div class="col-lg-6 header-img-section">
                    <img src="https://xofile.com/images/templates/1595230418.png">
                </div>
                <div class="col-lg-5 offset-lg-1 header-title-section">
                    <p class="header-subtitle">Multipurpose landing template</p>
                    <h1 class="header-title">Beautifully simple, code.</h1>
                    <p class="header-title-text">Codelander is a beautifully simple, clean and lightweight landing page template for all types of businesses, with bold and bright colours.</p>
                    <div class="learn-more-btn-section">
                        <a class="nav-link learn-more-btn btn-invert" href="#services">Learn More</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="strategy-section">
            <div class="strategy-section-bg-graphics-section">
                <img src="https://xofile.com/images/templates/1595230437.png">
            </div>
            <div class="container strategy-container">
                <div class="col-lg-3 col-md-6 col-xs-8 offset-xs-2 strategy-card-section">
                    <div class="strategy-card">
                        <div class="strategy-card-icon-section">
                            <img src="https://xofile.com/images/templates/1595230462.png">
                        </div>
                        <h2>Strategy</h2>
                        <p>We'll work with you to develop the right strategy</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-xs-8 offset-xs-2 strategy-card-section">
                    <div class="strategy-card">
                        <div class="strategy-card-icon-section">
                            <img src="https://xofile.com/images/templates/1595230478.png">
                        </div>
                        <h2>Automation</h2>
                        <p>Work synchronization and automated services</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-xs-8 offset-xs-2 strategy-card-section">
                    <div class="strategy-card">
                        <div class="strategy-card-icon-section">
                            <img src="https://xofile.com/images/templates/1595230491.png">
                        </div>
                        <h2>Deployment</h2>
                        <p>Dedicated servers to deploy and test applications</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-xs-8 offset-xs-2 strategy-card-section">
                    <div class="strategy-card">
                        <div class="strategy-card-icon-section">
                            <img src="https://xofile.com/images/templates/1595230526.png">
                        </div>
                        <h2>Education</h2>
                        <p>Stay informed on all our tools and technologies</p>
                    </div>
                </div>
            </div>
        </div>

        <div id="services"></div>

        <div class="services-section">
            <div class="services-section-bg-graphics">
                <img src="https://xofile.com/images/templates/1595231344.png">
            </div>
            <div class="container services-container">
                <div class="col-lg-5 services-title-section">
                    <p class="services-subtitle">Our services</p>
                    <h2 class="services-title">Solving Problems</h2>
                    <p class="services-text">This is a great section to introduce your company and showcase your featured services.</p>
                    <div class="services-accordion">
                        <button class="accordion">
                            Website Design
                        </button>
                        <div class="panel">
                            <p>
                                Some information on your web design and development services can go here. A few lines should do the trick.
                            </p>
                        </div>
                        <button class="accordion">
                            Application Development
                        </button>
                        <div class="panel">
                            <p>
                                More information on your application development services can go here, too. There's plenty of space available for you.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 offset-lg-1 services-header-img-section">
                    <img src="https://xofile.com/images/templates/1595231731.png">
                </div>
            </div>
        </div>

        <div class="services-sales-section">
            <div class="container services-container">
                <div class="col-lg-6 services-header-img-section padding-0">
                    <img src="https://xofile.com/images/templates/1595231360.png">
                </div>
                <div class="col-lg-5 offset-lg-1 services-title-section">
                    <p class="services-subtitle">Our services</p>
                    <h2 class="services-title">Sales Growth</h2>
                    <p class="services-text">You can talk about your secondary services here, or maybe promote your excellent customer service approach. Always grab your website visitors' attention.</p>
                    <div class="learn-more-btn-section">
                        <a class="nav-link learn-more-btn btn-invert" href="#pricing">View Pricing</a>
                    </div>
                </div>
            </div>
        </div>

        <div id="pricing"></div>

        <div class="pricing-section">
            <div class="pricing-section-left-bg-graphics">
                <img src="https://xofile.com/images/templates/1595231386.png">
            </div>
            <div class="pricing-section-right-bg-graphics">
                <img src="https://xofile.com/images/templates/1595231402.png">
            </div>
            <div class="container pricing-container">
                <div class="pricing-title">
                    <h2>Pricing</h2>
                    <p>Offer multiple packages or monthly subscriptions? Why not showcase your featured price plans here, bold and beautifully.</p>
                </div>

                <div class="pricing-plan-cards-section">
                    <div class="col-lg-4 col-md-8 col-xs-10 pricing-card-section">
                        <div class="pricing-card">
                            <p class="pricing-rate">$199</p>
                            <p class="pricing-period">Basic</p>
                            <p class="pricing-text">Starter plan with all the basics included</p>
                            <div class="pricing-all-plan-features-section basic-plan-features-section">
                                <ul>
                                    <li>Core Business System</li>
                                    <li>Team Management</li>
                                    <li>Dual Infrastructure</li>
                                    <li>Customized Features</li>
                                </ul>
                            </div>
                            <a class="nav-link learn-more-btn" href="#contact">Enquire</a>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-8 col-xs-10 pricing-card-section">
                        <div class="pricing-card featured">
                            <p class="pricing-rate">$499</p>
                            <p class="pricing-period">Growth</p>
                            <p class="pricing-text">The sensible option for growing companies</p>
                            <div class="pricing-all-plan-features-section medium-plan-features-section">
                                <ul>
                                    <li>Core Business System</li>
                                    <li>Team Management</li>
                                    <li>Dual Infrastructure</li>
                                    <li>Customized Features</li>
                                </ul>
                            </div>
                            <a class="nav-link learn-more-btn" href="#contact">Enquire</a>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-8 col-xs-10 pricing-card-section">
                        <div class="pricing-card">
                            <p class="pricing-rate">$1299</p>
                            <p class="pricing-period">Corporate</p>
                            <p class="pricing-text">Everything a global company needs</p>
                            <div class="pricing-all-plan-features-section advance-plan-features-section">
                                <ul>
                                    <li>Core Business System</li>
                                    <li>Team Management</li>
                                    <li>Dual Infrastructure</li>
                                    <li>Customized Features</li>
                                </ul>
                            </div>
                            <a class="nav-link learn-more-btn" href="#contact">Enquire</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="clients"></div>

        <div class="clients-section">
            <div class="container clients-container">
                <div class="clients-title-section">
                    <p class="clients-subtitle">Our clients</p>
                    <h2 class="clients-title">Client Showcase</h2>
                </div>
                <div class="clients-slider">
                    <div class="owl-carousel owl-theme clients-slider-section">
                        <div class="item client-logo-section">
                            <img src="https://xofile.com/images/templates/1595231428.png">
                        </div>
                        <div class="item client-logo-section">
                            <img src="https://xofile.com/images/templates/1595231443.png">
                        </div>
                        <div class="item client-logo-section">
                            <img src="https://xofile.com/images/templates/1595231455.png">
                        </div>
                        <div class="item client-logo-section">
                            <img src="https://xofile.com/images/templates/1595231465.png">
                        </div>
                        <div class="item client-logo-section">
                            <img src="https://xofile.com/images/templates/1595231428.png">
                        </div>
                        <div class="item client-logo-section">
                            <img src="https://xofile.com/images/templates/1595231443.png">
                        </div>
                        <div class="item client-logo-section">
                            <img src="https://xofile.com/images/templates/1595231465.png">
                        </div>
                        <div class="item client-logo-section">
                            <img src="https://xofile.com/images/templates/1595231465.png">
                        </div>
                        <div class="item client-logo-section">
                            <img src="https://xofile.com/images/templates/1595231428.png">
                        </div>
                        <div class="item client-logo-section">
                            <img src="https://xofile.com/images/templates/1595231443.png">
                        </div>
                        <div class="item client-logo-section">
                            <img src="https://xofile.com/images/templates/1595231465.png">
                        </div>
                        <div class="item client-logo-section">
                            <img src="https://xofile.com/images/templates/1595231465.png">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="news"></div>

        <div class="blog-section">
            <div class="blog-section-right-bg">
                <img src="https://xofile.com/images/templates/1595231543.png">
            </div>
            <div class="blog-section-left-bg">
                <img src="https://xofile.com/images/templates/1595231563.png">
            </div>
            <div class="container blog-container">
                <div class="blog-title-section">
                    <p class="blog-subtitle">Recent updates</p>
                    <h2 class="blog-title">Featured Stories</h2>
                </div>
                <div class="blog-posts-section">
                    <div class="col-lg-4 col-md-8 col-xs-10 blog-post-card-container">
                        <div class="blog-post-card">
                            <div class="blog-post-icon">
                                <img src="https://xofile.com/images/templates/1595231578.png">
                            </div>
                            <h3 class="blog-post-title">Remote Working</h3>
                            <p class="blog-post-text">Making it easier to connect with every client worldwide</p>
                            <a class="blog-post-link" href="#news">Read More</a>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-8 col-xs-10 blog-post-card-container">
                        <div class="blog-post-card">
                            <div class="blog-post-icon mb-4">
                                <img src="https://xofile.com/images/templates/1595231588.png">
                            </div>
                            <h3 class="blog-post-title">Google Rankings</h3>
                            <h4 class="blog-post-subtitle">Keywords</h4>
                            <p class="blog-post-text mb-4">We've ranked number one on Google for multiple keywords. Read about our SEO strategies</p>
                            <a class="nav-link learn-more-btn" href="#news">Read More</a>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-8 col-xs-10 blog-post-card-container">
                        <div class="blog-post-card">
                            <div class="blog-post-icon">
                                <img src="https://xofile.com/images/templates/1595231601.png">
                            </div>
                            <h3 class="blog-post-title">Communication</h3>
                            <p class="blog-post-text">We've made our client support services easy to access</p>
                            <a class="blog-post-link" href="#news">Read More</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="contact"></div>

        <div class="contact-section">
            <div class="container contact-container">
                <div class="col-md-6 contact-title-section">
                    <p class="contact-subtitle">Contact</p>
                    <h2 class="contact-title">Questions?<br>Get in touch</h2>
                    <p class="contact-text">We'll be happy to help answer any of your questions. Send us an email and we'll get back to you shortly.</p>
                    <div class="learn-more-btn-section">
                        <a class="nav-link learn-more-btn btn-invert" href="#">Send an Email</a>
                    </div>
                </div>
                <div class="col-md-6 contact-header-img">
                    <img src="https://xofile.com/images/templates/1595231769.png">
                </div>
            </div>
        </div>

        <div class="footer-section">
            <div class="footer-section-bg-graphics">
                <img src="https://xofile.com/images/templates/1595232736.png">
            </div>

            <div class="container footer-container">
                <div class="col-lg-3 col-md-6 footer-logo">
                    <img src="https://xofile.com/images/templates/1595231629.png">
                    <p class="footer-susection-text">A beautiful landing page template by Codefest.</p>
                </div>
                <div class="col-lg-3 col-md-6 footer-subsection">
                    <div class="footer-subsection-2-1">
                        <h3 class="footer-subsection-title">About</h3>
                        <p class="footer-subsection-text">We like to do business at Codelander HQ to our clients' satisfaction.</p>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6 footer-subsection">
                    <h3 class="footer-subsection-title">Contact Us</h3>
                    <ul class="footer-subsection-list">
                        <li>123 Business Centre<br>London SW1A 1AA</li>
                        <li>0123456789</li>
                        <li><a href="#" class="__cf_email__" data-cfemail="83eee2eaefc3e7eceee2eaedade0ecee">[email&#160;protected]</a></li>
                    </ul>
                </div>

                <div class="col-lg-3 col-md-6 footer-subsection">
                    <div class="footer-subsection-2-2">
                        <h3 class="footer-subsection-title">Socials</h3>
                        <div class="footer-social-media-icons-section">
                            <a href="#top" class="footer-social-media-icon"><i class="fa fa-twitter"></i></a>
                            <a href="#top" class="footer-social-media-icon"><i class="fa fa-instagram"></i></a>
                            <a href="#top" class="footer-social-media-icon"><i class="fa fa-facebook"></i></a>
                            <a href="#top" class="footer-social-media-icon"><i class="fa fa-linkedin"></i></a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="container footer-credits">
                <p>&copy; 2020 <a href="#" target="_blank" title="Codefest">Xofile.com</a>&trade;. All Rights Reserved.</p>
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script type="text/javascript">
        $(window).scroll(function() {
            if ($(this).scrollTop() > 20) {
                $('#navbar').addClass('header-scrolled');
            } else {
                $('#navbar').removeClass('header-scrolled');
            }
        });
    </script>
    <script>
        $(document).ready(function() {
            $(".owl-carousel").owlCarousel({
                items: 4,
                loop: true,
                nav: true,
                autoplay: true,
                autoplayTimeout: 2000,
                autoplayHoverPause: true,
                responsiveClass: true,
                responsive: {
                    0: {
                        items: 1
                    },
                    600: {
                        items: 3
                    },
                    1000: {
                        items: 4
                    }
                }
            });
        });
    </script>

<script>



    document.body.innerHTML += `  `;
    document.body.innerHTML += `  `;
$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}

</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>