<?xml version="1.0" encoding="utf-8"?>
<odoo>

    <template id="assets_frontend" name="Custom styles"
              inherit_id="web.assets_frontend">
        <xpath expr="." position="inside">
            <link rel='stylesheet'
                  href='/forksand_website/static/src/css/scrolling-nav.css'/>
            <link rel='stylesheet'
                  href='/forksand_website/static/src/css/baguetteBox.min.css'/>
            <script type="text/javascript"
                    src="/forksand_website/static/src/js/scrolling-nav.js"></script>
            <script type="text/javascript"
                    src="/forksand_website/static/src/js/baguetteBox.min.js"></script>
            <script>
                baguetteBox.run('.tz-gallery');
            </script>
        </xpath>
    </template>

    <template id="website.homepage" priority="29" name="Home">

        <t t-call="website.layout">
            <t t-set="pageName" t-value="'homepage'"/>
            <div id="wrap" class="oe_structure oe_empty">
                <t t-call="forksand_website.init_header"/>
                <t t-call="forksand_website.about"/>
                <t t-call="forksand_website.media"/>
                <t t-call="forksand_website.contact"/>
            </div>
        </t>
    </template>


    <template id="forksand_website.init_header" name="Initial Header">
        <div class="bg-primary text-white" id="intro">
            <div class="img-fluid container text-center">
                <img alt=""
                     src="forksand_website/static/src/img/logoVertical.png"/>

                <p class="lead">Free Software &amp; Open Source Hardware</p>
                <div class="mx-auto">
                    <a class="btn btn-light btnRoundded buttonMargin sr-button js-scroll-trigger"
                       href="#media">Free Software</a>
                    <a class="btn btn-light btnRoundded buttonMargin sr-button js-scroll-trigger"
                       href="#media">Open Source Hardware</a>
                </div>
            </div>
        </div>
    </template>

    <template id="forksand_website.about" name="About">
        <div class="section1" id="about">
            <div class="case-study showcase-bottom">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="title text-center">

                                <h1 class="Brown">About Us</h1>

                                <div class="myHeading">Fork Sand, Inc. is a free
                                    Software, Open Source
                                    <br/>
                                    Hardware company developing Secure computing
                                    <br/>
                                    devices that guard users&#39; privacy.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <template id="forksand_website.media" name="Media Content">
        <section class="showcase-left" id="media">
            <div class="container">
                <div class="title text-center">
                    <h1 class="Brown">Media</h1>
                </div>
                <div class="tz-gallery">
                     <div class="row">
                        <div class="col-md-4">
                            <a class="lightbox"
                               href="forksand_website/static/src/img/media/forksand-hifive-case.png">
                                <img alt="Bridge"
                                     class="img-fluid img-thumbnail img2"
                                     src="forksand_website/static/src/img/media/forksand-hifive-case.png"/>
                            </a>
                        </div>

                        <div class="col-md-4">
                            <a class="lightbox"
                               href="forksand_website/static/src/img/media/IMG_20180118_182153.jpg">
                                <img alt="Bridge"
                                     class="img-fluid img-thumbnail img2"
                                     src="forksand_website/static/src/img/media/IMG_20180118_182153.jpg"/>
                            </a>
                        </div>

                        <div class="col-md-4">
                            <a class="lightbox"
                               href="forksand_website/static/src/img/media/IMG_20180117_222633.jpg">
                                <img alt="Bridge"
                                     class="img-fluid img-thumbnail img2"
                                     src="forksand_website/static/src/img/media/IMG_20180117_222633.jpg"/>
                            </a>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4">
                            <a class="lightbox"
                               href="forksand_website/static/src/img/media/freecadhifi.png">
                                <img alt="Bridge"
                                     class="img-fluid img-thumbnail img2"
                                     src="forksand_website/static/src/img/media/freecadhifi.png"/>
                            </a>
                        </div>

                        <div class="col-md-4">
                            <a class="lightbox"
                               href="forksand_website/static/src/img/media/IMG_20180117_231522.jpg">
                                <img alt="Bridge"
                                     class="img-fluid img-thumbnail img2"
                                     src="forksand_website/static/src/img/media/IMG_20180117_231522.jpg"/>
                            </a>
                        </div>

                        <div class="col-md-4">
                            <a class="lightbox"
                               href="forksand_website/static/src/img/media/forksand-hifive-case.png">
                                <img alt="Bridge"
                                     class="img-fluid img-thumbnail img2"
                                     src="forksand_website/static/src/img/media/forksand-hifive-case.png"/>
                            </a>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4">
                            <a class="lightbox"
                               href="forksand_website/static/src/img/media/IMG_20180118_182121.jpg">
                                <img alt="Bridge"
                                     class="img-fluid img-thumbnail img2"
                                     src="forksand_website/static/src/img/media/IMG_20180118_182121.jpg"/>
                            </a>
                        </div>

                        <div class="col-md-4">
                            <a class="lightbox"
                               href="forksand_website/static/src/img/media/IMG_20180118_182153.jpg">
                                <img alt="Bridge"
                                     class="img-fluid img-thumbnail img2"
                                     src="forksand_website/static/src/img/media/IMG_20180118_182153.jpg"/>
                            </a>
                        </div>

                        <div class="col-md-4">
                            <a class="lightbox"
                               href="forksand_website/static/src/img/media/IMG_20180118_190156.jpg">
                                <img alt="Bridge"
                                     class="img-fluid img-thumbnail img2"
                                     src="forksand_website/static/src/img/media/IMG_20180118_190156.jpg"/>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="section showcase-bottom">
            <div class="card col-md-12 container bg-primary text-white text-center p-2">
                <div class="myHeading white mx-auto">Built upon the philosophy
                    of users' freedom
                </div>
            </div>
        </section>
    </template>

    <template id="forksand_website.contact" name="Contact Forksand">
        <div class="container">
            <div class="title text-center">
                    <h1 class="Brown">Contact</h1>
                </div>
            <div class="row">
                <div class="col-md-8">
                    <div class="text-center mt64" name="mail_button">
                        <form action="/website_form/" method="post" data-model_name="crm.lead" data-success_page="/contactus-thank-you" class="s_website_form form-horizontal container-fluid mt32" enctype="multipart/form-data" data-editable-form="false">
                        <div class="form-group form-field o_website_form_required_custom">
                            <label class="col-md-3 col-sm-4 control-label" for="contact_name">Your Name</label>
                            <div class="col-md-7 col-sm-8">
                                <input type="text" class="form-control o_website_form_input" name="contact_name" t-att-value="request.params.get('contact_name', '')" required=""/>
                            </div>
                        </div>
                        <div class="form-group form-field">
                            <label class="col-md-3 col-sm-4 control-label" for="phone">Phone Number</label>
                            <div class="col-md-7 col-sm-8">
                                <input type="text" class="form-control o_website_form_input" name="phone" t-att-value="request.params.get('phone', '')"/>
                            </div>
                        </div>
                        <div class="form-group form-field o_website_form_required_custom">
                            <label class="col-md-3 col-sm-4 control-label" for="email_from">Email</label>
                            <div class="col-md-7 col-sm-8">
                                <input type="text" class="form-control o_website_form_input" name="email_from" required="" t-att-value="request.params.get('email_from', '')"/>
                            </div>
                        </div>
                        <div class="form-group form-field o_website_form_required_custom">
                            <label class="col-md-3 col-sm-4 control-label" for="partner_name">Your Company</label>
                            <div class="col-md-7 col-sm-8">
                                <input type="text" class="form-control o_website_form_input" name="partner_name" required="" t-att-value="request.params.get('partner_name', '')"/>
                            </div>
                        </div>
                        <div class="form-group form-field o_website_form_required">
                            <label class="col-md-3 col-sm-4 control-label" for="name">Subject</label>
                            <div class="col-md-7 col-sm-8">
                                <input type="text" class="form-control o_website_form_input" name="name" required="" t-att-value="request.params.get('name', '')"/>
                            </div>
                        </div>
                        <div class="form-group form-field o_website_form_required_custom">
                            <label class="col-md-3 col-sm-4 control-label" for="description">Your Question</label>
                            <div class="col-md-7 col-sm-8">
                                <textarea class="form-control o_website_form_input" name="description" required=""><t t-esc="request.params.get('description', '')"/></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-offset-3 col-sm-offset-4 col-sm-8 col-md-7">
                                <span class="btn btn-primary btn-lg o_website_form_send">Send</span>
                                <span id="o_website_form_result"/>
                            </div>
                        </div>
                    </form>
                    </div>
                </div>
                <div class="col-md-4 mb32">
                    <img class="img-fluid" src="forksand_website/static/src/img/BC.png"/>
                </div>
            </div>
        </div>
    </template>
</odoo>