Introduction
- Moonlit:Hotel and Resturant HTML Template
- Documentation: This folder contains what you are reading now.
Folder Structure:
- HTML Folder
- Documentation
File Structure:
- Page Structure:
- Component Structure:
Installation
Follow the below steps to get started with Moonlit:
- Unzip the downloaded package and open the /html folder to find all the template files. You will need to upload these files and sub folders to your hosting web server using FTP or file manager in order to use it on your website.
-
Below is the folder/files structure and needs to be uploaded to your website
root directory:
assets/css- Main stylesheet filesassets/fonts- Icon font filesassets/images- Classic images folder (use only images you need the reset can be safely deleted)assets/js- Javascripts folder (Functions, jquery, vendors etc)assets/swiper- Swiper slider library filesassets/scss- Master stylesheet SCSS filesassets/video- Video filesassets/*.html- All the templates
- Install a Localhost server on your PC/Laptop.
- Edit the files using a text based editor like VS Code (recommended) or Sublime text.
- Finalize the upload package and optionally you can run Gulp Tasks to minify your files.
- Upload your files to your servers in the public_html folder (Apache) or /var/www/html Folder (Nginx).
HTML Structure
Moonlit template is based on Bootstrap Framework (http://getbootstrap.com/) Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
Below is sample coding structure:
Moonlit - Hotel and Resturant HTML Template
Logo Settings
The logo container is in tag inside the header .
Image Setiings
Mokko download package does not contain actual images which are there in our online demo
due to licensing limitation and this is already mentioned in item description also as
per Envato policy. We are using placeholder images instead of real images. You can
replace placeholder image URL with your image URL like images/yourimage.jpg
and make sure to put the image in /images/ folder.
Color Scheme
It's easy to change the colours on your website. Simply use this short code to add your
colour scheme to the assets/css/style.css file:
:root {
/* Text Color */
--rts-para: #65676B;
--rts-heading: #000834;
--rts-black: #000000;
--rts-white: #FFFFFF;
--rts-gray: #F1F1F1;
/* Background Color */
--btn-1: #AB8A62;
--heading-color: #AB8A62;
--rts-border: rgba(125, 128, 135, 0.3);
--transparent: transparent;
--transition: all .4s ease;
--color-success: #26CF4B;
--color-danger: #FF0003;
--color-warning: #FF8F3C;
--color-info: #1BA2DB;
--color-facebook: #3B5997;
--color-twitter: #1BA1F2;
--color-youtube: #ED4141;
--color-linkedin: #0077B5;
--color-pinterest: #E60022;
--color-instagram: #C231A1;
--color-vimeo: #00ADEF;
--color-twitch: #6441A3;
--color-discord: #7289da;
/* typhography */
--glida: "Gilda Display", serif;
--jost: "Jost", sans-serif;
--fontawesome-pro: "Font Awesome 6 Pro";
--h1: 80px;
--h2: 60px;
--h3: 48px;
--h4: 40px;
--h5: 32px;
--h6: 24px;
--20: 20px;
--18: 18px;
--p: 16px;
--p-sm: 16px;
--p-xs: 14px;
}
[data-theme=dark] {
/* Text Color */
--body-bg: #2B2B2B;
--rts-para: #f8eeeccc;
--rts-heading: #fafafa;
--rts-black: #000000;
--rts-white: #1B1B1B;
--rts-gray: #F1F1F1;
/* Background Color */
--btn-1: #AB8A62;
--heading-color: #AB8A62;
--rts-border: rgba(125, 128, 135, 0.3);
--transparent: transparent;
--transition: all .4s ease;
}
Changing Fonts
Mokko uses 1 fonts: Neue Montreal from the Google Fonts Library. You can change the fonts from
assets/css/style.css file in below lines. If you want to use self hosted
fonts other than Google fonts then here is an article of self
hosted fonts to review. In this case you need to remove below lines and change
font names in assets/css/style.css file as per your fonts used.
:root {
/* typhography */
--glida: "Gilda Display", serif;
--jost: "Jost", sans-serif;
}
Using Google Fonts
If you wish to add or change your website fonts. You simply need to set your fonts in the
index.html and replace all page same as below. following code:
Theme Customization
We have included a demo CSS file inside the demos folder, as well as another folder niche
called style.css , so you can better manage your customizations while
updating Jobpath to the latest version. To add any custom CSS Codes, just add them to
the assets/css/style.css file.
Javascript
Jobpath comes with lots of helpful JavaScript plugins to make your website more
user-friendly. These plugins add useful features for your website visitors. We built the
JavaScript (JS) on a strong foundation using Object functions, making it sturdy and
efficient.
You can locate the JS plugin files in the assets/vendor/js
If you want to add custom js in your template. Just go to assets/js/main.js
HTTPs Compatibility
With the increasing threats of spam, phishing, and cyberattacks, securing your website
has never been more important. Jobpath offers a hassle-free solution, fully equipped to
support HTTPS right out of the box. Simply install the necessary HTTPS certificates,
with guidance from your web hosting provider.
Additionally, ensure that all external or absolute URLs for JavaScript, CSS, images, or
PHP files start with `https://` to maintain a secure connection. This practice
safeguards the information on your website, protecting private data from potential
risks.
Correct
Incorrect
Website Optimization Tips
Nowadays fast & optimized website is a must, so we would like to present some optimization tips below that can optimize your overall website speed:
Enable gZIP Compression
To reduce the amount of data transferred between your server and visitors, enable gZIP
compression for your images, CSS, and JavaScript files. This process compresses the
content on the server (similar to creating a ZIP file) before it's sent over the
Internet. Your browser then decompresses the content before displaying it, which
significantly reduces file sizes and speeds up page loading times.
To enable gZIP compression for your files, simply add the following lines to your
`.htaccess` file in the root HTML directory:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
Browser Caching
Leveraging browser caching allows you to specify how long your visitors' browsers should store cached copies of your images, CSS, JavaScript, and Flash files. When these resources are updated, your server will notify the browser, which will then replace the cached content with the new version. To enable browser caching, add the following lines to your `.htaccess` file:
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
CSS & JS Minification
Minifying your CSS and JavaScript files is highly recommended to reduce their file sizes and enhance loading speeds in the browser. Numerous online tools are available for this purpose. While we suggest the tools listed below, you are welcome to use any other tools of your choice.
NoteIf you are using Gulp.js provided in the Crafto package then it will minify CSS and JS files and hence you do not need to use the above tools.
Image Compression
Often, we upload large images to our websites without optimizing them, which can significantly slow down page load times. Large images take longer to download, potentially causing visitors to leave if your site takes more than 3-5 seconds to load, which can negatively impact your sales. Therefore, it’s essential to optimize images before uploading them to your website. Here are some suggestions to help improve image optimization:
- Resize Your Images: Adjust the size of your images to fit the space on your website. Avoid using large images for small areas—resize them to the appropriate dimensions before uploading.
- Choose the Right Image Format: Select the file type best suited for your images. Use
JPEGfor images with plain backgrounds,PNGfor images requiring transparency, andGIFfor animated images. - Compress Images: Reduce image file sizes without compromising quality by compressing them. Many free tools are available for this purpose:
- For Mac, try using ImageOptim.
- For Windows, consider Riot for compressing JPEG images and PNG Gauntlet for PNG images.
Header Customization
Jobpath has 6 Style Header options. So you can choose which one you want.
- Header Style 1
- Header Style 2
- Header Style 3
- Header Style 4
- Header Style 5
- Header Style 6
- Dropdown Menu
- Mobile Menu
Header Style 1
Header with absolute position
Header Style 2
Header with absolute position
Header Style 3
Header with absolute position
Header Style 5
Header with absolute position
Mobile Menu
Mobile Style
Welcome to Moonlit, where luxury meets comfort in the heart of canada. Since 1999, we have been dedicated to providing.
Sliders
All Sliders code showing here. We use only Swiper Slider
The Ritz-Carlton
100$
4. Blog
Blog section code showing here.
March 26, 2024
Amin
Forms
All the forms in this template are
Newsletter Form
Contact Form
Love to hear from you
Get in touch!
Blog Details Comment Form
Search Form
All the search forms in this template are, Please Note: All of the search of this template is same code but style are defferent.
Resturant Menu
Credit
We want to take a moment to express our deep appreciation to everyone whose contributions have helped us create the beautiful Jobpath theme for our amazing users.
Js Libraries
CSS Libraries & Fonts
5. Support
Support Scope
Included in Free Support Scope:
- Fixing bugs
- Helping clients in changing site contents by sending instructions that couldn’t be covered by documentation
NOT Included in Free Support Scope:
- Any type of custom changes
- Any type of request to update clients’ site contents
Paid Support Scope:
Paid support is not a part of Free Support when you purchase the template from themeforest. We understand that some clients need custom changes while using our template. For that we kept an option for paid support which includes:
- Custom change request
- Custom pages
- Custom features
We kept a flat rate for our paid support which is $25/hour.
Support Ticket
Please send your support request here. You will response within 1 business day.
Regards,
ThemeWant Support Team
Our Other Items
Our other items are available on ThemeWant
Leave a Comment