Content 1
<!-- ------- 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('../../assets/img/nastuh.jpg')" 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('../../assets/img/card-3.jpg')" 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('../../assets/img/card-2.jpg')" 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('../../assets/img/meeting.jpg')" 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('../../assets/img/anastasia.jpg')" 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('../../assets/img/annie-spratt.jpg')" class="w-100 h-100 border-radius-lg bg-cover"></div>
</div>
</div>
</div>
</section>
<!-- ------- END CONTENT 1 - title & description and 6 IMAGES -------- -->Content 2
<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/toa-heftiba.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 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
<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-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
<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">
<div class="blur-shadow-avatar">
<img class="avatar avatar-xxl rounded-circle" src="../../assets/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'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>Content 5
<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">
<div class="blur-shadow-avatar">
<img class="avatar rounded-circle" src="../../assets/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'm so proud of @LifeOfDesiigner #1 song in the country. Panda! Don'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't forget, You'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">
<div class="blur-shadow-avatar">
<img class="avatar rounded-circle" src="../../assets/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't forget, You'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">
<div class="blur-shadow-avatar">
<img class="avatar rounded-circle" src="../../assets/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't forget, You'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">
<div class="blur-shadow-avatar">
<img class="avatar rounded-circle" alt="64x64" src="../../assets/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 btn-primary pull-end mt-2">
<i class="fa fa-send me-2"></i> Reply
</a>
</div>
</div>
</div> <!-- end media-post -->
</div>
</div>
</div>
</section>Content 6
<!-- 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://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/color-city.jpg" 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://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/arena.jpg" class="w-100 border-radius-xl mt-6 ms-n5 position-absolute" alt="">
</div>
</div>
</div>
</div>
</section>
<!-- END Section Content -->Content 7
<!-- -------- START CONTENT 7 w/ card over right bg image ------- -->
<div class="page-header min-vh-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 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('https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/cave.jpg'); 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-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 ------- -->Content 8
<!-- -------- 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's never been done before.
</p>
<div class="author">
<img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/team-9.jpg" 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://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/freedom.jpg" 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've come to the conclusion that 50% of folks in this world don't even
spend enough time alone with their thoughts to have their own opinions.
They haven't done the work to decide what they think. And that isn't a rewarding way to live.
</p>
<div class="author">
<img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/freedom.jpg" alt="..." class="avatar shadow">
<div class="name ps-3 my-auto">
<p class="text-sm text-darker font-weight-bold mb-0">L'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://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/city-view.jpg" 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://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/ocean.jpg" 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'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>
<!-- -------- END CONTENT 11 w/ title and 4 images ------- -->Content 9
<!-- -------- 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/img/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
<!-- -------- 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 ------- -->