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="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/asus.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="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/acer.jpg">
<div class="px-4">
<p class="text-gradient 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="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/cristal-laptop.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="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/toshiba.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/curved-images/curved1.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-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 icon-md">
<div class="icon icon-shape text-center">
<svg class="text-primary" width="25px" height="25px" 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 class="color-background" 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 class="color-foreground" 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 class="color-foreground" 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>
</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-4 mt-1">
<div class="icon icon-md">
<svg class="text-primary" width="25px" height="25px" viewBox="0 0 42 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>time-alarm</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-2319.000000, -440.000000)" fill="#923DFA" fill-rule="nonzero">
<g transform="translate(1716.000000, 291.000000)">
<g id="time-alarm" transform="translate(603.000000, 149.000000)">
<path class="color-background" d="M18.8086957,4.70034783 C15.3814926,0.343541521 9.0713063,-0.410050841 4.7145,3.01715217 C0.357693695,6.44435519 -0.395898667,12.7545415 3.03130435,17.1113478 C5.53738466,10.3360568 11.6337901,5.54042955 18.8086957,4.70034783 L18.8086957,4.70034783 Z" opacity="0.6"></path>
<path class="color-background" d="M38.9686957,17.1113478 C42.3958987,12.7545415 41.6423063,6.44435519 37.2855,3.01715217 C32.9286937,-0.410050841 26.6185074,0.343541521 23.1913043,4.70034783 C30.3662099,5.54042955 36.4626153,10.3360568 38.9686957,17.1113478 Z" opacity="0.6"></path>
<path class="color-foreground" d="M34.3815652,34.7668696 C40.2057958,27.7073059 39.5440671,17.3375603 32.869743,11.0755718 C26.1954189,4.81358341 15.8045811,4.81358341 9.13025701,11.0755718 C2.45593289,17.3375603 1.79420418,27.7073059 7.61843478,34.7668696 L3.9753913,40.0506522 C3.58549114,40.5871271 3.51710058,41.2928217 3.79673036,41.8941824 C4.07636014,42.4955431 4.66004722,42.8980248 5.32153275,42.9456105 C5.98301828,42.9931963 6.61830436,42.6784048 6.98113043,42.1232609 L10.2744783,37.3434783 C16.5555112,42.3298213 25.4444888,42.3298213 31.7255217,37.3434783 L35.0188696,42.1196087 C35.6014207,42.9211577 36.7169135,43.1118605 37.53266,42.5493622 C38.3484064,41.9868639 38.5667083,40.8764423 38.0246087,40.047 L34.3815652,34.7668696 Z M30.1304348,25.5652174 L21,25.5652174 C20.49574,25.5652174 20.0869565,25.1564339 20.0869565,24.6521739 L20.0869565,15.5217391 C20.0869565,15.0174791 20.49574,14.6086957 21,14.6086957 C21.50426,14.6086957 21.9130435,15.0174791 21.9130435,15.5217391 L21.9130435,23.7391304 L30.1304348,23.7391304 C30.6346948,23.7391304 31.0434783,24.1479139 31.0434783,24.6521739 C31.0434783,25.1564339 30.6346948,25.5652174 30.1304348,25.5652174 Z"></path>
</g>
</g>
</g>
</g>
</svg>
</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 me-4 mt-1">
<div class="icon icon-md">
<svg class="text-primary" width="25px" height="25px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>box-3d-50</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-2319.000000, -291.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(1716.000000, 291.000000)">
<g id="box-3d-50" transform="translate(603.000000, 0.000000)">
<path class="color-foreground" d="M22.7597136,19.3090182 L38.8987031,11.2395234 C39.3926816,10.9925342 39.592906,10.3918611 39.3459167,9.89788265 C39.249157,9.70436312 39.0922432,9.5474453 38.8987261,9.45068056 L20.2741875,0.1378125 L20.2741875,0.1378125 C19.905375,-0.04725 19.469625,-0.04725 19.0995,0.1378125 L3.1011696,8.13815822 C2.60720568,8.38517662 2.40701679,8.98586148 2.6540352,9.4798254 C2.75080129,9.67332903 2.90771305,9.83023153 3.10122239,9.9269862 L21.8652864,19.3090182 C22.1468139,19.4497819 22.4781861,19.4497819 22.7597136,19.3090182 Z"></path>
<path class="color-background" d="M23.625,22.429159 L23.625,39.8805372 C23.625,40.4328219 24.0727153,40.8805372 24.625,40.8805372 C24.7802551,40.8805372 24.9333778,40.8443874 25.0722402,40.7749511 L41.2741875,32.673375 L41.2741875,32.673375 C41.719125,32.4515625 42,31.9974375 42,31.5 L42,14.241659 C42,13.6893742 41.5522847,13.241659 41,13.241659 C40.8447549,13.241659 40.6916418,13.2778041 40.5527864,13.3472318 L24.1777864,21.5347318 C23.8390024,21.7041238 23.625,22.0503869 23.625,22.429159 Z" opacity="0.7"></path>
<path class="color-background" d="M20.4472136,21.5347318 L1.4472136,12.0347318 C0.953235098,11.7877425 0.352562058,11.9879669 0.105572809,12.4819454 C0.0361450918,12.6208008 6.47121774e-16,12.7739139 0,12.929159 L0,30.1875 L0,30.1875 C0,30.6849375 0.280875,31.1390625 0.7258125,31.3621875 L19.5528096,40.7750766 C20.0467945,41.0220531 20.6474623,40.8218132 20.8944388,40.3278283 C20.963859,40.1889789 21,40.0358742 21,39.8806379 L21,22.429159 C21,22.0503869 20.7859976,21.7041238 20.4472136,21.5347318 Z" opacity="0.7"></path>
</g>
</g>
</g>
</g>
</svg>
</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 me-4 mt-1">
<div class="icon icon-md">
<svg class="text-info" width="25px" height="25px" viewBox="0 0 43 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>credit-card</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-2169.000000, -745.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(1716.000000, 291.000000)">
<g id="credit-card" transform="translate(453.000000, 454.000000)">
<path class="color-background" d="M43,10.7482083 L43,3.58333333 C43,1.60354167 41.3964583,0 39.4166667,0 L3.58333333,0 C1.60354167,0 0,1.60354167 0,3.58333333 L0,10.7482083 L43,10.7482083 Z" opacity="0.593633743">
</path>
<path class="color-foreground" d="M0,16.125 L0,32.25 C0,34.2297917 1.60354167,35.8333333 3.58333333,35.8333333 L39.4166667,35.8333333 C41.3964583,35.8333333 43,34.2297917 43,32.25 L43,16.125 L0,16.125 Z M19.7083333,26.875 L7.16666667,26.875 L7.16666667,23.2916667 L19.7083333,23.2916667 L19.7083333,26.875 Z M35.8333333,26.875 L28.6666667,26.875 L28.6666667,23.2916667 L35.8333333,23.2916667 L35.8333333,26.875 Z"></path>
</g>
</g>
</g>
</g>
</svg>
</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 me-4 mt-1">
<div class="icon icon-md">
<svg class="text-info" width="25px" height="25px" viewBox="0 0 52 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>sound-wave</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-2015.000000, -596.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(1716.000000, 291.000000)">
<g id="sound-wave" transform="translate(299.000000, 305.000000)">
<path class="color-foreground" d="M15.2941176,30.5882353 C14.6024837,30.5882353 13.9754248,30.1667974 13.7154248,29.5210458 L8.11777778,15.5269281 L6.51189542,17.9366013 C6.19581699,18.4090196 5.66562092,18.6928105 5.09803922,18.6928105 L0,18.6928105 L0,15.2941176 L4.18888889,15.2941176 L7.08287582,10.9522876 C7.43294118,10.4288889 8.03281046,10.1467974 8.67346405,10.2045752 C9.30052288,10.2708497 9.84261438,10.6769935 10.0754248,11.263268 L15.0969935,23.8214379 L22.1696732,1.19294118 C22.3905882,0.482614379 23.0465359,0 23.7908497,0 C23.792549,0 23.792549,0 23.7942484,0 C24.5385621,0.00169934641 25.1962092,0.487712418 25.4154248,1.19973856 L31.2305882,20.1015686 L34.3267974,15.9738562 C34.6462745,15.5456209 35.1509804,15.2941176 35.6862745,15.2941176 L40.7843137,15.2941176 L40.7843137,18.6928105 L36.5359477,18.6928105 L31.9477124,24.8104575 C31.5653595,25.3202614 30.9298039,25.5717647 30.2959477,25.4647059 C29.6671895,25.3542484 29.1522876,24.9005229 28.9636601,24.2904575 L23.7772549,7.43803922 L16.9152941,29.3952941 C16.7011765,30.0818301 16.0792157,30.5593464 15.3603922,30.5865359 C15.3366013,30.5882353 15.3162092,30.5882353 15.2941176,30.5882353 Z"></path>
<path class="color-background" d="M26.5098039,34.6666667 C25.8181699,34.6666667 25.1911111,34.2452288 24.9311111,33.5994771 L19.3334641,19.6053595 L17.7275817,22.0150327 C17.4115033,22.487451 16.8813072,22.7712418 16.3137255,22.7712418 L11.2156863,22.7712418 L11.2156863,19.372549 L15.4045752,19.372549 L18.2985621,15.030719 C18.6486275,14.5073203 19.2484967,14.2252288 19.8891503,14.2830065 C20.5162092,14.349281 21.0583007,14.7554248 21.2911111,15.3416993 L26.3126797,27.8998693 L33.3853595,5.27137255 C33.6062745,4.56104575 34.2622222,4.07843137 35.0065359,4.07843137 C35.0082353,4.07843137 35.0082353,4.07843137 35.0099346,4.07843137 C35.7542484,4.08013072 36.4118954,4.56614379 36.6311111,5.27816993 L42.4462745,24.18 L45.5424837,20.0522876 C45.8619608,19.6240523 46.3666667,19.372549 46.9019608,19.372549 L52,19.372549 L52,22.7712418 L47.751634,22.7712418 L43.1633987,28.8888889 C42.7810458,29.3986928 42.1454902,29.6501961 41.511634,29.5431373 C40.8828758,29.4326797 40.3679739,28.9789542 40.1793464,28.3688889 L34.9929412,11.5164706 L28.1309804,33.4737255 C27.9168627,34.1602614 27.294902,34.6377778 26.5760784,34.6649673 C26.5522876,34.6666667 26.5318954,34.6666667 26.5098039,34.6666667 Z" id="Path-Copy" opacity="0.604957217"></path>
</g>
</g>
</g>
</g>
</svg>
</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 me-4 mt-1">
<div class="icon icon-md">
<svg class="text-info" width="25px" height="25px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>spaceship</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-1720.000000, -592.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(1716.000000, 291.000000)">
<g transform="translate(4.000000, 301.000000)">
<path class="color-foreground" d="M39.3,0.706666667 C38.9660984,0.370464027 38.5048767,0.192278529 38.0316667,0.216666667 C14.6516667,1.43666667 6.015,22.2633333 5.93166667,22.4733333 C5.68236407,23.0926189 5.82664679,23.8009159 6.29833333,24.2733333 L15.7266667,33.7016667 C16.2013871,34.1756798 16.9140329,34.3188658 17.535,34.065 C17.7433333,33.98 38.4583333,25.2466667 39.7816667,1.97666667 C39.8087196,1.50414529 39.6335979,1.04240574 39.3,0.706666667 Z M25.69,19.0233333 C24.7367525,19.9768687 23.3029475,20.2622391 22.0572426,19.7463614 C20.8115377,19.2304837 19.9992882,18.0149658 19.9992882,16.6666667 C19.9992882,15.3183676 20.8115377,14.1028496 22.0572426,13.5869719 C23.3029475,13.0710943 24.7367525,13.3564646 25.69,14.31 C26.9912731,15.6116662 26.9912731,17.7216672 25.69,19.0233333 L25.69,19.0233333 Z"></path>
<path class="color-foreground" d="M1.855,31.4066667 C3.05106558,30.2024182 4.79973884,29.7296005 6.43969145,30.1670277 C8.07964407,30.6044549 9.36054508,31.8853559 9.7979723,33.5253085 C10.2353995,35.1652612 9.76258177,36.9139344 8.55833333,38.11 C6.70666667,39.9616667 0,40 0,40 C0,40 0,33.2566667 1.855,31.4066667 Z"></path>
<path class="color-background" d="M17.2616667,3.90166667 C12.4943643,3.07192755 7.62174065,4.61673894 4.20333333,8.04166667 C3.31200265,8.94126033 2.53706177,9.94913142 1.89666667,11.0416667 C1.5109569,11.6966059 1.61721591,12.5295394 2.155,13.0666667 L5.47,16.3833333 C8.55036617,11.4946947 12.5559074,7.25476565 17.2616667,3.90166667 L17.2616667,3.90166667 Z" opacity="0.598539807"></path>
<path class="color-background" d="M36.0983333,22.7383333 C36.9280725,27.5056357 35.3832611,32.3782594 31.9583333,35.7966667 C31.0587397,36.6879974 30.0508686,37.4629382 28.9583333,38.1033333 C28.3033941,38.4890431 27.4704606,38.3827841 26.9333333,37.845 L23.6166667,34.53 C28.5053053,31.4496338 32.7452344,27.4440926 36.0983333,22.7383333 L36.0983333,22.7383333 Z" id="color-3" opacity="0.598539807"></path>
</g>
</g>
</g>
</g>
</svg>
</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/curved-images/curved2.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">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-primary tilt" data-tilt>
<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">
<div class="icon icon-lg up mb-5">
<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-outline-white btn-lg mt-3 up">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-primary tilt mt-md-0 mt-5" data-tilt>
<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">
<div class="icon icon-lg up mb-5">
<svg width="40px" height="40px" viewBox="0 0 44 43" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>megaphone</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-2168.000000, -591.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(1716.000000, 291.000000)">
<g id="megaphone" transform="translate(452.000000, 300.000000)">
<path
d="M35.7958333,0.273166667 C35.2558424,-0.0603712374 34.5817509,-0.0908856664 34.0138333,0.1925 L19.734,7.33333333 L9.16666667,7.33333333 C4.10405646,7.33333333 0,11.4373898 0,16.5 C0,21.5626102 4.10405646,25.6666667 9.16666667,25.6666667 L19.734,25.6666667 L34.0138333,32.8166667 C34.5837412,33.1014624 35.2606401,33.0699651 35.8016385,32.7334768 C36.3426368,32.3969885 36.6701539,31.8037627 36.6666942,31.1666667 L36.6666942,1.83333333 C36.6666942,1.19744715 36.3370375,0.607006911 35.7958333,0.273166667 Z"
></path>
<path d="M38.5,11 L38.5,22 C41.5375661,22 44,19.5375661 44,16.5 C44,13.4624339 41.5375661,11 38.5,11 Z" opacity="0.601050967"></path>
<path
d="M18.5936667,29.3333333 L10.6571667,29.3333333 L14.9361667,39.864 C15.7423448,41.6604248 17.8234451,42.4993948 19.6501416,41.764381 C21.4768381,41.0293672 22.3968823,38.982817 21.7341667,37.1286667 L18.5936667,29.3333333 Z"
opacity="0.601050967"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<h1 class="text-white up mb-0">Find music and play it!</h1>
<p class="lead up">Music search</p>
<button type="button" class="btn btn-outline-white btn-lg mt-3 up">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-primary tilt mt-lg-0 mt-5" data-tilt>
<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">
<div class="icon icon-lg up mb-5">
<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">Check bugs and fix!</h1>
<p class="lead up">Support requests</p>
<button type="button" class="btn btn-outline-white btn-lg mt-3 up">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-5">
<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-5">
<img class="w-25 mb-3 ms-n2" src="../../assets/img/logos/small-logos/logo-slack.svg">
<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-info 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">
<div class="card-body border-radius-lg position-relative overflow-hidden pb-4 px-5">
<img class="w-25 mb-3 ms-n2" src="../../assets/img/logos/small-logos/logo-spotify.svg">
<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-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">
<div class="card-body border-radius-lg position-relative overflow-hidden pb-4 px-5">
<img class="w-25 mb-3 ms-n2" src="../../assets/img/logos/small-logos/logo-asana.svg">
<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-danger 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">
<div class="card-body border-radius-lg position-relative overflow-hidden pb-4 px-5">
<img class="w-25 mb-3 ms-n2" src="../../assets/img/logos/small-logos/logo-invision.svg">
<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 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">
<div class="card-body border-radius-lg position-relative overflow-hidden pb-4 px-5">
<img class="w-25 mb-3 ms-n2" src="../../assets/img/logos/small-logos/logo-jira.svg">
<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">
<div class="card-body border-radius-lg position-relative overflow-hidden pb-4 px-5">
<img class="w-25 mb-3 ms-n2" src="../../assets/img/logos/small-logos/logo-weave.svg">
<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 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 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-md-5 ms-auto me-auto text-center">
<div class="p-3 info-hover-warning">
<div class="icon icon-shape bg-primary shadow icon-shape-circle text-primary">
<i class="fa fa-cogs"></i>
</div>
</div>
<h3 class="text-gradient text-primary mb-0 mt-4">Beware The Components</h3>
<h3>How To Handle Them</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('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">
<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('https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/coffee-shop.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-gradient-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/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>
</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-gradient-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="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>
</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-gradient-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="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>
</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-gradient-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/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>
</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-gradient-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="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>
</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>