<section class="wrapper bg-light wrapper-border">\n      <div class="container py-14 pt-md-18 pb-md-16">\n        <div class="row align-items-center mb-10">\n          <div class="col-md-8 col-lg-9 col-xl-8 col-xxl-7 pe-xl-20">\n            <h2 class="display-4 mb-3">Latest Projects</h2>\n            <p class="lead fs-20 mb-0">Check out some of my latest projects with creative ideas.</p>\n          </div>\n          <!--/column -->\n          <div class="col-md-4 col-lg-3 ms-md-auto text-md-end mt-5 mt-md-0">\n            <a href="#" class="btn btn-outline-primary rounded-pill mb-0">See All Projects</a>\n          </div>\n          <!--/column -->\n        </div>\n        <!--/.row -->\n        <div class="card bg-soft-violet mb-10">\n          <div class="card-body p-12 pb-0">\n            <div class="row">\n              <div class="col-lg-4 pb-12 align-self-center">\n                <div class="post-category mb-3 text-violet">Web Design</div>\n                <h3 class="h1 post-title mb-3">Snowlake Theme</h3>\n                <p>Maecenas faucibus mollis interdum sed posuere consectetur est at lobortis. Scelerisque id ligula porta felis euismod semper. Fusce dapibus tellus cursus.</p>\n                <a href="#" class="more hover link-violet">See Project</a>\n              </div>\n              <!-- /column -->\n              <div class="col-lg-7 offset-lg-1 align-self-end">\n                <figure><img class="img-fluid" src="/assets/img/photos/f1.png" srcset="/assets/img/photos/f1@2x.png 2x" alt="" /></figure>\n              </div>\n              <!-- /column -->\n            </div>\n            <!-- /.row -->\n          </div>\n          <!--/.card-body -->\n        </div>\n        <!--/.card -->\n        <div class="card bg-soft-blue mb-10">\n          <div class="card-body p-12">\n            <div class="row gy-10 align-items-center">\n              <div class="col-lg-4 order-lg-2 offset-lg-1">\n                <div class="post-category mb-3 text-blue">Mobile Design</div>\n                <h3 class="h1 post-title mb-3">Budget App</h3>\n                <p>Maecenas faucibus mollis interdum sed posuere consectetur est at lobortis. Scelerisque id ligula porta felis euismod semper. Fusce dapibus tellus cursus.</p>\n                <a href="#" class="more hover link-blue">See Project</a>\n              </div>\n              <!-- /column -->\n              <div class="col-lg-7">\n                <figure><img class="img-fluid" src="/assets/img/photos/f2.png" srcset="/assets/img/photos/f2@2x.png 2x" alt="" /></figure>\n              </div>\n              <!-- /column -->\n            </div>\n            <!-- /.row -->\n          </div>\n          <!--/.card-body -->\n        </div>\n        <!--/.card -->\n        <div class="row gx-md-8 gx-xl-10">\n          <div class="col-lg-6">\n            <div class="card bg-soft-leaf mb-10">\n              <div class="card-body p-12 pb-0">\n                <div class="post-category mb-3 text-leaf">Web Design</div>\n                <h3 class="h1 post-title mb-3">Missio Theme</h3>\n                <p>Maecenas faucibus mollis interdum sed posuere porta consectetur cursus porta lobortis. Scelerisque id ligula felis.</p>\n                <a href="#" class="more hover link-leaf mb-8">See Project</a>\n              </div>\n              <!--/.card-body -->\n              <img class="card-img-bottom" src="/assets/img/photos/f3.png" srcset="/assets/img/photos/f3@2x.png 2x" alt="" />\n            </div>\n            <!--/.card -->\n          </div>\n          <!-- /column -->\n          <div class="col-lg-6">\n            <div class="card bg-soft-pink">\n              <div class="card-body p-12 pb-0">\n                <div class="post-category mb-3 text-pink">Mobile Design</div>\n                <h3 class="h1 post-title mb-3">Storage App</h3>\n                <p>Maecenas faucibus mollis interdum sed posuere consectetur est at lobortis. Scelerisque id ligula porta felis euismod semper.</p>\n                <a href="#" class="more hover link-pink mb-8">See Project</a>\n              </div>\n              <!--/.card-body -->\n              <img class="card-img-bottom" src="/assets/img/photos/f4.png" srcset="/assets/img/photos/f4@2x.png 2x" alt="" />\n            </div>\n            <!--/.card -->\n          </div>\n          <!-- /column -->\n        </div>\n        <!-- /.row -->\n      </div>\n      <!-- /.container -->\n    </section>