Card by JohnnyCSilva

Made by

@JohnnyCSilva

Theme:

Light

#card

#e8e8e8

2.1K 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  border-top-left-radius: 30px;
15  border-top-right-radius: 30px;
16  background: linear-gradient(#e66465, #9198e5);
17  display: flex;
18  align-items: top;
19  justify-content: right;
20}
21
22.save {
23  transition: 0.2s ease-in-out;
24  border-radius: 10px;
25  margin: 20px;
26  width: 30px;
27  height: 30px;
28  background-color: #ffffff;
29  display: flex;
30  align-items: center;
31  justify-content: center;
32}
33
34.text {
35  margin: 20px;
36  display: flex;
37  flex-direction: column;
38  align-items: space-around;
39}
40
41.save .svg {
42  transition: 0.2s ease-in-out;
43  width: 15px;
44  height: 15px;
45}
46
47.icon-box {
48  margin-top: 15px;
49  width: 70%;
50  padding: 10px;
51  background-color: #e3fff9;
52  border-radius: 10px;
53  display: flex;
54  align-items: center;
55  justify-content: left;
56}
57
58.icon-box svg {
59  width: 17px;
60}
61
62.text .h3 {
63  font-family: 'Lucida Sans' sans-serif;
64  font-size: 15px;
65  font-weight: 600;
66  color: black;
67}
68
69.text .p {
70  font-family: 'Lucida Sans' sans-serif;
71  color: #999999;
72  font-size: 13px;
73}
74
75.icon-box .span {
76  margin-left: 10px;
77  font-family: 'Lucida Sans' sans-serif;
78  font-size: 13px;
79  font-weight: 500;
80  color: #9198e5;
81}
82
83.card:hover {
84  cursor: pointer;
85  box-shadow: 0px 10px 20px rgba(0,0,0,0.1);
86}
87
88.save:hover {
89  transform: scale(1.1) rotate(10deg);
90}
91
92.save:hover .svg {
93  fill: #ced8de;
94}

.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%;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  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;
  color: black;
}

.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: 500;
  color: #9198e5;
}

.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 class="svg" width="683" height="683" viewBox="0 0 683 683" fill="none" xmlns="http://www.w3.org/2000/svg">
5<g clip-path="url(#clip0_993_25)">
6  <mask id="mask0_993_25" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="683" height="683">
7  <path d="M0 -0.00012207H682.667V682.667H0V-0.00012207Z" fill="white"></path>
8  </mask>
9  <g mask="url(#mask0_993_25)">
10  <path 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" stroke="#CED8DE" stroke-width="40" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
11  </g>
12  </g>
13  <defs>
14  <clipPath id="clip0_993_25">
15  <rect width="682.667" height="682.667" fill="white"></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 version="1.1" class="svg" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
28<g>
29	<path style="fill:#3D6687;" 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"></path>
31	<path style="fill:#3D6687;" 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"></path>
33	<path style="fill:#3D6687;" 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"></path>
35	<path style="fill:#3D6687;" 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"></path>
37</g>
38<g>
39	<path style="fill:#CCDFED;" 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"></path>
42	<path style="fill:#CCDFED;" 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"></path>
45</g>
46<g>
47	<path style="fill:#BAD5E5;" 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"></path>
50	<path style="fill:#BAD5E5;" 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"></path>
56</g>
57<path style="fill:#61AFF6;" 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"></path>
61<path style="fill:#399AEA;" 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"></path>
65<path style="fill:#FFFFFF;" 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"></path>
68<path style="fill:#CCDFED;" 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"></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 class="svg" width="683" height="683" viewBox="0 0 683 683" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_993_25)">
  <mask id="mask0_993_25" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="683" height="683">
  <path d="M0 -0.00012207H682.667V682.667H0V-0.00012207Z" fill="white"></path>
  </mask>
  <g mask="url(#mask0_993_25)">
  <path 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" stroke="#CED8DE" stroke-width="40" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
  </g>
  </g>
  <defs>
  <clipPath id="clip0_993_25">
  <rect width="682.667" height="682.667" fill="white"></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 version="1.1" class="svg" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
<g>
	<path style="fill:#3D6687;" 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"></path>
	<path style="fill:#3D6687;" 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"></path>
	<path style="fill:#3D6687;" 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"></path>
	<path style="fill:#3D6687;" 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"></path>
</g>
<g>
	<path style="fill:#CCDFED;" 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"></path>
	<path style="fill:#CCDFED;" 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"></path>
</g>
<g>
	<path style="fill:#BAD5E5;" 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"></path>
	<path style="fill:#BAD5E5;" 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"></path>
</g>
<path style="fill:#61AFF6;" 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"></path>
<path style="fill:#399AEA;" 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"></path>
<path style="fill:#FFFFFF;" 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"></path>
<path style="fill:#CCDFED;" 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"></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>