slides.html

<section class="intro" id="intro">
    <div class="logo-wrapper">
        <div class="logo"><span class="visually-hidden">SpinW</span></div>
    </div>
</section>
<section class="title" id="title">
    <div class="grid-wrapper">
        <div class="header">
            <!-- Remove logo--full class to only show brand mark -->
            <div class="logo logo--full"><span class="visually-hidden">SpinW</span></div>
        </div>
        <div class="content">
            <h1>Introduction to SpinW 3.1</h1>
            <div class="description">
                This is where the description goes. Keep it short and sweet.
            </div>
        </div>
        <div class="credit">
            <hr/>
            <div class="label">Presented By</div>
            <div class="name">Simon Ward</div>
            <div class="role">Scientific Software Developer - ESS</div>
        </div>
    </div>
</section>
<!--  -->

<section>
    <section class="blank color--ice" id="Section1:1">
        <div class="grid-wrapper">
            <div class="header">
                <div class="logo"></div>
                <div class="section">Section</div>
            </div>
            <div class="content">Content</div>
        </div>
    </section>

    <section class="blank color--ice" id="Section1:2">
        <div class="grid-wrapper">
            <div class="header">
                <div class="logo"></div>
                <div class="section">Section</div>
            </div>
            <div class="content">Content</div>
        </div>
    </section>

    <section class="blank color--ice" id="Section1:3">
        <div class="grid-wrapper">
            <div class="header">
                <div class="logo"></div>
                <div class="section">Section</div>
            </div>
            <div class="content">Content</div>
        </div>
    </section>

    <section class="blank color--ice" id="Section1:4">
        <div class="grid-wrapper">
            <div class="header">
                <div class="logo"></div>
                <div class="section">Section</div>
            </div>
            <div class="content">Content</div>
        </div>
    </section>
</section>

<!-- Element attributes -->

<section class="data-markdown color--ice" id="Markdown:1">
    <div class="grid-wrapper">
        <div class="header">
            <div class="logo"></div>
            <div class="section">Section</div>
        </div>
        <div class="content">
                    <textarea data-template>
                        ```
                        This is some code
                        ```
    </textarea>
        </div>
    </div>
</section>


<section class="blank color--dark" id="some example">
    <div class="grid-wrapper">
        <div class="header">
            <div class="logo"></div>
            <div class="section">Section</div>
        </div>
        <div class="content">Content</div>
    </div>
</section>

<section class="code color--dark" id="code--path">
    <div class="grid-wrapper">
        <div class="header">
            <div class="logo"></div>
            <div class="section">Symbolic calculation example</div>
        </div>
        <figure class="code">
            <!--
                Code highlighting is performed by highlight.js

                Leading whitespace is trimmed by default.  Add the data-notrim attribute to the code element to preserve it.
                If showing an HTML example, add the data-escape attribute to the code element.
            -->
            <pre>
                <code class="lang-matlab">
chainS = spinw;
chainS.symbolic(true)
chainS.genlattice('lat_const',[3 8 8])
chainS.addatom('r',[0 0 0],'S',sym(1))
chainS.gencoupling;
chainS.addmatrix('label','J1')
chainS.addmatrix('label','J2')
chainS.addcoupling('mat','J1','bond',1);
chainS.addcoupling('mat','J2','bond',2);
chainS.genmagstr('mode','helical','k',sym([1/2 0 0]),'nExt',[2 1 1],'n',sym([0 0 1]),'S',sym([0 1 0])')
                </code>
            </pre>
            <!-- figcaption element is optional, can be placed above or below code  -->
            <figcaption class="path">/src/myplanet/reveal/functions.php</figcaption>
        </figure>
        <div class="grid-wrapper" style="grid-template-columns: 1fr 1fr;">
            <div style="text-align: center; height: auto"><img src="test.png"></div>
            <div style="text-align: center; height: auto"><img src="test.png"></div>
        </div>
    </div>
</section>

<!-- Team page can accommodate one or two profiles. -->
<section class="showit" id="Testing">
    <div class="grid-wrapper">
        <div class="header">
            <div class="logo"></div>
            <div class="section">Section</div>
        </div>
        <div class="content">
            <div class="profile">
                <div class="basics">
                    <img src="test.png">
                    <div class="name">Some Important Image</div>
                    <div class="role">These are some more details...</div>
                </div>
                <div class="details">
                    <p>Yuriy is a Front-end Developer and Solutions Architect with Myplanet, specializing in Front-end
                        and Drupal development. Originally joining the team remotely from Ukraine as a Creative Lead,
                        Yuriy made the switch to full-time coding—and to Canada—in 2013. During his time with Myplanet,
                        Yuriy has worked on an increasingly impressive array of projects for some of our most
                        high-profile customers. He holds his Acquia certifications for Development and Front-end
                        Development.</p>
                    <p class="supplement">Front-end Developers build the user interface layer of each product, using
                        their deep knowledge of Drupal theming and use of popular front-end frameworks, including
                        Angular.js, React.js, d3.js, and of course HTML5 and CSS.</p>
                </div>
            </div>
        </div>
    </div>
</section>
<section>
    <div class="grid-wrapper">
        <div class="header">
            <div class="logo"></div>
            <div class="section">Section</div>
        </div>
        <div class="content">
            <div class="plot" id="myplot1" style="background-color:#fff; width:800px; height:400px; margin: 0 auto;">
                <!--
                {
                 "target":"#myplot1",
                 "height":400,
                 "width":"800",
                 "xAxis":{"domain":[-10,10]},
                 "yAxis":{"domain":[-5,5]},
                 "grid":true,
                 "data":[{"fn":"sin(x)","color":"darkred"}]
                }
                -->
            </div>
        </div>
    </div>
</section>

<section class="showit" id="Testing2">
    <div class="grid-wrapper">
        <div class="header">
            <div class="logo"></div>
            <div class="section">Section</div>
        </div>
        <div class="content">
            <div class="profile">
                <div class="basics">
                    <img src="test.png">
                    <div class="name">Some Important Image</div>
                    <div class="role">These are some more details...</div>
                </div>
                <div class="details">
                    <p>Yuriy is a Front-end Developer and Solutions Architect with Myplanet, specializing in Front-end
                        and Drupal development. Originally joining the team remotely from Ukraine as a Creative Lead,
                        Yuriy made the switch to full-time coding—and to Canada—in 2013. During his time with Myplanet,
                        Yuriy has worked on an increasingly impressive array of projects for some of our most
                        high-profile customers. He holds his Acquia certifications for Development and Front-end
                        Development.</p>
                    <p class="supplement">Front-end Developers build the user interface layer of each product, using
                        their deep knowledge of Drupal theming and use of popular front-end frameworks, including
                        Angular.js, React.js, d3.js, and of course HTML5 and CSS.</p>
                </div>
            </div>

            <div class="profile">
                <div class="basics">
                                        <pre>
                         <code class="lang-matlab">
This is a 'code' test
                         </code>
                    </pre>
                </div>
                <div class="details">
                    <p>Yuriy is a Front-end Developer and Solutions Architect with Myplanet, specializing in Front-end
                        and Drupal development. Originally joining the team remotely from Ukraine as a Creative Lead,
                        Yuriy made the switch to full-time coding—and to Canada—in 2013. During his time with Myplanet,
                        Yuriy has worked on an increasingly impressive array of projects for some of our most
                        high-profile customers. He holds his Acquia certifications for Development and Front-end
                        Development.</p>
                    <p class="supplement">Front-end Developers build the user interface layer of each product, using
                        their deep knowledge of Drupal theming and use of popular front-end frameworks, including
                        Angular.js, React.js, d3.js, and of course HTML5 and CSS.</p>
                </div>
            </div>

        </div>
    </div>
</section>


<!-- Team page can accommodate one or two profiles. -->
<section class="team" id="team">
    <div class="grid-wrapper">
        <div class="header">
            <div class="logo"></div>
            <div class="section">Section</div>
        </div>
        <div class="content">
            <div class="profile">
                <div class="basics">
                    <img src="test.png">
                    <div class="name">Name</div>
                    <div class="role">Role</div>
                </div>
                <div class="details">
                    <h2>Profile</h2>
                    <p>Yuriy is a Front-end Developer and Solutions Architect with Myplanet, specializing in Front-end
                        and Drupal development. Originally joining the team remotely from Ukraine as a Creative Lead,
                        Yuriy made the switch to full-time coding—and to Canada—in 2013. During his time with Myplanet,
                        Yuriy has worked on an increasingly impressive array of projects for some of our most
                        high-profile customers. He holds his Acquia certifications for Development and Front-end
                        Development.</p>
                    <p class="supplement">Front-end Developers build the user interface layer of each product, using
                        their deep knowledge of Drupal theming and use of popular front-end frameworks, including
                        Angular.js, React.js, d3.js, and of course HTML5 and CSS.</p>
                </div>
            </div>
            <div class="profile">
                <div class="basics">
                    <img src="test.png">
                    <div class="name">Name</div>
                    <div class="role">Role</div>
                </div>
                <div class="details">
                    <h2>Profile</h2>
                    <p>Yuriy is a Front-end Developer and Solutions Architect with Myplanet, specializing in Front-end
                        and Drupal development. Originally joining the team remotely from Ukraine as a Creative Lead,
                        Yuriy made the switch to full-time coding—and to Canada—in 2013. During his time with Myplanet,
                        Yuriy has worked on an increasingly impressive array of projects for some of our most
                        high-profile customers. He holds his Acquia certifications for Development and Front-end
                        Development.</p>
                    <p class="supplement">Front-end Developers build the user interface layer of each product, using
                        their deep knowledge of Drupal theming and use of popular front-end frameworks, including
                        Angular.js, React.js, d3.js, and of course HTML5 and CSS.</p>
                </div>
            </div>
        </div>
    </div>
</section>


<section class="end" id="end-white">
    <div class="logo-wrapper">
        <div class="logo"><span class="visually-hidden">Myplanet</span></div>
    </div>
</section>