HotelPrive - Hotel & Resort

HTML template


Thank you for purchasing my template. If you have any questions that are beyond the scope of this help file, please feel free to contact us via Ticksy Support System. Thanks so much!

You have bought HTML template and we expect that you have basic HTML and CSS knowledge. If you are not expert, you can always find Basic HTML and CSS knowledge here

https://www.w3schools.com/html/

https://www.w3schools.com/css/

The template has 98 HTML files:

 

Template has different headers and footers. You can find them on different Homepages.

What should you do if you want to use Header 2 from Home Page 2 on all Pages?

Open home_2.html
Search my comment
<!-- - - - - - - - - - - - - - Header - - - - - - - - - - - - - - - - --> and select code till <!-- - - - - - - - - - - - - end Header - - - - - - - - - - - - - - - -->

Copy this code

 

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <!--================ Basic page needs ================-->
    
    <!--================ Mobile specific metas ================-->
 
    <!--================ Google web fonts ================-->
 
 
    <!--================ Vendor CSS ================-->
   
   
    <!--================ Theme CSS ================-->
   

    <!--================ Vendor JS ================-->
  </head>

  <body>
   
      <!--================ Header ================-->
     
                <!--================ Navigation ================-->
              
              
                      <!--================ Sub Menu ================-->
                     
                    
                      <!--================ End of Sub Menu ================-->
                   
                   
                      <!--================ Sub Menu ================-->
                     
                    
                          <!--================ Sub Menu ================-->
                          
                          
                          <!--================ End of Sub Menu ================-->
                      
                      
                          <!--================ Sub Menu ================-->
                          
                          
                          <!--================ End of Sub Menu ================-->
                        
                        
                          <!--================ Sub Menu ================-->
                          
                          
                          <!--================ End of Sub Menu ================-->
                        
                        
                          <!--================ Sub Menu ================-->
                          
                          
                          <!--================ End of Sub Menu ================-->
                       
                      <!--================ End of Sub Menu ================-->
                    
                    
                      <!--================ Sub Menu ================-->
                      
                          <!--================ Sub Menu ================-->
                         
                        
                          <!--================ End of Sub Menu ================-->
                      
                      
                      <!--================ End of Sub Menu ================-->
                  
                      <!--================ Sub Menu ================-->
                      
                      
                          <!--================ Sub Menu ================-->
                         
                          <!--================ End of Sub Menu ================-->
                       
                          <!--================ Sub Menu ================-->
                         
                          <!--================ End of Sub Menu ================-->
                        
                      <!--================ Sub Menu ================-->
                      
                          <!--================ Sub Menu ================-->
                        
                          <!--================ End of Sub Menu ================-->
                       
                          <!--================ Sub Menu ================-->
                         
                          <!--================ End of Sub Menu ================-->
                        
                      <!--================ End of Sub Menu ================-->
                   
                <!--================ End of Navigation ================-->
               
      <!--================ End of Header ================-->
      <!--================ Slider Revolution ================-->
      
            <!--================ Slide 1 ================-->
           
              <!-- MAIN IMAGE -->
              
              <!--================ Layer ================-->
             
              <!--================ End of Layer ================-->
              <!--================ Layer ================-->
              
              <!--================ End of Layer ================-->
              <!--================ Layer ================-->
              
              <!--================ End of Layer ================-->
            
            <!--================ End of Slide 1 ================-->
            <!--================ Slide 1 ================-->
            
              <!--================ Layer ================-->
              
              <!--================ End of Layer ================-->
              <!--================ Layer ================-->
             
              <!--================ End of Layer ================-->
              <!--================ Layer ================-->
             
              <!--================ End of Layer ================-->
          
            <!--================ End of Slide 1 ================-->
            <!--================ Slide 1 ================-->
           
              <!-- MAIN IMAGE -->
              
              <!--================ Layer ================-->
              
              <!--================ End of Layer ================-->
              <!--================ Layer ================-->
             
              <!--================ End of Layer ================-->
              <!--================ Layer ================-->
              
              <!--================ End of Layer ================-->

            <!--================ End of Slide 1 ================-->
         
      <!--================ End of Slider Revolution ================-->
      
            <!--================ Icon Boxes ================-->
           
                <!--================ Icon Box ================-->
               
                <!--================ End of Icon Box ================-->
              
                <!--================ Icon Box ================-->
                
                <!--================ End of Icon Box ================-->
             
                <!--================ Icon Box ================-->
               
                <!--================ End of Icon Box ================-->
              
                <!--================ Icon Box ================-->
                
                <!--================ End of Icon Box ================-->
              
                <!--================ Icon Box ================-->
                
                <!--================ End of Icon Box ================-->
            
            <!--================ End of Icon Boxes ================-->
         
              <!--================ Entity ================-->
              
              <!--================ End of Entity ================-->
           
              <!--================ Entity ================-->
              
              <!--================ End of Entity ================-->
           
              <!--================ Entity ================-->
             
              <!--================ End of Entity ================-->
           
            <!--================ Testimonials ================-->
           
                <!-- owl item -->
                
                <!-- / owl item -->
                <!-- owl item -->
                
                <!-- / owl item -->
                <!-- owl item -->
                
                <!-- / owl item -->

            <!--================ End of Testimonials ================-->
        
                <!--================ Partners ================-->
             
                    <!--================ Partners Item ================-->
                   
                    <!--================ End of Partners Item ================-->
                
                    <!--================ Partners Item ================-->
                    
                    <!--================ End of Partners Item ================-->
                 
                    <!--================ Partners Item ================-->
                   
                    <!--================ End of Partners Item ================-->
                
                    <!--================ Partners Item ================-->
                   
                    <!--================ End of Partners Item ================-->
                
                <!--================ End Of Partners ================-->
              
                <!--================ Entity ================-->
                
                <!--================ End of Entity ================-->
              
                <!--================ Entity ================-->
                
                <!--================ End of Entity ================-->
              
            <!--================ Icon Boxes ================-->
           
                <!--================ Icon Box ================-->
                
                <!--================ End of Icon Box ================-->
              
                <!--================ Icon Box ================-->
               
                <!--================ End of Icon Box ================-->
              
                <!--================ Icon Box ================-->
                
                <!--================ End of Icon Box ================-->
             
            <!--================ End of Icon Boxes ================-->
        
      <!--================ Footer ================-->
    
        <!--================ Footer row ================-->
        
                <!--================ Widget ================-->
          
                <!--================ End of Widget ================-->
            
                <!--================ Widget ================-->
               
                <!--================ End of Widget ================-->
              
                <!--================ Widget ================-->
               
                <!--================ End of Widget ================-->
              
                <!--================ Widget ================-->
               
                <!--================ End of Widget ================-->
             
                <!--================ Widget ================-->
                
                <!--================ End of Widget ================-->
            
        <!--================ End of Footer row ================-->
    
      <!--================ End of Footer ================-->
    </div>
   </body>
</html>

 

We use Google fonts

https://fonts.google.com/specimen/Old+Standard+TT
https://fonts.google.com/specimen/Open+Sans
https://fonts.google.com/specimen/Playfair+Display
https://www.freebestfonts.com/anglecia-pro-display-font
https://fonts.googleapis.com/css2?family=Roboto


For sure you can change  fonts. Select needed fonts, and copy embed code on our pages

You can see commented code

  <!-- Google Web Fonts
  ================================================== -->
<link
href="https://fonts.googleapis.com/css?family=Old+Standard+TT:400,400i,700|Open+Sans:200,300,400,400i,600,600i,700,700i,800,800i|Playfair+Display:400,400i,700,700i,900,900i"
rel="stylesheet">

 

 

Replace our code with yours

After open css/style.css and make auto-replace


font-family: "Anglecia", sans-serif;

with your font

 

This template uses 7 css files:




The main style.css has such structure:

 

/* ----------------------------------------
    Stylesheet Guide
 ------------------------------------------

    1. Base
    2. Layout
    3. Components
    4. Pages

---------------------------------------------------------- */

This template includes 33 Javascript files.

  1. mad.app.js

  2. mad.alert-box.js

  3. mad.contact-form.js

  4. mad.events-calendar.js

  5. mad.isotope.js

  6. mad.newsletter-form.js

  7. mad.sidebar-hidden.js

  8. mad.sticky-header-section.js

  9. elevatezoom.min.js

  10. handlebars-v4.0.5.js

  11. isotope.pkgd.min.js

  12. jquery-3.3.1.min.js

  13. jquery.easing.1.3.js

  14. jquery.parallax-1.1.3.js

  15. mad.customselect.js

  16. modernizr.js

  17. monkeysan.accordion.js

  18. monkeysan.counters.js

  19. monkeysan.jquery.nav.1.0.js

  20. monkeysan.tabs.js

  21. monkeysan.validator.min.js

  22. retina.min.js

  23. jquery.arcticmodal-0.3.min.js

  24. jquery.countdown.js

  25. jquery.plugin.js

  26. jquery.fancybox.js

  27. jquery-ui.js

  28. monkeysan-jquery-tooltip.js

  29. owl.carousel.js

  30. jquery.themepunch.enablelog.js

  31. jquery.themepunch.revolution.min.js

  32. jquery.themepunch.tools.min.js

  33. tweetie.min.js

 

 

Don't worry. if you are testing on local server you need to include extensions of revolution slider (you do not need to include on live server).

Add this after revolution slider script (at the bottom of page)
<script type="text/javascript" src="vendors/revolution/js/extensions/revolution.extension.slideanims.min.js"></script>
<script type="text/javascript" src="vendors/revolution/js/extensions/revolution.extension.layeranimation.min.js"></script>
<script type="text/javascript" src="vendors/revolution/js/extensions/revolution.extension.navigation.min.js"></script>

 

 

 

 

 

Don't worry. if you are testing on locally, you see wrong colors or different icons size, because script is blocked locally. When you upload work on the real server, everything will be fine.

 

 

 

If you want to change slider settings, for example, you want switch on/off autoslideshow or change time delay you can find all slider settings here js/mad.app.js


For carousels we use OwlCarousel. Full Documentation you can find here https://owlcarousel2.github.io/OwlCarousel2/docs/started-welcome.html
For Slider we use Revolution Slider. Full documentation is here
https://www.themepunch.com/revsliderjquery-doc/slider-revolution-jquery-5-x-documentation/

 
If you are looking for global slider settings open js/mad.app.js and search

 


            if($revSlider1.length && $.fn.revolution) {
                revApi1 = $revSlider1.show().revolution({
                    dottedOverlay: 'mad',
                    disableProgressBar: "on",
                    spinner: 'spinner3',
                    gridwidth: [1440, 1024, 1024, 580],
                    gridheight: [1080, 1080, 1080, 1080],
                    responsiveLevels: [1440, 1024, 813, 580],
                    navigation: {
                        keyboardNavigation: 'on',
                        keyboard_direction: 'horizontal',
                        onHoverStop: 'false',
                        arrows: {
                            enable: false,
                        },
                        bullets: {
                            enable: true,
                            style: 'mad',
                            hide_onleave: false,
                            h_align: 'center',
                            v_align: 'bottom',
                            direction: 'horisontal',
                            h_offset: 0,
                            v_offset: 64                        
                        }
                    }
                });
            }

When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place. Read more here: http://imulus.github.io/retinajs/

if you want to remove preloader, open your HTML and remove <div class="mad-preloader"></div>

and open js/mad.app.js and search and remove Preloader function

To change a contact form and subscribe emails open php/contact.php, subscribe.php and insert you email

$your_email = ' enter your email address here ';

Open js/mad.app.js and search

 

 /* ----------------------------------------
            Google Maps
        ---------------------------------------- */

            if ($('#googleMap').length) {

                function loadMap() {
                    var mapProp = {
                        center: { lat: 51.503454, lng: -0.124755 },
                        zoom: 14,
                        mapTypeId: google.maps.MapTypeId.ROADMAP,
                        styles: [{ featureType: 'all', stylers: [{ saturation: -100 }, { gamma: 0.0 }] }]
                    };

                    var map = document.getElementById('googleMap');

                    if (map !== null) {

                        var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

                    }

                    var marker = new google.maps.Marker({
                        position: { lat: 51.503454, lng: -0.124755 },
                        map: map,
                        icon: 'images/map_marker.png'
                    });

                    marker.setMap(map);

                    //Zoom to 7 when clicked on marker
                    google.maps.event.addListener(marker, 'click', function () {
                        map.setZoom(9);
                        map.setCenter(marker.getPosition());
                    });

                }

 

Change coordinates. You can generate new coordinates here

https://www.gps-coordinates.net/
 
You have to generate and replace Google Map API key for your site.

 

 

This key you can find at the end of page. Generate own key and apply for your domain
It's free. Paid version is applied if you have more than 100 000 requests per month only
Read how to create key

https://www.wpgmaps.com/documentation/creating-a-google-maps-api-key/

First, create your own keys at the https://dev.twitter.com/. Create your own application and generate keys for you domain.

Second, open the \vendors\tweetie\api\php\config.php file and replace the current keys with yours:
 
  // Consumer Key
  define('CONSUMER_KEY', '5lBLmxvrzhlZGTxcz6RkF1Med');
  define('CONSUMER_SECRET', 'V0uOfFo6ESoSJNVy4Y8XbUw1JZrR0k75dqEMvZrhTWHtjwuVEF');

  // User Access Token
  define('ACCESS_TOKEN', '19443134-Ail1hWZeskhEe2AKuthkkSHwsoomtBqhkErEMKYhe');
  define('ACCESS_SECRET', 'XGoWJEKgWoI4zi20qew72HuKATv3BUrgq2kYsXITYuc1x');

 

Very often customers ask me about the Best Hosting.
I recommend BlueHost.com

 I've used the following scripts:


 


Clipart for the preview was bought from http://depositphotos.com and https://unsplash.com/

IMPORTANT: clipart is not included in the stock file.