Mobirise-Templates-Header-Mobile-App.html

Mobirise-Templates-Header-Mobile-App.html

<section class="app-header">
    
    <mbr-parameters>
        <input type="checkbox" title="Show Title" name="showTitle" checked>
        <input type="checkbox" title="Show Text" name="showText" checked>
        <input type="checkbox" title="Show Buttons" name="showButtons">
        <input type="checkbox" title="Store Icons" name="si" checked>
        
        <fieldset type="background" name="bg" parallax>
            <input type="image" title="Background Image" value="https://i.imgur.com/6yqoChb.png" selected>
            <input type="color" title="Background Color" value="#7743ff">
        </fieldset>
        <input type="checkbox" title="Overlay" name="overlay" condition="bg.type !== 'color'">
        <input type="color" title="Overlay Color" name="overlayColor" value="#1b1b1b" condition="overlay && bg.type !== 'color'">
        <input type="range" inline title="Opacity" name="overlayOpacity" min="0" max="1" step="0.1" value="0" condition="overlay && bg.type !== 'color'">
          
    </mbr-parameters>
    
    
   <div class="mbr-overlay" mbr-if="overlay && bg.type !== 'color'" opacity="{{overlayOpacity}}" bg-color="{{overlayColor}}"></div> 
    
   <div class="container h-100">
      <div class="row h-100 align-items-center text-center">
         <div class="col-md-12 col-lg-7 header-content">
              <h1 class="mbr-section-title mbr-bold pb-3 mbr-fonts-style" mbr-theme-style="display-1" mbr-if="showTitle"><div>Mobile Application Landing Page</div></h1>
            <p class="mbr-text pb-4 mbr-fonts-style" mbr-theme-style="display-7" mbr-if="showText" data-app-selector=".mbr-text, .mbr-section-btn">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  
                </p>
             <p class="mt-3" mbr-if="si">
            <a href="https://www.learnwd.com/"><img alt="image" class="app-img mr-sm-2" src="https://i.imgur.com/qfkUjUG.png"></a>
            <a href="https://www.learnwd.com/"><img alt="image" class="app-img" src="https://i.imgur.com/3l5HBnC.png"></a>
          </p>
           <div mbr-buttons mbr-theme-style="display-4" class="mbr-section-btn" mbr-if="showButtons" data-toolbar="-mbrBtnMove"><a class="btn btn-md btn-secondary" href="https://www.learnwd.com/">Download Now</a>
                    <a class="btn btn-md btn-white-outline" href="https://www.learnwd.com/">Learn More</a></div>
         </div>
         <div class="col-md-10 col-lg-4 mx-auto p-4">
            <img alt="image" class="img-fluid" src="https://i.imgur.com/HQq52B4.png" title>
         </div>
      </div>
   </div>
</section>