Origtek_Noe/03網頁設計&使用者介面/02.元赫科技-官方網站/00其他/付費-網頁版型_redbiz-.../RedBiz-template/blog-grid-sidebar.html

<!DOCTYPE html>
<html lang="zxx">
<head>
  <title>Blog Grid</title>
  <meta charset="UTF-8">
  <link rel="shortcut icon" href="img/logos/logo-shortcut.png"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  <!-- Bootstrap CSS-->
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

  <!-- Font-Awesome -->
  <link rel="stylesheet" type="text/css" href="css/font-awesome.css">

  <!-- Icomoon -->
  <link rel="stylesheet" type="text/css" href="css/icomoon.css">

  <!-- Animate.css -->
  <link rel="stylesheet" href="css/animate.css">

  <!-- Color Switcher -->
  <link rel="stylesheet" type="text/css" href="css/switcher.css">

  <!-- Owl Carousel  -->
  <link rel="stylesheet" href="css/owl.carousel.css">

  <!-- Main Styles -->
  <link rel="stylesheet" type="text/css" href="css/default.css">
  <link rel="stylesheet" type="text/css" href="css/styles.css" id="colors">

  <!-- Fonts Google -->
  <link href="https://fonts.googleapis.com/css?family=Fira+Sans:100,200,300,400,500,600,700,800,900" rel="stylesheet">

</head>
<body>


<!-- Preloader Start-->
<div id="preloader">
  <div class="row loader">
    <div class="loader-icon"></div>
  </div>
</div>
<!-- Preloader End -->


<!-- Top-Bar START -->
<div id="top-bar" class="hidden-sm-down">
  <div class="container">
    <div class="row">
      <div class="col-md-9 col-12">
        <div class="top-bar-welcome">
          <ul>
            <li>Welcome to Professional Consulting Agency</li>
          </ul>
        </div>
        <div class="top-bar-info">
          <ul>
            <li><i class="fa fa-phone"></i>(+123) 456 7890
            <li>
            <li><i class="fa fa-envelope"></i>example@gmail.com
            <li>
          </ul>
        </div>
      </div>
      <div class="col-md-3 col-12">
        <ul class="social-icons hidden-md-down">
          <li><a href="#"><i class="fa fa-facebook"></i></a></li>
          <li><a href="#"><i class="fa fa-twitter"></i></a></li>
          <li><a href="#"><i class="fa fa-instagram"></i></a></li>
          <li><a href="#"><i class="fa fa-pinterest"></i></a></li>
        </ul>
      </div>
    </div>
  </div>
</div>
<!-- Top-Bar END -->


<!-- Navbar START -->
<header>
  <nav id="navigation4" class="container navigation">
    <div class="nav-header">
      <a class="nav-brand" href="index.html">
        <img src="img/logos/logo.png" class="main-logo" alt="logo" id="main_logo">
      </a>
      <div class="nav-toggle"></div>
    </div>
    <div class="nav-menus-wrapper">
      <ul class="nav-menu align-to-right">
        <li><a href="#">Home</a>
          <div class="megamenu-panel">
            <div class="megamenu-lists">
              <ul class="megamenu-list list-col-4">
                <li class="megamenu-list-title"><a href="#">Multi Purpose 01</a></li>
                <li><a href="index.html">Home Page 01</a></li>
                <li><a href="home-2.html">Home Page 02</a></li>
                <li><a href="home-3.html">Home Page 03</a></li>
              </ul>
              <ul class="megamenu-list list-col-4">
                <li class="megamenu-list-title"><a href="#">Multi Purpose 02</a></li>
                <li><a href="home-4.html">Home Page 04</a></li>
                <li><a href="home-5.html">Home Page 05</a></li>
                <li><a href="home-6.html">Home Page 06</a></li>
              </ul>
              <ul class="megamenu-list list-col-4">
                <li class="megamenu-list-title"><a href="#">Multi Purpose 03</a></li>
                <li><a href="home-7.html">Home Page 07</a></li>
                <li><a href="home-8.html">Home Page 08</a></li>
                <li><a href="home-9.html">Home Page 09</a></li>
              </ul>
              <ul class="megamenu-list list-col-4">
                <li class="megamenu-list-title"><a href="#">Multi Purpose 04</a></li>
                <li><a href="home-10.html">Home Page 10 <span class="menu-tag">NEW</span><span class="menu-tag">HOT</span></a></li>
                <li><a href="home-11.html">Home Page 11 <span class="menu-tag">NEW</span></a></li>
                <li><a href="home-12.html">Home Page 12 <span class="menu-tag">NEW</span></a></li>
              </ul>
            </div>
          </div>
        </li>
        <li><a href="#">About</a>
          <ul class="nav-dropdown">
            <li><a href="about.html">About Us 01</a></li>
            <li><a href="about-2.html">About Us 02</a></li>
            <li><a href="team.html">Our Team 01</a></li>
            <li><a href="team-2.html">Our Team 02</a></li>
            <li><a href="team-3.html">Our Team 03</a></li>
            <li><a href="team-single.html">Team Single</a></li>
            <li><a href="partners.html">Our Partners</a></li>
          </ul>
        </li>
        <li><a href="#">Services</a>
          <ul class="nav-dropdown">
            <li><a href="services.html">Services 01</a></li>
            <li><a href="services-2.html">Services 02</a></li>
            <li><a href="services-3.html">Services 03</a></li>
            <li><a href="service-detail.html">Service Detail</a></li>
            <li><a href="cases.html">Cases</a></li>
          </ul>
        </li>
        <li><a href="#">Projects</a>
          <ul class="nav-dropdown">
            <li><a href="projects-grid.html">Grid Style</a></li>
            <li><a href="projects-masonry-3-column.html">Masonry Style 01</a></li>
            <li><a href="projects-masonry-4-column.html">Masonry Style 02</a></li>
            <li><a href="project-detail.html">Projects Detail 01</a></li>
            <li><a href="project-detail-2.html">Projects Detail 02</a></li>
          </ul>
        </li>
        <li><a href="#">Blog</a>
          <ul class="nav-dropdown">
            <li><a href="blog-grid.html">Blog Grid</a></li>
            <li><a href="blog-grid-classic.html">Blog Grid Classic</a></li>
            <li><a href="blog-grid-sidebar.html">Blog Grid Sidebar</a></li>
            <li><a href="blog-list.html">Blog List</a></li>
            <li><a href="blog-list-sidebar.html">Blog List Sidebar</a></li>
            <li><a href="blog-post.html">Blog Post</a></li>
          </ul>
        </li>
        <li><a href="#">Shop</a>
          <ul class="nav-dropdown">
            <li><a href="shop-grid.html">Grid Style 3 Col</a></li>
            <li><a href="shop-grid-4-col.html">Grid Style 4 Col</a></li>
            <li><a href="shop-grid-classic.html">Classic Style 3 Col</a></li>
            <li><a href="shop-grid-classic-4-col.html">Classic Style 4 Col</a></li>
            <li><a href="shop-single.html">Shop Single</a></li>
            <li><a href="shopping-cart.html">Shopping Cart</a></li>
          </ul>
        </li>
        <li><a href="#">Pages</a>
          <ul class="nav-dropdown">
            <li><a href="faq.html">FAQ 01</a></li>
            <li><a href="faq-2.html">FAQ 02</a></li>
            <li><a href="404.html">Error 404</a></li>
            <li><a href="under-construction.html">Under Construction</a></li>
          </ul>
        </li>
        <li><a href="#">Elements</a>
          <ul class="nav-dropdown">
            <li><a href="feature-boxes.html">Feature Boxes</a></li>
            <li><a href="pricing-lists.html">Pricing Lists</a></li>
            <li><a href="testmonials.html">Testmonials</a></li>
            <li><a href="progress-bars.html">Progress Bars</a></li>
            <li><a href="accordions.html">Accordions</a></li>
            <li><a href="animated-tabs.html">Animated Tabs</a></li>
            <li><a href="countups.html">Countups</a></li>
            <li><a href="responsive-videos.html">Responsive Videos</a></li>
          </ul>
        </li>
        <li><a href="#">Contact</a>
          <ul class="nav-dropdown">
            <li><a href="contact.html">Contact Us 01</a></li>
            <li><a href="contact-2.html">Contact Us 02</a></li>
            <li><a href="contact-3.html">Contact Us 03</a></li>
            <li><a href="contact-4.html">Contact Us 04</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>
</header>
<!-- Navbar END -->


<!-- Page Title START -->
<div class="page-title-section" style="background-image: url(http://via.placeholder.com/1730x300);">
  <div class="container">
    <h1>Blog Grid</h1>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="blog-grid-sidebar.html">Blog Grid</a></li>
    </ul>
  </div>
</div>
<!-- Page Title END -->


<!-- Blog Grid START -->
<div class="section-block">
  <div class="container">
    <div class="row">
      <!-- Left Side START -->
      <div class="col-md-9 col-sm-8 col-12 pr-30-md">
        <div class="row">
          <div class="col-md-6 col-sm-12 col-12">
            <div class="blog-grid">
              <div class="blog-grid-img">
                <img src="http://via.placeholder.com/390x245" alt="img">
                <div class="data-box-grid">
                  <h4>07</h4>
                  <p>Feb</p>
                </div>
              </div>
              <div class="blog-grid-text">
                <span>Business</span>
                <h4>Advices for young designers</h4>
                <ul>
                  <li><i class="fa fa-calendar"></i>Feb 19, 2018</li>
                  <li><i class="fa fa-list-ul"></i>Business</li>
                </ul>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.</p>

                <div class="mt-20 left-holder">
                  <a href="#" class="primary-button button-sm">Read More</a>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md-6 col-sm-12 col-12">
            <div class="blog-grid">
              <div class="blog-grid-img">
                <img src="http://via.placeholder.com/390x245" alt="img">
                <div class="data-box-grid">
                  <h4>07</h4>
                  <p>Feb</p>
                </div>
              </div>
              <div class="blog-grid-text">
                <span>Business</span>
                <h4>Advices for young designers</h4>
                <ul>
                  <li><i class="fa fa-calendar"></i>Feb 19, 2018</li>
                  <li><i class="fa fa-list-ul"></i>Business</li>
                </ul>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.</p>

                <div class="mt-20 left-holder">
                  <a href="#" class="primary-button button-sm">Read More</a>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md-6 col-sm-12 col-12">
            <div class="blog-grid">
              <div class="blog-grid-img">
                <img src="http://via.placeholder.com/390x245" alt="img">
                <div class="data-box-grid">
                  <h4>07</h4>
                  <p>Feb</p>
                </div>
              </div>
              <div class="blog-grid-text">
                <span>Business</span>
                <h4>Advices for young designers</h4>
                <ul>
                  <li><i class="fa fa-calendar"></i>Feb 19, 2018</li>
                  <li><i class="fa fa-list-ul"></i>Business</li>
                </ul>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.</p>

                <div class="mt-20 left-holder">
                  <a href="#" class="primary-button button-sm">Read More</a>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md-6 col-sm-12 col-12">
            <div class="blog-grid">
              <div class="blog-grid-img">
                <img src="http://via.placeholder.com/390x245" alt="img">
                <div class="data-box-grid">
                  <h4>07</h4>
                  <p>Feb</p>
                </div>
              </div>
              <div class="blog-grid-text">
                <span>Business</span>
                <h4>Advices for young designers</h4>
                <ul>
                  <li><i class="fa fa-calendar"></i>Feb 19, 2018</li>
                  <li><i class="fa fa-list-ul"></i>Business</li>
                </ul>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.</p>

                <div class="mt-20 left-holder">
                  <a href="#" class="primary-button button-sm">Read More</a>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md-6 col-sm-12 col-12">
            <div class="blog-grid">
              <div class="blog-grid-img">
                <img src="http://via.placeholder.com/390x245" alt="img">
                <div class="data-box-grid">
                  <h4>07</h4>
                  <p>Feb</p>
                </div>
              </div>
              <div class="blog-grid-text">
                <span>Business</span>
                <h4>Advices for young designers</h4>
                <ul>
                  <li><i class="fa fa-calendar"></i>Feb 19, 2018</li>
                  <li><i class="fa fa-list-ul"></i>Business</li>
                </ul>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.</p>

                <div class="mt-20 left-holder">
                  <a href="#" class="primary-button button-sm">Read More</a>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md-6 col-sm-12 col-12">
            <div class="blog-grid">
              <div class="blog-grid-img">
                <img src="http://via.placeholder.com/390x245" alt="img">
                <div class="data-box-grid">
                  <h4>07</h4>
                  <p>Feb</p>
                </div>
              </div>
              <div class="blog-grid-text">
                <span>Business</span>
                <h4>Advices for young designers</h4>
                <ul>
                  <li><i class="fa fa-calendar"></i>Feb 19, 2018</li>
                  <li><i class="fa fa-list-ul"></i>Business</li>
                </ul>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.</p>

                <div class="mt-20 left-holder">
                  <a href="#" class="primary-button button-sm">Read More</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Left Side END -->

      <!-- Right Side START -->
      <div class="col-md-3 col-sm-4 col-12">
        <div class="blog-list-right">
          <div id="search-input">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="Search"/>
              <span class="input-group-btn">
								<button class="btn" type="button">
									<i class="glyphicon glyphicon-search"></i>
								</button>
		               		</span>
            </div>
          </div>

          <!-- Categories -->
          <div class="blog-list-left-heading">
            <h4>Categories</h4>
          </div>
          <div class="blog-categories">
            <ul>
              <li><a href="#">All Topics</a></li>
              <li><a href="#">Business Solutions</a></li>
              <li><a href="#">Finance Services</a></li>
              <li><a href="#">Market Research</a></li>
              <li><a href="#">Professional Planning</a></li>
              <li><a href="#">World of Business</a></li>
            </ul>
          </div>

          <!-- Recent News -->
          <div class="blog-list-left-heading">
            <h4>Recent News</h4>
          </div>
          <div class="latest-posts">
            <div class="row">
              <div class="col-md-5 col-sm-5 col-4 latest-posts-img">
                <img src="http://via.placeholder.com/80x80" alt="blog-img">
              </div>

              <div class="col-md-7 col-sm-7 col-8 latest-posts-text pl-0">
                <a href="#">Simply dummy text of the printing</a>
                <span>Mar 13, 2018</span>
              </div>
            </div>
          </div>

          <div class="latest-posts">
            <div class="row">
              <div class="col-md-5 col-sm-5 col-4 latest-posts-img">
                <img src="http://via.placeholder.com/80x80" alt="blog-img">
              </div>

              <div class="col-md-7 col-sm-7 col-8 latest-posts-text pl-0">
                <a href="#">Simply dummy text of the printing</a>
                <span>Mar 19, 2018</span>
              </div>
            </div>
          </div>

          <div class="latest-posts">
            <div class="row">
              <div class="col-md-5 col-sm-5 col-4 latest-posts-img">
                <img src="http://via.placeholder.com/80x80" alt="blog-img">
              </div>

              <div class="col-md-7 col-sm-7 col-8 latest-posts-text pl-0">
                <a href="#">Simply dummy text of the printing</a>
                <span>Mar 27, 2018</span>
              </div>
            </div>
          </div>

          <!-- Archives -->
          <div class="blog-list-left-heading">
            <h4>Archives</h4>
          </div>
          <div class="archives">
            <ul>
              <li><a href="#">January 03</a> <span>(09)</span></li>
              <li><a href="#">February 17</a> <span>(13)</span></li>
              <li><a href="#">March 23</a> <span>(03)</span></li>
              <li><a href="#">April 19</a> <span>(07)</span></li>
              <li><a href="#">May 07</a> <span>(16)</span></li>
            </ul>
          </div>

          <!-- Tags -->
          <div class="blog-list-left-heading">
            <h4>Tags</h4>
          </div>
          <div class="mt-10">
            <a href="#" class="button-tag primary-button">Funding</a>
            <a href="#" class="button-tag primary-button">Merchant</a>
            <a href="#" class="button-tag primary-button">Job</a>
            <a href="#" class="button-tag primary-button">Wallet</a>
            <a href="#" class="button-tag primary-button">Technology</a>
            <a href="#" class="button-tag primary-button">Coin</a>
            <a href="#" class="button-tag primary-button">Funding</a>
            <a href="#" class="button-tag primary-button">Transaction</a>
          </div>

          <!--Share Links -->
          <div class="blog-list-left-heading">
            <h4>Share Links</h4>
          </div>
          <div class="blog-share">
            <ul>
              <li><a href="#"><i class="fa fa-facebook"></i></a></li>
              <li><a href="#"><i class="fa fa-twitter"></i></a></li>
              <li><a href="#"><i class="fa fa-instagram"></i></a></li>
              <li><a href="#"><i class="fa fa-pinterest"></i></a></li>
              <li><a href="#"><i class="fa fa-skype"></i></a></li>
            </ul>
          </div>

        </div>
      </div>
      <!-- Right Side END -->
    </div>
  </div>
</div>
<!-- Blog Grid END -->


<!-- Clients Carousel START -->
<div class="section-clients border-top border-bottom">
  <div class="container">
    <div class="owl-carousel owl-theme clients" id="clients">
      <div class="item">
        <img src="http://via.placeholder.com/155x75" alt="partner-image">
      </div>

      <div class="item">
        <img src="http://via.placeholder.com/155x75" alt="partner-image">
      </div>

      <div class="item">
        <img src="http://via.placeholder.com/155x75" alt="partner-image">
      </div>

      <div class="item">
        <img src="http://via.placeholder.com/155x75" alt="partner-image">
      </div>

      <div class="item">
        <img src="http://via.placeholder.com/155x75" alt="partner-image">
      </div>

      <div class="item">
        <img src="http://via.placeholder.com/155x75" alt="partner-image">
      </div>
    </div>
  </div>
</div>
<!-- Clients Carousel END -->


<!-- Footer START -->
<footer>
  <div class="container">
    <div class="row">
      <!-- Column 1 Start -->
      <div class="col-md-4 col-sm-6 col-12">
        <h3>About Us</h3>
        <div class="mt-25">
          <img src="img/logos/logo-footer.png" alt="footer-logo">
          <p class="mt-25">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam.</p>
          <div class="footer-social-icons mt-25">
            <ul>
              <li><a href="#"><i class="fa fa-facebook-square"></i></a></li>
              <li><a href="#"><i class="fa fa-instagram"></i></a></li>
              <li><a href="#"><i class="fa fa-pinterest"></i></a></li>
              <li><a href="#"><i class="fa fa-skype"></i></a></li>
              <li><a href="#"><i class="fa fa-youtube"></i></a></li>
            </ul>
          </div>
        </div>
      </div>
      <!-- Column 1 End -->

      <!-- Column 2 Start -->
      <div class="col-md-3 col-sm-6 col-12">
        <h3>Quick Links</h3>
        <ul class="footer-list">
          <li><a href="#">Strategic Consulting</a></li>
          <li><a href="#">Sales Services</a></li>
          <li><a href="#">Market Research</a></li>
          <li><a href="#">Online Reputation</a></li>
          <li><a href="#">Strategic Consulting</a></li>
          <li><a href="#">Sales Services</a></li>
          <li><a href="#">Market Research</a></li>
        </ul>
      </div>
      <!-- Column 2 End -->

      <!-- Column 3 Start -->
      <div class="col-md-3 col-sm-6 col-12">
        <h3>Recent Posts</h3>
        <div class="mt-25">
          <!-- Post Start -->
          <div class="footer-recent-post clearfix">
            <div class="footer-recent-post-thumb">
              <img src="http://via.placeholder.com/65x65" alt="img">
            </div>
            <div class="footer-recent-post-content">
              <span>February 7, 2018</span>
              <a href="#">Advices for young designers</a>
            </div>
          </div>
          <!-- Post End -->
          <!-- Post Start -->
          <div class="footer-recent-post clearfix">
            <div class="footer-recent-post-thumb">
              <img src="http://via.placeholder.com/65x65" alt="img">
            </div>
            <div class="footer-recent-post-content">
              <span>February 7, 2018</span>
              <a href="#">What Planning Process Needs?</a>
            </div>
          </div>
          <!-- Post End -->
          <!-- Post Start -->
          <div class="footer-recent-post clearfix">
            <div class="footer-recent-post-thumb">
              <img src="http://via.placeholder.com/65x65" alt="img">
            </div>
            <div class="footer-recent-post-content">
              <span>February 7, 2018</span>
              <a href="#">Lorem ipsum dolor sit amet.</a>
            </div>
          </div>
          <!-- Post End -->
        </div>
      </div>
      <!-- Column 3 End -->

      <!-- Column 4 Start -->
      <div class="col-md-2 col-sm-6 col-12">
        <h3>Tags</h3>
        <div class="footer-tags mt-25">
          <a href="#">Business</a>
          <a href="#">Conusltant</a>
          <a href="#">Coach</a>
          <a href="#">UX</a>
          <a href="#">API</a>
          <a href="#">Reputation</a>
          <a href="#">Research</a>
          <a href="#">Sale</a>
          <a href="#">Service</a>
          <a href="#">UI</a>
          <a href="#">Web</a>
          <a href="#">WebDesign</a>
        </div>
      </div>
      <!-- Column 4 End -->
    </div>

    <!-- Footer Bar Start -->
    <div class="footer-bar">
      <p><span class="primary-color">SpecThemes</span> © 2018. All Rights Reserved.</p>
    </div>
    <!-- Footer Bar End -->
  </div>
</footer>
<!-- Footer END -->


<!-- Scroll to top button Start -->
<a href="#" class="scroll-to-top"><i class="fa fa-angle-up" aria-hidden="true"></i></a>
<!-- Scroll to top button End -->


<!-- Jquery -->
<script src="js/jquery.min.js"></script>

<!--Popper JS-->
<script src="js/popper.min.js"></script>

<!-- Bootstrap JS-->
<script src="js/bootstrap.min.js"></script>

<!-- Owl Carousel-->
<script src="js/owl.carousel.js"></script>

<!-- Navbar JS -->
<script src="js/navigation.js"></script>
<script src="js/navigation.fixed.js"></script>

<!-- Wow JS -->
<script src="js/wow.min.js"></script>

<!-- Countup -->
<script src="js/jquery.counterup.min.js"></script>
<script src="js/waypoints.min.js"></script>

<!-- Tabs -->
<script src="js/tabs.min.js"></script>

<!-- Yotube Video Player -->
<script src="js/jquery.mb.YTPlayer.min.js"></script>

<!-- Isotop -->
<script src="js/isotope.pkgd.min.js"></script>

<!-- Modernizr -->
<script src="js/modernizr.js"></script>

<!-- Switcher JS -->
<script src="js/switcher.js"></script>

<!-- Google Map -->
<script src="js/map.js"></script>

<!-- Main JS -->
<script src="js/main.js"></script>

</body>
</html>