Thank you very much for your purchase!
Introduction
Template Name: ORYO - Landing Page Template
Version: 1.0.0
Created On: 31 May 2020
Author: LettstartDesign
Email: support@lettstartdesign.com
ORYO - Landing Page Template is the complete package that was built to help you create a custom and unique user interface for your project.
With ORYO - Landing Page Template you’re not limited to creating a single web page. You’ll have over many pre-built page templates to choose from, covering many popular scenarios and content types. All the page templates are highly customizable.
ORYO - Landing Page Template is a responsive HTML template that is based on the CSS framework Bootstrap 4 and it is built with preprocessor SCSS. SCSS compiler makes it easier to code and customize. If you are unfamiliar with Bootstrap or SCSS, visit their website and read through the documentation. All of Bootstrap components have been modified to fit the style of creative and provide a consistent look throughout the template.
Before you start working with the template, we suggest you go through the pages that are bundled with the theme.
ORYO - Landing Page Template is packed with pages that come complete with documented code to simplify the customization process.
Thank you so much for choosing this template. Your comments and ratings would be highly appreciated. You have purchased this template so, you will get full support from us. We will update this template time to time and we want to hear from you for the future updates or for complete new templates. If you have any questions that are beyond the scope of this document, feel free to email at support@lettstartdesign.com
Template Features
- HTML5 & SCSS
- Bootstrap 4
- jQuery
- Gulp
- Responsive Design
- Contact Us integrated with PHP
- All form with validation
- Best Coding Standard followed
- Pixel Perfect Design
- Clean Code & Unique Design
- Easy to Customize
- Line Icons
- Google Font's
Installation
After unzip the download pack, you'll found a Template Folder(APP) with all the files (HTML Files + Assets).
You can view this Template in any browser, you can display or edit the Template without an internet connection.(May not works fonts).
After change in any files or you add any assets like javascript, css, images. You need to upload on the server. To upload file on server open your cpanel/controlpanel or open filezilla and upload the content/assets of the Template on your server's root directory.
Once changes are done upload on server using any FTP Client and Browse your domain www.yourdomainname.com/index.html
Folder Structure
You can directly use the compiled and ready-to-use the version of the template. But in case you plan to customize the template extensively the template allows you to do so.
Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:
-
APP ├──
-
-
├── Assets/
-
├── css
-
├── js
-
├── images
-
├── fonts
-
├── vendors
-
-
├── Contact Form PHP FIle
-
├── HTML FIles
-
-
Documentation ├──
-
-
gulpfile.js
-
package.json
Gulp Installation and SASS Compilation
You need to install SASS and Gulp as Dependencies for this project if you want to customize it. To do this, you must have Node in your computer. We have setup GULP and Package file in the folder just you need to follow the steps.
Follow below steps after node/npm installation:-
1. In the downloaded package, At root folder run command npm install using CMD.
2. To compile SASS file run command Gulp Watch at root folder using CMD. Now you can change any file it will refresh the page and compile SCSS file also.
Template Structure
All information within the main content area is nested within a body tag. The general template structure is pretty the same throughout the all template's. Here is the general structure of all the pages.
<!DOCTYPE html>
<html lang="zxx">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ORYO - Agency Landing Page Template</title>
<link rel="icon" href="assets/images/favicon.png">
<!-- Stylesheet -->
</head>
<body>
<!-- loader -->
<div class="fakeLoader"></div>
<!-- end loader -->
<!-- navbar -->
<nav class="navbar navbar-expand-md fixed-top">
<div class="container">
</div>
</nav>
<!-- end navbar -->
<!-- home intro -->
<div class="home-intro gray-200" data-scroll-index="1">
<div class="container">
</div>
</div>
<!-- end end intro -->
<!-- about -->
<div class="about section" data-scroll-index="2">
<div class="container">
</div>
</div>
<!-- end about -->
<!-- services -->
<div class="services section bg-grey" data-scroll-index="3">
<div class="container">
</div>
</div>
<!-- end services -->
<!-- portfolio -->
<div class="portfolio section" data-scroll-index="4">
<div class="container-fluid">
</div>
</div>
<!-- end portfolio -->
<!-- pricing -->
<div class="pricing section bg-grey" data-scroll-index="5">
<div class="container">
</div>
</div>
<!-- end pricing -->
<!-- testimonial -->
<div class="testimonial section" data-scroll-index="5">
<div class="container">
</div>
</div>
<!-- end testimonial -->
<!-- contact -->
<div id="contact" class="contact section bg-grey" data-scroll-index="6">
<div class="container">
</div>
</div>
<!-- end contact -->
<!-- footer -->
<footer>
<div class="container">
</div>
</footer>
<!-- end footer -->
<!-- footer bottom -->
<div class="footer-bottom">
<div class="container">
<div class="copyright">Copyright © All Right Reserved</div>
</div>
</div>
<!-- end footer bottom -->
<!-- JS script -->
</body>
</html>
CSS
| File | Description |
|---|---|
bootstrap.min.css |
creative uses the bootstrap v4.3.1. The core bootstrap file is being used in all the pages. |
style.css |
This file is containing all common styles for all the pages. |
JS
| File | Description |
|---|---|
main.js |
This is a main js file. It contains the custom JS code needed for features including layout, sidebar, etc. |
Fonts
By default, the template loads this font from Google Web Font Services, you can change the font with the one that suits you best.
@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900");
Body Font: Roboto
Remember to change the font into variable.scss
If you are using SCSS. Without using SCSS change in
style.css
Icons
Line Icons: <i class="lni lni-eye"></i>
Font Awesome Icons: <i class="fa fa-eye"></i>
References
| Term | Website |
|---|---|
| jQuery | http://jquery.com/ |
| Bootstrap | https://getbootstrap.com |
| Google Fonts | https://fonts.google.com/ |
| Magnific Popup | https://dimsemenov.com/plugins/magnific-popup/documentation.html |
| jQuery Validation | https://jqueryvalidation.org/ |
| Owl Carousel 2 | https://owlcarousel2.github.io/OwlCarousel2/index.html |
| Scroll It | http://www.bytemuse.com/scrollIt.js/ |
| Pixabay | https://pixabay.com/ |
| Unsplash | https://unsplash.com/ |
All images is used to show demo. Please use your own images
This Template is not WordPress Theme, and can’t be installed in WordPress.
Support
Once again thank you for your purchase. I'll be happy to answer the the questions you have related to the theme. In case if you have any suggestion or feature, request please feel free to contact me, I'll try to implement it and will release as part of future updates.
You can generate ticket on support or send me mail at support@lettstartdesign.com . Reply times can be up to 12 / 24 hours Monday to Sunday. Please be patient when posting an issue as i work (IST+00:00) time zone.