<!doctype html>
<html class="no-js">
    <head>
    {{> head}}
    </head>
    <body class="">
        {{> header}}
        <section class="so-social-promo sosocial-facebook white-text text-promo-center">
            <h1>Learn About Facebook</h1>
            <h2>This Is A Sub-Title About Facebook</h2>
            <a href="#" class="button button-large button-green">Go ahead and push the button</a>
        </section>
        <main class="so-social-main-content">
            <div class="content overlap">
                <section class="two-columns">
                    <label for="select">Select</label>
                    <select class="basic" name="select" >
                        <option value="">Select something…</option>
                        <option>Lorem</option>
                        <option>Ipsum</option>
                        <option>Dolor</option>
                        <option>Sit</option>
                        <option>Amet</option>
                    </select>
                    <label for="sample">Text Input</label>
                    <input type="text" name="sample" />
                    <label for="sample">Numbers</label>
                    <input type="text" pattern="[0-9]*" name="sample" />
                    <label for="text_area">Text Area</label>
                    <textarea id="text_area" rows="10"></textarea>
                    <label>Switch</label>
                    <label class="label-switch">
                        <input type="checkbox" />
                        <div class="checkbox"></div>
                    </label>
                </section>
                <section class="two-columns">
                    <label for="radio">Radio Buttons</label>
                    <input type="radio" id="radio-1" name="radio" />
                    <label for="radio-1"><span></span>Radio Button 1</label>
                    <input type="radio" id="radio-2" name="radio" />
                    <label for="radio-2"><span></span>Radio Button 2</label>
                    <input type="radio" id="radio-3" name="radio" />
                    <label for="radio-3"><span></span>Radio Button 3</label>
                    <br/>
                    <label for="checkboxes">Checkboxes</label>
                    <br/>
                    <input id="check-1" type="checkbox" name="checkboxes" value="check-1">  
                    <label for="check-1"><span></span>Checkbox 1</label>   
                    <input id="check-2" type="checkbox" name="checkboxes" value="check-2">  
                    <label for="check-2"><span></span>Checkbox 2</label>
                    <input id="check-3" type="checkbox" name="checkboxes" value="check-3">  
                    <label for="check-3"><span></span>Checkbox 3</label> 
                    <br/>
                    <label for="checkboxes">Buttons</label>
                    <br/>
                    <input class="button" value="Submit" type="submit"><br/>
                    <input class="button button-small" value="Submit" type="submit"><br/>
                    <input class="button button-large button-red" value="Submit" type="submit"><br/>
                    <input class="button button-wide-50 button-green" value="Submit" type="submit"><br/>
                    <input class="button button-wide-100 button-blue" value="Submit" type="submit"><br/>
                    <a href="#" class="button button-large button-gold">Gold Button Link</a>
                </section>
                <section class="one-column">
                    
                </section>
            </div>
        </main>  
          {{> email_signup}}
        {{> footer}}
        {{> login_modal}}
        {{> navigation}}
        {{> footer_scripts}}
    </body>
</html>