Design
463 lines
37 KiB
XML
463 lines
37 KiB
XML
<?xml version="1.0" encoding="utf-8"?>
|
||
<odoo>
|
||
|
||
<template name="Demo Page" id="demo">
|
||
<t t-call="website.layout">
|
||
<div id="wrap" class="oe_structure">
|
||
<section class="carousel slide mt0" data-interval="10000" id="myCarousel4">
|
||
<ol class="carousel-indicators" type="01"><li class="active" data-slide-to="0" data-target="#myCarousel4"/><li data-slide-to="1" data-target="#myCarousel4"/></ol>
|
||
<div class="carousel-inner">
|
||
<div class="item bg-img-05 active">
|
||
<div class="container-fluid">
|
||
<div class="row">
|
||
<div class="col-md-8 col-sm-12 hero-bg mt128">
|
||
<h1 class="px36 o_animate" style="animation-play-state: paused; -webkit-animation-play-state: paused;">
|
||
<font class="text-blue">Generate customers</font>
|
||
</h1>
|
||
<h2 class="px30 o_animate" style="animation-play-state: paused; -webkit-animation-play-state: paused;">
|
||
<font class="text-blue">from visitors.</font>
|
||
</h2>
|
||
<img alt="#" src="/web/image/theme_common.image_content_01" class="img img-responsive"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item bg-img-02">
|
||
<div class="container-fluid">
|
||
<div class="row">
|
||
<div class="col-md-8 col-sm-12 hero-bg mt128 o_animate none" style="animation-play-state: paused; -webkit-animation-play-state: paused;">
|
||
<h1 class="px36 o_animate" style="animation-play-state: paused; -webkit-animation-play-state: paused;">
|
||
<font class="text-blue">Present your products</font>
|
||
</h1>
|
||
<h2 class="px30 o_animate" style="animation-play-state: paused; -webkit-animation-play-state: paused;">
|
||
<font class="text-blue">with this Theme.</font>
|
||
</h2>
|
||
<img alt="#" src="/web/image/theme_common.image_content_01" class="img img-responsive"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="carousel-control left" data-slide="prev" data-target="#myCarousel4" href="#myCarousel4">
|
||
<i class="fa fa-chevron-left"/>
|
||
</div>
|
||
<div class="carousel-control right" data-slide="next" data-target="#myCarousel4" href="#myCarousel4">
|
||
<i class="fa fa-chevron-right"/>
|
||
</div>
|
||
</section>
|
||
<section class="s_title o_animate bg-alpha" style="animation-play-state: paused; -webkit-animation-play-state: paused;">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-12 mt32 mb0">
|
||
<h1 class="text-center">Your Website Title</h1>
|
||
<h3 class="text-muted text-center">And a great subtitle too</h3>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="s_three_columns o_animate bg-alpha mb0 mt0" style="animation-play-state: paused; -webkit-animation-play-state: paused;">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-offset-2 col-md-3">
|
||
<img class="img img-responsive img-rounded o_animate" src="/theme_orchid/static/src/img/content/content_img_08.jpg" style="transition: none; -webkit-transition: none; -webkit-transform: translateX(-0.8%) translateY(1.4%); transform: translateX(-0.8%) translateY(1.4%); animation-play-state: paused; -webkit-animation-play-state: paused;"/>
|
||
<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-3 col-md-offset-2 mb92">
|
||
<img class="img img-responsive o_animate img-rounded" src="/theme_orchid/static/src/img/content/content_img_06.jpg" style="-webkit-transition: none; transition: none; -webkit-transform: translateX(0.8%) translateY(0.6%) scaleY(0.99); transform: translateX(0.8%) translateY(0.6%) scaleY(0.99); animation-play-state: paused; -webkit-animation-play-state: paused;"/>
|
||
<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>
|
||
<section class="s_color_blocks_2">
|
||
<div class="container-fluid">
|
||
<div class="row">
|
||
<div class="col-md-6 s_color_blocks_2_block text-center o_animate bg-beta" style="animation-play-state: paused; -webkit-animation-play-state: paused;">
|
||
<img class="center-block o_animate" src="/theme_orchid/static/src/img/backgrounds/07.jpg" style="transition: none; -webkit-transition: none; animation-play-state: paused; -webkit-animation-play-state: paused;"/>
|
||
<h2 class="text-center">This Is a Color Block</h2>
|
||
<h3 class="text-center text-muted mb16">Highlight Your Content</h3>
|
||
<p class="text-justify mb32">Color blocks are a simple and effective way to
|
||
<strong>present and highlight your content</strong>. Choose an image or a color for the background. You can even resize and duplicate the blocks to create your own layout. Add images or icons to customize the blocks.
|
||
</p>
|
||
<a class="btn btn-info" href="#">
|
||
<i class="fa fa-cog"/> More Details
|
||
</a>
|
||
</div>
|
||
<div class="col-md-6 s_color_blocks_2_block bg-gamma text-center">
|
||
<img class="center-block o_animate" src="/theme_orchid/static/src/img/backgrounds/09.jpg" style="-webkit-transition: none; transition: none; animation-play-state: paused; -webkit-animation-play-state: paused;"/>
|
||
<h2 class="text-center">An Other Color Block</h2>
|
||
<h3 class="text-center text-muted mb16">Customize Backgrounds</h3>
|
||
<p class="text-justify mb32">Color blocks are a simple and effective way to
|
||
<strong>present and highlight your content</strong>. Choose an image or a color for the background. You can even resize and duplicate the blocks to create your own layout. Add images or icons to customize the blocks.
|
||
</p>
|
||
<a class="btn btn-primary" href="#">
|
||
<i class="fa fa-cog"/> More Details
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="s_text_image o_animate bg-alpha mt0" style="height: 328px; overflow: hidden; animation-play-state: paused; -webkit-animation-play-state: paused;">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="mt92 col-md-5 col-md-offset-1">
|
||
<h3>A Section Subtitle</h3>
|
||
<p>Write one or two paragraphs describing your product or services. 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 class="col-md-6 mt16">
|
||
<img class="img img-responsive mb16 o_animate shadow" src="/theme_orchid/static/src/img/content/content_img_06.jpg" style="-webkit-transition: none; transition: none; -webkit-transform: translateX(2.2%) translateY(-10.8%) scaleX(0.56) scaleY(0.56); transform: translateX(2.2%) translateY(-10.8%) scaleX(0.56) scaleY(0.56); animation-play-state: paused; -webkit-animation-play-state: paused;"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="s_event_list o_animate bg-alpha">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-12 text-center mt32 mb92">
|
||
<h2>Nice and Efficient Events List</h2>
|
||
<h3 class="text-muted">Display Your Last Activities</h3>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-4">
|
||
<div class="s_event_list_item">
|
||
<time class="bg-gamma" datetime="2014-07-20 0000">
|
||
<span class="s_event_list_day">
|
||
<font class="text-epsilon">02</font>
|
||
</span>
|
||
<span class="s_event_list_month">
|
||
<font class="text-epsilon">Jul</font>
|
||
</span>
|
||
<span class="s_event_list_year">2014</span>
|
||
<span class="s_event_list_time">
|
||
<font class="text-green">12:00 AM</font>
|
||
</span>
|
||
</time>
|
||
<div class="s_event_list_info">
|
||
<h4 class="s_event_list_title">Your Event Name</h4>
|
||
<p class="s_event_list_desc">Write a description of your event here.</p>
|
||
<ul>
|
||
<li><a href="#"><span class="fa fa-globe"/> Link</a></li>
|
||
<li><a href="#"><span class="fa fa-info-circle"/> Info</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="s_event_list_social">
|
||
<ul>
|
||
<li class="s_event_list_facebook"><a href="#"><span class="fa fa-facebook"/></a></li>
|
||
<li class="s_event_list_twitter"><a href="#"><span class="fa fa-twitter"/></a></li>
|
||
<li class="s_event_list_google_plus"><a href="#"><span class="fa fa-google-plus"/></a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="s_event_list_item o_animate" style="animation-play-state: paused; -webkit-animation-play-state: paused;">
|
||
<time class="bg-epsilon" datetime="2014-07-20 0000">
|
||
<span class="s_event_list_day o_animate" style="animation-play-state: paused; -webkit-animation-play-state: paused;">
|
||
<font class="text-gamma">05</font>
|
||
</span>
|
||
<span class="s_event_list_month">
|
||
<font class="text-gamma">Sep</font>
|
||
</span>
|
||
<span class="s_event_list_year">2014</span>
|
||
<span class="s_event_list_time">
|
||
<font class="text-gamma">12:00 AM</font>
|
||
</span>
|
||
</time>
|
||
<div class="s_event_list_info">
|
||
<h4 class="s_event_list_title">Your Event Name</h4>
|
||
<p class="s_event_list_desc">Write a description of your event here.</p>
|
||
<ul>
|
||
<li><a href="#"><span class="fa fa-globe"/> Link</a></li>
|
||
<li><a href="#"><span class="fa fa-info-circle"/> Info</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="s_event_list_social">
|
||
<ul>
|
||
<li class="s_event_list_facebook"><a href="#"><span class="fa fa-facebook"/></a></li>
|
||
<li class="s_event_list_twitter"><a href="#"><span class="fa fa-twitter"/></a></li>
|
||
<li class="s_event_list_google_plus"><a href="#"><span class="fa fa-google-plus"/></a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="s_event_list_item">
|
||
<time class="bg-gamma" datetime="2014-07-20 0000">
|
||
<span class="s_event_list_day">
|
||
<font class="text-epsilon">2</font>
|
||
</span>
|
||
<span class="s_event_list_month">
|
||
<font class="text-epsilon">Jul</font>
|
||
</span>
|
||
<span class="s_event_list_year">2014</span>
|
||
<span class="s_event_list_time">
|
||
<font class="text-green">12:00 AM</font>
|
||
</span>
|
||
</time>
|
||
<div class="s_event_list_info">
|
||
<h4 class="s_event_list_title">Your Event Name</h4>
|
||
<p class="s_event_list_desc">Write a description of your event here.</p>
|
||
<ul>
|
||
<li><a href="#"><span class="fa fa-globe"/> Link</a></li>
|
||
<li><a href="#"><span class="fa fa-info-circle"/> Info</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="s_event_list_social">
|
||
<ul>
|
||
<li class="s_event_list_facebook"><a href="#"><span class="fa fa-facebook"/></a></li>
|
||
<li class="s_event_list_twitter"><a href="#"><span class="fa fa-twitter"/></a></li>
|
||
<li class="s_event_list_google_plus"><a href="#"><span class="fa fa-google-plus"/></a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-12">
|
||
<p class="text-center">With Theme Clean you get a list of your events with date, time, description, etc. Select the simple or image mode and edit your content.
|
||
<br/>You can link your events to your favorite social network.
|
||
</p>
|
||
</div>
|
||
<div class="col-md-6 mt32 mb32">
|
||
<div class="s_event_list_item">
|
||
<time class="bg-epsilon" datetime="2014-07-20">
|
||
<span class="s_event_list_day">
|
||
<font class="text-gamma">18</font>
|
||
</span>
|
||
<span class="s_event_list_month">
|
||
<font class="text-gamma">Jul</font>
|
||
</span>
|
||
<span class="s_event_list_year">2014</span>
|
||
<span class="s_event_list_time">
|
||
<font class="text-gamma">ALL DAY</font>
|
||
</span>
|
||
</time>
|
||
<img class="img-responsive" src="/web/image/theme_common.image_content_09"/>
|
||
<div class="s_event_list_info">
|
||
<h4 class="s_event_list_title">Your Event Name</h4>
|
||
<p class="s_event_list_desc">Write a description of your event here.</p>
|
||
<ul>
|
||
<li><a href="#"><span class="fa fa-globe"/> Link</a></li>
|
||
<li><a href="#"><span class="fa fa-info-circle"/> Info</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="s_event_list_social">
|
||
<ul>
|
||
<li class="s_event_list_facebook"><a href="#"><span class="fa fa-facebook"/></a></li>
|
||
<li class="s_event_list_twitter"><a href="#"><span class="fa fa-twitter"/></a></li>
|
||
<li class="s_event_list_google_plus"><a href="#"><span class="fa fa-google-plus"/></a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 mt32 mb32">
|
||
<div class="s_event_list_item">
|
||
<time class="bg-epsilon" datetime="2014-07-20">
|
||
<span class="s_event_list_day">
|
||
<font class="text-gamma">21</font>
|
||
</span>
|
||
<span class="s_event_list_month">
|
||
<font class="text-gamma">Jul</font>
|
||
</span>
|
||
<span class="s_event_list_year">2014</span>
|
||
<span class="s_event_list_time">
|
||
<font class="text-gamma">ALL DAY</font>
|
||
</span>
|
||
</time>
|
||
<div class="s_event_list_icon">
|
||
<img class="img img-responsive" src="/theme_orchid/static/src/img/content/content_img_10.jpg" style="animation-play-state: paused; -webkit-animation-play-state: paused;"/>
|
||
</div>
|
||
<div class="s_event_list_info">
|
||
<h4 class="s_event_list_title">Your Event Name</h4>
|
||
<p class="s_event_list_desc">Write a description of your event here.</p>
|
||
<ul>
|
||
<li><a href="#"><span class="fa fa-globe"/> Link</a></li>
|
||
<li><a href="#"><span class="fa fa-info-circle"/> Info</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="s_event_list_social">
|
||
<ul>
|
||
<li class="s_event_list_facebook"><a href="#"><span class="fa fa-facebook"/></a></li>
|
||
<li class="s_event_list_twitter"><a href="#"><span class="fa fa-twitter"/></a></li>
|
||
<li class="s_event_list_google_plus"><a href="#"><span class="fa fa-google-plus"/></a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="parallax s_parallax o_animate bg-img-01" data-scroll-background-offset="0" data-scroll-background-ratio="0.3" style="height: 288px; overflow: hidden; animation-play-state: paused; -webkit-animation-play-state: paused; background-attachment: scroll; background-position: 0px 0px;">
|
||
<div>
|
||
<div class="oe_structure"/></div>
|
||
</section>
|
||
<section class="s_product_list o_animate bg-alpha" style="animation-play-state: paused; -webkit-animation-play-state: paused;">
|
||
<div class="container-fluid product-list">
|
||
<div class="row">
|
||
<div class="col-md-2 col-sm-4 col-xs-6">
|
||
<a href="http://www.odoo.com">
|
||
<img alt="#" src="/web/image/theme_common.image_product_01" class="img img-responsive"/>
|
||
</a>
|
||
<a class="btn btn-default" href="http://www.odoo.com">
|
||
<i class="fa fa-eye"/>Watch item
|
||
</a>
|
||
</div>
|
||
<div class="col-md-2 col-sm-4 col-xs-6">
|
||
<a href="http://www.odoo.com">
|
||
<img alt="#" src="/web/image/theme_common.image_product_02" class="img img-responsive"/>
|
||
</a>
|
||
<a class="btn btn-default" href="http://www.odoo.com">
|
||
<i class="fa fa-eye"/>Watch item
|
||
</a>
|
||
</div>
|
||
<div class="col-md-2 col-sm-4 col-xs-6">
|
||
<a href="http://www.odoo.com">
|
||
<img alt="#" src="/web/image/theme_common.image_product_03" class="img img-responsive"/>
|
||
</a>
|
||
<a class="btn btn-default" href="http://www.odoo.com">
|
||
<i class="fa fa-eye"/>Watch item
|
||
</a>
|
||
</div>
|
||
<div class="col-md-2 col-sm-4 col-xs-6">
|
||
<a href="http://www.odoo.com">
|
||
<img alt="#" src="/web/image/theme_common.image_product_04" class="img img-responsive"/>
|
||
</a>
|
||
<a class="btn btn-default" href="http://www.odoo.com">
|
||
<i class="fa fa-eye"/>Watch item
|
||
</a>
|
||
</div>
|
||
<div class="col-md-2 col-sm-4 col-xs-6">
|
||
<a href="http://www.odoo.com">
|
||
<img alt="#" src="/web/image/theme_common.image_product_05" class="img img-responsive"/>
|
||
</a>
|
||
<a class="btn btn-default" href="http://www.odoo.com">
|
||
<i class="fa fa-eye"/>Watch item
|
||
</a>
|
||
</div>
|
||
<div class="col-md-2 col-sm-4 col-xs-6">
|
||
<a href="http://www.odoo.com">
|
||
<img alt="#" src="/web/image/theme_common.image_product_06" class="img img-responsive"/>
|
||
</a>
|
||
<a class="btn btn-default" href="http://www.odoo.com">
|
||
<i class="fa fa-eye"/>Watch item
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="s_big_icon_circle">
|
||
<div class="container">
|
||
<div class="row mb64">
|
||
<div class="col-md-12 text-center mb32">
|
||
<h2 class="px36 o_animate" style="animation-play-state: paused; -webkit-animation-play-state: paused;">
|
||
<font class="text-alpha">Big Icon Circle</font>
|
||
</h2>
|
||
<h3 class="text-muted px22 o_animate" style="animation-play-state: paused; -webkit-animation-play-state: paused;">
|
||
<font class="text-blue">A Great Way to Show Your Numbers</font>
|
||
</h3>
|
||
</div>
|
||
<div class="col-md-2 col-md-offset-1 mt16 mb32">
|
||
<div class="s_big_icon_circle_box o_animate" style="animation-play-state: paused; -webkit-animation-play-state: paused;">
|
||
<div class="s_big_icon_circle_icon col-md-4 center-block o_animate" style="animation-play-state: paused; -webkit-animation-play-state: paused;">
|
||
<span class="fa fa-desktop"/>
|
||
<h5 class="o_animate px16" style="animation-play-state: paused; -webkit-animation-play-state: paused;">
|
||
<font class="text-turquoise">1000 Apps</font>
|
||
</h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-2 mt16 mb32">
|
||
<div class="s_big_icon_circle_box">
|
||
<div class="s_big_icon_circle_icon col-md-4">
|
||
<span class="fa fa-users"/>
|
||
<h5 class="px16 o_animate" style="animation-play-state: paused; -webkit-animation-play-state: paused;">
|
||
<font class="text-turquoise">20.000 Users</font>
|
||
</h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-2 mt16 mb32">
|
||
<div class="s_big_icon_circle_box">
|
||
<div class="s_big_icon_circle_icon col-md-4">
|
||
<span class="fa fa-user"/>
|
||
<h5 class="px16 o_animate" style="animation-play-state: paused; -webkit-animation-play-state: paused;">
|
||
<font class="text-turquoise">234 Clients</font>
|
||
</h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-2 mt16 mb32">
|
||
<div class="s_big_icon_circle_box">
|
||
<div class="s_big_icon_circle_icon col-md-4">
|
||
<span class="fa fa-globe"/>
|
||
<h5 class="px16 o_animate" style="animation-play-state: paused; -webkit-animation-play-state: paused;">
|
||
<font class="text-turquoise">30 Countries</font>
|
||
</h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-2 mt16 mb32">
|
||
<div class="s_big_icon_circle_box">
|
||
<div class="s_big_icon_circle_icon col-md-4">
|
||
<span class="fa fa-users"/>
|
||
<h5 class="px16 o_animate" style="animation-play-state: paused; -webkit-animation-play-state: paused;">
|
||
<font class="text-turquoise">75 Partners</font>
|
||
</h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="s_cubes o_animate bg-gray-light" style="animation-play-state: paused; -webkit-animation-play-state: paused;">
|
||
<div class="container-fluid">
|
||
<div class="row">
|
||
<div class="col-md-6 cube cube-big col-xs-12 col-sm-12 bg-img-07 o_animate" style="animation-play-state: paused; -webkit-animation-play-state: paused;"/>
|
||
<div class="cube-big col-md-6 col-xs-12 col-sm-12">
|
||
<div class="row">
|
||
<div class="cube cube-text col-md-6 col-sm-6 col-xs-12">
|
||
<div class="cube-heading">
|
||
<h4 class="text-center">A good subtitle</h4>
|
||
<p class="text-center">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>
|
||
</div>
|
||
</div>
|
||
<div class="cube cube-small col-md-6 col-sm-6 col-xs-12 bg-img-04"/></div>
|
||
<div class="row">
|
||
<div class="cube cube-small col-md-6 col-sm-6 col-xs-12 bg-img-02"/>
|
||
<div class="cube cube-text col-md-6 col-sm-6 col-xs-12 last">
|
||
<div class="cube-heading">
|
||
<h4 class="text-center">A good subtitle</h4>
|
||
<p class="text-center">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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="jumbotron s_button o_animate bg-alpha mt0 mb0" style="animation-play-state: paused; -webkit-animation-play-state: paused;">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="text-muted col-md-8 col-md-offset-1">
|
||
<p class="mb0 o_animate px18" style="animation-play-state: paused; -webkit-animation-play-state: paused;">
|
||
<strong>50,000+ companies run Odoo to grow their businesses.</strong>
|
||
</p>
|
||
</div>
|
||
<div class="col-md-3 mb0">
|
||
<a class="btn btn-warning btn-lg" href="/website.contactus">
|
||
<i class="fa fa-arrow-right"/> Contact Us Now
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</t>
|
||
</template>
|
||
|
||
</odoo>
|