Created:01/03/2018
By: WowThemez
Thank you for purchasing our landing page. If you have any questions that are beyond the scope of this help file, please contact our support. Thanks so much!
Below is the general HTML structure of the landing page.
The landing page's layout consist of top that show the logo and main menu, hero section that show background image, beforecontent that show some amaizing content, about section contain about your some info & feature, service section contained all services, work section you can showcase your portfolio with awesome animation, skills section here you can add some skills, team section is for your team members, testimonial section here you can published your customer reviews, call to action this for call to action content, contact section here you can put your contact information & footer that show copyright information.
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Xoom is a colofull app landing page where include awesome landing page demos.">
<meta name="author" content="WowThemez">
<title>Xoom | App Landing Page</title>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.png">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- Themify Icons CSS -->
<link rel="stylesheet" href="css/themify-icons.css">
<!-- Elegant Font Icons CSS -->
<link rel="stylesheet" href="css/elegant-font-icons.css">
<!-- Elegant Line Icons CSS -->
<link rel="stylesheet" href="css/elegant-line-icons.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Slicknav CSS -->
<link rel="stylesheet" href="css/slicknav.min.css">
<!-- animate CSS -->
<link rel="stylesheet" href="css/animate.min.css">
<!-- Venobox CSS -->
<link rel="stylesheet" href="css/venobox/venobox.css">
<!-- OWL-Carousel CSS -->
<link rel="stylesheet" href="css/owl.carousel.css">
<!-- Main CSS -->
<link rel="stylesheet" href="css/main.css">
<!-- Responsive CSS -->
<link rel="stylesheet" href="css/responsive.css">
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>
<body data-spy="scroll" data-target="#navmenu" data-offset="70">
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div id='preloader' >
<div class='loader' >
<div class="battery"></div>
</div>
</div><!-- Preloader -->
<header id="header" class="header_section">
</header> <!-- Header -->
<section id="home" class="hero_section gradiant_1 padding">
</section><!-- Hero Section -->
<section id="about" class="promo_section padding">
</section><!-- Promo Section -->
<section id="features" class="feature_section bg-grey padding">
</section><!-- Feature Section -->
<section id="video" class="video_section">
</section><!-- Video Section -->
<section id="screenshots" class="screenshot_section padding">
</section><!-- Screenshot Section -->
<section id="pricing" class="pricing_section bg-grey padding">
</section><!-- Pricing Section -->
<div id="counter" class="counter_section">
</div><!-- Counter Section -->
<section id="testimonial" class="testimonial_section bg-grey padding">
</section><!-- Testimonial Section -->
<section id="blog" class="blog_section padding">
</section><!-- Blog Section -->
<section id="download" class="download_section gradiant_1 padding">
</section><!-- Download Section -->
<div id="subscribe" class="subscribe_section padding">
</div><!-- Subscribe Section -->
<footer class="footer_section align-center">
</footer><!-- /.footer_section -->
<a data-scroll href="#header" id="scroll-to-top"><i class="arrow_carrot-up"></i></a>
<!-- jQuery Lib -->
<script src="js/vendor/jquery-1.12.4.min.js"></script>
<!-- Bootstrap JS -->
<script src="js/vendor/bootstrap.min.js"></script>
<!-- Tether JS -->
<script src="js/vendor/tether.min.js"></script>
<!-- waypoints js -->
<script src="js/vendor/jquery.waypoints.v2.0.3.min.js"></script>
<!-- Slicknav JS -->
<script src="js/vendor/jquery.slicknav.min.js"></script>
<!-- OWL-Carousel JS -->
<script src="js/vendor/owl.carousel.min.js"></script>
<!-- Counterup JS -->
<script src="js/vendor/jquery.counterup.min.js"></script>
<!-- Smooth Scroll JS -->
<script src="js/vendor/smooth-scroll.min.js"></script>
<!-- vendor JS -->
<script src="js/vendor/venobox.min.js"></script>
<!-- Ajaxchimp JS -->
<script src="js/vendor/jquery.ajaxchimp.min.js"></script>
<!-- Wow JS -->
<script src="js/vendor/wow.min.js"></script>
<!-- Main JS -->
<script src="js/main.js"></script>
</body>
</html>
The site is made of many sections like header, slider, testimonials, services and more...
<header id="header" class="header_section"> <nav class="navbar"> <div class="container"> <div class="navbar-header"> <button type="button" class="nav-btn navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="brand logo-dark"><img src="img/logo.png" alt="Aperture"></a> </div> <div id="navbar" class="collapse navbar-collapse navbar-right"> <ul class="nav navbar-nav nav-menu"> <li class="active"><a data-scroll href="#home">Home <span class="sr-only">(current)</span></a></li> <li><a data-scroll href="#features">Features</a></li> <li><a data-scroll href="#screenshots">Screenshots</a></li> <li><a data-scroll href="#pricing">Pricing</a></li> <li><a data-scroll href="#download">Download</a></li> <li><a data-scroll href="#testimonial">Reviews</a></li> <li><a data-scroll href="#blog">News</a></li> </ul> </div><!--/.navbar-collapse --> </div> </nav><!-- Navigation Bar --> </header> <!-- Header -->
<section id="home" class="hero_section gradiant_1 padding"> <div class="display-table"> <div class="table-cell"> <div class="container"> <div class="hero_content"> <h1>Showcase your app <br> with xoom</h1> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br> It has survived not only five centuries.</p> <a href="#" class="button_1">Download Now</a> </div> </div> <div class="hero_mockup d-none d-md-block"></div> </div> </div> </section><!-- Hero Section -->
<section id="about" class="promo_section padding"> <div class="container"> <div class="section_heading mb-40 align-center"> <h2>About xoom</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br> It has survived not only five centuries.</p> </div><!-- Section Heading --> <div class="row"> <div class="col-md-4 col-sm-6 xs-padding wow bounceInUp" data-wow-delay="0ms" data-wow-duration="800ms"> <div class="promo_content gradiant_2"> <img src="img/promo-1.png" alt="Promo"> <h3>Responsive Design</h3> <p>Lorem Ipsum is simply dummy text of the printing and industry.</p> </div> </div> </div> </div> </section><!-- Promo Section -->
<section id="features" class="feature_section bg-grey padding"> <div class="container"> <div class="section_heading mb-40 align-center"> <h2>Powerfull Feature</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br> It has survived not only five centuries.</p> </div><!-- Section Heading --> <div class="row"> <div class="col-md-4 col-sm-6"> <ul class="feature_list feature_left"> <li class="feature_content wow fadeInRight" data-wow-delay="0ms" data-wow-duration="800ms"> <i class="icon-mobile"></i> <h4 class="mb-10">Responsive Design</h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <span class="circle"></span> </li> <li class="feature_content wow fadeInRight" data-wow-delay="200ms" data-wow-duration="800ms"> <i class="icon-browser mb-10"></i> <h4 class="mb-10">Bootstrap 3.1</h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <span class="circle"></span> </li> <li class="feature_content wow fadeInRight" data-wow-delay="400ms" data-wow-duration="800ms"> <i class="icon-global"></i> <h4 class="mb-10">Cross Browser Support</h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <span class="circle"></span> </li> </ul> </div> <div class="col-md-4 mock-hide"> <img class="feature_mockup" src="img/mockup-2.png" alt="Feature"> </div> <div class="col-md-4 col-sm-6"> <ul class="feature_list"> <li class="feature_content wow fadeInLeft" data-wow-delay="0ms" data-wow-duration="800ms"> <i class="icon-hotairballoon"></i> <h4 class="mb-10">Simple frendly interface</h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <span class="circle"></span> </li> <li class="feature_content wow fadeInLeft" data-wow-delay="200ms" data-wow-duration="800ms"> <i class="icon-happy"></i> <h4 class="mb-10">Personalized user support</h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <span class="circle"></span> </li> <li class="feature_content wow fadeInLeft" data-wow-delay="400ms" data-wow-duration="800ms"> <i class="icon-chat"></i> <h4 class="mb-10">Great community</h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <span class="circle"></span> </li> </ul> </div> </div> </div> </section><!-- Feature Section -->
<section id="video" class="video_section"> <div class="display-table"> <div class="table-cell"> <div class="container"> <div class="video_content align-center"> <a href="#"><i class="fa fa-play"></i></a> <h3>Video Documentation</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br> It has survived not only five centuries.</p> </div> </div> </div> </div> </section><!-- Video Section -->
<section id="screenshots" class="screenshot_section padding"> <div class="container"> <div class="section_heading mb-40 align-center"> <h2>Xoom Screenshots</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br> It has survived not only five centuries.</p> </div><!-- Section Heading --> <div class="screen-shot-carousel owl-carousel owl-nav-2"> <div class="screen-shots"> <img src="img/screenshot-1.jpg" alt="screen-shots"> </div> </div> </div> </section><!-- Screenshot Section -->
<section id="pricing" class="pricing_section bg-grey padding"> <div class="container"> <div class="section_heading mb-40 align-center"> <h2>Xoom Pricing</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br> It has survived not only five centuries.</p> </div><!-- Section Heading --> <div class="row pricing_list"> <div class="col-md-4 col-sm-6 xs-padding wow bounceInUp" data-wow-delay="0ms" data-wow-duration="800ms"> <div class="pricing_table gradiant_2 align-center"> <div class="pricing_head "> <h4>Basic</h4> <h3>£29.00<span>/Month</span></h3> <h5>7/24 Support</h5> </div> <ul> <li>1 User</li> <li>1 Dashboard</li> <li>5 Projects</li> <li>Custom Domain</li> </ul> <div class="pricing_footer"> <a href="#" class="button_1 price_btn">Get Started</a> </div> </div> </div> </div> </div> </section><!-- Pricing Section -->
<div id="counter" class="counter_section"> <div class="container"> <ul class="row counters"> <li class="col-md-3 col-sm-6 sm-padding"> <div class="counter_content"> <i class="ti-download"></i> <h3 class="counter">85389</h3> <h4 class="text-white">Total Downloads</h4> </div> </li> </ul> </div> </div><!-- Counter Section -->
<section id="testimonial" class="testimonial_section bg-grey padding"> <div class="container"> <div class="section_heading mb-40 align-center"> <h2>What People Say</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br> It has survived not only five centuries.</p> </div><!-- Section Heading --> <ul id="testimonial_carousel" class="testimonial_items owl-carousel owl-nav-2"> <li class="testimonial_item"> <div class="client_thumb"> <img src="img/client-1.jpg" alt="client"> </div> <div class="testi_content"> <h4>Angelina Rose</h4> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </li> </ul> </div> </section><!-- Testimonial Section -->
<section id="blog" class="blog_section padding"> <div class="container"> <div class="section_heading mb-40 align-center"> <h2>Latest News</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br> It has survived not only five centuries.</p> </div><!-- Section Heading --> <div class="row blog_lists"> <div class="col-md-4 col-sm-6 xs-padding"> <div class="blog_content"> <div class="blog_top"> <img src="img/blog-1.jpg" alt="Blog"> <a href="#">January <span>01 2018</span></a> </div> <div class="blog_bottom"> <a href="#"><h3>How To Restart My Mobile.</h3></a> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <a class="read_more" href="#">Read More</a> </div> </div> </div> </div> </div> </section><!-- Blog Section -->
<section id="download" class="download_section gradiant_1 padding"> <div class="container"> <div class="download_content wow fadeInLeft" data-wow-delay="400ms" data-wow-duration="800ms"> <h3>Download Xoom Today</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br>It has survived not only five centuries.</p> <div class="btn_group"> <a href="#" class="download_btn"><i class="fa fa-android"></i><span>available on</span>Google Store</a> <a href="#" class="download_btn"><i class="fa fa-apple"></i><span>available on</span>Apple Store</a> </div> </div> </div> <div class="download_mockup"></div> </section><!-- Download Section -->
<div id="subscribe" class="subscribe_section padding"> <div class="container"> <div class="subscribe_wrap"> <form action="#" class="subscribe_form"> <input type="email" name="email" id="subs-email" class="form_input" placeholder="Enter Your Email Address..."> <button type="submit" class="button_1 submit">Subscribe</button> <div id="subscribe-result"> <p class="subscription-success"></p> <p class="subscription-error"></p> </div> </form> </div><!-- /.subscribe_wrap --> <div class="clearfix"></div> <ul class="social_link"> <li><a href="#"><i class="fa fa-facebook"></i></a></li> </ul><!-- /.social_link --> </div> </div><!-- Subscribe Section -->
<footer class="footer_section align-center"> <div class="container"> <p>© 2018 Xoom Powered by WowThemez</p> </div> </footer><!-- /.footer_section -->
These are the css files:
This theme use these Javascript files:
bootstrap.min.js
smooth-scroll.min.js
owl.carousel.min.js
jquery.ajaxchimp.min.js
jquery-1.12.4.min.js
jquery.mb.YTPlayer.min.js
owl.carousel.min.js
venobox.min.js
wow.min.js
jquery.counterup.min.js
main.js
You can edit the contact.js files. for setting contact form
There are only one php code for contact page which is contact.php, open this file and change the email and subject on line 24 and line 27. No need to edit other code unless you really want to.
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.
WowThemez