Blogs - Grid

                    
                      <!-- Features Section -->
                      <div class="overflow-hidden">
                        <div class="container space-2">
                          <div class="row justify-content-lg-between">
                            <div class="col-lg-5 mb-9 mb-lg-0">
                              <div class="max-w-19rem mb-4">
                                <img class="img-fluid" src="../../assets/svg/illustrations/app-wreath.svg" alt="SVG">
                              </div>

                              <div class="mb-5">
                              <h2>Award winning guides and resources</h2>
                                <p>Explore and learn more about everything from machine learning and global payments to building marketplaces and scaling your team.</p>
                              </div>

                              <a class="btn btn-primary transition-3d-hover px-4" href="#">View all Guides</a>
                            </div>

                            <div class="col-lg-6">
                              <div class="row">
                                <div class="col-sm-6 mb-5 mb-sm-0">
                                  <!-- Article Item -->
                                  <a class="d-block" href="#">
                                    <img class="img-fluid w-100 rounded" src="../../assets/img/400x500/img26.jpg" alt="Image Description">
                                    <div class="shadow-none py-4">
                                      <h4>Adobe Ai</h4>
                                      <p class="text-body">Access to the Adobe Illustrator techniques</p>
                                      <span class="font-size-1 font-weight-bold">Learn More <i class="fas fa-angle-right fa-sm ml-1"></i></span>
                                    </div>
                                  </a>
                                  <!-- End Article Item -->
                                </div>

                                <div class="col-sm-6">
                                  <!-- Article Item -->
                                  <a class="d-block" href="#">
                                    <img class="img-fluid w-100 rounded" src="../../assets/img/400x500/img25.jpg" alt="Image Description">
                                    <div class="shadow-none py-4">
                                      <h4>Canva Schedule</h4>
                                      <p class="text-body">Create and schedule amazing social content</p>
                                      <span class="font-size-1 font-weight-bold">Learn More <i class="fas fa-angle-right fa-sm ml-1"></i></span>
                                    </div>
                                  </a>
                                  <!-- End Article Item -->
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End Features Section -->
                    
                  

                    
                      <!-- Stories Section -->
                      <div class="container space-2">
                        <!-- Title -->
                        <div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
                          <span class="d-block small font-weight-bold text-cap mb-2">Success stories</span>
                          <h2>See how Front is helping teams get organized and work smarter</h2>
                        </div>
                        <!-- End Title -->

                        <div class="row">
                          <div class="col-sm-6 col-md-4 mb-5">
                            <!-- Card Info -->
                            <div class="card h-100">
                              <img class="card-img-top" src="../assets/img/480x320/img13.jpg" alt="Image Description">
                              <div class="card-body">
                                <div class="max-w-13rem w-100 mb-3">
                                  <img class="img-fluid" src="../assets/svg/clients-logo/amazon-original.svg" alt="Logo">
                                </div>
                                <p class="mb-0">Amazon launched their enterprise platform and built a powerful user experience.</p>
                              </div>
                              <div class="card-footer">
                                <a class="font-weight-bold" href="#">Read story <i class="fas fa-angle-right fa-sm ml-1"></i></a>
                              </div>
                            </div>
                            <!-- End Card Info -->
                          </div>

                          <div class="col-sm-6 col-md-4 mb-5">
                            <!-- Card Info -->
                            <div class="card h-100">
                              <img class="card-img-top" src="../assets/img/480x320/img17.jpg" alt="Image Description">
                              <div class="card-body">
                                <div class="max-w-13rem w-100 mb-3">
                                  <img class="img-fluid" src="../assets/svg/clients-logo/mapbox-original.svg" alt="Logo">
                                </div>
                                <p class="mb-0">Mapbox empowers marketers to create digital marketing dashboards easily and share them with their team.</p>
                              </div>
                              <div class="card-footer">
                                <a class="font-weight-bold" href="#">Read story <i class="fas fa-angle-right fa-sm ml-1"></i></a>
                              </div>
                            </div>
                            <!-- End Card Info -->
                          </div>

                          <div class="col-sm-6 col-md-4 mb-5">
                            <!-- Card Info -->
                            <div class="card h-100">
                              <img class="card-img-top" src="../assets/img/480x320/img16.jpg" alt="Image Description">
                              <div class="card-body">
                                <div class="max-w-13rem w-100 mb-3">
                                  <img class="img-fluid" src="../assets/svg/clients-logo/netflix-original.svg" alt="Logo">
                                </div>
                                <p class="mb-0">Netflix's mission is to create a planet run by the sun. In order to achieve this goal, they needed to find a way to make solar simple.</p>
                              </div>
                              <div class="card-footer">
                                <a class="font-weight-bold" href="#">Read story <i class="fas fa-angle-right fa-sm ml-1"></i></a>
                              </div>
                            </div>
                            <!-- End Card Info -->
                          </div>
                        </div>
                      </div>
                      <!-- End Stories Section -->
                    
                  

                    
                      <!-- Articles Section -->
                      <div class="container space-2">
                        <!-- Title -->
                        <div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
                          <h2 class="h1">Read our latest news</h2>
                          <p>We've helped some great companies brand, design and get to market.</p>
                        </div>
                        <!-- End Title -->

                        <div class="row mx-n2 mb-5 mb-md-9">
                          <div class="col-sm-6 col-lg-3 px-2 mb-3 mb-lg-0">
                            <!-- Card -->
                            <a class="card h-100 transition-3d-hover" href="#">
                              <img class="card-img-top" src="../../assets/img/500x280/img9.jpg" alt="Image Description">
                              <div class="card-body">
                                <span class="d-block small font-weight-bold text-cap mb-2">Product</span>
                                <h5 class="mb-0">Better is when everything works together</h5>
                              </div>
                            </a>
                            <!-- End Card -->
                          </div>

                          <div class="col-sm-6 col-lg-3 px-2 mb-3 mb-lg-0">
                            <!-- Card -->
                            <a class="card h-100 transition-3d-hover" href="#">
                              <img class="card-img-top" src="../../assets/img/500x280/img10.jpg" alt="Image Description">
                              <div class="card-body">
                                <span class="d-block small font-weight-bold text-cap mb-2">Business</span>
                                <h5 class="mb-0">What CFR really is about</h5>
                              </div>
                            </a>
                            <!-- End Card -->
                          </div>

                          <div class="col-sm-6 col-lg-3 px-2 mb-3 mb-sm-0">
                            <!-- Card -->
                            <a class="card h-100 transition-3d-hover" href="#">
                              <img class="card-img-top" src="../../assets/img/500x280/img11.jpg" alt="Image Description">
                              <div class="card-body">
                                <span class="d-block small font-weight-bold text-cap mb-2">Business</span>
                                <h5 class="mb-0">Should Product Owners think like entrepreneurs?</h5>
                              </div>
                            </a>
                            <!-- End Card -->
                          </div>

                          <div class="col-sm-6 col-lg-3 px-2">
                            <!-- Card -->
                            <a class="card h-100 transition-3d-hover" href="#">
                              <img class="card-img-top" src="../../assets/img/500x280/img12.jpg" alt="Image Description">
                              <div class="card-body">
                                <span class="d-block small font-weight-bold text-cap mb-2">Facilitate</span>
                                <h5 class="mb-0">Announcing Front Strategies: Ready-to-use rules</h5>
                              </div>
                            </a>
                            <!-- End Card -->
                          </div>
                        </div>

                        <!-- Info -->
                        <div class="position-relative z-index-2 text-center">
                          <div class="d-inline-block font-size-1 border bg-white text-center rounded-pill py-3 px-4">
                            Want to read more? <a class="font-weight-bold ml-3" href="#">Go here <span class="fas fa-angle-right ml-1"></span></a>
                          </div>
                        </div>
                        <!-- End Info -->
                      </div>
                      <!-- End Articles Section -->
                    
                  

                    
                      <!-- Related Projects -->
                      <div class="container space-2">
                        <!-- Title -->
                        <div class="row justify-content-md-between align-items-md-center mb-7">
                          <div class="col-lg-5">
                            <h2>Browse more projects</h2>
                          </div>

                          <div class="col-lg-6 text-lg-right mt-lg-auto">
                            <a class="font-weight-bold" href="#">
                              See all projects
                              <i class="fas fa-angle-right fa-sm ml-1"></i>
                            </a>
                          </div>
                        </div>
                        <!-- End Title -->

                        <div class="row">
                          <div class="col-md-6 mb-3 mb-md-5 mb-lg-0">
                            <!-- Project -->
                            <a class="card text-body transition-3d-hover" href="#">
                              <img class="card-img-top" src="../../assets/img/600x400/img3.jpg" alt="Image Description">
                              <div class="card-body text-center">
                                <h3 class="text-dark">Vanilla</h3>
                                <p class="mb-0">Development, Marketing</p>
                              </div>
                            </a>
                            <!-- End Project -->
                          </div>

                          <div class="col-md-6">
                            <!-- Project -->
                            <a class="card text-body transition-3d-hover" href="#">
                              <img class="card-img-top" src="../../assets/img/600x400/img2.jpg" alt="Image Description">
                              <div class="card-body text-center">
                                <h3 class="text-dark">Hubble</h3>
                                <p class="mb-0">Development, Product</p>
                              </div>
                            </a>
                            <!-- End Project -->
                          </div>
                        </div>
                      </div>
                      <!-- End Related Projects -->
                    
                  

                    
                      <!-- Featured Topics Section -->
                      <div class="container space-2">
                        <!-- Title -->
                        <div class="w-md-80 text-center mx-md-auto mb-9">
                          <h2>Featured courses</h2>
                          <p>Discover your perfect program in our courses.</p>
                        </div>
                        <!-- End Title -->

                        <!-- Featured Topics Carousel -->
                        <div class="row">
                          <article class="col-md-6 col-lg-4 mb-5">
                            <!-- Article -->
                            <div class="card border h-100">
                              <div class="card-img-top position-relative">
                                <img class="card-img-top" src="../../assets/svg/components/graphics-1.svg" alt="Image Description">

                                <div class="position-absolute top-0 left-0 mt-3 ml-3">
                                  <small class="btn btn-xs btn-success btn-pill text-uppercase shadow-soft mb-3">Bestseller</small>
                                </div>

                                <div class="position-absolute bottom-0 left-0 mb-3 ml-4">
                                  <div class="d-flex align-items-center flex-wrap">
                                    <ul class="list-inline mt-n1 mb-0 mr-2">
                                      <li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
                                      <li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
                                      <li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
                                      <li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
                                      <li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
                                    </ul>
                                    <span class="d-inline-block">
                                      <small class="font-weight-bold text-white mr-1">4.91</small>
                                      <small class="text-white-70">(1.5k+ reviews)</small>
                                    </span>
                                  </div>
                                </div>
                              </div>

                              <div class="card-body">
                                <small class="d-block small font-weight-bold text-cap mb-2">Code</small>

                                <div class="mb-3">
                                  <h3>
                                    <a class="text-inherit" href="#">Complete Python Bootcamp: Go from zero to hero in Python 3</a>
                                  </h3>
                                </div>

                                <div class="d-flex align-items-center">
                                  <div class="avatar-group">
                                    <a class="avatar avatar-xs avatar-circle" data-toggle="tooltip" data-placement="top" title="Nataly Gaga" href="#">
                                      <img class="avatar-img" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
                                    </a>
                                  </div>
                                  <div class="d-flex align-items-center ml-auto">
                                    <div class="small text-muted">
                                      <i class="fa fa-book-reader d-block d-sm-inline-block mb-1 mb-sm-0 mr-1"></i>
                                      10 lessons
                                    </div>
                                    <small class="text-muted mx-2">|</small>
                                    <div class="small text-muted">
                                      <i class="fa fa-clock d-block d-sm-inline-block mb-1 mb-sm-0 mr-1"></i>
                                      3h 25m
                                    </div>
                                  </div>
                                </div>
                              </div>

                              <div class="card-footer border-0 pt-0">
                                <div class="d-flex justify-content-between align-items-center">
                                  <div class="mr-2">
                                    <small class="d-block text-muted text-lh-sm"><del>$114.99</del></small>
                                    <span class="d-block h5 text-lh-sm mb-0">$99.99</span>
                                  </div>
                                  <a class="btn btn-sm btn-primary transition-3d-hover" href="#">Preview</a>
                                </div>
                              </div>
                            </div>
                            <!-- End Article -->
                          </article>

                          <article class="col-md-6 col-lg-4 mb-5">
                            <!-- Article -->
                            <div class="card border h-100">
                              <div class="card-img-top position-relative">
                                <img class="card-img-top" src="../../assets/svg/components/graphics-2.svg" alt="Image Description">

                                <div class="position-absolute bottom-0 left-0 mb-3 ml-4">
                                  <div class="d-flex align-items-center flex-wrap">
                                    <ul class="list-inline mt-n1 mb-0 mr-2">
                                      <li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
                                      <li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
                                      <li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
                                      <li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
                                      <li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
                                    </ul>
                                    <span class="d-inline-block">
                                      <small class="font-weight-bold text-white mr-1">4.95</small>
                                      <small class="text-white-70">(1k+ reviews)</small>
                                    </span>
                                  </div>
                                </div>
                              </div>

                              <div class="card-body">
                                <small class="d-block small font-weight-bold text-cap mb-2">Design & Illustration</small>

                                <div class="mb-3">
                                  <h3>
                                    <a class="text-inherit" href="#">From the Top: Adobe Illustrator for Beginners</a>
                                  </h3>
                                </div>

                                <div class="d-flex align-items-center mb-4">
                                  <div class="avatar-group">
                                    <a class="avatar avatar-xs avatar-circle" data-toggle="tooltip" data-placement="top" title="Emily Milda" href="#">
                                      <img class="avatar-img" src="../../assets/img/100x100/img2.jpg" alt="Image Description">
                                    </a>
                                    <a class="avatar avatar-xs avatar-circle" data-toggle="tooltip" data-placement="top" title="John O'nolan" href="#">
                                      <img class="avatar-img" src="../../assets/img/100x100/img4.jpg" alt="Image Description">
                                    </a>
                                  </div>
                                  <div class="d-flex align-items-center ml-auto">
                                    <div class="small text-muted">
                                      <i class="fa fa-book-reader d-block d-sm-inline-block mb-1 mb-sm-0 mr-1"></i>
                                      8 lessons
                                    </div>
                                    <small class="text-muted mx-2">|</small>
                                    <div class="small text-muted">
                                      <i class="fa fa-clock d-block d-sm-inline-block mb-1 mb-sm-0 mr-1"></i>
                                      7h 59m
                                    </div>
                                  </div>
                                </div>
                              </div>

                              <div class="card-footer border-0 pt-0">
                                <div class="d-flex justify-content-between align-items-center">
                                  <div class="mr-2">
                                    <small class="d-block text-muted text-lh-sm"><del>$129.99</del></small>
                                    <span class="d-block h5 text-lh-sm mb-0">$119.99</span>
                                  </div>
                                  <a class="btn btn-sm btn-primary transition-3d-hover" href="#">Preview</a>
                                </div>
                              </div>
                            </div>
                            <!-- End Article -->
                          </article>

                          <article class="col-md-6 col-lg-4 mb-5">
                            <!-- Article -->
                            <div class="card border h-100">
                              <div class="card-img-top position-relative">
                                <img class="card-img-top" src="../../assets/svg/components/graphics-4.svg" alt="Image Description">

                                <div class="position-absolute top-0 left-0 mt-3 ml-3">
                                  <small class="btn btn-xs btn-success btn-pill text-uppercase shadow-soft mb-3">Featured</small>
                                </div>

                                <div class="position-absolute bottom-0 left-0 mb-3 ml-4">
                                  <div class="d-flex align-items-center flex-wrap">
                                    <ul class="list-inline mt-n1 mb-0 mr-2">
                                      <li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
                                      <li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
                                      <li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
                                      <li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star.svg" alt="Review rating" width="14"></li>
                                      <li class="list-inline-item mx-0"><img src="../../assets/svg/illustrations/star-muted.svg" alt="Review rating" width="14"></li>
                                    </ul>
                                    <span class="d-inline-block">
                                      <small class="font-weight-bold text-white mr-1">4.73</small>
                                      <small class="text-white-70">(4.7k+ reviews)</small>
                                    </span>
                                  </div>
                                </div>
                              </div>

                              <div class="card-body">
                                <small class="d-block small font-weight-bold text-cap mb-2">Code</small>

                                <div class="mb-3">
                                  <h3>
                                    <a class="text-inherit" href="#">Get started with Vue.js</a>
                                  </h3>
                                </div>

                                <div class="d-flex align-items-center mb-4">
                                  <div class="avatar-group">
                                    <a class="avatar avatar-xs avatar-circle" data-toggle="tooltip" data-placement="top" title="Aaron Larsson" href="#">
                                      <img class="avatar-img" src="../../assets/img/100x100/img3.jpg" alt="Image Description">
                                    </a>
                                    <a class="avatar avatar-xs avatar-circle" data-toggle="tooltip" data-placement="top" title="Hanna Wolfe" href="#">
                                      <img class="avatar-img" src="../../assets/img/100x100/img11.jpg" alt="Image Description">
                                    </a>
                                  </div>
                                  <div class="d-flex align-items-center ml-auto">
                                    <div class="small text-muted">
                                      <i class="fa fa-book-reader d-block d-sm-inline-block mb-1 mb-sm-0 mr-1"></i>
                                      25 lessons
                                    </div>
                                    <small class="text-muted mx-2">|</small>
                                    <div class="small text-muted">
                                      <i class="fa fa-clock d-block d-sm-inline-block mb-1 mb-sm-0 mr-1"></i>
                                      17h 46m
                                    </div>
                                  </div>
                                </div>
                              </div>

                              <div class="card-footer border-0 pt-0">
                                <div class="d-flex justify-content-between align-items-center">
                                  <div class="mr-2">
                                    <small class="d-block text-muted text-lh-sm"><del>$169.99</del></small>
                                    <span class="d-block h5 text-lh-sm mb-0">$129.99</span>
                                  </div>
                                  <a class="btn btn-sm btn-primary transition-3d-hover" href="#">Preview</a>
                                </div>
                              </div>
                            </div>
                            <!-- End Article -->
                          </article>
                        </div>
                        <!-- End Featured Topics Carousel -->

                        <div class="text-center">
                          <a class="font-weight-bold" href="#">See all Courses <i class="fa fa-angle-right fa-sm ml-1"></i></a>
                        </div>
                      </div>
                      <!-- End Featured Topics Section -->