Custom HTML

osbert

Hello Joomlart, i'm wondering how i can achieve this result using custom html. Please help. I'm using Ja Uber

Hello

paulus1031

Hi There,

Do the bar graphs animate?

Cheers
Paul

osbert

paulus1031 Well, yes, but i don't mind if they don't. This look and feel sits well with me and i want to mimic same presentation of the content but cant do it in custom html. please help me with the html format

pavit

Hi osbert

Could you post the url from where you taked that screenshot ?

osbert

pavit Okay. This is the url: http://www.filemaker.com

pavit

Hi osbert

Adding style for such custom-html will be not simple , it depends on wich template you want to use it

Below you can find the html for that :

<div id="why-use-custom-apps" class="section-wrapper why-use-custom-companies">
      <div class="section-width">
        <div class="section">
          <div class="row">
            <div class="column small-12 medium-12 large-6" id="why-custom-app">
             
								<div class="column-content" >
              	<h3>Why use a custom app?</h3>
                <p>Business managers, developers, and IT professionals, just like you, use custom apps to streamline operations and to instantly boost productivity.</p>
                <div class="progressbars">
										<p>Reduction in inefficient tasks</p>
										<div class="bar">
											<div class="progress progress-bar-1"></div>
										</div><!-- /bar -->
										<div class="percentage percentage-1">93</div>
										
            		</div><!-- /progress-bars -->
									<div class="clear"></div>
									<div class="progressbars">
										<p>Increase in team productivity</p>    
										<div class="bar">
											<div class="progress progress-bar-2"></div>
										</div><!-- /bar -->
										<div class="percentage percentage-2">91</div><!--91-->
									</div><!-- /progress-bars -->
            		<div class="clear"></div>
									<div class="progressbars">
										<p>Reduction in data entry</p>
										<div class="bar">
												<div class="progress progress-bar-3"></div>
										</div><!-- /bar -->
										<div class="percentage percentage-3">77</div><!--77-->
									</div><!-- /progress-bars -->
             		
             		 <p class="p9 rift">Source: State of the Custom App Report 2018: A survey of how businesses are using and benefiting from custom apps. FileMaker, Inc.</p>
             		 <a class="icon icon-after more" href="//fmdl.filemaker.com/MISC/docs/resources/2018-stateofthecustomapps/2018-stateofthecustomapps-en.pdf">State of the Custom App Report 2018</a>
              </div><!-- //column-content -->
            </div><!-- //column -->
            <div class="column small-12 medium-12 large-6" id="companies-use-fm">
              <div class="column-content">
              	<h3>Global Fortune 500 Companies use the FileMaker Platform.</h3>
                <p class="rift">Businesses of all types use the FileMaker Platform because it’s the easiest and most affordable way to create a custom app that solves your everyday challenges.</p>
                <h5>FileMaker customers:</h5>
                <p class="p5 fm-customers-spacing">Toyota&nbsp;Motor, Berkshire&nbsp;Hathaway, Honda&nbsp;Motor,<br class="xl-lg-m-display"/>
                  Costco, Panasonic, Nissan&nbsp;Motor, Chevron,<br class="xl-lg-m-display"/>
                  BMW&nbsp;Group, Home&nbsp;Depot, Wells&nbsp;Fargo, <br class="xl-lg-m-display"/>Nippon
                  Telegraph&nbsp;&&nbsp;Telephone, Hitachi, Citigroup,<br class="xl-lg-m-display"/>
                  Fujitsu, Deutsche&nbsp;Telekom, Comcast,<br class="xl-lg-m-display"/>
                  Johnson&nbsp;&&nbsp;Johnson, Procter&nbsp;&&nbsp;Gamble, PepsiCo,<br class="xl-lg-m-display"/>
                  UPS, Intel, FedEx, Cisco&nbsp;Systems, HP,<br class="xl-lg-m-display"/>
                  Christian&nbsp;Dior, Coca-Cola, American&nbsp;Airlines&nbsp;Group,<br class="xl-lg-m-display"/>
                  Merck, Delta&nbsp;Air&nbsp;Lines, and many more.</p>
              </div><!-- //column-content -->
            </div><!-- //column -->
          </div> <!-- //row -->
        </div><!-- //section --> 
      </div><!-- //section-width --> 
    </div><!-- //section-wrapper -->

You can use the inspector tool to look at each div settings and copy such settings into your custom.css file
also you should verify that such custom css will no conflict with your default template css settings

osbert

pavit Thank you very much. Thank you.