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 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/bg.jpg')" class="w-100 h-100 border-radius-lg shadow bg-cover"></div>
</div>
<div class="col-sm-3 col-7 mb-sm-0 mb-3">
<div style="background-image: url('../../assets/img/examples/content-1.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/examples/content-2.jpg')" class="w-100 h-100 border-radius-lg shadow 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/examples/content-3.jpg')" class="w-100 h-100 border-radius-lg shadow bg-cover"></div>
</div>
<div class="col-sm-5 col-5 mb-sm-0 mb-3">
<div style="background-image: url('../../assets/img/examples/content-4.jpg')" class="w-100 h-100 border-radius-lg shadow bg-cover"></div>
</div>
<div class="col-sm-4 mb-sm-0 mb-3">
<div style="background-image: url('../../assets/img/examples/content-5.jpg')" class="w-100 h-100 border-radius-lg shadow 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-md-5 col-10 d-flex justify-content-center flex-column mx-auto text-lg-start text-center">
<h2 class="mb-4">Find more great partners</h2>
<p class="mb-2">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="mb-2">People are so scared to lose their hope</li>
<li class="mb-2">That's the main thing people </li>
<li class="mb-2">Thoughts- their perception of themselves!</li>
</ul>
<p>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>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 class="col-md-5 col-6 mx-lg-0 mx-auto px-lg-0 px-md-0 my-auto">
<img class="max-width-400 border-radius-lg shadow-lg" src="../../assets/img/examples/studio-2.jpg">
</div>
</div>
</div>
</section>Content 3
<section>
<div class="container">
<div class="row py-5 align-items-center">
<div class="col-lg-6">
<p class="text-uppercase text-sm font-weight-bold">Avesome Product</p>
<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/gray-logos/logo-apple.svg">
</div>
<div class="col-lg-6">
<img class="w-100 my-3" src="../../assets/img/logos/gray-logos/logo-nasa.svg">
</div>
<div class="col-lg-6">
<img class="w-100 my-3" src="../../assets/img/logos/gray-logos/logo-digitalocean.svg">
</div>
<div class="col-lg-6">
<img class="w-100 my-3" src="../../assets/img/logos/gray-logos/logo-facebook.svg">
</div>
</div>
</div>
</div>
<div class="row pt-5">
<div class="col-md-4">
<div class="info">
<div class="icon icon-shape icon-md bg-gradient-warning shadow text-center mb-4">
<i class="material-icons opacity-10">account_circle</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 icon-md bg-gradient-info shadow text-center mb-4">
<i class="material-icons opacity-10">thumb_up</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 icon-md bg-gradient-danger shadow text-center mb-4">
<i class="material-icons opacity-10">analytics</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-sm 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-sm 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-sm 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 border-radius-xl" 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 mb-0">Follow</button>
</div>
</div>
<div class="my-auto d-md-none d-block ms-2">
<button type="button" class="btn btn-dark 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 rounded-circle">
<img class="avatar" 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 rounded-circle">
<img class="avatar" 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 rounded-circle">
<img class="avatar" 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 rounded-circle">
<img class="avatar" alt="64x64" src="../../assets/img/team-2.jpg">
</div>
</div>
</a>
</div>
<div class="ms-3 w-100">
<div class="input-group input-group-static">
<label>Your message</label>
<textarea class="form-control" placeholder="Write a nice reply or go home..." rows="4"></textarea>
</div>
<div>
<a href="javascript:;" class="btn bg-gradient-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">
<div class="blur-shadow-image">
<img src="../../assets/img/dg2.jpg" class="w-100 border-radius-xl position-absolute" alt="carz">
</div>
</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 icon-md bg-gradient-info shadow-info text-center mb-4">
<i class="material-icons opacity-10">celebration</i>
</div>
<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 icon-md bg-gradient-warning shadow-warning text-center mb-4">
<i class="material-icons opacity-10">spa</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 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">
<div class="blur-shadow-image">
<img src="../../assets/img/dg1.jpg" class="w-100 border-radius-xl mt-4 position-absolute" alt="sunset">
</div>
</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">
<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('../../assets/img/dg3.jpg'); background-size: cover;">
<span class="mask bg-gradient-dark opacity-7"></span>
</div>
<div class="container">
<div class="row mt-7 mb-5">
<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-xl p-5 blur align-items-center z-index-2 shadow-blur">
<h2 class="text-dark mb-4">Improving 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 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 border-radius-lg">
<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="../../assets/img/examples/blog-9-4.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 border-radius-lg">
<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="../../assets/img/examples/blog-9-1.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="../../assets/img/examples/blog-post-6.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 d-flex align-items-center">
<i class="material-icons me-2">mic</i>Podcasts
</h6>
<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 d-flex align-items-center">
<i class="material-icons me-2">duo</i>
Interviews
</h6>
<p>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 d-flex align-items-center">
<i class="material-icons me-2">podcasts</i>Podcasts
</h6>
<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 ------- -->