Frontend

Landing Page

  • Landing page is composed of familiar elements
  • The Ace's demo page is made up of a .jumbotron and .section elements, something like this: 
    
 
    
    
    
    
       Welcome!
  • An extra small CSS file is also used frontend.css which is compiled from assets/css/less/ace-frontend.less
  • A small CSS code in inside HEAD element which is used to specify background images.
  • Some custom Javascript code is at the end of page which is used to do the following optional actions:
    1. Make navbar compact as we scroll down
    2. Animated scrolling when a navbar link is clicked
    3. Change background image style according to window width (described below)
  • The top section .jumbotron contains the background image:
    In Ace's demo, this image is dynamically scaled when window is resized to fit window's width.
    However in smaller screens it will be hidden and a CSS background will be used instead so that we don't have a small background image.
    This is optional and you don't need to do this like. 
    $(window)
.on('resize.bg_update', function() {
    var width = $(window).width();

    if(width < 992) {
        $('.img-main-background').addClass('hide');
        $('.jumbotron').addClass('has-background');
    }
    else {
        $('.img-main-background').removeClass('hide');
        $('.jumbotron').removeClass('has-background');
    }
}).triggerHandler('resize.bg_update');
  • ace.js and ace-elements.js are not required

Coming Soon

  • Coming soon page is similar to landing page.
  • There is only timer element with following code: 
    
    
    26
    
    
    Minutes
  • A simple javascript to run the timer is at the end of page