Post by JohnnyCSilva

Made by

@JohnnyCSilva

Meeting your Colleagues

6 Video - 40 min

Business Trip

Theme:

Light

#card

#e8e8e8

1.6K views

CSSAdd prefixes

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}

.card {
  width: 252px;
  height: 265px;
  background: white;
  border-radius: 30px;
  box-shadow: 15px 15px 30px #bebebe,
             -15px -15px 30px #ffffff;
  transition: 0.2s ease-in-out;
}

.img {
  width: 100%;
  height: 50%;
  background: linear-gradient(#e66465, #9198e5);
  display: flex;
  align-items: top;
  justify-content: right;
}

.save {
  transition: 0.2s ease-in-out;
  border-radius: 10px;
  margin: 20px;
  width: 30px;
  height: 30px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text {
  margin: 20px;
  display: flex;
  flex-direction: column;
  align-items: space-around;
}

.save .svg {
  transition: 0.2s ease-in-out;
  width: 15px;
  height: 15px;
}

.icon-box {
  margin-top: 15px;
  width: 70%;
  padding: 10px;
  background-color: #e3fff9;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: left;
}

.icon-box svg {
  width: 17px;
}

.text .h3 {
  font-family: 'Lucida Sans' sans-serif;
  font-size: 15px;
  font-weight: 600;
}

.text .p {
  font-family: 'Lucida Sans' sans-serif;
  color: #999999;
  font-size: 13px;
}

.icon-box .span {
  margin-left: 10px;
  font-family: 'Lucida Sans' sans-serif;
  font-size: 13px;
  font-weight: light;
}

.card:hover {
  cursor: pointer;
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1);
}

.save:hover {
  transform: scale(1.1) rotate(10deg);
}

.save:hover .svg {
  fill: #ced8de;
}

HTML

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>

<div class="card">
  <div class="img">
    <div class="save">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 683 683" height="683" width="683" class="svg">
<g clip-path="url(#clip0_993_25)">
  <mask height="683" width="683" y="0" x="0" maskUnits="userSpaceOnUse" style="mask-type:luminance" id="mask0_993_25">
  <path fill="white" d="M0 -0.00012207H682.667V682.667H0V-0.00012207Z"></path>
  </mask>
  <g mask="url(#mask0_993_25)">
  <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>
  </g>
  </g>
  <defs>
  <clipPath id="clip0_993_25">
  <rect fill="white" height="682.667" width="682.667"></rect>
  </clipPath>
  </defs>
      </svg>
    </div>
  </div>

  <div class="text">
    <p class="h3"> Meeting your Colleagues </p>
    <p class="p"> 6 Video - 40 min </p>

    <div class="icon-box">
      <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">
<g>
	<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
		c3.739,3.739,3.739,9.801,0,13.54L165,68.715z" style="fill:#3D6687;"></path>
	<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
		c3.739,3.739,3.739,9.801,0,13.54L234.998,101.725z" style="fill:#3D6687;"></path>
	<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
		c-3.739-3.739-9.801-3.739-13.54,0L445.507,349.222z" style="fill:#3D6687;"></path>
	<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
		c-3.739-3.739-9.801-3.739-13.54,0L408.054,279.224z" style="fill:#3D6687;"></path>
</g>
<g>
	<path d="M443.378,458.836L276.261,234.948L52.372,67.83c-7.845-5.856-8.673-17.309-1.75-24.232
		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
		l-22.953,22.953C460.688,467.51,449.234,466.683,443.378,458.836z" style="fill:#CCDFED;"></path>
	<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
		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
		C189.203,510.722,184.303,510.378,181.785,507.029z" style="fill:#CCDFED;"></path>
</g>
<g>
	<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
		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
		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>
	<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
		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
		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
		c1.01,2.917,2.855,5.589,5.545,7.597l145.464,108.579l78.425,58.539l58.539,78.425l108.579,145.464
		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
		C493.61,434.588,496.005,431.079,497.749,427.311z" style="fill:#BAD5E5;"></path>
</g>
<path d="M104.914,432.283L104.914,432.283c-17.494,8.348-35.767-9.925-27.419-27.419l0,0
	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
	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
	C180.009,390.03,143.799,413.73,104.914,432.283z" style="fill:#61AFF6;"></path>
<path d="M494.193,55.316l1.089-11.885c1.519-16.568-12.366-30.453-28.935-28.934l-11.885,1.089
	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
	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
	C469.469,139.311,490.194,98.934,494.193,55.316z" style="fill:#399AEA;"></path>
<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
	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
	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>
<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
	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
	C442.01,116.493,444.197,117.371,446.539,117.17z" style="fill:#CCDFED;"></path>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
      </svg>
      <p class="span">Business Trip
    </p></div>
  </div>
</div>