1010 lines
50 KiB
XML
1010 lines
50 KiB
XML
<?xml version="1.0" encoding="utf-8"?>
|
||
<flectra>
|
||
<template id="s_cover" name="Cover">
|
||
<section class="s_text_block_image_fw oe_img_bg oe_custom_bg" style="background-image: url(/web/image/website.s_cover_default_image); background-position: 50% 100%">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-6 mt64 mb64 bg-black-25">
|
||
<h2 style="font-size:62px">Headline</h2>
|
||
<h4>With a great subtitle</h4>
|
||
<p>Write one or two paragraphs describing your product, services or a specific feature. To be successful your content needs to be useful to your readers.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<template id="s_menu" name="Menu Snippets">
|
||
<section class="s_menu">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="menu_view">
|
||
<h2 style="color: rgb(193, 191, 177);text-align: center;">Select Top Menu From Option</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<template id="s_banner" name="Slider">
|
||
<div id="myCarousel" class="carousel slide s_banner" data-interval="10000" style="height: 400px;">
|
||
<!-- Indicators -->
|
||
<ol class="carousel-indicators hidden">
|
||
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
|
||
</ol>
|
||
<div class="carousel-inner">
|
||
<div class="item oe_img_bg active bg-alpha">
|
||
<div class="container">
|
||
<div class="row content">
|
||
<div class="carousel-content col-md-4 col-md-offset-1 mt128 mb96">
|
||
<h2>Your Slide Title</h2>
|
||
<h4>Click to customize this text</h4>
|
||
<p><a href="/contactus" class="btn btn-warning btn-large">Contact us</a></p>
|
||
</div>
|
||
<div class="carousel-img col-md-6 col-md-offset-1 hidden-sm hidden-xs mt48">
|
||
<img class="img-responsive" src="/web/image/website.s_banner_default_image" alt="Slider Flectra Image"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="carousel-control left hidden" data-target="#myCarousel" data-slide="prev" style="width: 10%"><i class="fa fa-chevron-left"></i></div>
|
||
<div class="carousel-control right hidden" data-target="#myCarousel" data-slide="next" style="width: 10%"><i class="fa fa-chevron-right"></i></div>
|
||
</div>
|
||
</template>
|
||
|
||
<template id="s_text_image" name="Text-Image">
|
||
<section class="s_text_image">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-6 mt64 mb32">
|
||
<h3 style="text-align: right;">A Section Subtitle</h3>
|
||
<p style="text-align: right;">
|
||
Write one or two paragraphs describing your product or
|
||
services.<br/>To be successful your content needs to be
|
||
useful to your readers.
|
||
</p><p style="text-align: right;">
|
||
Start with the customer – find out what they want
|
||
and give it to them.
|
||
</p>
|
||
</div>
|
||
<div class="col-md-6 mt32 mb32">
|
||
<img class="img img-responsive pull-left mb16" src="/web/image/website.s_text_image_default_image" alt="Flectra text and image block"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<template id="s_image_text" name="Image-Text">
|
||
<section class="s_image_text">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-6 mt32 mb32">
|
||
<img class="img img-responsive center-block mb16" src="/web/image/website.s_image_text_default_image" alt="Flectra image and text block"/>
|
||
</div>
|
||
<div class="col-md-6 mt64 mb32">
|
||
<h3>A Section Subtitle</h3>
|
||
<p>
|
||
Write one or two paragraphs describing your product,
|
||
services or a specific feature. To be successful
|
||
your content needs to be useful to your readers.
|
||
</p><p>
|
||
Start with the customer – find out what they want
|
||
and give it to them.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<template id="s_big_message" name="Big Message">
|
||
<section class="jumbotron s_big_message oe_img_bg oe_custom_bg" style="background-image: url('/web/image/website.s_background_image_01');">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="mb32 col-md-offset-1 col-md-8">
|
||
<h1>Sell Online. Easily.</h1>
|
||
<p>Write one sentence to convince visitor about your message.</p>
|
||
<a class="btn btn-warning btn-lg" href="/contactus">Contact us</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<template id="s_text_block" name="Text Block">
|
||
<section class="s_text_block">
|
||
<div class="container">
|
||
<h2 class="text-center">A Great Headline</h2>
|
||
<h3 class="text-center text-muted">A good subtitle</h3>
|
||
<div class="row">
|
||
<div class="col-md-12 mb16 mt16">
|
||
<p>
|
||
A great way to catch your reader's attention is to tell a story.
|
||
Everything you consider writing can be told as a story.
|
||
</p><p>
|
||
<b>Great stories have personality.</b> Consider telling
|
||
a great story that provides personality. Writing a story
|
||
with personality for potential clients will assists with
|
||
making a relationship connection. This shows up in small
|
||
quirks like word choices or phrases. Write from your point
|
||
of view, not from someone else's experience.
|
||
</p><p>
|
||
<b>Great stories are for everyone even when only written for
|
||
just one person.</b> If you try to write with a wide general
|
||
audience in mind, your story will ring false and be bland.
|
||
No one will be interested. Write for one person. If it’s genuine for the one, it’s genuine for the rest.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<template id="s_title" name="Title">
|
||
<section class="s_title">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<h1 class="text-center">Your Website Title</h1>
|
||
<h3 class="text-center text-muted">And a great subtitle too</h3>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<template id="s_features" name="Features">
|
||
<section class="s_features">
|
||
<div class="container">
|
||
<div class="row mt16 mb16">
|
||
<div class="col-md-4 text-center">
|
||
<span class="fa fa-suitcase fa-5x"></span>
|
||
<div>
|
||
<h3 class="mt8 mb0">First Feature</h3>
|
||
<p class="text-muted">Tell what's the value for the<br/>customer for this feature.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 text-center">
|
||
<span class="fa fa-lock fa-5x"></span>
|
||
<div>
|
||
<h3 class="mt8 mb0">Second Feature</h3>
|
||
<p class="text-muted">Write what the customer would like to know,<br/>not what you want to show.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 text-center">
|
||
<span class="fa fa-heart fa-5x"></span>
|
||
<div>
|
||
<h3 class="mt8 mb0">Third Feature</h3>
|
||
<p class="text-muted">A small explanation of this great<br/>feature, in clear words.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<template id="s_big_picture" name="Big Picture">
|
||
<section class="s_big_picture bg-gray-lighter">
|
||
<div class="container">
|
||
<h2 class="text-center">A Punchy Headline</h2>
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<img class="img img-responsive" src="/web/image/website.s_big_picture_default_image" style="margin: 0 auto;" alt="Flectra CMS - a big picture"/>
|
||
</div>
|
||
<div class="col-md-6 col-md-offset-3 mb16 mt16">
|
||
<p class="text-center">
|
||
<b>A Small Subtitle</b>
|
||
</p>
|
||
<p class="text-center">
|
||
Choose a vibrant image and write an inspiring paragraph
|
||
about it. It does not have to be long, but it should
|
||
reinforce your image.
|
||
</p>
|
||
<p class="text-center">
|
||
<a href="/contactus">Contact us »</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<template id="s_three_columns" name="Three Columns">
|
||
<section class="s_three_columns">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-4 mt32 mb48">
|
||
<img class="img img-responsive" src="/web/image/website.library_image_11" alt="Flectra - Sample 1 for three columns"/>
|
||
<h4 class="mt16">Feature One</h4>
|
||
<p>
|
||
Adapt these three columns to fit you design need.
|
||
To duplicate, delete or move columns, select the
|
||
column and use the top icons to perform your action.
|
||
</p>
|
||
</div>
|
||
<div class="col-md-4 mt32 mb48">
|
||
<img class="img img-responsive" src="/web/image/website.library_image_13" alt="Flectra - Sample 2 for three columns"/>
|
||
<h4 class="mt16">Feature Two</h4>
|
||
<p>
|
||
To add a fourth column, reduce the size of these
|
||
three columns using the right icon of each block.
|
||
Then, duplicate one of the column to create a new
|
||
one as a copy.
|
||
</p>
|
||
</div>
|
||
<div class="col-md-4 mt32 mb48">
|
||
<img class="img img-responsive" src="/web/image/website.library_image_07" alt="Flectra - Sample 3 for three columns"/>
|
||
<h4 class="mt16">Feature Three</h4>
|
||
<p>
|
||
Delete the above image or replace it with a picture
|
||
that illustrates your message. Click on the picture to
|
||
change it's <em>rounded corner</em> style.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<template id="s_well" name="Well">
|
||
<div class="well s_well clearfix">
|
||
<p>
|
||
Explain the benefits you offer. Don't write about products or
|
||
services here, write about solutions.
|
||
</p>
|
||
</div>
|
||
</template>
|
||
|
||
<template id="s_panel" name="Panel">
|
||
<div class="panel panel-default o_panel s_panel">
|
||
<div class="panel-heading ">
|
||
<h3 class="panel-title">Feature Title</h3>
|
||
</div>
|
||
<div class="panel-body">
|
||
<p>
|
||
Panels are a great tool to compare offers or to emphasize on
|
||
key features. To compare products, use the inside columns.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<template id="s_image_floating" name="Image Floating">
|
||
<div class="o_image_floating o_margin_l pull-right s_image_floating">
|
||
<div class="o_container">
|
||
<img class="img img-rounded img-responsive" src="/web/image/website.s_image_floating_default_image" alt="Flectra CMS- Sample image floating"/>
|
||
</div>
|
||
<div class="o_footer">
|
||
<small class="text-muted">A great way to catch your reader's attention is to tell a story. Everything you consider writing can be told as a story.</small>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<template id="s_share" name="Share">
|
||
<div class="oe_share s_share">
|
||
<h3>
|
||
<span>Share</span>
|
||
<a target="_Blank" class="oe_share_facebook" href="https://www.facebook.com/sharer/sharer.php?u={url}"><i class="fa fa-facebook-square"></i></a>
|
||
<a target="_Blank" class="oe_share_twitter" href="https://twitter.com/intent/tweet?text={title}&url={url}"><i class="fa fa-twitter"></i></a>
|
||
<a target="_Blank" class="oe_share_linkedin" href="http://www.linkedin.com/shareArticle?mini=true&url={url}&title={title}&"><i class="fa fa-linkedin"></i></a>
|
||
<a target="_Blank" class="oe_share_google" href="https://plus.google.com/share?url={url}"><i class="fa fa-google-plus-square"></i></a>
|
||
<a href="mailto:?body={url}&subject={title}"><i class="fa fa-envelope-o"></i></a>
|
||
</h3>
|
||
</div>
|
||
</template>
|
||
|
||
<template id="s_image_gallery" name="Image Gallery">
|
||
<section class="o_gallery o_spc-medium o_slideshow s_image_gallery" data-columns="3" style="height: 500px; overflow: hidden;">
|
||
<div class="container">
|
||
<div class="alert alert-info css_editable_mode_display text-center" ><span class="o_add_images" style="cursor: pointer;"><i class="fa fa-plus-circle"/> Add Images</span></div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<template id="s_comparisons" name="Comparisons">
|
||
<section class="s_comparisons">
|
||
<div class="container">
|
||
<h2 class="text-center">Our Offers</h2>
|
||
<div class="row">
|
||
<div class="col-md-4 col-xs-12">
|
||
<div class="panel bg-gray-light">
|
||
<div class="panel-heading text-center" style="background-color: rgba(255, 255, 255, 0.1)">
|
||
<h3 style="margin: 0">Beginner</h3>
|
||
<p style="margin: 0">
|
||
Starter package
|
||
</p>
|
||
</div>
|
||
<div class="panel-body text-center">
|
||
<h3 style="margin: 0"><span>$</span><b style="font-size: 60px">35</b><small>.00</small></h3>
|
||
<div>user / month (billed annually)</div>
|
||
</div>
|
||
<ul class="list-group">
|
||
<li class="list-group-item">Basic sales & marketing for up to 2 users</li>
|
||
<li class="list-group-item">Account & Sales management</li>
|
||
<li class="list-group-item">No customization</li>
|
||
<li class="list-group-item">No support</li>
|
||
</ul>
|
||
<div class="panel-footer text-center">
|
||
<p class="text-muted">
|
||
<i>Instant setup, satisfied or reimbursed.</i>
|
||
</p>
|
||
<a href="/contactus" class="btn btn-primary btn-lg">Order now</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 col-xs-12">
|
||
<div class="panel bg-beta">
|
||
<div class="panel-heading text-center" style="background-color: rgba(255, 255, 255, 0.1)">
|
||
<h3 style="margin: 0">Professional</h3>
|
||
<p style="margin: 0">Enterprise package</p>
|
||
</div>
|
||
<div class="panel-body text-center">
|
||
<h3 style="margin: 0"><span>$</span><b style="font-size: 60px">65</b><small>.00</small></h3>
|
||
<div>user / month (billed annually)</div>
|
||
</div>
|
||
<ul class="list-group">
|
||
<li class="list-group-item">Complete CRM for any size team</li>
|
||
<li class="list-group-item">Get access to all modules</li>
|
||
<li class="list-group-item">Limited customization</li>
|
||
<li class="list-group-item">Email support</li>
|
||
</ul>
|
||
<div class="panel-footer text-center">
|
||
<p class="text-muted"><i>Instant setup, satisfied or reimbursed.</i></p>
|
||
<a href="/contactus" class="btn btn-primary btn-lg">Order now</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 col-xs-12">
|
||
<div class="panel bg-gray-light">
|
||
<div class="panel-heading text-center" style="background-color: rgba(255, 255, 255, 0.1)">
|
||
<h3 style="margin: 0">Expert</h3>
|
||
<p style="margin: 0">Ultimate package</p>
|
||
</div>
|
||
<div class="panel-body text-center">
|
||
<h3 style="margin: 0"><span>$</span><b style="font-size: 60px">125</b><small>.00</small></h3>
|
||
<div>user / month (billed annually)</div>
|
||
</div>
|
||
<ul class="list-group">
|
||
<li class="list-group-item">Unlimited CRM power and support</li>
|
||
<li class="list-group-item">Get access to all modules and features</li>
|
||
<li class="list-group-item">Unlimited customization</li>
|
||
<li class="list-group-item">24x7 toll-free support</li>
|
||
</ul>
|
||
<div class="panel-footer text-center">
|
||
<p class="text-muted"><i>Instant setup, satisfied or reimbursed.</i></p>
|
||
<a href="/contactus" class="btn btn-primary btn-lg">Contact us</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<template id="s_company_team" name="Company Team">
|
||
<section class="s_company_team">
|
||
<div class="container">
|
||
<h1 class="text-center mb32">
|
||
Meet the Executive Team
|
||
</h1>
|
||
<div class="row">
|
||
<div class="col-md-6 mb32">
|
||
<div class="row s_no_resize_cols">
|
||
<div class="col-md-4">
|
||
<img src="/web/image/website.s_company_team_image_1" class="img-responsive img-circle center-block shadow"/>
|
||
</div>
|
||
<div class="col-md-8">
|
||
<h4>Tony Fred, CEO</h4>
|
||
<p class="text-muted">
|
||
Founder and chief visionary, Tony is the driving force behind Company. He loves
|
||
to keep his hands full by participating in the development of the software,
|
||
marketing and the Customer Experience strategies.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 mb32">
|
||
<div class="row s_no_resize_cols">
|
||
<div class="col-md-4">
|
||
<img src="/web/image/website.s_company_team_image_2" class="img-responsive img-circle center-block shadow"/>
|
||
</div>
|
||
<div class="col-md-8">
|
||
<h4>Mich Stark, COO</h4>
|
||
<p class="text-muted">
|
||
Mich loves taking on challenges. With his multi-year experience as Commercial
|
||
Director in the software industry, Mich has helped Company to get where it
|
||
is today. Mich is among the best minds.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 mb32">
|
||
<div class="row s_no_resize_cols">
|
||
<div class="col-md-4">
|
||
<img src="/web/image/website.s_company_team_image_3" class="img-responsive img-circle center-block shadow"/>
|
||
</div>
|
||
<div class="col-md-8">
|
||
<h4>Aline Turner, CTO</h4>
|
||
<p class="text-muted">
|
||
Aline is one of the iconic person in life who can say she loves what she does.
|
||
She mentors 100+ in-house developers and looks after the community of over
|
||
thousands developers.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 mb32">
|
||
<div class="row s_no_resize_cols">
|
||
<div class="col-md-4">
|
||
<img src="/web/image/website.s_company_team_image_4" class="img-responsive img-circle center-block shadow"/>
|
||
</div>
|
||
<div class="col-md-8">
|
||
<h4>Iris Joe, CFO</h4>
|
||
<p class="text-muted">
|
||
Iris, with her international experience, helps us easily understand the numbers and
|
||
improves them. She is determined to drive success and delivers her professional
|
||
acumen to bring Company at the next level.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<template id="s_button" name="Call to Action">
|
||
<section class="jumbotron s_button bg-gray-lighter">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-9">
|
||
<p class="mb0">
|
||
<strong>50,000+ companies run Flectra to grow their businesses.</strong>
|
||
</p><p class="mb0">
|
||
Join us and make your company a better place.
|
||
</p>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<a href="/contactus" class="btn btn-primary btn-lg pull-right mt8">
|
||
<span>Contact Us Now</span>
|
||
<i class="fa fa-chevron-right"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<template id="s_faq_collapse" name="FAQ">
|
||
<section class="s_faq_collapse">
|
||
<div class="container">
|
||
<h2 class="page-header"> General Terms and Conditions / Service Policies </h2>
|
||
<div class="panel-group" role="tablist">
|
||
<div class="panel">
|
||
<div class="panel-heading bg-gray-lighter" role="tab" data-toggle="collapse">
|
||
<h4 class="panel-title">
|
||
Terms of service
|
||
</h4>
|
||
</div>
|
||
<div class="panel-collapse collapse" role="tabpanel">
|
||
<div class="panel-body bg-white-50">
|
||
<p>
|
||
These terms of service ("Terms", "Agreement") are an agreement between the website
|
||
("Website operator", "us", "we" or "our") and you ("User", "you" or "your").
|
||
</p>
|
||
<p>
|
||
This Agreement sets forth the general terms and conditions of your use of this website
|
||
and any of its products or services (collectively, "Website" or "Services").
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="panel">
|
||
<div class="panel-heading bg-gray-lighter" role="tab" data-toggle="collapse">
|
||
<h4 class="panel-title">
|
||
Links to other websites
|
||
</h4>
|
||
</div>
|
||
<div class="panel-collapse collapse" role="tabpanel">
|
||
<div class="panel-body bg-white-50">
|
||
<p>
|
||
Although this Website may be linked to other websites, we are not, directly or
|
||
indirectly, implying any approval, association, sponsorship, endorsement, or
|
||
affiliation with any linked website, unless specifically stated herein.
|
||
</p>
|
||
<p>
|
||
You should carefully review the legal statements and other conditions of use of
|
||
any website which you access through a link from this Website. Your linking to
|
||
any other off-site pages or other websites is at your own risk.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="panel">
|
||
<div class="panel-heading bg-gray-lighter" role="tab" data-toggle="collapse">
|
||
<h4 class="panel-title">
|
||
Use Of Cookies
|
||
</h4>
|
||
</div>
|
||
<div class="panel-collapse collapse" role="tabpanel">
|
||
<div class="panel-body bg-white-50">
|
||
<p>Website may use cookies to personalize and facilitate maximum navigation of the
|
||
User by this site. The User may configure his / her browser to notify and
|
||
reject the installation of the cookies sent by us.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<template id="s_references" name="References">
|
||
<section class="s_references bg-gray-lighter">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-2 mt48">
|
||
<h4 class="text-center mt16">Our References</h4>
|
||
</div>
|
||
<div class="col-md-2 col-sm-3 col-xs-6 mt16 mb16">
|
||
<img src="/web/image/website.s_reference_demo_image_1" class="img img-responsive " alt="Demo Logo"/>
|
||
</div>
|
||
<div class="col-md-2 col-sm-3 col-xs-6 mt16 mb16">
|
||
<img src="/web/image/website.s_reference_demo_image_2" class="img img-responsive " alt="Demo Logo"/>
|
||
</div>
|
||
<div class="col-md-2 col-sm-3 col-xs-6 mt16 mb16">
|
||
<img src="/web/image/website.s_reference_demo_image_3" class="img img-responsive " alt="Demo Logo"/>
|
||
</div>
|
||
<div class="col-md-2 col-sm-3 col-xs-6 mt16 mb16">
|
||
<img src="/web/image/website.s_reference_demo_image_4" class="img img-responsive " alt="Demo Logo"/>
|
||
</div>
|
||
<div class="col-md-2 col-sm-3 col-xs-6 mt16 mb16">
|
||
<img src="/web/image/website.s_reference_demo_image_5" class="img img-responsive " alt="Demo Logo"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<template id="s_feature_grid" name="Feature Grid">
|
||
<section class="s_feature_grid">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-5 col-md-offset-1">
|
||
<div class="row">
|
||
<div class="col-md-12 mt16 mb16">
|
||
<h3 class="mb0">List of Features</h3>
|
||
<h5 class="text-muted mb16">Add a great slogan</h5>
|
||
</div>
|
||
<div class="col-md-12">
|
||
<span style="min-width: 45px" class="fa fa-2x fa-comment pull-left mb16"></span>
|
||
<h4 class="mt0 mb0">Change Icons</h4>
|
||
<p>Click on the icon to adapt it to your feature</p><br/>
|
||
</div>
|
||
<div class="col-md-12">
|
||
<span style="min-width: 45px" class="fa fa-2x fa-columns pull-left mb16"></span>
|
||
<h4 class="mt0 mb0">Duplicate</h4>
|
||
<p>Duplicate blocks to add more features.</p><br/>
|
||
</div>
|
||
<div class="col-md-12">
|
||
<span style="min-width: 45px" class="fa fa-2x fa-user pull-left mb16"></span>
|
||
<h4 class="mt0 mb0">Delete Blocks</h4>
|
||
<p>Select and delete blocks to remove some features.</p><br/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-5">
|
||
<div class="row">
|
||
<div class="col-md-12 mt16 mb16">
|
||
<h3 class="mb0">Second List</h3>
|
||
<h5 class="text-muted mb16">Add a great slogan</h5>
|
||
</div>
|
||
<div class="col-md-12">
|
||
<span style="min-width: 45px" class="fa fa-2x fa-magic pull-left mb16"></span>
|
||
<h4 class="mt0 mb0">Great Value</h4>
|
||
<p>Tell features the visitor would like to know, not what you'd like to say.</p>
|
||
</div>
|
||
<div class="col-md-12">
|
||
<span style="min-width: 45px" class="fa fa-2x fa-bolt pull-left mb16"></span>
|
||
<h4 class="mt0 mb0">Change Background</h4>
|
||
<p>From the main container, you can change the background to highlight features.</p>
|
||
</div>
|
||
<div class="col-md-12">
|
||
<span style="min-width: 45px" class="fa fa-2x fa-picture-o pull-left mb16"></span>
|
||
<h4 class="mt0 mb0">Sample images</h4>
|
||
<p>All these icons are licensed under creative commons so that you can use them.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<template id="s_parallax" name="Parallax">
|
||
<section class="parallax s_parallax oe_img_bg"
|
||
style="background-image: url(/web/image/website.s_background_image_04);"
|
||
data-scroll-background-ratio="1.6"><div class="oe_structure"/></section>
|
||
</template>
|
||
|
||
<template id="s_parallax_slider" name="Parallax Slider">
|
||
<section class="parallax s_parallax_slider oe_custom_bg oe_img_bg"
|
||
style="background-image: url(/web/image/website.s_parallax_slider_default_image);"
|
||
data-scroll-background-ratio="1.6">
|
||
<div><div><div class="oe_structure">
|
||
<div id="myQuoteCarousel" class="carousel quotecarousel slide mb0" data-interval="10000">
|
||
<!-- Indicators -->
|
||
<ol class="carousel-indicators mb0">
|
||
<li data-target="#myQuoteCarousel" data-slide-to="0" class="active"></li>
|
||
<li data-target="#myQuoteCarousel" data-slide-to="1"></li>
|
||
</ol>
|
||
<div class="carousel-inner">
|
||
|
||
<div class="item text_only active">
|
||
<div class="container">
|
||
<div class="content">
|
||
|
||
<div class="row">
|
||
<blockquote class="mt48 mb16 col-md-4 col-md-offset-4">
|
||
<p>
|
||
Write a quote here from one of your customers. Quotes are a
|
||
great way to build confidence in your products or services.
|
||
</p>
|
||
<small>Author of this quote</small>
|
||
</blockquote>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="item text_only">
|
||
<div class="container">
|
||
<div class="content">
|
||
|
||
<div class="row">
|
||
<blockquote class="mt48 mb16 col-md-4 col-md-offset-4">
|
||
<p>
|
||
Flectra provides essential platform for our project management.
|
||
Things are better organized and more visible with it.
|
||
</p>
|
||
<small>John Doe, CEO</small>
|
||
</blockquote>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div></div></div>
|
||
</section>
|
||
</template>
|
||
|
||
<!-- Snippets menu -->
|
||
<template id="snippets" inherit_id="web_editor.snippets" primary="True">
|
||
<xpath expr="//div[@id='o_scroll']" position="replace">
|
||
<div id="o_scroll">
|
||
<div id="snippet_structure" class="o_panel">
|
||
<div class="o_panel_header">
|
||
<i class="fa fa-th-large"/> Structure
|
||
</div>
|
||
<div class="o_panel_body">
|
||
<t t-snippet="website.s_title" t-thumbnail="/website/static/src/img/blocks/block_title.png"/>
|
||
<t t-snippet="website.s_cover" t-thumbnail="/website/static/src/img/blocks/block_banner.png"/>
|
||
<t t-snippet="website.s_menu" t-thumbnail="/website/static/src/img/blocks/menu-icon.png"/>
|
||
<t t-snippet="website.s_text_image" t-thumbnail="/website/static/src/img/blocks/block_text_image.png"/>
|
||
<t t-snippet="website.s_image_text" t-thumbnail="/website/static/src/img/blocks/block_image_text.png"/>
|
||
<t t-snippet="website.s_big_message" t-thumbnail="/website/static/src/img/blocks/block_jumbotron.png"/>
|
||
<t t-snippet="website.s_text_block" t-thumbnail="/website/static/src/img/blocks/block_text_block.png"/>
|
||
<t t-snippet="website.s_features" t-thumbnail="/website/static/src/img/blocks/block_features.png"/>
|
||
<t t-snippet="website.s_big_picture" t-thumbnail="/website/static/src/img/blocks/block_big_picture.png"/>
|
||
<t t-snippet="website.s_three_columns" t-thumbnail="/website/static/src/img/blocks/block_three_columns.png"/>
|
||
<t t-snippet="website.s_banner" t-thumbnail="/website/static/src/img/blocks/block_slider.png"/>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="snippet_feature" class="o_panel">
|
||
<div class="o_panel_header">
|
||
<i class="fa fa-diamond"/> Feature
|
||
</div>
|
||
<div class="o_panel_body">
|
||
<t t-snippet="website.s_image_gallery" t-thumbnail="/website/static/src/img/blocks/block_image_gallery.png"/>
|
||
<t t-snippet="website.s_comparisons" t-thumbnail="/website/static/src/img/blocks/block_comparison.png"/>
|
||
<t t-snippet="website.s_company_team" t-thumbnail="/website/static/src/img/blocks/block_company_team.png"/>
|
||
<t t-snippet="website.s_button" t-thumbnail="/website/static/src/img/blocks/block_button.png"/>
|
||
<t t-snippet="website.s_references" t-thumbnail="/website/static/src/img/blocks/block_references.png"/>
|
||
<t t-snippet="website.s_faq_collapse" t-thumbnail="/website/static/src/img/blocks/block_faq.png"/>
|
||
<t t-snippet="website.s_feature_grid" t-thumbnail="/website/static/src/img/blocks/block_feature_grid.png"/>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="snippet_effect" class="o_panel">
|
||
<div class="o_panel_header">
|
||
<i class="fa fa-magic icon-fix"/> Effect
|
||
</div>
|
||
<div class="o_panel_body">
|
||
<t t-snippet="website.s_parallax" t-thumbnail="/website/static/src/img/blocks/block_parallax.png"/>
|
||
<t t-snippet="website.s_parallax_slider" t-thumbnail="/website/static/src/img/blocks/block_quotes_slider.png"/>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="snippet_content" class="o_panel">
|
||
<div class="o_panel_header">
|
||
<i class="fa fa-indent"/> Inner content
|
||
</div>
|
||
<div class="o_panel_body">
|
||
<t t-snippet="website.s_well" t-thumbnail="/website/static/src/img/blocks/block_well.png"/>
|
||
<t t-snippet="website.s_panel" t-thumbnail="/website/static/src/img/blocks/block_panel.png"/>
|
||
<t t-snippet="website.s_image_floating" t-thumbnail="/website/static/src/img/blocks/block_text_image.png"/>
|
||
<t t-snippet="website.s_share" t-thumbnail="/website/static/src/img/blocks/block_share.png"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</xpath>
|
||
|
||
<xpath expr="//div[@id='snippet_options']/t" position="attributes">
|
||
<attribute name="t-call">website.snippet_options</attribute>
|
||
</xpath>
|
||
</template>
|
||
|
||
<template id="external_snippets" inherit_id="website.snippets" priority="8">
|
||
<xpath expr="//div[@id='snippet_feature']//t[@t-snippet][last()]" position="after">
|
||
<t t-install="website_twitter" string="Twitter Scroller" t-thumbnail="/website/static/src/img/blocks/twitter_scroll.png"/>
|
||
</xpath>
|
||
<xpath expr="//div[@id='snippet_content']//t[@t-snippet][last()]" position="after">
|
||
<t t-install="website_event" string="Local Events" t-thumbnail="/website/static/src/img/blocks/block_local_event.png"/>
|
||
<t t-install="website_mail_channel" string="Discussion Group" t-thumbnail="/website/static/src/img/blocks/button_channel_subscribe.png"/>
|
||
<t t-install="mass_mailing" string="Newsletter" t-thumbnail="/website/static/src/img/blocks/newsletter_subscribe_form.png"/>
|
||
</xpath>
|
||
</template>
|
||
|
||
<template id="snippet_options">
|
||
<t t-call="web_editor.snippet_options"/>
|
||
|
||
<div data-js='js_menu' data-selector=".s_menu">
|
||
<t t-set="top_menu"
|
||
t-value="website.get_website_menus(website.id) if website else None" />
|
||
<li class="dropdown-submenu">
|
||
<a tabindex="-2" href="#"><i class="fa fa-magic"/>Select Top Menu</a>
|
||
<ul class="dropdown-menu">
|
||
<t t-foreach="top_menu" t-as="menu">
|
||
<li t-att-data-selected_menu="[menu.id,menu.menu_view.key]"
|
||
t-att-data-view="menu.menu_view.key"><a
|
||
href="#"><span t-esc="menu.name"/></a></li>
|
||
</t>
|
||
<li t-if="not top_menu">
|
||
<a href="#">None</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</div>
|
||
|
||
<div data-js='gallery' data-selector=".o_gallery">
|
||
<li data-add-images="true" data-no-preview="true"><a href="#"><i class="fa fa-plus-circle"/>Add images</a></li>
|
||
<li data-remove-all-images="true" data-no-preview="true"><a href="#"><i class="fa fa-trash"/>Remove all images</a></li>
|
||
<li class="separator"/>
|
||
<li class="dropdown-submenu">
|
||
<a tabindex="-2" href="#"><i class="fa fa-magic"/>Mode</a>
|
||
<ul class="dropdown-menu">
|
||
<li data-mode="nomode"><a href="#">Float</a></li>
|
||
<li data-mode="masonry"><a href="#">Masonry</a></li>
|
||
<li data-mode="grid"><a href="#">Grid</a></li>
|
||
<li data-mode="slideshow"><a href="#">Slideshow</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown-submenu">
|
||
<a tabindex="-2" href="#"><i class="fa fa-clock-o"/>Slideshow speed</a>
|
||
<ul class="dropdown-menu">
|
||
<li data-interval="1000"><a href="#">1s</a></li>
|
||
<li data-interval="2000"><a href="#">2s</a></li>
|
||
<li data-interval="3000"><a href="#">3s</a></li>
|
||
<li data-interval="5000"><a href="#">5s</a></li>
|
||
<li data-interval="10000"><a href="#">10s</a></li>
|
||
<li data-interval="0"><a href="#">Disable autoplay</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown-submenu">
|
||
<a tabindex="-2" href="#"><i class="fa fa-th"/>Columns</a>
|
||
<ul class="dropdown-menu">
|
||
<li data-columns="1"><a href="#">1</a></li>
|
||
<li data-columns="2"><a href="#">2</a></li>
|
||
<li data-columns="3"><a href="#">3</a></li>
|
||
<li data-columns="4"><a href="#">4</a></li>
|
||
<li data-columns="6"><a href="#">6</a></li>
|
||
<li data-columns="12"><a href="#">12</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown-submenu">
|
||
<a tabindex="-2" href="#"><i class="fa fa-arrows-h"/>Images spacing</a>
|
||
|
||
<ul class="dropdown-menu">
|
||
<li data-select-class="o_spc-none"><a href="#">None</a></li>
|
||
<li data-select-class="o_spc-small"><a href="#">Small</a></li>
|
||
<li data-select-class="o_spc-medium"><a href="#">Medium</a></li>
|
||
<li data-select-class="o_spc-big"><a href="#">Big</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown-submenu">
|
||
<a tabindex="-2" href="#"><i class="fa fa-paint-brush"/>Styling</a>
|
||
<ul class="dropdown-menu">
|
||
<li data-styling=""><a href="#">Square</a></li>
|
||
<li data-styling="img-rounded"><a href="#">Rounded corners</a></li>
|
||
<li data-styling="img-thumbnail"><a href="#">Thumbnails</a></li>
|
||
<li data-styling="img-circle"><a href="#">Circle</a></li>
|
||
<li data-styling="shadow"><a href="#">Shadows</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="separator"/>
|
||
</div>
|
||
|
||
<div data-js='background'
|
||
data-selector="section, :not(.o_gallery > .container) > .carousel, .parallax, .s_banner .carousel-content">
|
||
<li class="dropdown-submenu">
|
||
<a tabindex="-1" href="#"><i class="fa fa-picture-o"/>Background Image</a>
|
||
<ul class="dropdown-menu">
|
||
<li data-choose-image="true" data-no-preview="true"><a href="#"><b>Set Custom Image...</b></a></li>
|
||
<li class="divider"></li>
|
||
<li data-background="" class="none"><a href="#">None</a></li>
|
||
<li class="divider"></li>
|
||
<li data-background="/web/image/website.s_background_image_01"><a href="#">Peak</a></li>
|
||
<li data-background="/web/image/website.s_background_image_02"><a href="#">Downtown</a></li>
|
||
<li data-background="/web/image/website.s_background_image_03"><a href="#">Panama Sky</a></li>
|
||
<li data-background="/web/image/website.s_background_image_04"><a href="#">Cubes</a></li>
|
||
<li data-background="/web/image/website.s_background_image_05"><a href="#">Building Profile</a></li>
|
||
<li data-background="/web/image/website.s_background_image_06"><a href="#">Type</a></li>
|
||
<li data-background="/web/image/website.s_background_image_07"><a href="#">People</a></li>
|
||
<li data-background="/web/image/website.s_background_image_08"><a href="#">City</a></li>
|
||
<li data-background="/web/image/website.s_background_image_09"><a href="#">Sails</a></li>
|
||
</ul>
|
||
</li>
|
||
</div>
|
||
|
||
<div data-js='background_position'
|
||
data-selector="section, :not(.o_gallery > .container) > .carousel, .s_banner .carousel-content">
|
||
<li class="background_position_li" data-background-position="true" data-no-preview="true">
|
||
<a tabindex="-1" href="#"><i class="fa fa-arrows"/>Background Image Sizing</a>
|
||
</li>
|
||
</div>
|
||
|
||
<div data-js="colorpicker"
|
||
data-selector="section, :not(.o_gallery > .container) > .carousel"
|
||
data-exclude=".parallax">
|
||
<li class="dropdown-submenu">
|
||
<a tabindex="-1" href="#"><i class="fa fa-eyedropper"/>Background Color</a>
|
||
<ul class="dropdown-menu">
|
||
<li></li>
|
||
</ul>
|
||
</li>
|
||
</div>
|
||
<div data-js="colorpicker"
|
||
data-selector=".s_text_block_image_fw .row > div, .s_banner .carousel-content"
|
||
data-palette-exclude="grayscale"
|
||
data-palette-default="transparent_grayscale"
|
||
data-palette-title="Overlay Color">
|
||
<li class="dropdown-submenu">
|
||
<a tabindex="-1" href="#"><i class="fa fa-eyedropper"/>Overlay color</a>
|
||
<ul class="dropdown-menu">
|
||
<li></li>
|
||
</ul>
|
||
</li>
|
||
</div>
|
||
|
||
<div data-js='gallery_img' data-selector=".o_gallery img">
|
||
<li class="dropdown-submenu">
|
||
<a tabindex="-2" href="#"><i class="fa fa-refresh"/>Re-order</a>
|
||
<ul class="dropdown-menu" data-no-preview="true">
|
||
<li data-position="first"><a href="#">Move to first</a></li>
|
||
<li data-position="prev"><a href="#">Move to previous</a></li>
|
||
<li data-position="next"><a href="#">Move to next</a></li>
|
||
<li data-position="last"><a href="#">Move to last</a></li>
|
||
</ul>
|
||
</li>
|
||
</div>
|
||
|
||
<div data-js='carousel'
|
||
data-selector=":not(.o_gallery > .container) > .carousel">
|
||
<li class="divider"></li>
|
||
<li class="dropdown-submenu">
|
||
<a tabindex="-2" href="#"><i class="fa fa-clock-o"/>Slideshow speed</a>
|
||
<ul class="dropdown-menu">
|
||
<li data-interval="1000"><a href="#">1s</a></li>
|
||
<li data-interval="2000"><a href="#">2s</a></li>
|
||
<li data-interval="3000"><a href="#">3s</a></li>
|
||
<li data-interval="5000"><a href="#">5s</a></li>
|
||
<li data-interval="10000"><a href="#">10s</a></li>
|
||
<li data-interval="0"><a href="#">Disable autoplay</a></li>
|
||
</ul>
|
||
</li>
|
||
<li data-add-slide="true" data-no-preview="true"><a href="#"><i class="fa fa-plus-circle"/>Add Slide</a></li>
|
||
<li data-remove-slide="true" data-no-preview="true"><a href="#" ><i class="fa fa-trash-o"/>Remove Slide</a></li>
|
||
</div>
|
||
|
||
<div data-js='margin-y'
|
||
data-selector="section, .row:not(.s_no_resize_cols) > [class*='col-md-'], :not(.o_gallery > .container) > .carousel, .parallax, hr">
|
||
</div>
|
||
|
||
<div data-js='resize'
|
||
data-selector="section, :not(.o_gallery > .container) > .carousel, .parallax"
|
||
data-drop-in=":not(p).oe_structure, :not(p)[data-oe-type=html]">
|
||
</div>
|
||
|
||
<div data-js='margin-x'
|
||
data-selector=".row:not(.s_no_resize_cols) > [class*='col-md-']"
|
||
data-drop-near=".row:not(.s_no_resize_cols) > [class*='col-md-']">
|
||
</div>
|
||
|
||
<div data-js='content'
|
||
data-selector="blockquote, .well, .s_panel, .oe_share, .o_image_floating"
|
||
data-drop-near="p, h1, h2, h3, blockquote, .well, .s_panel, .oe_share"
|
||
data-drop-in=".content">
|
||
</div>
|
||
|
||
<div data-js='separator'
|
||
data-selector="hr"
|
||
data-drop-in=".oe_structure, [data-oe-type=html]">
|
||
</div>
|
||
|
||
<div data-selector=".o_image_floating">
|
||
<li class="dropdown-submenu">
|
||
<a tabindex="-2" href="#"><i class="fa fa-expand"/>Margin</a>
|
||
<ul class="dropdown-menu">
|
||
<li data-select-class="o_margin_xl"><a href="#">Extra-Large</a></li>
|
||
<li data-select-class="o_margin_l"><a href="#">Large</a></li>
|
||
<li data-select-class="o_margin_m"><a href="#">Medium</a></li>
|
||
<li data-select-class="o_margin_s"><a href="#">Small</a></li>
|
||
<li data-select-class=""><a href="#">None</a></li>
|
||
</ul>
|
||
</li>
|
||
</div>
|
||
|
||
<div data-selector=".o_image_floating">
|
||
<li class="dropdown-submenu">
|
||
<a tabindex="-2" href="#"><i class="fa fa-magnet"/>Float</a>
|
||
<ul class="dropdown-menu" data-no-preview="true">
|
||
<li data-select-class="pull-left"><a href="#">Left</a></li>
|
||
<li data-select-class="pull-right"><a href="#">Right</a></li>
|
||
</ul>
|
||
</li>
|
||
</div>
|
||
|
||
<div data-js="parallax" data-selector=".parallax">
|
||
<li class="dropdown-submenu">
|
||
<a tabindex="-1" href="#"><i class="fa fa-clock-o"/>Scroll Speed</a>
|
||
<ul class="dropdown-menu" name="parallax-scroll">
|
||
<li data-scroll="0"><a href="#">No-scroll</a></li>
|
||
<li class="separator"/>
|
||
<li data-scroll="1"><a href="#">Fixed</a></li>
|
||
<li class="separator"/>
|
||
<li data-scroll="0.6"><a href="#">Very Slow</a></li>
|
||
<li data-scroll="1.2"><a href="#">Slow</a></li>
|
||
<li data-scroll="1.6"><a href="#">Fast</a></li>
|
||
<li data-scroll="2"><a href="#">Very Fast</a></li>
|
||
</ul>
|
||
</li>
|
||
</div>
|
||
|
||
<div data-js='ul'
|
||
data-selector=":not(li) > ul:has(ul,ol), :not(li) > ol:has(ul,ol)">
|
||
<li data-toggle-class="o_ul_folded"><a href="#">Folded list</a></li>
|
||
</div>
|
||
|
||
<div data-js='collapse'
|
||
data-selector='.panel-group > .panel:has(> .panel-collapse)'
|
||
data-drop-in='.panel-group:has(> .panel > .panel-collapse)'>
|
||
</div>
|
||
|
||
<div data-js="menu_data"
|
||
data-selector="#top_menu li > a"
|
||
data-exclude=".dropdown-toggle"
|
||
data-no-check="true"/>
|
||
|
||
<div data-js="company_data"
|
||
data-selector="[data-oe-expression='res_company.partner_id']"
|
||
data-no-check="true"/>
|
||
</template>
|
||
</flectra>
|