    <div data-ng-controller="DesignFeedsController">
            <!-- Page name -->
            <div class="container">
                <div class="col m12">
                    <h4>Design [ sample Feeds ]</h4> 
                </div>
            </div>

            <!-- START CONTENT -->
            <section id="content">
                <div class="row">
                    <div class="col m12">
                        <!--start container-->
                            <div class="container">
                                <!--card widgets start-->
                                <div id="profiles">
                                    <div class="row">
                                        <div class="col s12 m6 l3">
                                            <div id="profile-card" class="card hoverable">
                                                <div class="card-image waves-effect waves-block waves-light">
                                                    <img class="activator" src="https://pbs.twimg.com/profile_banners/2787373862/1463827268/1500x500" alt="user background">
                                                </div>
                                                <div class="card-content">
                                                    <img src="https://scontent.fmaa1-2.fna.fbcdn.net/v/t1.0-1/p160x160/12642714_10208734204812139_4588413661156335090_n.jpg?oh=a91e7be2de10b98cd1fc1fa42689b993&oe=57D065F4" alt="" class="circle responsive-img activator card-profile-image">
                                                    <a class="btn-floating activator btn-move-up waves-effect waves-light darken-2 right">
                                                        <i class="mdi-editor-mode-edit"></i>
                                                    </a>

                                                    <span class="card-title activator grey-text text-darken-4 truncate">Sumit Ghosh</span>
                                                    <p><i class="mdi-action-perm-identity cyan-text text-darken-2"></i> CEO &amp; Founder at SocioBoard</p>
                                                    <p><i class="mdi-action-perm-phone-msg cyan-text text-darken-2"></i> +91 (77) 95181291</p>
                                                    <p class="truncate"><i class="mdi-communication-email cyan-text text-darken-2"></i> sumitghosh.co.in/about/</p>

                                                </div>
                                                <div class="card-reveal">
                                                    <span class="card-title grey-text text-darken-4 truncate">Sumit Ghosh <i class="mdi-navigation-close right"></i></span>
                                                    <p>Entrepreneur, Geek, Ace Programmer,Affiliate Marketer, SEO Specialist , Strategist, Visionary, Thinker, Idea Creator, Hard Core Planner and a Nasty Boss! </p>
                                                    <p><i class="mdi-action-perm-identity cyan-text text-darken-2"></i> CEO &amp; Founder at SocioBoard</p>
                                                    <p><i class="mdi-action-perm-phone-msg cyan-text text-darken-2"></i> +91 (77) 95181291</p>
                                                    <p class="truncate"><i class="mdi-communication-email cyan-text text-darken-2"></i> chanchal.santra@gmail.com</p>
                                                    <p><i class="mdi-social-cake cyan-text text-darken-2"></i> 03rd Oct 1989</p>
                                                    <p><i class="mdi-device-airplanemode-on cyan-text text-darken-2"></i> Cal - LA</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col s12 m6 l3">
                                            <div id="profile-card" class="card hoverable">
                                                <div class="card-image waves-effect waves-block waves-light">
                                                    <img class="activator" src="https://scontent.fmaa1-2.fna.fbcdn.net/t31.0-8/13122822_1357554337603689_8691565281788489588_o.jpg" alt="user background">
                                                </div>
                                                <div class="card-content">
                                                    <img src="https://pbs.twimg.com/profile_images/683936086079307777/FXrYjpal.jpg" alt="" class="circle responsive-img activator card-profile-image">
                                                    <a class="btn-floating activator btn-move-up waves-effect waves-light darken-2 right">
                                                        <i class="mdi-editor-mode-edit"></i>
                                                    </a>

                                                    <span class="card-title activator grey-text text-darken-4 truncate">Chanchal Santra</span>
                                                    <p><i class="mdi-action-perm-identity cyan-text text-darken-2"></i> UX/UI developer</p>
                                                    <p><i class="mdi-action-perm-phone-msg cyan-text text-darken-2"></i> +91 (77) 95181291</p>
                                                    <p class="truncate"><i class="mdi-communication-email cyan-text text-darken-2"></i> chanchal.santra@gmail.com</p>

                                                </div>
                                                <div class="card-reveal">
                                                    <span class="card-title grey-text text-darken-4 truncate">Chanchal Santra <i class="mdi-navigation-close right"></i></span>
                                                    <p>Here is some more information about this card.</p>
                                                    <p><i class="mdi-action-perm-identity cyan-text text-darken-2"></i> UX/UI developer</p>
                                                    <p><i class="mdi-action-perm-phone-msg cyan-text text-darken-2"></i> +91 (77) 95181291</p>
                                                    <p class="truncate"><i class="mdi-communication-email cyan-text text-darken-2"></i> chanchal.santra@gmail.com</p>
                                                    <p><i class="mdi-social-cake cyan-text text-darken-2"></i> 03rd Oct 1989</p>
                                                    <p><i class="mdi-device-airplanemode-on cyan-text text-darken-2"></i> Cal - LA</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col s12 m6 l3">
                                            <div id="profile-card" class="card hoverable">
                                                <div class="card-image waves-effect waves-block waves-light">
                                                    <img class="activator" src="https://scontent.fmaa1-2.fna.fbcdn.net/t31.0-8/13301352_1081253325253982_4931672395736585777_o.jpg" alt="user background">
                                                </div>
                                                <div class="card-content">
                                                    <img src="https://scontent.fmaa1-2.fna.fbcdn.net/v/t1.0-9/942284_1035274849851830_9039244784084275624_n.jpg?oh=b91ae6f7b68eb0176bb2995cc820fb02&oe=57CEEC2C" alt="" class="circle responsive-img activator card-profile-image">
                                                    <a class="btn-floating activator btn-move-up waves-effect waves-light darken-2 right">
                                                        <i class="mdi-editor-mode-edit"></i>
                                                    </a>

                                                    <span class="card-title activator grey-text text-darken-4 truncate">Suresh Bandi</span>
                                                    <p><i class="mdi-action-perm-identity cyan-text text-darken-2"></i> Software developer</p>
                                                    <p><i class="mdi-action-perm-phone-msg cyan-text text-darken-2"></i> +91 (77) 95181291</p>
                                                    <p class="truncate"><i class="mdi-communication-email cyan-text text-darken-2"></i> sureshbandi@gmail.com</p>

                                                </div>
                                                <div class="card-reveal">
                                                    <span class="card-title grey-text text-darken-4 truncate">Chanchal Santra <i class="mdi-navigation-close right"></i></span>
                                                    <p>Here is some more information about this card.</p>
                                                    <p><i class="mdi-action-perm-identity cyan-text text-darken-2"></i> UX/UI developer</p>
                                                    <p><i class="mdi-action-perm-phone-msg cyan-text text-darken-2"></i> +91 (77) 95181291</p>
                                                    <p class="truncate"><i class="mdi-communication-email cyan-text text-darken-2"></i> chanchal.santra@gmail.com</p>
                                                    <p><i class="mdi-social-cake cyan-text text-darken-2"></i> 03rd Oct 1989</p>
                                                    <p><i class="mdi-device-airplanemode-on cyan-text text-darken-2"></i> Cal - LA</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col s12 m6 l3">
                                            <div id="profile-card" class="card hoverable">
                                                <div class="card-image waves-effect waves-block waves-light">
                                                    <img class="activator" src="https://scontent.fmaa1-2.fna.fbcdn.net/t31.0-8/13122822_1357554337603689_8691565281788489588_o.jpg" alt="user background">
                                                </div>
                                                <div class="card-content">
                                                    <img src="https://pbs.twimg.com/profile_images/683936086079307777/FXrYjpal.jpg" alt="" class="circle responsive-img activator card-profile-image">
                                                    <a class="btn-floating activator btn-move-up waves-effect waves-light darken-2 right">
                                                        <i class="mdi-editor-mode-edit"></i>
                                                    </a>

                                                    <span class="card-title activator grey-text text-darken-4 truncate">Chanchal Santra</span>
                                                    <p><i class="mdi-action-perm-identity cyan-text text-darken-2"></i> UX/UI developer</p>
                                                    <p><i class="mdi-action-perm-phone-msg cyan-text text-darken-2"></i> +91 (77) 95181291</p>
                                                    <p class="truncate"><i class="mdi-communication-email cyan-text text-darken-2"></i> chanchal.santra@gmail.com</p>

                                                </div>
                                                <div class="card-reveal">
                                                    <span class="card-title grey-text text-darken-4 truncate">Chanchal Santra <i class="mdi-navigation-close right"></i></span>
                                                    <p>Here is some more information about this card.</p>
                                                    <p><i class="mdi-action-perm-identity cyan-text text-darken-2"></i> UX/UI developer</p>
                                                    <p><i class="mdi-action-perm-phone-msg cyan-text text-darken-2"></i> +91 (77) 95181291</p>
                                                    <p class="truncate"><i class="mdi-communication-email cyan-text text-darken-2"></i> chanchal.santra@gmail.com</p>
                                                    <p><i class="mdi-social-cake cyan-text text-darken-2"></i> 03rd Oct 1989</p>
                                                    <p><i class="mdi-device-airplanemode-on cyan-text text-darken-2"></i> Cal - LA</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 300 }'>
                                  <div class="grid-item">
                                    <div class="">
                                        <div class="card">
                                            <div class="card-image waves-effect waves-block waves-light">
                                                <a href="#"><img src="https://pbs.twimg.com/profile_images/683936086079307777/FXrYjpal.jpg" alt="blog-img">
                                                </a>
                                            </div>
                                            <ul class="card-action-buttons">
                                                <li><a class="btn-floating waves-effect waves-light green accent-4"><i class="mdi-social-share"></i></a>
                                                </li>                            
                                                <li><a class="btn-floating waves-effect waves-light light-blue"><i class="mdi-action-info activator"></i></a>
                                                </li>
                                            </ul>
                                            <div class="card-content">
                                                <p class="row">
                                                  <span class="left"><a href="">Web Design</a></span>
                                                  <span class="right">18th June, 2015</span>
                                                </p>
                                                <h4 class="card-title grey-text text-darken-4"><a href="#" class="grey-text text-darken-4">Material Design Card - For Blog Post Article</a>
                                                </h4>
                                                <p class="blog-post-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                                <div class="row">
                                                  <div class="col s2">
                                                    <img src="images/avatar.jpg" alt="" class="circle responsive-img valign profile-image">
                                                  </div>
                                                  <div class="col s9"> By <a href="#">John Doe</a></div>
                                                </div>
                                            </div>
                                            <div class="card-reveal">
                                                <span class="card-title grey-text text-darken-4"><i class="mdi-navigation-close right"></i> Apple MacBook Pro A1278 13"</span>
                                                <p>Here is some more information about this blog that is only revealed once clicked on.</p>
                                            </div>
                                        </div>
                                    </div>
                                  </div>
                                  <div class="grid-item">
                                    <div class="">
                                        <div class="card">
                                            <div class="card-image waves-effect waves-block waves-light">
                                                <a href="#"><img src="https://pbs.twimg.com/profile_images/683936086079307777/FXrYjpal.jpg" alt="blog-img">
                                                </a>
                                            </div>
                                            <ul class="card-action-buttons">
                                                <li><a class="btn-floating waves-effect waves-light green accent-4"><i class="mdi-social-share"></i></a>
                                                </li>                            
                                                <li><a class="btn-floating waves-effect waves-light light-blue"><i class="mdi-action-info activator"></i></a>
                                                </li>
                                            </ul>
                                            <div class="card-content">
                                                <p class="row">
                                                  <span class="left"><a href="">Web Design</a></span>
                                                  <span class="right">18th June, 2015</span>
                                                </p>
                                                <h4 class="card-title grey-text text-darken-4"><a href="#" class="grey-text text-darken-4">Material Design Card - For Blog Post Article</a>
                                                </h4>
                                                <p class="blog-post-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                                <div class="row">
                                                  <div class="col s2">
                                                    <img src="images/avatar.jpg" alt="" class="circle responsive-img valign profile-image">
                                                  </div>
                                                  <div class="col s9"> By <a href="#">John Doe</a></div>
                                                </div>
                                            </div>
                                            <div class="card-reveal">
                                                <span class="card-title grey-text text-darken-4"><i class="mdi-navigation-close right"></i> Apple MacBook Pro A1278 13"</span>
                                                <p>Here is some more information about this blog that is only revealed once clicked on.</p>
                                            </div>
                                        </div>
                                    </div>
                                  </div>
                                  <div class="grid-item">
                                    <div class="">
                                        <div class="card">
                                            <div class="card-image waves-effect waves-block waves-light">
                                                <a href="#"><img src="https://pbs.twimg.com/profile_images/683936086079307777/FXrYjpal.jpg" alt="blog-img">
                                                </a>
                                            </div>
                                            <ul class="card-action-buttons">
                                                <li><a class="btn-floating waves-effect waves-light green accent-4"><i class="mdi-social-share"></i></a>
                                                </li>                            
                                                <li><a class="btn-floating waves-effect waves-light light-blue"><i class="mdi-action-info activator"></i></a>
                                                </li>
                                            </ul>
                                            <div class="card-content">
                                                <p class="row">
                                                  <span class="left"><a href="">Web Design</a></span>
                                                  <span class="right">18th June, 2015</span>
                                                </p>
                                                <h4 class="card-title grey-text text-darken-4"><a href="#" class="grey-text text-darken-4">Material Design Card - For Blog Post Article</a>
                                                </h4>
                                                <p class="blog-post-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                                <div class="row">
                                                  <div class="col s2">
                                                    <img src="images/avatar.jpg" alt="" class="circle responsive-img valign profile-image">
                                                  </div>
                                                  <div class="col s9"> By <a href="#">John Doe</a></div>
                                                </div>
                                            </div>
                                            <div class="card-reveal">
                                                <span class="card-title grey-text text-darken-4"><i class="mdi-navigation-close right"></i> Apple MacBook Pro A1278 13"</span>
                                                <p>Here is some more information about this blog that is only revealed once clicked on.</p>
                                            </div>
                                        </div>
                                    </div>
                                  </div>
                                  <div class="grid-item">
                                    <div class="">
                                        <div class="card">
                                            <div class="card-image waves-effect waves-block waves-light">
                                                <a href="#"><img src="https://pbs.twimg.com/profile_images/683936086079307777/FXrYjpal.jpg" alt="blog-img">
                                                </a>
                                            </div>
                                            <ul class="card-action-buttons">
                                                <li><a class="btn-floating waves-effect waves-light green accent-4"><i class="mdi-social-share"></i></a>
                                                </li>                            
                                                <li><a class="btn-floating waves-effect waves-light light-blue"><i class="mdi-action-info activator"></i></a>
                                                </li>
                                            </ul>
                                            <div class="card-content">
                                                <p class="row">
                                                  <span class="left"><a href="">Web Design</a></span>
                                                  <span class="right">18th June, 2015</span>
                                                </p>
                                                <h4 class="card-title grey-text text-darken-4"><a href="#" class="grey-text text-darken-4">Material Design Card - For Blog Post Article</a>
                                                </h4>
                                                <p class="blog-post-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                                <div class="row">
                                                  <div class="col s2">
                                                    <img src="images/avatar.jpg" alt="" class="circle responsive-img valign profile-image">
                                                  </div>
                                                  <div class="col s9"> By <a href="#">John Doe</a></div>
                                                </div>
                                            </div>
                                            <div class="card-reveal">
                                                <span class="card-title grey-text text-darken-4"><i class="mdi-navigation-close right"></i> Apple MacBook Pro A1278 13"</span>
                                                <p>Here is some more information about this blog that is only revealed once clicked on.</p>
                                            </div>
                                        </div>
                                    </div>
                                  </div>
                                  <div class="grid-item">
                                    <div class="">
                                        <div class="card">
                                            <div class="card-image waves-effect waves-block waves-light">
                                                <a href="#"><img src="https://pbs.twimg.com/profile_images/683936086079307777/FXrYjpal.jpg" alt="blog-img">
                                                </a>
                                            </div>
                                            <ul class="card-action-buttons">
                                                <li><a class="btn-floating waves-effect waves-light green accent-4"><i class="mdi-social-share"></i></a>
                                                </li>                            
                                                <li><a class="btn-floating waves-effect waves-light light-blue"><i class="mdi-action-info activator"></i></a>
                                                </li>
                                            </ul>
                                            <div class="card-content">
                                                <p class="row">
                                                  <span class="left"><a href="">Web Design</a></span>
                                                  <span class="right">18th June, 2015</span>
                                                </p>
                                                <h4 class="card-title grey-text text-darken-4"><a href="#" class="grey-text text-darken-4">Material Design Card - For Blog Post Article</a>
                                                </h4>
                                                <p class="blog-post-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                                <div class="row">
                                                  <div class="col s2">
                                                    <img src="images/avatar.jpg" alt="" class="circle responsive-img valign profile-image">
                                                  </div>
                                                  <div class="col s9"> By <a href="#">John Doe</a></div>
                                                </div>
                                            </div>
                                            <div class="card-reveal">
                                                <span class="card-title grey-text text-darken-4"><i class="mdi-navigation-close right"></i> Apple MacBook Pro A1278 13"</span>
                                                <p>Here is some more information about this blog that is only revealed once clicked on.</p>
                                            </div>
                                        </div>
                                    </div>
                                  </div>
                                  <div class="grid-item">
                                    <div class="">
                                        <div class="card">
                                            <div class="card-image waves-effect waves-block waves-light">
                                                <a href="#"><img src="https://pbs.twimg.com/profile_images/683936086079307777/FXrYjpal.jpg" alt="blog-img">
                                                </a>
                                            </div>
                                            <ul class="card-action-buttons">
                                                <li><a class="btn-floating waves-effect waves-light green accent-4"><i class="mdi-social-share"></i></a>
                                                </li>                            
                                                <li><a class="btn-floating waves-effect waves-light light-blue"><i class="mdi-action-info activator"></i></a>
                                                </li>
                                            </ul>
                                            <div class="card-content">
                                                <p class="row">
                                                  <span class="left"><a href="">Web Design</a></span>
                                                  <span class="right">18th June, 2015</span>
                                                </p>
                                                <h4 class="card-title grey-text text-darken-4"><a href="#" class="grey-text text-darken-4">Material Design Card - For Blog Post Article</a>
                                                </h4>
                                                <p class="blog-post-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                                <div class="row">
                                                  <div class="col s2">
                                                    <img src="images/avatar.jpg" alt="" class="circle responsive-img valign profile-image">
                                                  </div>
                                                  <div class="col s9"> By <a href="#">John Doe</a></div>
                                                </div>
                                            </div>
                                            <div class="card-reveal">
                                                <span class="card-title grey-text text-darken-4"><i class="mdi-navigation-close right"></i> Apple MacBook Pro A1278 13"</span>
                                                <p>Here is some more information about this blog that is only revealed once clicked on.</p>
                                            </div>
                                        </div>
                                    </div>
                                  </div>
                                  <div class="grid-item">
                                    <div class="">
                                        <div class="card">
                                            <div class="card-image waves-effect waves-block waves-light">
                                                <a href="#"><img src="https://pbs.twimg.com/profile_images/683936086079307777/FXrYjpal.jpg" alt="blog-img">
                                                </a>
                                            </div>
                                            <ul class="card-action-buttons">
                                                <li><a class="btn-floating waves-effect waves-light green accent-4"><i class="mdi-social-share"></i></a>
                                                </li>                            
                                                <li><a class="btn-floating waves-effect waves-light light-blue"><i class="mdi-action-info activator"></i></a>
                                                </li>
                                            </ul>
                                            <div class="card-content">
                                                <p class="row">
                                                  <span class="left"><a href="">Web Design</a></span>
                                                  <span class="right">18th June, 2015</span>
                                                </p>
                                                <h4 class="card-title grey-text text-darken-4"><a href="#" class="grey-text text-darken-4">Material Design Card - For Blog Post Article</a>
                                                </h4>
                                                <p class="blog-post-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                                <div class="row">
                                                  <div class="col s2">
                                                    <img src="images/avatar.jpg" alt="" class="circle responsive-img valign profile-image">
                                                  </div>
                                                  <div class="col s9"> By <a href="#">John Doe</a></div>
                                                </div>
                                            </div>
                                            <div class="card-reveal">
                                                <span class="card-title grey-text text-darken-4"><i class="mdi-navigation-close right"></i> Apple MacBook Pro A1278 13"</span>
                                                <p>Here is some more information about this blog that is only revealed once clicked on.</p>
                                            </div>
                                        </div>
                                    </div>
                                  </div>
                                  <div class="grid-item">
                                    <div class="">
                                        <div class="card">
                                            <div class="card-image waves-effect waves-block waves-light">
                                                <a href="#"><img src="https://pbs.twimg.com/profile_images/683936086079307777/FXrYjpal.jpg" alt="blog-img">
                                                </a>
                                            </div>
                                            <ul class="card-action-buttons">
                                                <li><a class="btn-floating waves-effect waves-light green accent-4"><i class="mdi-social-share"></i></a>
                                                </li>                            
                                                <li><a class="btn-floating waves-effect waves-light light-blue"><i class="mdi-action-info activator"></i></a>
                                                </li>
                                            </ul>
                                            <div class="card-content">
                                                <p class="row">
                                                  <span class="left"><a href="">Web Design</a></span>
                                                  <span class="right">18th June, 2015</span>
                                                </p>
                                                <h4 class="card-title grey-text text-darken-4"><a href="#" class="grey-text text-darken-4">Material Design Card - For Blog Post Article</a>
                                                </h4>
                                                <p class="blog-post-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                                <div class="row">
                                                  <div class="col s2">
                                                    <img src="images/avatar.jpg" alt="" class="circle responsive-img valign profile-image">
                                                  </div>
                                                  <div class="col s9"> By <a href="#">John Doe</a></div>
                                                </div>
                                            </div>
                                            <div class="card-reveal">
                                                <span class="card-title grey-text text-darken-4"><i class="mdi-navigation-close right"></i> Apple MacBook Pro A1278 13"</span>
                                                <p>Here is some more information about this blog that is only revealed once clicked on.</p>
                                            </div>
                                        </div>
                                    </div>
                                  </div>

                                </div>
                            </div>
                        <!--end container-->
                    </div>
                </div>

                <!-- Compose Email Trigger -->
                <div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
                  <a class="btn-floating btn-large red modal-trigger" href="#ComposePostModal">
                    <i class="large mdi-editor-mode-edit  animated bounceIn infinite"></i>
                  </a>
                </div>

                <!-- Compose Email Structure -->
                <div id="ComposePostModal" class="modal">
                  <div class="modal-content">
                    <nav class="red">
                      <div class="nav-wrapper">
                        <div class="left col s12 m5 l5">
                          <ul>
                            <li><a href="#!" class="email-menu"><i class="modal-action modal-close  mdi-hardware-keyboard-backspace"></i></a>
                            </li>
                            <li><a href="#!" class="email-type">Compose</a>
                            </li>
                          </ul>
                        </div>
                        <div class="col s12 m7 l7 hide-on-med-and-down">
                          <ul class="right">
                            <li><a href="#!"><i class="modal-action modal-close  mdi-content-send"></i></a>
                            </li>
                          </ul>
                        </div>

                      </div>
                    </nav>
                  </div>
                  <div class="model-email-content">
                    <div class="row">
                      <form class="col s12">
                        <div class="row">
                             <div class="input-field col s12">
                            <select multiple>
                              <option value="" disabled selected>Choose your profile</option>
                              <option value="1"><span class="fa fa-facebook"></span>Chanchal</option>
                              <option value="2" data-icon="https://pbs.twimg.com/profile_images/683936086079307777/FXrYjpal.jpg" class="circle">Profile_2</option>
                              <option value="3">Profile_3</option>
                            </select>
                            <label>Select Profiles</label>
                          </div>
                        </div>
                          <!--Default version-->
                        <div class="row section">
                          <div class="col s12 m4 l3">
                             <p>Select your file</p>
                          </div>
                          <div class="col s12 m8 l9">
                              <input type="file" id="input-file-now" class="dropify" data-default-file="" />
                          </div>
                        </div>
                        <div class="row">
                          <div class="input-field col s12">
                            <textarea id="compose" class="materialize-textarea" length="500"></textarea>
                            <label for="compose">Compose email</label>
                          </div>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>
            </section>
            <!-- END CONTENT -->

            <!-- add profile -->
            <div id="addprofile" class="modal">
                <div class="modal-content">
                  <h4>Adding Profiles</h4>
                    <div class="row">
                        <div class="col s12">
                          <ul class="tabs tab-demo z-depth-1">
                            <li class="tab col s1"><a class="active" href="#twitter"><i class="fa fa-twitter fa-fw fa-2x"></i></a></li>
                            <li class="tab col s1"><a href="#facebook"><i class="fa fa-facebook fa-fw fa-2x"></i></a></li>
                            <li class="tab col s1"><a href="#google"><i class="fa fa-google-plus fa-fw fa-2x"></i></a></li>
                            <li class="tab col s1"><a href="#linkedin"><i class="fa fa-linkedin fa-fw fa-2x"></i></a></li>
                            <li class="tab col s1"><a href="#instagram"><i class="fa fa-instagram fa-fw fa-2x"></i></a></li>
                            <li class="tab col s1"><a href="#tumblr"><i class="fa fa-tumblr fa-fw fa-2x"></i></a></li>
                            <li class="tab col s1"><a href="#youtube"><i class="fa fa-youtube fa-fw fa-2x"></i></a></li>
                            <li class="tab col s1"><a href="#ganalytics"><i class="fa fa-line-chart fa-fw fa-2x"></i></a></li>
                          </ul>
                        </div>
                        <div id="twitter" class="col s12">
                            <div class="center-align">
                                <p>Please make sure you are logged in with the proper account when you authorize Socioboard.</p>
                                <a class="waves-effect waves-light btn"><i class="fa fa-twitter fa-fw"></i>Add a Twitter Profile</a>
                                <p>
                                  <input type="checkbox" id="Follow1" />
                                  <label for="Follow1">Follow Socioboard on twitter for update &amp; announcements</label>
                                </p>
                            </div>
                        </div>
                        <div id="facebook" class="col s12">
                            <div class="center-align">
                                <p>Socioboard needs permission to access and publish content to Facebook on your behalf. To grant permission, you must be an admin for your brand’s Facebook page.</p>
                                <a class="waves-effect waves-light btn"><i class="fa fa-facebook fa-fw"></i>Add a Facebook Profile</a>
                                <a class="waves-effect waves-light btn modal-trigger" href="#FbFanpageModal"><i class="fa fa-facebook fa-fw"></i>Add a Facebook Fanpage</a>
                                <a class="waves-effect waves-light btn"><i class="fa fa-facebook fa-fw"></i>Add a Facebook Fanpage Analytics</a>
                            </div>
                        </div>
                        <div id="google" class="col s12">
                            <div class="center-align">
                                <p>Allow Socioboard access to your Google+ account, you must first give authorization from the Google website</p>
                                <a class="waves-effect waves-light btn"><i class="fa fa-google-plus fa-fw"></i>Add a Google+ Profile</a>
                            </div>
                        </div>
                        <div id="linkedin" class="col s12">
                            <div class="center-align">
                                <p>Grant access to your profile to share updates and view your feed.</p>
                                <a class="waves-effect waves-light btn"><i class="fa fa-linkedin fa-fw"></i>Add Linkedin Profile</a>
                                <a class="waves-effect waves-light btn"><i class="fa fa-linkedin fa-fw"></i>Add Linkedin Company Page</a>
                            </div>
                        </div>
                        <div id="instagram" class="col s12">
                            <div class="center-align">
                                <p>To allow Socioboard access to your Instagram account, you must first give authorization from the Instagram website</p>
                                <a class="waves-effect waves-light btn"><i class="fa fa-instagram fa-fw"></i>Add Instagram Profile</a>
                            </div>
                        </div>
                        <div id="tumblr" class="col s12">
                            <div class="center-align">
                                <p>To allow Socioboard access to your Tumblr account, you must first give authorization from the Tumblr website</p>
                                <a class="waves-effect waves-light btn"><i class="fa fa-instagram fa-fw"></i>Add a tumblr Profile</a>
                            </div>
                        </div>
                        <div id="youtube" class="col s12">
                            <div class="center-align">
                                <p>To allow Socioboard access to your Youtube account, you must first give authorization from the Youtube website</p>
                                <a class="waves-effect waves-light btn"><i class="fa fa-youtube fa-fw"></i>Connect your personal youtube</a>
                            </div>
                        </div>
                        <div id="ganalytics" class="col s12">
                            <div class="center-align">
                                <p>Add your Google Analytics Account to see how your website traffic correlates with your social media activity.</p>
                                <a class="waves-effect waves-light btn"><i class="fa fa-line-chart fa-fw"></i>Connect your personal GoogleAnalytics</a>
                            </div>
                        </div>
                  </div>             
                </div>
            </div>

            <!-- Fb Fanpage Modal  -->
            <div id="FbFanpageModal" class="modal">
                <div class="modal-content">
                    <h4>CHOOSE FACEBOOK PAGES TO CONNECT</h4>
                    <ul class="collection">
                        <li class="collection-item avatar">
                            <div class="left">
                                <img src="https://graph.facebook.com/938022872953726/picture?type=small" alt="Socioboard" class="circle">
                                <span class="title">Socioboard</span>
                                <p>Connected</p>
                            </div>
                            <p class="right">
                              <input type="checkbox" id="Socioboard" />
                              <label for="Socioboard"></label>
                            </p>
                        </li>
                        <li class="collection-item avatar">
                            <div class="left">
                                <img src="https://graph.facebook.com/284030164045/picture?type=small" alt="Globussoft" class="circle">
                                <span class="title">Globussoft</span>
                                <p>Connected</p>
                            </div>
                            <p class="right">
                              <input type="checkbox" id="Globussoft" />
                              <label for="Globussoft"></label>
                            </p>
                        </li>
                        <li class="collection-item avatar">
                            <div class="left">
                                <img src="https://graph.facebook.com/1872928502931573/picture?type=small" alt="DailyOfficeCocktail" class="circle">
                                <span class="title">DailyOfficeCocktail</span>
                                <p>Connected</p>
                            </div>
                            <p class="right">
                              <input type="checkbox" id="DailyOfficeCocktail" />
                              <label for="DailyOfficeCocktail"></label>
                            </p>
                        </li>
                    </ul>
                </div>
                <div class="modal-footer">
                  <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
                  <a href="#!" class=" modal-action waves-effect waves-green btn-flat">Connect</a>
                </div>
            </div>

            <!-- Modal Structure -->
            <div id="searchcatagory" class="modal">
                <div class="modal-content">
                <a href="" class="right modal-action modal-close waves-effect waves-green"><i class="icon-close"></i></a>
                  <h4 class="center">Categories Featured</h4>
                  <div class="row">
                    <div class="col l12 s12 m12">
                        <div class="input-field">
                          <input value="SocioBoard" id="categories" type="text" class="validate">
                          <label class="active" for="categories">Search your categories</label>
                        </div>
                    </div>
                    <div class="col l4 m4 s12">
                        <div class="collection">
                            <a href="#!" class="collection-item active">Advertising</a>
                            <a href="#!" class="collection-item">Agriculture</a>
                            <a href="#!" class="collection-item">Aircraft</a>
                            <a href="#!" class="collection-item">Animals</a>
                        </div>
                    </div>
                    <div class="col l4 m4 s12">
                        <div class="collection">
                            <a href="#!" class="collection-item">Digital Marketing</a>
                            <a href="#!" class="collection-item">Economy</a>
                            <a href="#!" class="collection-item">Food &amp; Beverage</a>
                            <a href="#!" class="collection-item">HR &amp; Management</a>
                        </div>
                    </div>
                    <div class="col l4 m4 s12">
                        <div class="collection">
                            <a href="#!" class="collection-item">Knowledge Management</a>
                            <a href="#!" class="collection-item">Internet</a>
                            <a href="#!" class="collection-item">Literature</a>
                            <a href="#!" class="collection-item">Marketing</a>
                        </div>
                    </div>
                  </div>
                </div>
            </div>

    </div>
