Project 1
<!-- START Project section w/ 3 images & quote & text -->
<section class="py-5">
<div class="container">
<div class="row mb-5">
<div class="col-lg-8 text-center mx-auto">
<p class="mb-1 text-success text-uppercase font-weight-bold">Our Work</p>
<h3>Some of our awesome projects - 1</h3>
</div>
</div>
<div class="row">
<div class="col-md-6 position-relative">
<img class="image-left border-radius-lg img-fluid shadow position-relative top-0 end-0 ms-md-5 bg-cover" src="../../assets/img/examples/testimonial-6-2.jpg">
<p class="blockquote border border-success rounded w-50 p-3 text-sm text-success float-md-end mx-auto mt-4 me-md-n2">"Over the span of the satellite record, Arctic sea ice has been declining significantly, while sea ice in the Antarctichas increased very
slightly"
<br>
<br>
<small>-NOAA</small>
</p>
</div>
<div class="col-md-5">
<!-- First image on the right side, above the article -->
<img class="image-right border-radius-lg img-fluid shadow ms-md-n4 mb-4 mt-md-8 position-relative bg-cover" src="../../assets/img/examples/content-5.jpg">
<div class="px-4">
<p class="text-gradient text-success">Design</p>
<h3 class="mb-4">Jeff Bezos</h3>
<p>
For a start, it does not automatically follow that a record amount of ice will melt this summer. More important for determining the size of the annual thaw is the state of the weather as the midnight sun approaches and temperatures rise.
</p>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-md-6 position-relative">
<img class="image-left border-radius-lg img-fluid shadow position-relative top-0 end-0 ms-md-5 bg-cover" src="../../assets/img/examples/content-4.jpg">
<p class="blockquote border border-primary rounded w-50 p-3 text-sm text-primary float-md-end mt-4 me-md-n2 mx-auto">"Over the span of the satellite record, Arctic sea ice has been declining significantly, while sea ice in the Antarctichas increased very
slightly"
<br>
<br>
<small>-NOAA</small>
</p>
</div>
<div class="col-md-5">
<!-- First image on the right side, above the article -->
<img class="image-right border-radius-lg img-fluid shadow ms-md-n4 mb-4 mt-md-8 position-relative bg-cover" src="../../assets/img/examples/testimonial-6-3.jpg">
<div class="px-4">
<p class="text-gradient text-primary">Development</p>
<h3 class="mb-4">Mike Alfonso</h3>
<p>
For a start, it does not automatically follow that a record amount of ice will melt this summer. More important for determining the size of the annual thaw is the state of the weather as the midnight sun approaches and temperatures rise.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- END Project section w/ 3 images & quote & text -->Project 2
<section class="py-5">
<div class="container">
<div class="row">
<div class="col-md-8 ms-auto me-auto text-center">
<h3>Some of Our Awesome Projects</h3>
<p>This is the paragraph where you can write more details about your projects. Keep you user engaged by providing meaningful information.</p>
</div>
</div>
<div class="row mt-5">
<div class="col-md-5 ms-auto">
<div class="card bg-cover text-center" style="background-image: url('../../assets/img/examples/blog1.jpg')">
<div class="card-body z-index-2 py-9">
<h2 class="text-white">Social Analytics</h2>
<p class="text-white">
Insight to help you create, connect, and convert. Understand Your Audience's Interests, Influence, Interactions, and Intent. Discover emerging topics and influencers to reach new audiences.
</p>
<label class="badge badge-light text-dark">Analytics</label>
</div>
<div class="mask bg-gradient-primary border-radius-lg"></div>
</div>
</div>
<div class="col-md-5 me-auto my-auto mt-md-auto mt-5">
<div class="p-3 info-horizontal d-flex">
<div class="icon me-3">
<i class="material-icons text-gradient text-primary text-3xl">perm_phone_msg</i>
</div>
<div class="ms-4">
<h4>Listen to Social Conversations</h4>
<p>
Gain access to the demographics, psychographics, and location of unique people who talk about your brand.
</p>
</div>
</div>
<div class="p-3 info-horizontal d-flex">
<div class="icon me-3 mt-1">
<i class="material-icons text-gradient text-primary text-3xl">fact_check</i>
</div>
<div class="ms-4">
<h4>Performance Analyze</h4>
<p>
Unify data from Facebook, Instagram, Twitter, LinkedIn, and Youtube to gain rich insights from easy-to-use reports.
</p>
</div>
</div>
<div class="p-3 info-horizontal d-flex">
<div class="icon me-3 mt-1">
<i class="material-icons text-gradient text-primary text-3xl">manage_accounts</i>
</div>
<div class="ms-4">
<h4>Social Conversions</h4>
<p>
Track actions taken on your website that originated from social, and understand the impact on your bottom line.
</p>
</div>
</div>
</div>
</div>
<hr class="horizontal dark my-6 mx-7">
<div class="row">
<div class="col-md-5 ms-auto my-auto">
<div class="p-3 info-horizontal d-flex">
<div class="icon me-3">
<i class="material-icons text-gradient text-info text-3xl">sync_alt</i>
</div>
<div class="ms-4">
<h4>Always In Sync</h4>
<p>
No matter where you are, Trello stays in sync across all of your devices.
</p>
</div>
</div>
<div class="p-3 info-horizontal d-flex">
<div class="icon me-3 mt-1">
<i class="material-icons text-gradient text-info text-3xl">groups</i>
</div>
<div class="ms-4">
<h4>Work With Any Team</h4>
<p>
Whether it’s for work or even the next family vacation, Trello helps your team.
</p>
</div>
</div>
<div class="p-3 info-horizontal d-flex">
<div class="icon me-3 mt-1">
<i class="material-icons text-gradient text-info text-3xl">screen_share</i>
</div>
<div class="ms-4">
<h4>A Productivity Platform</h4>
<p>
Integrate the apps your team already uses directly into your workflow.
</p>
</div>
</div>
</div>
<div class="col-md-5 me-auto">
<div class="card bg-cover text-center" style="background-image: url('../../assets/img//examples/blog2.jpg')">
<div class="card-body z-index-2 py-9">
<h2 class="text-white">Trello lets you work.</h2>
<p class="text-white">
Trello’s boards, lists, and cards enable you to organize and prioritize your projects in a fun, flexible and rewarding way.
</p>
<label class="badge badge-light text-dark">Trello</label>
</div>
<div class="mask bg-gradient-info border-radius-lg"></div>
</div>
</div>
</div>
</div>
</section>Project 3
<!-- START Project section w/ 3 tilt cards -->
<section class="py-5">
<div class="container">
<div class="row mb-5">
<div class="col-lg-8 text-center mx-auto">
<p class="mb-1 text-gradient text-primary font-weight-bold text-uppercase">Our Work</p>
<h3>Some of our awesome projects - 3</h3>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6">
<a href="javascript:;">
<div class="card card-background card-background-mask-dark">
<div class="full-background" style="background-image: url('https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/team-working.jpg')"></div>
<div class="card-body pt-7 text-center">
<p class="text-uppercase font-weight-bold text-sm text-white opacity-6">Productivity</p>
<h3 class="text-white">Search and Discover!</h3>
<p class="text-white opacity-8">Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design.</p>
<button type="button" class="btn btn-white btn-sm mt-3">Get Started</button>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-md-6">
<a href="javascript:;">
<div class="card card-background card-background-mask-dark mt-md-0 mt-5">
<div class="full-background" style="background-image: url('https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/toboshar.jpg')"></div>
<div class="card-body pt-7 text-center">
<p class="text-uppercase font-weight-bold text-sm text-white opacity-6">Design</p>
<h3 class="text-white">Find music and play it!</h3>
<p class="text-white opacity-8">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>
<button type="button" class="btn btn-white btn-sm mt-3">Get Started</button>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-md-6 mx-md-auto">
<a href="javascript:;">
<div class="card card-background card-background-mask-dark mt-lg-0 mt-5">
<div class="full-background" style="background-image: url('https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/umbrellas.jpg')"></div>
<div class="card-body pt-7 text-center">
<p class="text-uppercase font-weight-bold text-sm text-white opacity-6">Support</p>
<h3 class="text-white">Check bugs and fix!</h3>
<p class="text-white opacity-8">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>
<button type="button" class="btn btn-white btn-sm mt-3">Get Started</button>
</div>
</div>
</a>
</div>
</div>
</div>
</section>
<!-- END Project section w/ 3 images & quote & text -->Project 4
<section class="py-5 bg-gray-200">
<div class="container">
<div class="row">
<div class="col-md-8 ms-auto me-auto text-center">
<h3>Some of Our Awesome Products</h3>
<p>You get rewarded for unique knowledge, not for effort. Effort is required to create unique knowledge.</p>
</div>
</div>
<div class="row mt-lg-5 mt-4">
<div class="col-lg-4 col-md-6 mb-5">
<div class="card">
<div class="ps-4 mt-n4">
<div class="icon icon-lg icon-shape bg-gradient-primary shadow-primary shadow text-center border-radius-xl">
<i class="material-icons opacity-10">manage_accounts</i>
</div>
</div>
<div class="card-body border-radius-lg position-relative overflow-hidden pb-4">
<h5 class="mt-2">Slack bot</h5>
<p class="mb-3">If everything I did failed - which it doesn't, it actually succeeds - just the fact that I'm willing to fail is an inspiration. People are so scared to lose that they don't even try. And this is sad.</p>
<a href="javascript:;" class="font-weight-bold text-xs text-uppercase font-weight-bolder text-primary icon-move-right">
Check more
<i class="fas fa-arrow-right text-xs ms-1"></i>
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-5">
<div class="card mb-3">
<div class="ps-4 mt-n4">
<div class="icon icon-lg icon-shape bg-gradient-success shadow-success shadow text-center border-radius-xl">
<i class="material-icons opacity-10">face</i>
</div>
</div>
<div class="card-body border-radius-lg position-relative overflow-hidden pb-4">
<h5 class="mt-2">Looking great</h5>
<p class="mb-3">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 motivating the other doers.</p>
<a href="javascript:;" class="font-weight-bold text-xs text-uppercase font-weight-bolder text-success icon-move-right">
See details
<i class="fas fa-arrow-right text-xs ms-1"></i>
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-5">
<div class="card mb-3">
<div class="ps-4 mt-n4">
<div class="icon icon-lg icon-shape bg-gradient-warning shadow-warning shadow text-center border-radius-xl">
<i class="material-icons opacity-10">integration_instructions</i>
</div>
</div>
<div class="card-body border-radius-lg position-relative overflow-hidden pb-4 px-sm-5 ">
<h5 class="mt-2">Developer First</h5>
<p class="mb-3">For standing out. But the time is now to be okay to be the greatest you. Would you believe in what you believe in, if you were the only one who believed it? What do you think?</p>
<a href="javascript:;" class="font-weight-bold text-xs text-uppercase font-weight-bolder text-warning icon-move-right">
View journey
<i class="fas fa-arrow-right text-xs ms-1"></i>
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-5">
<div class="card mb-3">
<div class="ps-4 mt-n4">
<div class="icon icon-lg icon-shape bg-gradient-dark shadow-dark shadow text-center border-radius-xl">
<i class="material-icons opacity-10">public</i>
</div>
</div>
<div class="card-body border-radius-lg position-relative overflow-hidden pb-4">
<h5 class="mt-2">Prepare launch</h5>
<p class="mb-3">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.</p>
<a href="javascript:;" class="font-weight-bold text-xs text-uppercase font-weight-bolder text-dark icon-move-right">
Check out more
<i class="fas fa-arrow-right text-xs ms-1"></i>
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-5">
<div class="card mb-3">
<div class="ps-4 mt-n4">
<div class="icon icon-lg icon-shape bg-gradient-info shadow-info shadow text-center border-radius-xl">
<i class="material-icons opacity-10">support</i>
</div>
</div>
<div class="card-body border-radius-lg position-relative overflow-hidden pb-4">
<h5 class="mt-2">Premium support</h5>
<p class="mb-3">Pink is obviously a better color. Everyone’s born confident, and everything’s taken away from you matters is the people who are sparked by it follow their dreams, too.</p>
<a href="javascript:;" class="font-weight-bold text-xs text-uppercase font-weight-bolder text-info icon-move-right">
See all
<i class="fas fa-arrow-right text-xs ms-1"></i>
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-5">
<div class="card mb-3">
<div class="ps-4 mt-n4">
<div class="icon icon-lg icon-shape bg-gradient-danger shadow-danger shadow text-center border-radius-xl">
<i class="material-icons opacity-10">brush</i>
</div>
</div>
<div class="card-body border-radius-lg position-relative overflow-hidden pb-4">
<h5 class="mt-2">Design tools</h5>
<p class="mb-3">Constantly growing. We’re constantly making mistakes. We’re constantly trying to express ourselves, find the meaning and actualize our dreams the position.</p>
<a href="javascript:;" class="font-weight-bold text-xs text-uppercase font-weight-bolder text-danger icon-move-right">
Find story
<i class="fas fa-arrow-right text-xs ms-1"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</section>Project 5
<section class="py-5">
<div class="container">
<div class="row">
<div class="col-lg-5 col-10 ms-auto me-auto text-center">
<div class="p-3 info-hover-warning">
<div class="icon icon-shape icon-md bg-gradient-primary shadow-primary icon-shape-circle text-primary mx-auto">
<i class="material-icons opacity-10">engineering</i>
</div>
</div>
<h3 class="mt-4">How To Handle Components</h3>
<p>We’re constantly trying to express ourselves and actualize our dreams. Don't stop.</p>
</div>
</div>
<div class="row mt-5">
<div class="col-md-4 ms-auto my-auto">
<div class="cursor-pointer">
<div class="card card-background">
<div class="full-background" style="background-image: url('../../assets/img/examples/color1.jpg')"></div>
<div class="card-body pt-7 text-center">
<p class="text-white text-uppercase">Website visitors</p>
<h3 class="text-white mb-0">The Best Productivity Apps on Market</h3>
<p class="text-white opacity-8">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>
<button type="button" class="btn btn-white btn-sm mt-3">Get Started</button>
</div>
</div>
</div>
</div>
<div class="col-md-5 me-auto my-auto ms-md-5">
<div class="p-3 info-horizontal d-flex">
<div>
<h5>1. Listen to Social Conversations</h5>
<p>
Gain access to the demographics, psychographics, and location of unique people who are interested and talk about your brand.
</p>
</div>
</div>
<div class="p-3 info-horizontal d-flex">
<div>
<h5>2. Performance Analyze</h5>
<p>
Unify data from Facebook, Instagram, Twitter, LinkedIn, and Youtube to gain rich insights from easy-to-use reports.
</p>
</div>
</div>
<div class="p-3 info-horizontal d-flex">
<div>
<h5>3. Social Conversions</h5>
<p>
Track actions taken on your website that originated from social, and understand the impact on your bottom line.
</p>
</div>
</div>
</div>
</div>
<hr class="horizontal dark my-sm-6 my-3 mx-7">
<div class="row">
<div class="col-md-5 ms-auto my-auto">
<div class="p-3 info-horizontal d-flex">
<div>
<h5>1. Always In Sync</h5>
<p>
No matter where you are, Trello stays in sync across all of your devices.
</p>
</div>
</div>
<div class="p-3 info-horizontal d-flex">
<div>
<h5>2. Work With Any Team</h5>
<p>
Whether it’s for work or even the next family vacation, Trello helps your team.
</p>
</div>
</div>
<div class="p-3 info-horizontal d-flex">
<div>
<h5>3. A Productivity Platform</h5>
<p>
Integrate the apps your team already uses directly into your workflow.
</p>
</div>
</div>
</div>
<div class="col-md-4 me-auto my-auto ms-md-5">
<div class="cursor-pointer">
<div class="card card-background">
<div class="full-background" style="background-image: url('../../assets/img/examples/color3.jpg')"></div>
<div class="card-body pt-7 text-center">
<p class="text-white text-uppercase">Social activities</p>
<h3 class="text-white up mb-0">Working on Wallstreet is Not So Easy</h3>
<p class="text-white opacity-8">There’s nothing I really wanted to do in life that I wasn’t able to get good at. I’m not really specifically talented at anything except for the ability to learn.</p>
<button type="button" class="btn btn-white btn-sm mt-3">Get Started</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Project 6
<section class="py-5 bg-gray-200">
<div class="container">
<div class="row">
<div class="col-md-8 me-auto text-start">
<h3>Projects</h3>
<p>See all our projects</p>
</div>
</div>
<div class="row mt-lg-4 mt-2">
<div class="col-lg-4 col-md-6 mb-4">
<div class="card">
<div class="card-body p-3 pt-2">
<div class="d-flex">
<div class="avatar avatar-xl bg-gradient-dark border-radius-md p-2 mt-n4">
<img src="../../assets/img/logos/small-logos/logo-slack.svg">
</div>
<div class="ms-3 my-auto">
<h6>Slack Bot</h6>
</div>
<div class="ms-auto">
<div class="dropdown">
<button class="btn btn-link text-secondary ps-0 pe-2" id="navbarDropdownMenuLink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-ellipsis-v text-lg"></i>
</button>
<div class="dropdown-menu ms-n4" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="javascript:;">Action</a>
<a class="dropdown-item" href="javascript:;">Another action</a>
<a class="dropdown-item" href="javascript:;">Something else here</a>
</div>
</div>
</div>
</div>
<p class="text-sm mt-3"> If everything I did failed - which it doesn't, it actually succeeds. </p>
<hr class="horizontal dark">
<div class="row">
<div class="col-6">
<div class="avatar-group">
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-toggle="tooltip" data-original-title="Jessica Rowland">
<img alt="Image placeholder" src="../../assets/img/team-3.jpg" class="">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-toggle="tooltip" data-original-title="Audrey Love">
<img alt="Image placeholder" src="../../assets/img/team-4.jpg" class="rounded-circle">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-toggle="tooltip" data-original-title="Michael Lewis">
<img alt="Image placeholder" src="../../assets/img/team-2.jpg" class="rounded-circle">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-toggle="tooltip" data-original-title="Jessica Rowland">
<img alt="Image placeholder" src="../../assets/img/team-3.jpg" class="">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-toggle="tooltip" data-original-title="Audrey Love">
<img alt="Image placeholder" src="../../assets/img/team-4.jpg" class="rounded-circle">
</a>
</div>
<p class="text-secondary text-sm font-weight-bold mb-0">Participants</p>
</div>
<div class="col-6 text-end">
<h6 class="text-sm mb-0">02.03.22</h6>
<p class="text-secondary text-sm font-weight-bold mb-0">Due date</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="card">
<div class="card-body p-3 pt-2">
<div class="d-flex">
<div class="avatar avatar-xl bg-gradient-dark border-radius-md p-2 mt-n4">
<img src="../../assets/img/logos/small-logos/logo-spotify.svg">
</div>
<div class="ms-3 my-auto">
<h6>Premium support</h6>
</div>
<div class="ms-auto">
<div class="dropdown">
<button class="btn btn-link text-secondary ps-0 pe-2" id="navbarDropdownMenuLink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-ellipsis-v text-lg"></i>
</button>
<div class="dropdown-menu ms-n4" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="javascript:;">Action</a>
<a class="dropdown-item" href="javascript:;">Another action</a>
<a class="dropdown-item" href="javascript:;">Something else here</a>
</div>
</div>
</div>
</div>
<p class="text-sm mt-3"> Pink is obviously a better color. Everyone’s born confident, and everything’s taken away from you. </p>
<hr class="horizontal dark">
<div class="row">
<div class="col-6">
<div class="avatar-group">
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-toggle="tooltip" data-original-title="Audrey Love">
<img alt="Image placeholder" src="../../assets/img/team-4.jpg" class="rounded-circle">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-toggle="tooltip" data-original-title="Jessica Rowland">
<img alt="Image placeholder" src="../../assets/img/team-3.jpg" class="">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-toggle="tooltip" data-original-title="Michael Lewis">
<img alt="Image placeholder" src="../../assets/img/team-2.jpg" class="rounded-circle">
</a>
</div>
<p class="text-secondary text-sm font-weight-bold mb-0">Participants</p>
</div>
<div class="col-6 text-end">
<h6 class="text-sm mb-0">22.11.21</h6>
<p class="text-secondary text-sm font-weight-bold mb-0">Due date</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="card">
<div class="card-body p-3 pt-2">
<div class="d-flex">
<div class="avatar avatar-xl bg-gradient-dark border-radius-md p-2 mt-n4">
<img src="../../assets/img/logos/small-logos/logo-xd.svg">
</div>
<div class="ms-3 my-auto">
<h6>Design tools</h6>
</div>
<div class="ms-auto">
<div class="dropdown">
<button class="btn btn-link text-secondary ps-0 pe-2" id="navbarDropdownMenuLink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-ellipsis-v text-lg"></i>
</button>
<div class="dropdown-menu ms-n4" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="javascript:;">Action</a>
<a class="dropdown-item" href="javascript:;">Another action</a>
<a class="dropdown-item" href="javascript:;">Something else here</a>
</div>
</div>
</div>
</div>
<p class="text-sm mt-3"> Constantly growing. We’re constantly making mistakes. </p>
<hr class="horizontal dark">
<div class="row">
<div class="col-6">
<div class="avatar-group">
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-toggle="tooltip" data-original-title="Audrey Love">
<img alt="Image placeholder" src="../../assets/img/team-4.jpg" class="rounded-circle">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-toggle="tooltip" data-original-title="Michael Lewis">
<img alt="Image placeholder" src="../../assets/img/team-2.jpg" class="rounded-circle">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-toggle="tooltip" data-original-title="Jessica Rowland">
<img alt="Image placeholder" src="../../assets/img/team-3.jpg" class="">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-toggle="tooltip" data-original-title="Jessica Rowland">
<img alt="Image placeholder" src="../../assets/img/team-4.jpg" class="">
</a>
</div>
<p class="text-secondary text-sm font-weight-bold mb-0">Participants</p>
</div>
<div class="col-6 text-end">
<h6 class="text-sm mb-0">06.03.20</h6>
<p class="text-secondary text-sm font-weight-bold mb-0">Due date</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-4">
<div class="card">
<div class="card-body p-3 pt-2">
<div class="d-flex">
<div class="avatar avatar-xl bg-gradient-dark border-radius-md p-2 mt-n4">
<img src="../../assets/img/logos/small-logos/logo-asana.svg">
</div>
<div class="ms-3 my-auto">
<h6>Looking great</h6>
</div>
<div class="ms-auto">
<div class="dropdown">
<button class="btn btn-link text-secondary ps-0 pe-2" id="navbarDropdownMenuLink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-ellipsis-v text-lg"></i>
</button>
<div class="dropdown-menu ms-n4" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="javascript:;">Action</a>
<a class="dropdown-item" href="javascript:;">Another action</a>
<a class="dropdown-item" href="javascript:;">Something else here</a>
</div>
</div>
</div>
</div>
<p class="text-sm mt-3"> You have the opportunity to play this game of life you need to appreciate every moment. </p>
<hr class="horizontal dark">
<div class="row">
<div class="col-6">
<div class="avatar-group">
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-toggle="tooltip" data-original-title="Jessica Rowland">
<img alt="Image placeholder" src="../../assets/img/team-3.jpg" class="">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-toggle="tooltip" data-original-title="Audrey Love">
<img alt="Image placeholder" src="../../assets/img/team-4.jpg" class="rounded-circle">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-toggle="tooltip" data-original-title="Michael Lewis">
<img alt="Image placeholder" src="../../assets/img/team-2.jpg" class="rounded-circle">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-toggle="tooltip" data-original-title="Jessica Rowland">
<img alt="Image placeholder" src="../../assets/img/team-3.jpg" class="">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-toggle="tooltip" data-original-title="Audrey Love">
<img alt="Image placeholder" src="../../assets/img/team-4.jpg" class="rounded-circle">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-toggle="tooltip" data-original-title="Michael Lewis">
<img alt="Image placeholder" src="../../assets/img/team-2.jpg" class="rounded-circle">
</a>
</div>
<p class="text-secondary text-sm font-weight-bold mb-0">Participants</p>
</div>
<div class="col-6 text-end">
<h6 class="text-sm mb-0">14.03.24</h6>
<p class="text-secondary text-sm font-weight-bold mb-0">Due date</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-4">
<div class="card">
<div class="card-body p-3 pt-2">
<div class="d-flex">
<div class="avatar avatar-xl bg-gradient-dark border-radius-md p-2 mt-n4">
<img src="../../assets/img/logos/small-logos/logo-invision.svg">
</div>
<div class="ms-3 my-auto">
<h6>Developer First</h6>
</div>
<div class="ms-auto">
<div class="dropdown">
<button class="btn btn-link text-secondary ps-0 pe-2" id="navbarDropdownMenuLink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-ellipsis-v text-lg"></i>
</button>
<div class="dropdown-menu ms-n4" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="javascript:;">Action</a>
<a class="dropdown-item" href="javascript:;">Another action</a>
<a class="dropdown-item" href="javascript:;">Something else here</a>
</div>
</div>
</div>
</div>
<p class="text-sm mt-3"> For standing out. But the time is now to be okay to be the greatest you. </p>
<hr class="horizontal dark">
<div class="row">
<div class="col-6">
<div class="avatar-group">
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-toggle="tooltip" data-original-title="Audrey Love">
<img alt="Image placeholder" src="../../assets/img/team-4.jpg" class="rounded-circle">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-toggle="tooltip" data-original-title="Jessica Rowland">
<img alt="Image placeholder" src="../../assets/img/team-3.jpg" class="">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-toggle="tooltip" data-original-title="Michael Lewis">
<img alt="Image placeholder" src="../../assets/img/team-2.jpg" class="rounded-circle">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-toggle="tooltip" data-original-title="Audrey Love">
<img alt="Image placeholder" src="../../assets/img/team-4.jpg" class="rounded-circle">
</a>
</div>
<p class="text-secondary text-sm font-weight-bold mb-0">Participants</p>
</div>
<div class="col-6 text-end">
<h6 class="text-sm mb-0">16.01.22</h6>
<p class="text-secondary text-sm font-weight-bold mb-0">Due date</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 my-4">
<div class="card h-100">
<div class="card-body d-flex flex-column justify-content-center text-center">
<a href="javascript:;">
<i class="fa fa-plus text-secondary mb-3"></i>
<h5 class=" text-secondary"> New project </h5>
</a>
</div>
</div>
</div>
</div>
</div>
</section>