Content Sections

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 min-vh-25">
      <div class="col-sm-4 col-5 mb-sm-0 mb-3">
        <div style="background-image: url(&#39;../../assets/img/project21.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;../../assets/img/project23.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;../../assets/img/project24.jpg&#39;)" class="w-100 h-100 border-radius-lg bg-cover"></div>
      </div>
    </div>
    <div class="row min-vh-25 mt-4">
      <div class="col-sm-3 col-7 mb-sm-0 mb-3">
        <div style="background-image: url(&#39;../../assets/img/pricing1.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;../../assets/img/card-blog10.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;../../assets/img/card-blog11.jpg&#39;)" class="w-100 h-100 border-radius-lg bg-cover"></div>
      </div>
    </div>
  </div>
</section>
<!-- -------   END CONTENT 1 - title & description and 6 IMAGES   -------- -->
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="../../assets/img/ivancik.jpg">
      </div>
      <div class="col-lg-4 col-10 d-flex justify-content-center flex-column mx-auto text-lg-start text-center">
        <h2 class="mb-0 mt-lg-0 mt-4">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>
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="../../assets/img/logos/medium-logos/logo-google.svg">
          </div>
          <div class="col-lg-6">
            <img class="w-100 my-3" src="../../assets/img/logos/medium-logos/logo-pinterest.svg">
          </div>
          <div class="col-lg-6">
            <img class="w-100 my-3" src="../../assets/img/logos/medium-logos/logo-netflix.svg">
          </div>
          <div class="col-lg-6">
            <img class="w-100 my-3" src="../../assets/img/logos/medium-logos/logo-coinbase.svg">
          </div>
          <div class="col-lg-6">
            <img class="w-100 my-3" src="../../assets/img/logos/medium-logos/logo-facebook.svg">
          </div>
          <div class="col-lg-6">
            <img class="w-100 my-3" src="../../assets/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-dark shadow text-center mb-4">
            <i class="ni ni-single-02 text-white opacity-10"></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 text-decoration-underline-hover">More about us</a>
        </div>
      </div>
      <div class="col-md-4">
        <div class="info">
          <div class="icon icon-shape bg-gradient-dark shadow text-center mb-4">
            <i class="ni ni-support-16 text-white opacity-10"></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 text-decoration-underline-hover">More about us</a>
        </div>
      </div>
      <div class="col-md-4">
        <div class="info">
          <div class="icon icon-shape bg-gradient-dark shadow text-center mb-4">
            <i class="ni ni-trophy text-white opacity-10"></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 text-decoration-underline-hover">More about us</a>
        </div>
      </div>
    </div>
  </div>
</section>
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-end">
                      <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-end">
                      <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-end">
                      <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">
                  <img class="avatar avatar-xxl rounded-circle shadow" src="../../assets/img/james.jpg">
                </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-end 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>
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 href="javascript:;">
                    <div class="position-relative">
                      <img class="avatar rounded-circle shadow" src="../../assets/img/james.jpg" alt="...">
                    </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-end">
                        <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 href="javascript:;">
                    <div class="position-relative">
                      <img class="avatar rounded-circle shadow" src="../../assets/img/emily.jpg" alt="...">
                    </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-end">
                        <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 href="javascript:;">
                            <div class="position-relative">
                              <img class="avatar rounded-circle shadow" src="../../assets/img/emilyz.jpg" alt="...">
                            </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-end">
                                <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="author" href="javascript:;">
                  <div class="position-relative">
                    <img class="avatar rounded-circle shadow" alt="64x64" src="../../assets/img/michael.jpg">
                  </div>
                </a>
              </div>
              <div class="ms-3 w-100">
                <textarea class="form-control border-radius-lg" placeholder="Write a nice reply or go home..." rows="4"></textarea>
                <div>
                    <a href="javascript:;" class="btn bg-gradient-primary float-end mt-2">
                        <i class="fa fa-send me-2"></i> Reply
                    </a>
                </div>
              </div>
          </div> <!-- end media-post -->
    </div>
    </div>
  </div>
</section>
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">
          <img src="../../assets/img/bg1.jpg" class="w-100 border-radius-xl shadow 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-primary rounded-circle shadow text-center mb-4">
              <i class="ni ni-sound-wave text-white opacity-10"></i>
            </div>
            <h4 class="mb-4">Refreshing workspace</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 text-decoration-underline-hover">More about us</a>
          </div>
      </div>
    </div>
    <div class="row mt-0 mt-md-5 mt-lg-8">
      <div class="col-lg-5 col-md-12 ms-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="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 text-decoration-underline-hover">More about us</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">
          <img src="../../assets/img/bg3.jpg" class="w-100 border-radius-xl shadow ms-n5 position-absolute end-0" alt="">
        </div>
      </div>
    </div>
  </div>
</section>
<!-- END Section Content -->
Copy
<!-- -------- START CONTENT 7 w/ card over right bg image ------- -->
<div class="page-header min-vh-85 my-5 bg-gray-200">
  <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;../../assets/img/bg45.jpg&#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 border-radius-lg p-5 align-items-center z-index-2">
          <h2 class="mb-4">Excluding the design complexity</h2>
          <p class="text-lg-start 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="../../assets/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="../../assets/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="../../assets/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="../../assets/img/logos/gray-logos/logo-nasa.svg" alt="logo">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- -------- END CONTENT 10 w/ card over right bg image ------- -->
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-dark text-decoration-underline-hover">
            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="../../assets/img/emily.jpg" alt="..." class="avatar shadow rounded-circle">
           <div class="name ps-3 my-auto">
            <p class="text-sm text-dark 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-dark text-decoration-underline-hover">
            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="../../assets/img/antalya.jpg" class="img-fluid border-radius-lg">
            </a>
          </div>

          <div class="card-body pt-3">
            <h4 class="mb-3">
              <a href="javascript:;" class="text-dark font-weight-bold text-decoration-underline-hover">
                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="../../assets/img/james.jpg" alt="..." class="avatar shadow rounded-circle">
              <div class="name ps-3 my-auto">
                <p class="text-sm text-dark 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="../../assets/img/house.jpg" class="img-fluid border-radius-lg">
            </a>
          </div>

          <div class="card-body pt-3">
            <h4 class="mb-3">
              <a href="javascript:;" class="text-dark font-weight-bold text-decoration-underline-hover">
                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="../../assets/img/air-bnb.jpg" class="img-fluid border-radius-lg">
            </a>
          </div>
          <div class="card-body pt-3">
            <h4 class="mb-3">
              <a href="javascript:;" class="text-dark font-weight-bold text-decoration-underline-hover">
                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-bold 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-bold">
              <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-bold 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>
<!-- -------- END CONTENT 11 w/ title and 4 images ------- -->
Copy
<!-- -------- START CONTENT 13 w/ audio and author ------- -->
<section class="pt-md-8 pb-5 position-relative">
  <div class="container">
    <div class="row">
      <div class="col-lg-9 col-md-7 mb-md-0 mb-4">
        <div class="gap-example border px-4 py-5 border-radius-sm">
            <audio>
                <source src="../../assets/audio/example.mp3" type="audio/mpeg">
            </audio>
        </div>
      </div>
      <div class="col-lg-3 col-md-5 my-auto text-center">
        <div class="d-flex align-items-center justify-content-center mb-2">
          <div class="author">
             <img src="../../assets/img/team-3.jpg" alt="..." class="avatar avatar-xl shadow me-3">
          </div>
           <div class="text-start">
             <p class="text-dark font-weight-bold mb-0">by <a href="javascript:;" class="text-decoration-underline">John Mannes</a></p>
             <span class="text-sm">Creative Tim Author</span>
           </div>
           <i class="fas fa-heart text-lg ms-3 cursor-pointer text-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Add to favorites"></i>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- -------- END CONTENT 13 w/ audio and author ------- -->


<script type="text/javascript">
  new GreenAudioPlayer('.gap-example');
</script>

Content 10

Copy
<!-- -------- START CONTENT 14 w/ image cards and sticky content ------- -->
<section class="pt-md-4 pb-5 position-relative">
  <div class="container">
    <div class="row">
      <div class="col-lg-9">
        <h4>
          All episodes
        </h4>
        <hr class="horizontal dark mb-4">
        <div class="row">
          <div class="col-sm-2 col-3">
            <img class="img w-100 border-radius-lg shadow-lg" src="../../assets/img/podcast/episode-1.jpeg" alt="curved11">
          </div>
          <div class="col-sm-10 col-9 my-auto">
            <h5>
              <a href="javascript:;" class="text-dark font-weight-bold">#1930 - Brief History of Design</a>
            </h5>
            <p class="text-sm">
              As we live, our hearts turn colder. Cause pain is what we go
              through as we become older. We get insulted by others, lose
              trust for those others.
            </p>
            <div class="buttons justify-content-center">
              <a href="javascript:;" class="btn btn-sm btn-rounded btn-dark btn-icon-only pt-1 mb-0" data-bs-toggle="tooltip" data-bs-placement="top" title="Play episode">
                <i class="fa fa-play"></i>
              </a>
              <span class="font-weight-bold text-sm ms-2">2h 13min</span>
            </div>
          </div>
          <hr class="horizontal dark my-4">
        </div>

        <div class="row">
          <div class="col-sm-2 col-3">
            <img class="img w-100 border-radius-lg shadow-lg" src="../../assets/img/podcast/episode-2.jpeg" alt="curved11">
          </div>
          <div class="col-sm-10 col-9 my-auto">
            <h5>
              <a href="javascript:;" class="text-dark font-weight-bold">#1929 - How Great Designs are Made</a>
            </h5>
            <p class="text-sm">
              I always felt like I could do anything. That’s the main thing people are controlled
              by! Thoughts- their perception of themselves!
            </p>
            <div class="buttons justify-content-center">
              <a href="javascript:;" class="btn btn-sm btn-rounded btn-dark btn-icon-only pt-1 mb-0" data-bs-toggle="tooltip" data-bs-placement="top" title="Play episode">
                <i class="fa fa-play"></i>
              </a>
              <span class="font-weight-bold text-sm ms-2">1h 40min</span>
            </div>
          </div>
          <hr class="horizontal dark my-4">
        </div>

        <div class="row mb-4">
          <div class="col-sm-2 col-3">
            <img class="img w-100 border-radius-lg shadow-lg" src="../../assets/img/podcast/episode-3.jpeg" alt="curved11">
          </div>
          <div class="col-sm-10 col-9 my-auto">
            <h5>
              <a href="javascript:;" class="text-dark font-weight-bold">#1928 - The Evolution of Fonts</a>
            </h5>
            <p class="text-sm">
              That’s what I do. That’s what I’m here for. Don’t be afraid to be wrong
              because you can’t learn anything from a compliment.
            </p>
            <div class="buttons justify-content-center">
              <a href="javascript:;" class="btn btn-sm btn-rounded btn-dark btn-icon-only pt-1 mb-0" data-bs-toggle="tooltip" data-bs-placement="top" title="Play episode">
                <i class="fa fa-play"></i>
              </a>
              <span class="font-weight-bold text-sm ms-2">2h 52min</span>
            </div>
          </div>
        </div>
    </div>
    <div class="col-lg-3">
      <div class="position-sticky top-2">
        <h4>
          About
        </h4>
        <p>
          There’s nothing I really wanted to do in life that I wasn’t able to
          get good at. That’s my skill.
        </p>
        <div class="d-flex">
          <span class="badge badge-primary me-2">UI/UX</span>
          <span class="badge badge-primary">Design</span>
        </div>
        <div class="bg-light p-2 border-radius-lg mt-4 w-lg-100 w-sm-50">
          <div class="row">
            <div class="col-3">
              <div class="position-relative">
                <img class="img w-100 border-radius-md shadow-lg" src="../../assets/img/podcast/episode-3.jpeg" alt="curved11">
                <span class="mask bg-gradient-dark border-radius-md position-absolute top-0 start-0 d-flex align-items-center justify-content-center">
                  <i class="fa fa-play text-white"></i>
                </span>
              </div>
            </div>
            <div class="col-9 ps-0 my-auto">
              <h6 class="text-sm mb-0">Enter the UI/UX Design World.</h6>
              <span class="badge badge-sm badge-dark">Trailer</span>
            </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- -------- END CONTENT 14 w/ image cards and sticky content ------- -->