<!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
        <title>Socioboard | BoardMe</title>
        <link rel="apple-touch-icon" sizes="57x57" href="../../images/favicon/apple-icon-57x57.png">
        <link rel="apple-touch-icon" sizes="60x60" href="../../images/favicon/apple-icon-60x60.png">
        <link rel="apple-touch-icon" sizes="72x72" href="../../images/favicon/apple-icon-72x72.png">
        <link rel="apple-touch-icon" sizes="76x76" href="../../images/favicon/apple-icon-76x76.png">
        <link rel="apple-touch-icon" sizes="114x114" href="../../images/favicon/apple-icon-114x114.png">
        <link rel="apple-touch-icon" sizes="120x120" href="../../images/favicon/apple-icon-120x120.png">
        <link rel="apple-touch-icon" sizes="144x144" href="../../images/favicon/apple-icon-144x144.png">
        <link rel="apple-touch-icon" sizes="152x152" href="../../images/favicon/apple-icon-152x152.png">
        <link rel="apple-touch-icon" sizes="180x180" href="../../images/favicon/apple-icon-180x180.png">
        <link rel="icon" type="image/png" sizes="192x192"  href="assets/frontend//imgs/favicon/android-icon-192x192.png">
        <link rel="icon" type="image/png" sizes="32x32" href="../../images/favicon/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="96x96" href="../../images/favicon/favicon-96x96.png">
        <link rel="icon" type="image/png" sizes="16x16" href="../../images/favicon/favicon-16x16.png">
        <link rel="manifest" href="../../images/favicon/manifest.json">
        <meta name="msapplication-TileColor" content="#ffffff">
        <meta name="msapplication-TileImage" content="../../images/favicon/ms-icon-144x144.png">
        <meta name="theme-color" content="#ffffff">
        <meta property="og:site_name" content="socioboard.com">
        <meta property="og:title" content="Socioboard - Open Source Social Technology Enabler | Find More Customers on Social Media">
        <meta property="og:description" content="Be it marketing(finding leads/customers) on Social media, or listening to customer complaints, replying to them, managing multiple social media accounts from one single dashboard, finding influencers in a particular category and reaching out to them and many more things, Socioboard products can do it.">
        <meta property="og:type" content="website">
        <meta property="og:image" content="http://i.imgur.com/1B8wv5m.png">
        <meta property="og:url" content="https://www.facebook.com/SocioBoard">



        
        <!-- CSS  -->
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link href="../../global/plugins/materialize/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
        <link href="../../global/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css">
        <link href="../../css/frontend/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
        <link href="../../global/plugins/animate.css" type="text/css" rel="stylesheet" media="screen,projection"/>
    </head>

    <body>
      <div class="navbar-fixed">
        <!-- Dropdown Structure -->
          <ul id="Versions" class="dropdown-content">
            <li><a href="http://socioboard.org/">Community</a></li>
            <li><a href="agency.html">Agency</a></li>
            <li><a href="enterprise.html">Enterprise</a></li>
          </ul>
          <ul id="Versions_mob" class="dropdown-content">
            <li><a href="http://socioboard.org/">Community</a></li>
            <li><a href="agency.html">Agency</a></li>
            <li><a href="enterprise.html">Enterprise</a></li>
          </ul>
          <ul id="Insights" class="dropdown-content">
            <li><a href="http://wiki.socioboard.com/index.php/Main_Page">Wiki</a></li>
            <li><a href="http://blog.socioboard.com/category/cases">Cases</a></li>
            <li><a href="http://blog.socioboard.com/">Blogs</a></li>
            <li><a href="git_download.html">Download</a></li>
          </ul>
          <ul id="Insights_mob" class="dropdown-content">
            <li><a href="http://wiki.socioboard.com/index.php/Main_Page">Wiki</a></li>
            <li><a href="http://blog.socioboard.com/category/cases">Cases</a></li>
            <li><a href="http://blog.socioboard.com/">Blogs</a></li>
            <li><a href="git_download.html">Download</a></li>
          </ul>
          <nav class="white" role="navigation">
            <div class="nav-wrapper">
              <a id="logo-container" href="index.html" class="brand-logo"><img src="../../images/Socioboard.png" alt="Socioboard"></a>
              <ul class="right hide-on-med-and-down">
                <li><a href="company.html">Company</a></li>
                <li><a href="products.html">Products</a></li>
                <li><a class="dropdown-button" href="#!" data-activates="Versions">Versions<i class="material-icons right">arrow_drop_down</i></a></li>
                <li><a href="pricing.html">Pricing</a></li>
                <li><a class="dropdown-button" href="#!" data-activates="Insights">Insights<i class="material-icons right">arrow_drop_down</i></a></li>
                <li><a href="sample.html">Careers</a></li>
                <li><a href="training.html">Training</a></li>
                <li><a href="faqs.html">FAQs</a></li>
                <li><a href="#">Signup</a></li>
                <li><a class="waves-effect waves-light btn modal-trigger" href="#SignInModal">SignIn</a></li>
              </ul>

              <ul id="nav-mobile" class="side-nav">
                <li><a href="company.html">Company</a></li>
                <li><a href="products.html">Products</a></li>
                <li><a class="dropdown-button" href="#!" data-activates="Versions_mob">Versions<i class="material-icons right">arrow_drop_down</i></a></li>
                <li><a href="pricing.html">Pricing</a></li>
                <li><a class="dropdown-button" href="#!" data-activates="Insights_mob">Insights<i class="material-icons right">arrow_drop_down</i></a></li>
                <li><a href="sample.html">Careers</a></li>
                <li><a href="training.html">Training</a></li>
                <li><a href="faqs.html">FAQs</a></li>
                <li><a href="#">Signup</a></li>
                <li><a class="waves-effect waves-light btn">SignIn</a></li>
              </ul>
              <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
            </div>
          </nav>
      </div>

      <div class="container">
        <div class="row">
          <div class="col s12 m12">
            <div class="card-panel blue accent-1 center-align z-depth-2">
              <div class="nobox">
                <h2>#<span>chanchalsantra</span></h2>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col s12 m4">
            <div class="card cyan lighten-2 z-depth-3">
              <div class="card-content white-text">               
                <div class="row">
                  <div class="col m8 grey-text text-darken-3">
                     <span class="card-title">Total Favorites</span>
                     <p style="font-size: 40px;">44</p>
                  </div>
                  <div class="col m4"><i class="fa fa-star-o fa-5x"></i></div>
                </div>
              </div>
            </div>
          </div>
          <div class="col s12 m4">
            <div class="card cyan lighten-2 z-depth-3">
              <div class="card-content white-text">               
                <div class="row">
                  <div class="col m8 grey-text text-darken-3">
                     <span class="card-title">Total Tweets</span>
                     <p style="font-size: 40px;">44</p>
                  </div>
                  <div class="col m4"><i class="fa fa-twitch fa-5x"></i></div>
                </div>
              </div>
            </div>
          </div>
          <div class="col s12 m4">
            <div class="card cyan lighten-2 z-depth-3">
              <div class="card-content white-text">               
                <div class="row">
                  <div class="col m8 grey-text text-darken-3">
                     <span class="card-title">Total ReTweets</span>
                     <p style="font-size: 40px;">44</p>
                  </div>
                  <div class="col m4"><i class="fa fa-retweet fa-5x"></i></div>
                </div>
              </div>
            </div>
          </div>
        </div> 

        <section id="wrapper">
          <div id="container">
            <div class="block description">
              <h3>Introduction</h3>
              <p><strong>BlocksIt.js</strong> is a jQuery plugin for creating dynamic grid layout. It manages to convert HTML elements into '<em>blocks</em>' and position them in well-arranged grid layout like <a href="http://www.pinterest.com">Pinterest</a>.</p>
            </div>
            <div class="block" style="text-align:center">
              <p>Download <strong>BlocksIt.js</strong> at <br/>
              <a href="http://www.inwebson.com/jquery/blocksit-js-dynamic-grid-layout-jquery-plugin/">Plugin Article Page &raquo;</a></p> 
            </div>
            <div class="block log">
              <h3>Change Log</h3>
              <p>
                <strong>Version 1.0</strong> – First Release, 24th April 2012
              </p>
            </div>
            
            <div class="block" data-size="2">
              <h3>How to Use?</h3>
              <p><pre>
          $(document).ready(function() {
            $('#container').BlocksIt({
              numOfCol: 4,
              offsetX: 8,
              offsetY: 8,
              blockElement: '.block'
            });
          });</pre></p>
            </div>
            
            <div class="block">
              <h3>License</h3>
              <p><strong>BlocksIt.js</strong> is licensed under the GNU General Public License version 2 or later.</p>
            </div>
            
            <div class="block demo">
              <h3>IMG</h3>
              <p>
              <a class="imgholder" href="demo1/">
                <img src="http://www.inwebson.com/demo/blocksit-js/random-grid.jpg" alt="" />
              </a>
              Dynamic grid layout with random generated blocks. <strong>REFRESH</strong> the page and see different result!
              </p>
            </div>
            <div class="block demo">
              <h3>Demo 2</h3>
              <p>
              <a class="imgholder" href="demo2/">
                <img src="http://www.inwebson.com/demo/blocksit-js/pinterest.jpg" width="210" height="150" alt="" />
              </a>
              Pinterest dynamic grid layout integrated with CSS3 Transitions. <strong>RESIZE</strong> your browser to animate these blocks! 
              </p>
            </div>
            <div class="block demo">
              <h3>Demo 2</h3>
              <p>
              <a class="imgholder" href="demo2/">
                <img src="http://www.inwebson.com/demo/blocksit-js/pinterest.jpg" width="210" height="150" alt="" />
              </a>
              Pinterest dynamic grid layout integrated with CSS3 Transitions. <strong>RESIZE</strong> your browser to animate these blocks! 
              </p>
            </div>
            <div class="block demo">
              <h3>Demo 2</h3>
              <p>
              <a class="imgholder" href="demo2/">
                <img src="http://www.inwebson.com/demo/blocksit-js/pinterest.jpg" width="210" height="150" alt="" />
              </a>
              Pinterest dynamic grid layout integrated with CSS3 Transitions. <strong>RESIZE</strong> your browser to animate these blocks! 
              </p>
            </div>
            <div class="block demo">
              <h3>Demo 2</h3>
              <p>
              <a class="imgholder" href="demo2/">
                <img src="http://www.inwebson.com/demo/blocksit-js/pinterest.jpg" width="210" height="150" alt="" />
              </a>
              Pinterest dynamic grid layout integrated with CSS3 Transitions. <strong>RESIZE</strong> your browser to animate these blocks! 
              </p>
            </div>
            <div class="block demo">
              <h3>Demo 2</h3>
              <p>
              <a class="imgholder" href="demo2/">
                <img src="http://www.inwebson.com/demo/blocksit-js/pinterest.jpg" width="210" height="150" alt="" />
              </a>
              Pinterest dynamic grid layout integrated with CSS3 Transitions. <strong>RESIZE</strong> your browser to animate these blocks! 
              </p>
            </div>
            <div class="block demo">
              <h3>Demo 2</h3>
              <p>
              <a class="imgholder" href="demo2/">
                <img src="http://www.inwebson.com/demo/blocksit-js/pinterest.jpg" width="210" height="150" alt="" />
              </a>
              Pinterest dynamic grid layout integrated with CSS3 Transitions. <strong>RESIZE</strong> your browser to animate these blocks! 
              </p>
            </div>
            <div class="block demo">
              <h3>Demo 2</h3>
              <p>
              <a class="imgholder" href="demo2/">
                <img src="http://www.inwebson.com/demo/blocksit-js/pinterest.jpg" width="210" height="150" alt="" />
              </a>
              Pinterest dynamic grid layout integrated with CSS3 Transitions. <strong>RESIZE</strong> your browser to animate these blocks! 
              </p>
            </div>

            <div class="block demo">
              <h3>Buggy?</h3>
              <p>Something's not working? Or any other questions regarding this plugin please let me know using comments form in <a href="http://www.inwebson.com/jquery/blocksit-js-dynamic-grid-layout-jquery-plugin/">plugin article page</a>.</p>
            </div>
          </div>
        </section>           
      </div>


  <footer class="page-footer">
    <div class="container">
      <div class="row center-align">
        <div class="col l6 s12">
          <h5 class="white-text">GET IN TOUCH WITH US</h5>
          <p class="grey-text text-lighten-4">#58 L V Complex, 2nd Floor<br>7th Block, 80 Feet Road, Koramangala Layout, Bangalore-560095</p><img src="https://www.socioboard.com/Themes/Socioboard/Contents/img/contactus.png">
        </div>
        <div class="col l6 s12">
          <div id="fb-root"></div>
          <script>(function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.5&appId=1551064375135193";
            fjs.parentNode.insertBefore(js, fjs);
          }(document, 'script', 'facebook-jssdk'));</script>

          <div class="fb-page" data-href="https://www.facebook.com/socioboard" data-tabs="timeline" data-width="500" data-height="200" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/socioboard"><a href="https://www.facebook.com/socioboard">Socioboard</a></blockquote></div></div>
        </div>
      </div>
    </div>
    <div class="footer-copyright">
      <div class="container center">
      <!-- Made by with ♥ <a class="brown-text text-lighten-3" href="https://www.behance.net/chanchalsantra">Chanchal Santra</a> -->
      Copyright © 2014 - 2016 Socioboard Technologies Pvt. Ltd. All Rights Reserved.
      </div>
    </div>
  </footer>
      <div class="fixed-action-btn " style="bottom: 45px; right: 24px;">
        <a class="btn-floating btn-large red">
          <i class="fa fa-bullhorn"></i>
        </a>
        <ul>
          <li><a class="btn-floating red"><i class="fa fa-google-plus"></i></a></li>
          <li><a class="btn-floating light-blue darken-3"><i class="fa fa-facebook"></i></a></li>
          <li><a class="btn-floating light-blue accent-4"><i class="fa fa-linkedin"></i></a></li>
          <li><a class="btn-floating cyan lighten-3"><i class="fa fa-twitter"></i></a></li>
        </ul>
      </div>

  <!-- SignUp Modal -->
  <div id="SignUpModal" class="modal modal-fixed-footer" style="width: 600px;">
    <div class="modal-content">
      <h4>Create a free account</h4>
      <div class="row">
        <form class="col s12">
          <div class="row">
             <div class="input-field col s12 m12">
                <select>
                  <optgroup label="Basic Plans">
                    <option value="1">Basic(Free)</option>
                    <option value="2">Standard</option>
                    <option value="3">Premium</option>
                    <option value="4">Deluxe</option>
                  </optgroup>
                  <optgroup label="Extra Plans">
                    <option value="5">Topaz</option>
                    <option value="6">Ruby</option>
                    <option value="7">Gold</option>
                    <option value="8">Platinum</option>
                  </optgroup>
                </select>
                <label>Choose your option</label>
              </div>
          </div>
          <div class="row">
            <div class="input-field col s6">
              <input id="first_name" type="text" class="validate">
              <label for="first_name">First Name</label>
            </div>
            <div class="input-field col s6">
              <input id="last_name" type="text" class="validate">
              <label for="last_name">Last Name</label>
            </div>
          </div>
          <div class="row">
            <div class="input-field col s12">
              <input id="email" type="email" class="validate">
              <label for="email" data-error="wrong" data-success="right">Email</label>
            </div>
          </div>
          <div class="row">
            <div class="input-field col s12">
              <input id="password" type="password" class="validate">
              <label for="password">Password</label>
            </div>
          </div>
          <div class="row">
            <div class="input-field col s12">
              <input id="password" type="password" class="validate">
              <label for="password">Confirm Password</label>
            </div>
          </div>   

        </form>
      </div>
  </div>
    <div class="modal-footer">
      <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Agree</a>
    </div>
  </div>


<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-58515856-3', 'auto');
  ga('send', 'pageview');

</script>

    <!--Import jQuery before materialize.js-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script type="text/javascript" src="../../global/plugins/materialize/js/materialize.min.js"></script>
      <script type="text/javascript" src="../../js/frontend/init.js"></script>

    <script type="text/javascript" src="../../global/plugins/blocksIt/blocksit.min.js"></script>
     
     <script type="text/javascript">
       $('.image-wrapper').hover(function() {
                $(this).removeClass('hoverOut').addClass('hoverIn');
            }, function() {
                $(this).removeClass('hoverIn').addClass('hoverOut');
            });
     </script>

    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script>
    $(document).ready(function() {
      //vendor script
      $('#header')
      .css({ 'top':-50 })
      .delay(1000)
      .animate({'top': 0}, 800);
      
      $('#footer')
      .css({ 'bottom':-15 })
      .delay(1000)
      .animate({'bottom': 0}, 800);
      
      
      $('#container').BlocksIt({
        numOfCol: 4,
        offsetX: 8,
        offsetY: 8
      });
      
      console.log($('#container').height());
    });
    </script>

    </body>
  </html>