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">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/project23.jpg">
<p class="blockquote border border-primary rounded w-50 p-3 text-sm text-primary 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/project24.jpg">
<div class="px-4">
<p class="text-primary">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/project4.jpg">
<p class="blockquote border border-info rounded w-50 p-3 text-sm text-info 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/project21.jpg">
<div class="px-4">
<p class="text-gradient text-info">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/project12.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-white text-dark">Analytics</label>
</div>
<div class="mask bg-gradient-dark 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 icon-lg">
<div class="icon icon-shape mt-n2 text-center">
<i class="ni ni-single-02 text-primary opacity-10"></i>
</div>
</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 icon-lg">
<div class="icon icon-shape mt-n2 text-center">
<i class="ni ni-trophy text-primary opacity-10"></i>
</div>
</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 icon-lg">
<div class="icon icon-shape mt-n2 text-center">
<i class="ni ni-world text-primary opacity-10"></i>
</div>
</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 icon-lg">
<div class="icon icon-shape mt-n2 text-center">
<i class="ni ni-send text-info opacity-10"></i>
</div>
</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 icon-lg">
<div class="icon icon-shape mt-n2 text-center">
<i class="ni ni-spaceship text-info opacity-10"></i>
</div>
</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 icon-lg">
<div class="icon icon-shape mt-n2 text-center">
<i class="ni ni-vector text-info opacity-10"></i>
</div>
</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/project14.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-white text-dark">Trello</label>
</div>
<div class="mask bg-gradient-dark 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-primary">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('../../assets/img/project14.jpg')"></div>
<div class="card-body pt-7 text-center">
<div class="icon icon-xl mb-7 h-50">
<i class="ni ni-trophy text-white opacity-10"></i>
</div>
<h2 class="text-white mb-3">Search and Discover!</h2>
<p class="lead text-sm">Website visitors</p>
<button type="button" class="btn btn-outline-white bg-transparent 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('../../assets/img/project16.jpg')"></div>
<div class="card-body pt-7 text-center">
<div class="icon icon-xl mb-7 h-50">
<i class="ni ni-planet text-white opacity-10"></i>
</div>
<h2 class="text-white max-width-200 mb-3">Find music and play it!</h2>
<p class="lead text-sm">Music search</p>
<button type="button" class="btn btn-outline-white bg-transparent 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('../../assets/img/project17.jpg')"></div>
<div class="card-body pt-7 text-center">
<div class="icon icon-xl mb-7 h-50">
<i class="ni ni-palette text-white opacity-10"></i>
</div>
<h2 class="text-white max-width-300 mb-3">Check the experience!</h2>
<p class="lead text-sm">Support requests</p>
<button type="button" class="btn btn-outline-white bg-transparent 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 mt-lg-5 mt-4">
<div class="col-lg-4 col-md-6 mb-5">
<div class="card">
<div class="card-body border-radius-lg position-relative overflow-hidden pb-4 px-sm-5 ">
<img class="w-25 mb-3" src="../../assets/img/logos/small-logos/logo-slack.svg" alt="logo">
<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-bold text-info text-decoration-underline-hover">
Check more
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-5">
<div class="card mb-3">
<div class="card-body border-radius-lg position-relative overflow-hidden pb-4 px-sm-5 ">
<img class="w-25 mb-3" src="../../assets/img/logos/small-logos/logo-spotify.svg" alt="logo">
<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 doers.</p>
<a href="javascript:;" class="font-weight-bold text-xs text-uppercase font-weight-bold text-success text-decoration-underline-hover">
See details
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-5">
<div class="card mb-3">
<div class="card-body border-radius-lg position-relative overflow-hidden pb-4 px-sm-5 ">
<img class="w-25 mb-3" src="../../assets/img/logos/small-logos/logo-asana.svg" alt="logo">
<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 text-decoration-underline-hover">
View journey
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-5">
<div class="card mb-3">
<div class="card-body border-radius-lg position-relative overflow-hidden pb-4 px-sm-5 ">
<img class="w-25 mb-3" src="../../assets/img/logos/small-logos/logo-invision.svg" alt="logo">
<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 text-decoration-underline-hover">
Check out more
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-5">
<div class="card mb-3">
<div class="card-body border-radius-lg position-relative overflow-hidden pb-4 px-sm-5 ">
<img class="w-25 mb-3" src="../../assets/img/logos/small-logos/logo-jira.svg" alt="logo">
<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 text-decoration-underline-hover">
See all
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-5">
<div class="card mb-3">
<div class="card-body border-radius-lg position-relative overflow-hidden pb-4 px-sm-5 ">
<img class="w-25 mb-3" src="../../assets/img/logos/small-logos/logo-weave.svg" alt="logo">
<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 that we want to be.</p>
<a href="javascript:;" class="font-weight-bold text-xs text-uppercase font-weight-bolder text-danger text-decoration-underline-hover">
Find story
</a>
</div>
</div>
</div>
</div>
</div>
</section>Project 5
<section class="py-5">
<div class="container">
<div class="row">
<div class="col-md-5 ms-auto me-auto text-center">
<div class="p-3 info-hover-warning">
<div class="icon icon-shape bg-gradient-primary shadow icon-shape-circle text-primary">
<i class="ni ni-settings text-white opacity-10"></i>
</div>
</div>
<h3 class="mb-0 mt-4">Beware The 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">
<a href="javascript:;">
<div class="card card-background tilt" data-tilt="">
<div class="full-background" style="background-image: url('../../assets/img/bg26.jpg')"></div>
<div class="card-body pt-7 text-center">
<div class="icon icon-lg up mb-3">
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>chart-pie-35</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-1720.000000, -742.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(1716.000000, 291.000000)">
<g transform="translate(4.000000, 451.000000)">
<path d="M21.6666667,18.3333333 L39.915,18.3333333 C39.11,8.635 31.365,0.89 21.6666667,0.085 L21.6666667,18.3333333 Z" opacity="0.602864583"></path>
<path d="M20.69,21.6666667 L7.09833333,35.2583333 C10.585,38.21 15.085,40 20,40 C30.465,40 39.0633333,31.915 39.915,21.6666667 L20.69,21.6666667 Z"></path>
<path d="M18.3333333,19.31 L18.3333333,0.085 C8.085,0.936666667 0,9.535 0,20 C0,24.915 1.79,29.415 4.74166667,32.9016667 L18.3333333,19.31 Z"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<h1 class="text-white up mb-0">Search and Discover!</h1>
<p class="lead up">Website visitors</p>
<button type="button" class="btn btn-white btn-lg mt-3 up">Get Started</button>
</div>
</div>
</a>
</div>
<div class="col-md-5 me-auto my-auto ms-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="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>
<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-5">
<a href="javascript:;">
<div class="card card-background tilt" data-tilt="">
<div class="full-background" style="background-image: url('../../assets/img/bg24.jpg')"></div>
<div class="card-body pt-7 text-center">
<div class="icon icon-lg up mb-3">
<svg width="40px" height="40px" viewBox="0 0 46 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>customer-support</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-1717.000000, -291.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(1716.000000, 291.000000)">
<g transform="translate(1.000000, 0.000000)">
<path d="M45,0 L26,0 C25.447,0 25,0.447 25,1 L25,20 C25,20.379 25.214,20.725 25.553,20.895 C25.694,20.965 25.848,21 26,21 C26.212,21 26.424,20.933 26.6,20.8 L34.333,15 L45,15 C45.553,15 46,14.553 46,14 L46,1 C46,0.447 45.553,0 45,0 Z" opacity="0.59858631"></path>
<path d="M22.883,32.86 C20.761,32.012 17.324,31 13,31 C8.676,31 5.239,32.012 3.116,32.86 C1.224,33.619 0,35.438 0,37.494 L0,41 C0,41.553 0.447,42 1,42 L25,42 C25.553,42 26,41.553 26,41 L26,37.494 C26,35.438 24.776,33.619 22.883,32.86 Z"></path>
<path d="M13,28 C17.432,28 21,22.529 21,18 C21,13.589 17.411,10 13,10 C8.589,10 5,13.589 5,18 C5,22.529 8.568,28 13,28 Z"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<h1 class="text-white up mb-0">Talk and Meet!</h1>
<p class="lead up">Social activities</p>
<button type="button" class="btn btn-white btn-lg mt-3 up">Get Started</button>
</div>
</div>
</a>
</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">
<div class="d-flex">
<div class="avatar avatar-xl bg-dark border-radius-md p-2">
<img src="../../assets/img/logos/small-logos/logo-slack.svg">
</div>
<div class="ms-3 my-auto">
<h6>Slack Bot</h6>
<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/michael.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/james.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/emily.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/emilyz.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/olivia.jpg" class="rounded-circle">
</a>
</div>
</div>
<div class="ms-auto">
<div class="dropdown">
<button class="btn btn-link text-secondary ps-0 pe-2" id="navbarDropdownMenuLink" data-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">
<h6 class="text-sm mb-0">5</h6>
<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">
<div class="d-flex">
<div class="avatar avatar-xl bg-dark border-radius-md p-2">
<img src="../../assets/img/logos/small-logos/logo-spotify.svg">
</div>
<div class="ms-3 my-auto">
<h6>Premium support</h6>
<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/michael.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/james.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/emily.jpg" class="rounded-circle">
</a>
</div>
</div>
<div class="ms-auto">
<div class="dropdown">
<button class="btn btn-link text-secondary ps-0 pe-2" id="navbarDropdownMenuLink" data-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">
<h6 class="text-sm mb-0">3</h6>
<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">
<div class="d-flex">
<div class="avatar avatar-xl bg-dark border-radius-md p-2">
<img src="../../assets/img/logos/small-logos/logo-xd.svg">
</div>
<div class="ms-3 my-auto">
<h6>Design tools</h6>
<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/michael.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/james.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/emily.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/emilyz.jpg" class="">
</a>
</div>
</div>
<div class="ms-auto">
<div class="dropdown">
<button class="btn btn-link text-secondary ps-0 pe-2" id="navbarDropdownMenuLink" data-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">
<h6 class="text-sm mb-0">4</h6>
<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 mb-4">
<div class="card">
<div class="card-body p-3">
<div class="d-flex">
<div class="avatar avatar-xl bg-dark border-radius-md p-2">
<img src="../../assets/img/logos/small-logos/logo-asana.svg">
</div>
<div class="ms-3 my-auto">
<h6>Looking great</h6>
<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/michael.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/james.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/emily.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/emilyz.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/olivia.jpg" class="rounded-circle">
</a>
</div>
</div>
<div class="ms-auto">
<div class="dropdown">
<button class="btn btn-link text-secondary ps-0 pe-2" id="navbarDropdownMenuLink" data-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">
<h6 class="text-sm mb-0">6</h6>
<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 mb-4">
<div class="card">
<div class="card-body p-3">
<div class="d-flex">
<div class="avatar avatar-xl bg-dark border-radius-md p-2">
<img src="../../assets/img/logos/small-logos/logo-invision.svg">
</div>
<div class="ms-3 my-auto">
<h6>Developer First</h6>
<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/michael.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/james.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/emily.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/emilyz.jpg" class="">
</a>
</div>
</div>
<div class="ms-auto">
<div class="dropdown">
<button class="btn btn-link text-secondary ps-0 pe-2" id="navbarDropdownMenuLink" data-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">
<h6 class="text-sm mb-0">4</h6>
<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 mb-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>