realitylab
/
rl-theme


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328
							<!DOCTYPE html>
<html lang="en">

<head>
  <!-- meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="Bootstrap UI Kit">
  <meta name="keywords" content="ui kit">
  <meta name="author" content="UIdeck">

  <title>Blog - Helium Bootstrap 4 UI Kit</title>

  <!-- CSS Files -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/animate.css">
  <link rel="stylesheet" href="css/owl.carousel.css">
  <link rel="stylesheet" href="css/owl.theme.css">
  <link rel="stylesheet" href="css/responsive.css">

  <!-- Fonts icons -->
  <link rel="stylesheet" href="css/font-awesome.min.css">

</head>

<body>

  <div class="container">
    <div class="page-header-title">
      <h2 class="heading-title color-title text-center">Blog Posts</h2>
    </div>
  </div>

  <!-- Start Blog Section 1 -->
  <section class="blog">
    <div class="container">
      <div class="row">
        <div class="col-lg-4 col-md-6 col-xs-12 blog-item">
          <!-- Blog Item Starts -->
          <div class="blog-item-wrapper">
            <div class="blog-item-img">
              <a href="single-post.html"><img src="img/blog/home/img1.jpg"></a>
            </div>
            <div class="blog-item-text">
              <h3>
                <a href="#">Social media and Slack</a>
              </h3>
              <div class="meta-tags">
                <span class="date"><i class="lnr lnr-calendar-full"></i>on Mar 23, 2023</span>
                <span class="comments"><a href="#"><i class="lnr lnr-bubble"></i> 24 Comments</a></span>
              </div>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
              </p>
              <a href="single-post.html" class="btn btn-common btn-rm">Read More</a>
            </div>
          </div>
          <!-- Blog Item Wrapper Ends-->
        </div>

        <div class="col-lg-4 col-md-6 col-xs-12 blog-item">
          <!-- Blog Item Starts -->
          <div class="blog-item-wrapper">
            <div class="blog-item-img">
              <a href="single-post.html"><img src="img/blog/home/img2.jpg"></a>
            </div>
            <div class="blog-item-text">
              <h3>
                <a href="#">Content is still king</a>
              </h3>
              <div class="meta-tags">
                <span class="date"><i class="lnr lnr-calendar-full"></i>on Mar 29, 2023</span>
                <span class="comments"><a href="#"><i class="lnr lnr-bubble"></i> 24 Comments</a></span>
              </div>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
              </p>
              <a href="single-post.html" class="btn btn-common btn-rm">Read More</a>
            </div>
          </div>
          <!-- Blog Item Wrapper Ends-->
        </div>

        <div class="col-lg-4 col-md-6 col-xs-12 blog-item">
          <!-- Blog Item Starts -->
          <div class="blog-item-wrapper">
            <div class="blog-item-img">
              <a href="single-post.html"><img src="img/blog/home/img3.jpg"></a>
            </div>
            <div class="blog-item-text">
              <h3>
                <a href="#">How often should you tweet?</a>
              </h3>
              <div class="meta-tags">
                <span class="date"><i class="lnr lnr-calendar-full"></i>on Mar 21, 2023</span>
                <span class="comments"><a href="#"><i class="lnr lnr-bubble"></i> 24 Comments</a></span>
              </div>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
              </p>
              <a href="single-post.html" class="btn btn-common btn-rm">Read More</a>
            </div>
          </div>
          <!-- Blog Item Wrapper Ends-->
        </div>
      </div>
    </div>
  </section>
  <!-- End Blog Section 1 -->

  <div class="mb-60"></div>

  <!-- Start Blog Section 2 -->
  <section class="blog">
    <div class="container">
      <div class="row">
        <div class="col-lg-3 col-md-6 col-xs-12">
          <div class="blog-block text-center">
            <img src="img/blog/img1.jpg">
            <div class="blog-content">
              <h3><a href="#">Post Title</a></h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet atque fugit vitae voluptatem...</p>
              <a href="#" class="btn btn-common">Read More</a>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-md-6 col-xs-12">
          <div class="blog-block text-center">
            <img src="img/blog/img5.jpg">
            <div class="blog-content">
              <h3><a href="#">Post Title</a></h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet atque fugit vitae voluptatem...</p>
              <a href="#" class="btn btn-common">Read More</a>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-md-6 col-xs-12">
          <div class="blog-block text-center">
            <img src="img/blog/img3.jpg">
            <div class="blog-content">
              <h3><a href="#">Post Title</a></h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet atque fugit vitae voluptatem...</p>
              <a href="#" class="btn btn-common">Read More</a>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-md-6 col-xs-12">
          <div class="blog-block text-center">
            <img src="img/blog/img4.jpg">
            <div class="blog-content">
              <h3><a href="#">Post Title</a></h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet atque fugit vitae voluptatem...</p>
              <a href="#" class="btn btn-common">Read More</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- Start Blog Section 2 -->

  <div class="mb-60"></div>

  <!-- Start Blog Section 3 -->
  <section class="blog">
    <div class="container">
      <div class="row">
        <div class="col-lg-4 col-md-6 col-xs-12">
          <div class="blog-block">
            <img src="img/blog/img1.jpg">
            <div class="blog-content">
              <h3><a href="#">Post Title</a></h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet atque fugit vitae voluptatem...</p>
              <a href="#" class="btn btn-common">Read More</a>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-6 col-xs-12">
          <div class="blog-block text-center">
            <img src="img/blog/img1.jpg">
            <div class="blog-content">
              <h3><a href="#">Post Title</a></h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet atque fugit vitae voluptatem...</p>
              <a href="#" class="btn btn-common">Read More</a>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-6 col-xs-12">
          <div class="blog-block text-right">
            <img src="img/blog/img1.jpg">
            <div class="blog-content">
              <h3><a href="#">Post Title</a></h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet atque fugit vitae voluptatem...</p>
              <a href="#" class="btn btn-common">Read More</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- End Blog Section 3 -->

  <div class="mb-60"></div>

  <div class="container">
    <h4 class="sub-title space-left">Blog Content + Sidebar</h4>
  </div>

  <!-- Blog content + sidebar -->
  <section class="blog">
    <div class="container">
      <div class="row">
        <div class="col-lg-9 col-md-12 col-xs-12">
          <div class="blog-block post-content-area">
            <img src="img/blog/img2.jpg">
            <div class="blog-post">
              <h3><a href="#">Post Title</a></h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet consequatur odit aliquam iure. Porro eligendi laborum harum, quidem in, quibusdam eius, consequuntur fugiat molestias vitae nesciunt quis iusto hic. Repellat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident sint.</p>
              <a href="#" class="btn btn-common">Read More</a>
            </div>
          </div>

          <div class="mb-60"></div>

          <div class="blog-block post-content-area text-center">
            <img src="img/blog/img2.jpg">
            <div class="blog-post">
              <h3><a href="#">Post Title</a></h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet consequatur odit aliquam iure. Porro eligendi laborum harum, quidem in, quibusdam eius, consequuntur fugiat molestias vitae nesciunt quis iusto hic. Repellat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident sint.</p>
              <a href="#" class="btn btn-common">Read More</a>
            </div>
          </div>

          <div class="mb-60"></div>

          <div class="blog-block post-content-area">
            <img src="img/blog/img2.jpg">
            <div class="blog-post">
              <h3><a href="#">Post Title</a></h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet consequatur odit aliquam iure. Porro eligendi laborum harum, quidem in, quibusdam eius, consequuntur fugiat molestias vitae nesciunt quis iusto hic. Repellat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident sint.</p>
              <a href="#" class="btn btn-common">Read More</a>
            </div>
          </div>

          <div class="mb-60"></div>

        </div>

        <!-- Blog sidebar area -->
        <div class="col-lg-3 col-md-12 col-xs-12">
          <div class="blog-block about-sidebar-widget">
            <img src="img/blog/author.jpg">
            <h4>About Author</h4>
            <p>Aenean vestibulum purus a nulla sollicitudin molestie. Maecenas bibendum erat in erat maximus, vel imperdiet leo mattis.</p>
          </div>

          <div class="mb-60"></div>

          <div class="blog-block categories-sidebar-widget">
            <h4>Categories</h4>
            <div class="post-category">
              <a href="#">Category 1 <span class="pull-right">(3)</span></a>
            </div>

            <div class="post-category">
              <a href="#">Category 2 <span class="pull-right">(1)</span></a>
            </div>

            <div class="post-category">
              <a href="#">Category 3 <span class="pull-right">(2)</span></a>
            </div>

            <div class="post-category">
              <a href="#">Category 4 <span class="pull-right">(5)</span></a>
            </div>

            <div class="post-category">
              <a href="#">Category 5 <span class="pull-right">(3)</span></a>
            </div>
          </div>

          <div class="mb-60"></div>

          <div class="blog-block blog-posts-widget">
            <div class="widget-title">
              <h4>Recent Posts</h4>
            </div>
            <div class="blog-posts-small">
              <div class="blog-post-small first-post">
                <img src="img/blog/thumb1.jpg">
                <a href="#">Post #1</a>
                <p>Posted on <a href="#" class="post-date">Sep. 03, 2023</a></p>
              </div>
              <div class="blog-post-small mid-post">
                <img src="img/blog/thumb1.jpg">
                <a href="#">Post #2</a>
                <p>Posted on <a href="#" class="post-date">Sep. 01, 2023</a></p>
              </div>
              <div class="blog-post-small mid-post">
                <img src="img/blog/thumb1.jpg">
                <a href="#">Post #3</a>
                <p>Posted on <a href="#" class="post-date">Aug. 19, 2023</a></p>
              </div>
              <div class="blog-post-small last-post">
                <img src="img/blog/thumb1.jpg">
                <a href="#">Post #4</a>
                <p>Posted on <a href="#" class="post-date">Aug. 16, 2023</a></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- jQuery first, then Tether, then Bootstrap JS. -->
  <script src="js/jquery.min.js"></script>
  <script src="js/popper.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/owl.carousel.min.js"></script>

  <script src="js/form-validator.min.js"></script>
  <script src="js/contact-form-script.js"></script>
  <script src="js/main.js"></script>
</body>

</html>