Content Sections

Content 1

Copy
<!-- -------   START CONTENT 1 - title & description and 6 IMAGES   -------- -->
<section class="py-5">
  <div class="container">
    <div class="row">
      <div class="col-8 mx-auto text-center mb-5">
        <span class="badge rounded-pill badge-primary mb-2">Co-working</span>
        <h2>Explore our places in London </h2>
        <p>
          If you can’t decide, the answer is no. If two equally difficult paths,
          choose the one more painful in the short term (pain avoidance
          is creating an illusion of equality).
        </p>
      </div>
    </div>
    <div class="row section-height-25">
      <div class="col-sm-4 col-5 mb-sm-0 mb-3">
        <div style="background-image: url(&#39;https://appsrv1-147a1.kxcdn.com/soft-ui-pro/img/nastuh.jpg&#39;)" class="w-100 h-100 border-radius-lg bg-cover"></div>
      </div>
      <div class="col-sm-3 col-7 mb-sm-0 mb-3">
        <div style="background-image: url(&#39;https://appsrv1-147a1.kxcdn.com/soft-ui-pro/img/card-3.jpg&#39;)" class="w-100 h-100 border-radius-lg bg-cover"></div>
      </div>
      <div class="col-sm-5 mb-sm-0 mb-3">
        <div style="background-image: url(&#39;https://appsrv1-147a1.kxcdn.com/soft-ui-pro/img/card-2.jpg&#39;)" class="w-100 h-100 border-radius-lg bg-cover"></div>
      </div>
    </div>
    <div class="row section-height-25 mt-4">
      <div class="col-sm-3 col-7 mb-sm-0 mb-3">
        <div style="background-image: url(&#39;https://appsrv1-147a1.kxcdn.com/soft-ui-pro/img/meeting.jpg&#39;)" class="w-100 h-100 border-radius-lg bg-cover"></div>
      </div>
      <div class="col-sm-5 col-5 mb-sm-0 mb-3">
        <div style="background-image: url(&#39;https://appsrv1-147a1.kxcdn.com/soft-ui-pro/img/anastasia.jpg&#39;)" class="w-100 h-100 border-radius-lg bg-cover"></div>
      </div>
      <div class="col-sm-4 mb-sm-0 mb-3">
        <div style="background-image: url(&#39;https://appsrv1-147a1.kxcdn.com/soft-ui-pro/img/annie-spratt.jpg&#39;)" class="w-100 h-100 border-radius-lg bg-cover"></div>
      </div>
    </div>
  </div>
</section>
<!-- -->

Content 2

Copy
<section class="py-5">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-5 col-6 mx-lg-0 mx-auto px-lg-0 px-md-0 my-auto">
        <img class="w-100 border-radius-lg shadow" src="https://appsrv1-147a1.kxcdn.com/soft-ui-pro/img/toa-heftiba.jpg">
      </div>
      <div class="col-lg-4 col-10 d-flex justify-content-center flex-column mx-auto text-lg-left text-center">
        <h2 class="mb-0 mt-lg-0 mt-4 text-gradient text-info">Read more about us</h2>
        <h2 class="mb-4">And find some great partners</h2>
        <p class="lead">It really matters and then like it really doesn’t matter. What matters is the people who are sparked by it. And the people who are like offended by it, it doesn’t matter. </p>
        <ul class="m-lg-2 m-auto">
          <li class="lead mb-2">People are so scared to lose their hope</li>
          <li class="lead mb-2">That’s the main thing people </li>
          <li class="lead mb-2">Thoughts- their perception of themselves!</li>
        </ul>
        <p class="lead">It really matters and then like it really doesn’t matter. What matters is the people who are sparked by it. And the people who are like offended by it, it doesn’t matter.</p>
        <h3 class="mt-4">We will be with you forever</h3>
        <p class="lead">It really matters and then like it really doesn’t matter. What matters is the people who are sparked by it. And the people who are like offended by it, it doesn’t matter.</p>
        <p class="blockquote my-3 ps-2">
          <span class="text-bold">“And thank you for turning my personal jean jacket into a couture piece.”</span>
          <br>
          <small class="blockquote-footer">
            Kanye West, Producer.
          </small>
        </p>
      </div>
    </div>
  </div>
</section>

Content 3

Copy
<section>
  <div class="container">
    <div class="row py-5 align-items-center">
      <div class="col-lg-6">
        <h5>Avesome Product</h5>
        <h2>Beautiful mobile Apps -<br> The Ultimate Secret</h2>
      </div>
      <div class="col-lg-6">
        <div class="row">
          <div class="col-lg-6">
            <img class="w-100 my-3" src="https://appsrv1-147a1.kxcdn.com/soft-ui-pro/img/logos/medium-logos/logo-google.svg">
          </div>
          <div class="col-lg-6">
            <img class="w-100 my-3" src="https://appsrv1-147a1.kxcdn.com/soft-ui-pro/img/logos/medium-logos/logo-pinterest.svg">
          </div>
          <div class="col-lg-6">
            <img class="w-100 my-3" src="https://appsrv1-147a1.kxcdn.com/soft-ui-pro/img/logos/medium-logos/logo-netflix.svg">
          </div>
          <div class="col-lg-6">
            <img class="w-100 my-3" src="https://appsrv1-147a1.kxcdn.com/soft-ui-pro/img/logos/medium-logos/logo-coinbase.svg">
          </div>
          <div class="col-lg-6">
            <img class="w-100 my-3" src="https://appsrv1-147a1.kxcdn.com/soft-ui-pro/img/logos/medium-logos/logo-facebook.svg">
          </div>
          <div class="col-lg-6">
            <img class="w-100 my-3" src="https://appsrv1-147a1.kxcdn.com/soft-ui-pro/img/logos/medium-logos/logo-spotify.svg">
          </div>
        </div>
      </div>
    </div>
    <div class="row pt-5">
      <div class="col-md-4">
        <div class="info">
          <div class="icon icon-shape bg-gradient-warning shadow text-center mb-4">
            <i class="fas fa-user"></i>
          </div>
          <h6>Social Conversations</h6>
          <p>We get insulted by others, lose trust for those others. We get back stabbed by friends. It becomes harder for us to give others a hand.</p>
          <a href="javascript:;" class="text-warning icon-move-right">More about us
            <i class="fas fa-arrow-right text-sm ms-1"></i>
          </a>
        </div>
      </div>
      <div class="col-md-4">
        <div class="info">
          <div class="icon icon-shape bg-gradient-info shadow text-center mb-4">
            <i class="fas fa-user"></i>
          </div>
          <h6>Social Conversations</h6>
          <p>We get insulted by others, lose trust for those others. We get back stabbed by friends. It becomes harder for us to give others a hand.</p>
          <a href="javascript:;" class="text-info icon-move-right">More about us
            <i class="fas fa-arrow-right text-sm ms-1"></i>
          </a>
        </div>
      </div>
      <div class="col-md-4">
        <div class="info">
          <div class="icon icon-shape bg-gradient-danger shadow text-center mb-4">
            <i class="fas fa-user"></i>
          </div>
          <h6>Social Conversations</h6>
          <p>We get insulted by others, lose trust for those others. We get back stabbed by friends. It becomes harder for us to give others a hand.</p>
          <a href="javascript:;" class="text-danger icon-move-right">More about us
            <i class="fas fa-arrow-right text-sm ms-1"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

Content 4

Copy
<section class="py-10">
  <div class="container">
    <div class="row">
      <div class="col-lg-8 ms-auto me-auto">

          <div class="row">
              <div class="col-md-6 my-auto">
                  <div>
                      <span class="badge badge-sm badge-primary">Photography</span>
                      <span class="badge badge-sm badge-primary">Stories</span>
                      <span class="badge badge-sm badge-primary">Castle</span>
                  </div>
              </div>
              <div class="col-md-6">
                  <a href="javascript:;" class="btn btn-pinterest btn-round mb-0 mx-1 mt-md-0 mt-4 float-md-right">
                      <i class="fab fa-pinterest me-2"></i> 232
                  </a>
                  <a href="javascript:;" class="btn btn-twitter btn-round mb-0 mx-1 mt-md-0 mt-4 float-md-right">
                      <i class="fab fa-twitter me-2"></i> 910
                  </a>
                  <a href="javascript:;" class="btn btn-facebook btn-round mb-0 mx-1 mt-md-0 mt-4 float-md-right">
                      <i class="fab fa-facebook me-2"></i> 872
                  </a>

              </div>
          </div>

          <hr class="dark horizontal">

          <div class="d-flex">
            <div>
              <a href="javascript:;">
                <div class="position-relative">
                  <div class="blur-shadow-avatar">
                    <img class="avatar avatar-xxl rounded-circle" src="https://appsrv1-147a1.kxcdn.com/soft-ui-pro/img/team-2.jpg">
                  </div>
                </div>
              </a>
            </div>
            <div class="ms-4 my-auto">
              <h5>Alec Thompson</h5>
              <p class="text-sm mb-0">I&#39;ve been trying to figure out the bed design for the master bedroom at our Hidden Hills compound...I like good music from Youtube.</p>
            </div>
            <div class="my-auto d-md-block d-none ms-2">
                <button type="button" class="btn btn-dark pull-right btn-round mb-0">Follow</button>
            </div>
          </div>
          <div class="my-auto d-md-none d-block ms-2">
              <button type="button" class="btn btn-dark btn-round mt-3">Follow</button>
          </div>
      </div>
    </div>
  </div>
</section>

Content 5

Copy
<section class="py-7">
  <div class="container">
    <div class="row">
      <div class="col-md-8 ms-auto me-auto">
        <div>
            <h4 class="text-center mb-5">3 Comments</h4>
            <div class="d-flex">
                <div>
                  <a class="pull-left" href="javascript:;">
                    <div class="position-relative">
                      <div class="blur-shadow-avatar">
                          <img class="avatar rounded-circle" src="https://appsrv1-147a1.kxcdn.com/soft-ui-pro/img/team-3.jpg" alt="...">
                      </div>
                    </div>
                  </a>
                </div>
                <div class="ms-3">
                    <h6>Tina Andrew <span class="text-muted text-xs">· 7 minutes ago</span></h6>

                    <p>Chance too good. God level bars. I&#39;m so proud of @LifeOfDesiigner #1 song in the country. Panda! Don&#39;t be scared of the truth because we need to restart the human foundation in truth I stand with the most humility. We are so blessed!</p>
                    <p>All praises and blessings to the families of people who never gave up on dreams. Don&#39;t forget, You&#39;re Awesome!</p>

                    <div class="ms-auto text-right">
                        <a href="javascript:;" class="btn text-dark px-2 btn-link" rel="tooltip" title="" data-original-title="Reply to Comment">
                            <i class="fa fa-reply"></i> Reply
                        </a>
                        <a href="javascript:;" class="btn text-danger px-2 btn-link">
                            <i class="fas fa-heart"></i> 243
                        </a>
                    </div>
                </div>
            </div>

            <div class="d-flex">
                <div>
                  <a class="pull-left" href="javascript:;">
                    <div class="position-relative">
                      <div class="blur-shadow-avatar">
                          <img class="avatar rounded-circle" src="https://appsrv1-147a1.kxcdn.com/soft-ui-pro/img/team-4.jpg" alt="...">
                      </div>
                    </div>
                  </a>
                </div>
                <div class="ms-3">
                    <h6>John Camber <span class="text-muted text-xs">· Yesterday</span></h6>

                    <p>Hello guys, nice to have you on the platform! There will be a lot of great stuff coming soon. We will keep you posted for the latest news.</p>
                    <p>Don&#39;t forget, You&#39;re awesome!</p>

                    <div class="ms-auto text-right">
                        <a href="javascript:;" class="btn text-dark px-2 btn-link" rel="tooltip" title="" data-original-title="Reply to Comment">
                            <i class="fa fa-reply"></i> Reply
                        </a>
                        <a href="javascript:;" class="btn text-danger px-2 btn-link">
                            <i class="fas fa-heart"></i> 25
                        </a>
                    </div>

                    <div class="d-flex">
                        <div>
                          <a class="pull-left" href="javascript:;">
                            <div class="position-relative">
                              <div class="blur-shadow-avatar">
                                  <img class="avatar rounded-circle" src="https://appsrv1-147a1.kxcdn.com/soft-ui-pro/img/team-2.jpg" alt="...">
                              </div>
                            </div>
                          </a>
                        </div>
                        <div class="ms-3">
                            <h6>Tina Andrew <span class="text-muted text-xs">· 2 minutes ago</span></h6>

                            <p>Hello guys, nice to have you on the platform! There will be a lot of great stuff coming soon. We will keep you posted for the latest news.</p>
                            <p>Don&#39;t forget, You&#39;re awesome!</p>

                            <div class="ms-auto text-right">
                                <a href="javascript:;" class="btn text-dark px-2 btn-link" rel="tooltip" title="" data-original-title="Reply to Comment">
                                    <i class="fa fa-reply"></i> Reply
                                </a>
                                <a href="javascript:;" class="btn text-danger px-2 btn-link">
                                    <i class="fas fa-heart"></i> 12
                                </a>
                            </div>
                        </div>
                    </div>

                </div>

            </div>


        </div>
          <h4 class="text-center mb-4 mt-5">Post your comment</h4>
          <div class="d-flex">
             <div>
                <a class="pull-left author" href="javascript:;">
                  <div class="position-relative">
                    <div class="blur-shadow-avatar">
                        <img class="avatar rounded-circle" alt="64x64" src="https://appsrv1-147a1.kxcdn.com/soft-ui-pro/img/team-2.jpg">
                    </div>
                  </div>
                </a>
              </div>
              <div class="ms-3 w-100">
                <textarea class="form-control" placeholder="Write a nice reply or go home..." rows="4"></textarea>
                <div>
                    <a href="javascript:;" class="btn bg-gradient-primary pull-right mt-2">
                        <i class="fa fa-send me-2"></i> Reply
                    </a>
                </div>
              </div>
          </div> <!-- end media-post -->
    </div>
    </div>
  </div>
</section>

Content 6

Copy
<!-- START Section Content W/ 2 images aside of icon title description -->
<section class="py-7">
  <div class="container">
    <div class="row">
      <div class="col-lg-6 col-md-8 order-2 order-md-2 order-lg-1">
        <div class="position-relative ms-md-5 mb-0 mb-md-7 mb-lg-0 d-none d-md-block d-lg-block d-xl-block h-75">
          <div class="bg-gradient-info w-100 h-100 border-radius-xl position-absolute" alt=""></div>
          <img src="https://images.unsplash.com/photo-1548453251-6d13e53f0be0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80" class="w-100 border-radius-xl mt-6 ms-5 position-absolute" alt="">
        </div>
      </div>
      <div class="col-lg-5 col-md-12 ms-auto order-1 order-md-1 order-lg-1">
        <div class="p-3 pt-0">
            <div class="icon icon-shape bg-gradient-info rounded-circle shadow text-center mb-4">
              <i class="ni ni-building"></i>
            </div>
            <h4 class="text-gradient text-info mb-0">Social Conversations</h4>
            <h4 class="mb-4">Refreshing workspace atmosphere</h4>
            <p>We’re not always in the position that we want to be at. We’re constantly growing. We’re constantly making mistakes. We’re constantly trying to express ourselves and actualize our dreams. <br><br> If you have the opportunity to play this game of life you need to appreciate every moment. A lot of people don’t appreciate the moment until it’s passed.</p>
            <a href="javascript:;" class="text-dark icon-move-right">More about us
              <i class="fas fa-arrow-right text-sm ms-1"></i>
            </a>
          </div>
      </div>
    </div>
    <div class="row mt-0 mt-md-5 mt-lg-8">
      <div class="col-lg-5 col-md-12 me-auto">
        <div class="p-3 pt-0">
            <div class="icon icon-shape bg-gradient-warning rounded-circle shadow text-center mb-4">
              <i class="fas fa-trophy"></i>
            </div>
            <h4 class="text-gradient text-warning mb-0">Luxury Sensation</h4>
            <h4 class="mb-4">Stand up for every move</h4>
            <p>Society has put up so many boundaries, so many limitations on what’s right and wrong that it’s almost impossible to get a pure thought out.It’s like a little kid, a little boy, looking at colors. <br> <br> Before somebody tells you you shouldn’t like pink because that’s for girls, or you’d instantly become a gay two-year-old. Why would anyone pick blue over pink? Pink is obviously a better color.</p>
            <a href="javascript:;" class="text-dark icon-move-right">More about us
              <i class="fas fa-arrow-right text-sm ms-1"></i>
            </a>
          </div>
      </div>
      <div class="col-lg-6 col-md-8">
        <div class="position-relative ms-md-5 d-none d-md-block d-lg-block d-xl-block h-75">
          <div class="w-100 h-100 bg-gradient-warning border-radius-xl position-absolute" alt=""></div>
          <img src="https://images.unsplash.com/photo-1579558449515-e0f596d7c5c4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80" class="w-100 border-radius-xl mt-6 ms-n5 position-absolute" alt="">
        </div>
      </div>
    </div>
  </div>
</section>
<!-- END Section Content -->

Content 7

Copy
<!-- -------- START CONTENT 7 w/ card over right bg image ------- -->
<div class="page-header section-height-85 my-5">
  <div class="bg-gray-200 position-absolute fixed-bottom start-0 z-index-0 h-75 mb-n7 overflow-hidden opacity-8">
    <div class="position-absolute w-100 z-inde-1 top-0 mt-n3">
      <svg width="100%" viewBox="0 0 1920 157" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <title>Path Copy 2</title>
          <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <g id="Artboard-Copy" transform="translate(0.000000, -416.000000)" fill="#FFFFFF">
                  <path d="M-1,477.610914 C298.333333,531.905996 618.333333,527.38687 959,464.053537 C1299.66667,400.720204 1619.66667,400.572663 1919,463.610914 L1920,572.610914 L0,572.610914 L-1,477.610914 Z" id="Path-Copy-2" transform="translate(959.500000, 494.526769) scale(-1, -1) translate(-959.500000, -494.526769) "></path>
              </g>
          </g>
      </svg>
    </div>
  </div>
  <div class="position-absolute fixed-top ms-auto w-75 h-75 border-radius-xl z-index-1 d-none d-sm-none d-md-block me-n4" style="background-image: url(&#39;https://images.unsplash.com/photo-1495580847032-db0bac41d44b?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2400&q=80&#39;); background-size: cover;">
  </div>
  <div class="container">
    <div class="row mt-7">
      <div class="col-lg-6 d-flex justify-content-center flex-column">
        <div class="card card-body d-flex justify-content-center shadow-lg border-radius-lg p-5 blur align-items-center z-index-2 shadow-blur">
          <h2 class="text-gradient text-warning mb-4">Excluding the design complexity</h2>
          <p class="text-lg-left text-center mb-0">We’re constantly trying to express ourselves and actualize our dreams. If you have the opportunity to play this game of life you need to appreciate every moment. A lot of people don’t appreciate the moment until it’s passed.</p>
          <br>
          <div class="buttons w-100">
            <button type="button" class="btn bg-gradient-dark mb-0">Contact Us</button>
            <button type="button" class="btn btn-outline-dark mb-0 ms-1">Read More</button>
          </div>
          <div class="row mt-5 justify-content-start">
            <div class="col-md-3 col-6 p-0">
              <img class="w-100 opacity-6" src="https://appsrv1-147a1.kxcdn.com/soft-ui-pro/img/logos/gray-logos/logo-pinterest.svg" alt="logo">
            </div>
            <div class="col-md-3 col-6 p-0">
              <img class="w-100 opacity-6" src="https://appsrv1-147a1.kxcdn.com/soft-ui-pro/img/logos/gray-logos/logo-netflix.svg" alt="logo">
            </div>
            <div class="col-md-3 col-6 p-0">
              <img class="w-100 opacity-6" src="https://appsrv1-147a1.kxcdn.com/soft-ui-pro/img/logos/gray-logos/logo-coinbase.svg" alt="logo">
            </div>
            <div class="col-md-3 col-6 p-0">
              <img class="w-100 opacity-6" src="https://appsrv1-147a1.kxcdn.com/soft-ui-pro/img/logos/gray-logos/logo-nasa.svg" alt="logo">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- -->

Content 8

Copy
<!-- -------- START CONTENT 11 w/ title and 4 images ------- -->
<section class="py-5">
  <div class="container">
    <div class="row">
      <div class="col-8 mx-auto text-center mb-5">
        <span class="badge rounded-pill badge-info mb-2">Living</span>
        <h2>A new way to buy your next home</h2>
        <p>
          If you can’t decide, the answer is no. If two equally difficult paths,
          choose the one more painful in the short term (pain avoidance
          is creating an illusion of equality).
        </p>
      </div>
    </div>
    <div class="row mb-4">
      <div class="col-lg-3 col-md-6 position-relative mb-sm-0 mb-3">
        <hr class="vertical dark d-md-block d-none">
        <h3 class="mb-3">
          <a href="javascript:;" class="text-darker">
            Short Sentences Gives You the Liberty
          </a>
        </h3>
        <p class="mb-3">
          Paradoxically, using more short sentences gives you the liberty to write beautiful long sentences.
        </p>
        <p class="mb-3">
          But in a way that&#39;s never been done before.
        </p>
        <div class="author">
           <img src="https://images.unsplash.com/photo-1542909168-82c3e7fdca5c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1400&amp;q=80" alt="..." class="avatar shadow">
           <div class="name ps-3 my-auto">
            <p class="text-sm text-darker font-weight-bold mb-0">Mathew Glock</p>
            <div class="stats">
              <p class="text-xs text-secondary mb-0">Author</p>
            </div>
          </div>
        </div>
        <hr class="horizontal dark my-4">
        <h3 class="mb-3">
          <a href="javascript:;" class="text-darker">
            5 Ways to Improve your Life.
          </a>
        </h3>
        <p class="mb-3">
          Create first, edit second. Never do them at the same time.
        </p>
      </div>
      <div class="col-lg-4 col-md-6 position-relative mb-sm-0 mb-3">
        <hr class="vertical dark d-lg-block d-none">
        <div class="card card-plain">
          <div class="card-header p-0 mx-lg-3 mt-3 position-relative z-index-1">
            <a href="javascript:;" class="d-block">
              <img src="https://images.unsplash.com/photo-1543357480-c60d40007a3f?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=2100&amp;q=80" class="img-fluid border-radius-lg">
            </a>
          </div>

          <div class="card-body pt-3">
            <h4 class="mb-3">
              <a href="javascript:;" class="text-darker font-weight-bolder">
                How to Build a $24 Billion Dollar Company in Just 2 Years.
              </a>
            </h4>
            <p class="card-description mb-4">
              I&#39;ve come to the conclusion that 50% of folks in this world don&#39;t even
              spend enough time alone with their thoughts to have their own opinions.
              They haven&#39;t done the work to decide what they think. And that isn&#39;t a rewarding way to live.
            </p>
            <div class="author">
              <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?ixid=MXwxMjA3fDB8MHxzZWFyY2h8M3x8cG9ydHJhaXR8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" alt="..." class="avatar shadow">
              <div class="name ps-3 my-auto">
                <p class="text-sm text-darker font-weight-bold mb-0">L&#39;orea Sirman</p>
                <div class="stats">
                  <p class="text-xs text-secondary mb-0">Redactor</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-6 position-relative mb-sm-0 mb-3">
        <hr class="vertical dark d-md-block d-none">
        <div class="card card-plain">
          <div class="card-header p-0 mx-lg-3 mt-3 position-relative z-index-1">
            <a href="javascript:;" class="d-block">
              <img src="https://images.unsplash.com/photo-1579864795584-092b04e14e67?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=2134&amp;q=80" class="img-fluid border-radius-lg">
            </a>
          </div>

          <div class="card-body pt-3">
            <h4 class="mb-3">
              <a href="javascript:;" class="text-darker font-weight-bolder">
                8 Powerful Mental Models to Help You Win.
              </a>
            </h4>
            <p class="text-sm mb-0">By Andrew Peterson</p>
          </div>
        </div>
        <div class="card card-plain">
          <div class="card-header p-0 mx-lg-3 position-relative z-index-1">
            <a href="javascript:;" class="d-block">
              <img src="https://images.unsplash.com/photo-1432889490240-84df33d47091?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTM2fHxjYWxpZm9ybmlhfGVufDB8MHwwfA%3D%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" class="img-fluid border-radius-lg">
            </a>
          </div>
          <div class="card-body pt-3">
            <h4 class="mb-3">
              <a href="javascript:;" class="text-darker font-weight-bolder">
                High performers are like surfers.
              </a>
            </h4>
            <p class="text-sm">By L&#39;orea Michael</p>
          </div>
        </div>
      </div>
      <div class="col-lg-2 col-md-6 position-relative mb-sm-0 mb-3">
        <div class="card card-plain">
          <div class="card-body pt-3">
            <h6 class="font-weight-bolder opacit-5">
              <i class="fa fa-microphone me-2"></i>Podcasts
            </h6>
            <h5 class="mb-2">

            </h5>
            <p>An interview with Tesla founder.</p>
            <span class="text-xs">By Alexa Rossa</span>
          </div>
        </div>
        <hr class="horizontal dark mt-0 mb-2">
        <div class="card card-plain">
          <div class="card-body pt-3">
            <h6 class="font-weight-bolder">
              <i class="fa fa-microphone me-2"></i>
              Interviews
            </h6>

              <p hss="">
              Make $500k through small biz or raise it from family.
              </p>

            <span class="text-xs">By Jonathan Silvia</span>
          </div>
        </div>
        <hr class="horizontal dark mt-0 mb-2">
        <div class="card card-plain">
          <div class="card-body pt-3">
            <h6 class="font-weight-bolder opacit-5">
              <i class="fa fa-microphone me-2"></i>Podcasts
            </h6>
            <h5 class="mb-2">

            </h5>
            <p>Lengthen your time horizon.</p>
            <span class="text-xs">By Andrew Joe</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- -->