Meeting your Colleagues
6 Video - 40 min
Business Trip
1.card { 2 width: 252px; 3 height: 265px; 4 background: white; 5 border-radius: 30px; 6 box-shadow: 15px 15px 30px #bebebe, 7 -15px -15px 30px #ffffff; 8 transition: 0.2s ease-in-out; 9} 10 11.img { 12 width: 100%; 13 height: 50%; 14 background: linear-gradient(#e66465, #9198e5); 15 display: flex; 16 align-items: top; 17 justify-content: right; 18} 19 20.save { 21 transition: 0.2s ease-in-out; 22 border-radius: 10px; 23 margin: 20px; 24 width: 30px; 25 height: 30px; 26 background-color: #ffffff; 27 display: flex; 28 align-items: center; 29 justify-content: center; 30} 31 32.text { 33 margin: 20px; 34 display: flex; 35 flex-direction: column; 36 align-items: space-around; 37} 38 39.save .svg { 40 transition: 0.2s ease-in-out; 41 width: 15px; 42 height: 15px; 43} 44 45.icon-box { 46 margin-top: 15px; 47 width: 70%; 48 padding: 10px; 49 background-color: #e3fff9; 50 border-radius: 10px; 51 display: flex; 52 align-items: center; 53 justify-content: left; 54} 55 56.icon-box svg { 57 width: 17px; 58} 59 60.text .h3 { 61 font-family: 'Lucida Sans' sans-serif; 62 font-size: 15px; 63 font-weight: 600; 64} 65 66.text .p { 67 font-family: 'Lucida Sans' sans-serif; 68 color: #999999; 69 font-size: 13px; 70} 71 72.icon-box .span { 73 margin-left: 10px; 74 font-family: 'Lucida Sans' sans-serif; 75 font-size: 13px; 76 font-weight: light; 77} 78 79.card:hover { 80 cursor: pointer; 81 box-shadow: 0px 10px 20px rgba(0,0,0,0.1); 82} 83 84.save:hover { 85 transform: scale(1.1) rotate(10deg); 86} 87 88.save:hover .svg { 89 fill: #ced8de; 90}
1<div class="card"> 2 <div class="img"> 3 <div class="save"> 4 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 683 683" height="683" width="683" class="svg"> 5<g clip-path="url(#clip0_993_25)"> 6 <mask height="683" width="683" y="0" x="0" maskUnits="userSpaceOnUse" style="mask-type:luminance" id="mask0_993_25"> 7 <path fill="white" d="M0 -0.00012207H682.667V682.667H0V-0.00012207Z"></path> 8 </mask> 9 <g mask="url(#mask0_993_25)"> 10 <path stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-width="40" stroke="#CED8DE" d="M148.535 19.9999C137.179 19.9999 126.256 24.5092 118.223 32.5532C110.188 40.5866 105.689 51.4799 105.689 62.8439V633.382C105.689 649.556 118.757 662.667 134.931 662.667H135.039C143.715 662.667 151.961 659.218 158.067 653.09C186.451 624.728 270.212 540.966 304.809 506.434C314.449 496.741 327.623 491.289 341.335 491.289C355.045 491.289 368.22 496.741 377.859 506.434C412.563 541.074 496.752 625.242 524.816 653.348C530.813 659.314 538.845 662.667 547.308 662.667C563.697 662.667 576.979 649.395 576.979 633.019V62.8439C576.979 51.4799 572.48 40.5866 564.447 32.5532C556.412 24.5092 545.489 19.9999 534.133 19.9999H148.535Z"></path> 11 </g> 12 </g> 13 <defs> 14 <clipPath id="clip0_993_25"> 15 <rect fill="white" height="682.667" width="682.667"></rect> 16 </clipPath> 17 </defs> 18 </svg> 19 </div> 20 </div> 21 22 <div class="text"> 23 <p class="h3"> Meeting your Colleagues </p> 24 <p class="p"> 6 Video - 40 min </p> 25 26 <div class="icon-box"> 27 <svg xml:space="preserve" style="enable-background:new 0 0 512.001 512.001;" viewBox="0 0 512.001 512.001" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Capa_1" class="svg" version="1.1"> 28<g> 29 <path d="M165,68.715l-26.327-26.327l37.363-37.363c3.739-3.739,9.801-3.739,13.54,0l12.786,12.786 30 c3.739,3.739,3.739,9.801,0,13.54L165,68.715z" style="fill:#3D6687;"></path> 31 <path d="M234.998,101.725l-26.327-26.327l37.363-37.363c3.739-3.739,9.801-3.739,13.54,0l12.786,12.786 32 c3.739,3.739,3.739,9.801,0,13.54L234.998,101.725z" style="fill:#3D6687;"></path> 33 <path d="M445.507,349.222l26.327,26.327l37.363-37.363c3.739-3.739,3.739-9.801,0-13.54l-12.787-12.787 34 c-3.739-3.739-9.801-3.739-13.54,0L445.507,349.222z" style="fill:#3D6687;"></path> 35 <path d="M408.054,279.224l26.327,26.327l37.363-37.363c3.739-3.739,3.739-9.801,0-13.54l-12.786-12.786 36 c-3.739-3.739-9.801-3.739-13.54,0L408.054,279.224z" style="fill:#3D6687;"></path> 37</g> 38<g> 39 <path d="M443.378,458.836L276.261,234.948L52.372,67.83c-7.845-5.856-8.673-17.309-1.75-24.232 40 l22.953-22.954c10.277-10.277,25.733-13.35,39.158-7.785l272.626,112.989l112.989,272.626c5.564,13.427,2.491,28.882-7.785,39.158 41 l-22.953,22.953C460.688,467.51,449.234,466.683,443.378,458.836z" style="fill:#CCDFED;"></path> 42 <path d="M181.785,507.029L104.93,404.848L2.75,327.993c-3.349-2.518-3.694-7.418-0.73-10.381l11.782-11.782 43 c7.939-7.939,19.965-10.129,30.193-5.499l113.895,51.558l51.558,113.895c4.63,10.228,2.439,22.254-5.499,30.193l-11.783,11.782 44 C189.203,510.722,184.303,510.378,181.785,507.029z" style="fill:#CCDFED;"></path> 45</g> 46<g> 47 <path d="M209.448,465.784l-17.656-39.003l0,0L180.8,437.772c-9.575,9.575-25.407,8.461-33.546-2.361 48 l-31.288-41.599l-0.098,0.097L7.359,312.273l0,0l-5.34,5.34c-2.963,2.963-2.618,7.862,0.73,10.381l102.181,76.855l76.855,102.181 49 c2.518,3.349,7.418,3.694,10.381,0.73l11.783-11.783C211.887,488.038,214.078,476.012,209.448,465.784z" style="fill:#BAD5E5;"></path> 50 <path d="M497.749,427.311c0.462-0.999,0.894-2.01,1.261-3.045c0.754-2.12,1.283-4.309,1.628-6.528 51 c0.991-6.38,0.291-13.038-2.289-19.265l-16.424-39.63l-1.043-2.517c-0.973,7.762-4.471,15.169-10.243,20.941l-22.953,22.953 52 c-6.923,6.923-18.375,6.096-24.232-1.75L290.651,220.557L52.357,41.862l-1.735,1.735c-4.549,4.549-5.73,11.047-3.795,16.634 53 c1.01,2.917,2.855,5.589,5.545,7.597l145.464,108.579l78.425,58.539l58.539,78.425l108.579,145.464 54 c2.008,2.691,4.681,4.535,7.597,5.545c5.587,1.935,12.086,0.754,16.635-3.795l22.953-22.953 55 C493.61,434.588,496.005,431.079,497.749,427.311z" style="fill:#BAD5E5;"></path> 56</g> 57<path d="M104.914,432.283L104.914,432.283c-17.494,8.348-35.767-9.925-27.419-27.419l0,0 58 c18.554-38.883,42.253-75.095,70.46-107.661L341.791,73.417c28.676-33.108,69.054-53.832,112.672-57.831l11.885-1.089 59 c16.568-1.519,30.453,12.365,28.935,28.934l-1.089,11.885c-3.999,43.617-24.724,83.995-57.831,112.672L212.576,361.824 60 C180.009,390.03,143.799,413.73,104.914,432.283z" style="fill:#61AFF6;"></path> 61<path d="M494.193,55.316l1.089-11.885c1.519-16.568-12.366-30.453-28.935-28.934l-11.885,1.089 62 c-0.155,0.014-0.309,0.034-0.464,0.048c-4.103,43.439-24.793,83.633-57.783,112.208L81.614,428.357 63 c5.715,5.643,14.603,8.077,23.3,3.926l0,0c38.883-18.553,75.095-42.253,107.661-70.459l223.786-193.836 64 C469.469,139.311,490.194,98.934,494.193,55.316z" style="fill:#399AEA;"></path> 65<path d="M400.892,56.26c-4.215-0.36-7.923,2.765-8.285,6.978c-0.36,4.214,2.765,7.924,6.978,8.285 66 c22.969,1.966,36.702,15.7,38.667,38.667c0.161,1.871,0.981,3.528,2.213,4.76c1.542,1.542,3.729,2.418,6.071,2.218 67 c4.215-0.361,7.339-4.07,6.978-8.285C450.92,78.531,431.246,58.856,400.892,56.26z" style="fill:#FFFFFF;"></path> 68<path d="M446.539,117.17c4.215-0.361,7.339-4.07,6.978-8.285c-1.271-14.849-6.637-27.132-15.331-36.121 69 c-2.36,4.942-4.957,9.768-7.785,14.46c4.392,6.071,7.067,13.778,7.853,22.967c0.161,1.871,0.981,3.528,2.213,4.76 70 C442.01,116.493,444.197,117.371,446.539,117.17z" style="fill:#CCDFED;"></path> 71<g> 72</g> 73<g> 74</g> 75<g> 76</g> 77<g> 78</g> 79<g> 80</g> 81<g> 82</g> 83<g> 84</g> 85<g> 86</g> 87<g> 88</g> 89<g> 90</g> 91<g> 92</g> 93<g> 94</g> 95<g> 96</g> 97<g> 98</g> 99<g> 100</g> 101 </svg> 102 <p class="span">Business Trip 103 </p></div> 104 </div> 105</div>