Card by igoramos77

Made by

@igoramos77

Theme:

Dark

#card

#212121

2.2K views

CSSAdd prefixes

1.container {
2  position: relative;
3  height: 300px;
4  background: #6c23c0;
5  padding: 2rem;
6  border-radius: 8px;
7  transition: all .25s ease-in-out;
8}
9
10.container:hover {
11  box-shadow: 0 4px 50px #00000020;
12}
13
14.container:hover .card {
15  transform: translateY(-5%);
16}
17
18.info {
19  margin-top: 1rem;
20}
21
22.info h2, p {
23  color: #fff;
24  text-align: center;
25}
26
27.card {
28  transition: all .25s ease-in-out;
29}
30
31.card input {
32  display: none;
33}
34
35.card main {
36  position: relative;
37}
38
39.card main a svg {
40  width: 120px;
41  height: 120px;
42  border-radius: 50%;
43  border: 4px solid rgb(108, 35, 192);
44}
45
46.card main a {
47  position: relative;
48  display: flex;
49  align-items: center;
50  justify-content: center;
51  padding: 8px;
52  background-image: linear-gradient(to right, rgb(23, 122, 250) 20%, rgb(3, 240, 209));
53  border-radius: 50%;
54  overflow: hidden;
55}
56
57.card main a:hover::after {
58  opacity: 1;
59}
60
61.card main a::after {
62  content: "Change";
63  position: absolute;
64  width: 100%;
65  height: 35%;
66  left: 0px;
67  bottom: 0px;
68  background-image: linear-gradient(transparent 0%, rgba(108, 35, 192, 0.584) 100%);
69  display: flex;
70  justify-content: center;
71  align-items: center;
72  color: rgb(255, 255, 255);
73  opacity: 0;
74  transition: all 0.2s ease-in-out 0s;
75  padding-bottom: 1rem;
76}
77
78.card span {
79  position: absolute;
80  bottom: 5px;
81  right: 5px;
82  background: rgb(119, 255, 170);
83  width: 35px;
84  height: 35px;
85  border-radius: 50%;
86  display: flex;
87  justify-content: center;
88  align-items: center;
89  border: 4px solid rgb(108, 35, 192);
90  color: rgb(108, 35, 192);
91}

.container {
  position: relative;
  height: 300px;
  background: #6c23c0;
  padding: 2rem;
  border-radius: 8px;
  transition: all .25s ease-in-out;
}

.container:hover {
  box-shadow: 0 4px 50px #00000020;
}

.container:hover .card {
  transform: translateY(-5%);
}

.info {
  margin-top: 1rem;
}

.info h2, p {
  color: #fff;
  text-align: center;
}

.card {
  transition: all .25s ease-in-out;
}

.card input {
  display: none;
}

.card main {
  position: relative;
}

.card main a svg {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid rgb(108, 35, 192);
}

.card main a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background-image: linear-gradient(to right, rgb(23, 122, 250) 20%, rgb(3, 240, 209));
  border-radius: 50%;
  overflow: hidden;
}

.card main a:hover::after {
  opacity: 1;
}

.card main a::after {
  content: "Change";
  position: absolute;
  width: 100%;
  height: 35%;
  left: 0px;
  bottom: 0px;
  background-image: linear-gradient(transparent 0%, rgba(108, 35, 192, 0.584) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgb(255, 255, 255);
  opacity: 0;
  transition: all 0.2s ease-in-out 0s;
  padding-bottom: 1rem;
}

.card span {
  position: absolute;
  bottom: 5px;
  right: 5px;
  background: rgb(119, 255, 170);
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 4px solid rgb(108, 35, 192);
  color: rgb(108, 35, 192);
}

HTML

1<div class="container">
2    <div class="card">
3        <input accept="image/png, image/jpeg" name="avatar" type="file">
4        <main>
5            <a href="">
6                <svg xml:space="preserve" style="enable-background:new 0 0 129.5 129.5;" viewBox="0 0 129.5 129.5" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Camada_1" version="1.1">
7                    <style type="text/css">
8                        .st0 {
9                            fill: #BAC5E1;
10                        }
11
12                        .st1 {
13                            fill: #FFFFFF;
14                        }
15                    </style>
16                    <g>
17
18                        <ellipse ry="64.8" rx="64.8" cy="64.8" cx="64.8" class="st0" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -26.8258 64.7633)"></ellipse>
19                        <ellipse ry="32.6" rx="25.2" cy="54.2" cx="64.8" class="st1"></ellipse>
20                        <path d="M64.8,89.1c-21.1,0-39.6,6.4-50.5,16.2c11.9,14.7,30.1,24.2,50.5,24.2c20.4,0,38.6-9.4,50.5-24.2
21		C104.4,95.6,85.8,89.1,64.8,89.1z" class="st1"></path>
22                        <path d="M67.6,105.9H62c-5.3,0-9.6-4.3-9.6-9.6V74.4c0-5.3,4.3-9.6,9.6-9.6h5.6c5.3,0,9.6,4.3,9.6,9.6v21.9
23		C77.2,101.6,72.9,105.9,67.6,105.9z" class="st1"></path>
24                        <path d="M43,55.7c1.5,4.2,0.9,8.3-1.3,9s-5.1-2.1-6.6-6.3c-1.5-4.2-0.9-8.3,1.3-9C38.6,48.6,41.6,51.4,43,55.7z" class="st1"></path>
25                        <ellipse ry="4.2" rx="8.1" cy="57" cx="90.4" class="st1" transform="matrix(0.328 -0.9447 0.9447 0.328 6.8843 123.7582)"></ellipse>
26                        <path d="M42.7,55.5c-3.3-6-6.6-12.3-6.5-19.1c0.2-6.8,5.3-14,12.1-13.7c1.2,0,2.4,0.3,3.5,0.1c2.3-0.3,4.1-2.3,6-3.7
27		c4.3-3.2,10.3-3.9,15.2-1.9c3.1,1.2,5.7,3.4,8.6,4.8c5.6,2.6,12.4,2.4,17.8-0.7c-1.1,2.1-3,3.8-5.2,4.6c2,0.6,4.3,0.6,6.3-0.2
28		c-1.2,2.2-3.2,3.9-5.5,4.8c1.7,0.1,3.4,0.2,5.2,0.4c-1.5,2.1-3.6,3.7-6,4.6c1.4,0,2.7,0.1,4.1,0.1c-1,3-3.6,5.4-6.7,6.1
29		c0.9,0,1.7,0,2.6,0c-2.9,4.1-5.7,8.2-8.6,12.4c-0.8,1.2-1.7,2.4-2.9,3.2c-1,0.6-2.2,0.9-3.3,1.2c-8.5,1.9-17.2,2.5-25.8,1.7
30		c-3-0.3-6-0.8-8.4-2.6c-2.3-1.8-3.6-5.4-2-7.8" class="st1"></path>
31                        <path d="M48.5,95.3c0.2-3.4,0.6-6.8,1.3-10.2c1.7,1.9,4.6,2.2,7.1,2.3c3.9,0.2,7.8,0.3,11.6,0.5
32		c0.5,2.6,0.8,5.8-1.1,7.6c-0.9,0.9-2.1,1.3-3.3,1.6c-2.6,0.7-5.3,1.1-8,1.1c-3.2,0-7.1-0.9-8.1-4c0.3-0.3,0.7-0.6,1-0.9" class="st1"></path>
33                        <path d="M81,95.3c-0.2-3.4-0.6-6.8-1.3-10.2c-1.7,1.9-4.6,2.2-7.1,2.3c-3.9,0.2-7.8,0.3-11.6,0.5
34		c-0.5,2.6-0.8,5.8,1.1,7.6c0.9,0.9,2.1,1.3,3.3,1.6c2.6,0.7,5.3,1.1,8,1.1c3.2,0,7.1-0.9,8.1-4c-0.3-0.3-0.7-0.6-1-0.9" class="st1"></path>
35                    </g>
36                </svg>
37            </a>
38        </main>
39        <span>
40            <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="12" width="12" xmlns="http://www.w3.org/2000/svg">
41                <path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path>
42            </svg>
43        </span>
44    </div>
45    <div class="info">
46        <h2>Igor Brown</h2>
47        <p>Developer</p>
48    </div>
49</div>

<div class="container">
    <div class="card">
        <input accept="image/png, image/jpeg" name="avatar" type="file">
        <main>
            <a href="">
                <svg xml:space="preserve" style="enable-background:new 0 0 129.5 129.5;" viewBox="0 0 129.5 129.5" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Camada_1" version="1.1">
                    <style type="text/css">
                        .st0 {
                            fill: #BAC5E1;
                        }

                        .st1 {
                            fill: #FFFFFF;
                        }
                    </style>
                    <g>

                        <ellipse ry="64.8" rx="64.8" cy="64.8" cx="64.8" class="st0" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -26.8258 64.7633)"></ellipse>
                        <ellipse ry="32.6" rx="25.2" cy="54.2" cx="64.8" class="st1"></ellipse>
                        <path d="M64.8,89.1c-21.1,0-39.6,6.4-50.5,16.2c11.9,14.7,30.1,24.2,50.5,24.2c20.4,0,38.6-9.4,50.5-24.2
		C104.4,95.6,85.8,89.1,64.8,89.1z" class="st1"></path>
                        <path d="M67.6,105.9H62c-5.3,0-9.6-4.3-9.6-9.6V74.4c0-5.3,4.3-9.6,9.6-9.6h5.6c5.3,0,9.6,4.3,9.6,9.6v21.9
		C77.2,101.6,72.9,105.9,67.6,105.9z" class="st1"></path>
                        <path d="M43,55.7c1.5,4.2,0.9,8.3-1.3,9s-5.1-2.1-6.6-6.3c-1.5-4.2-0.9-8.3,1.3-9C38.6,48.6,41.6,51.4,43,55.7z" class="st1"></path>
                        <ellipse ry="4.2" rx="8.1" cy="57" cx="90.4" class="st1" transform="matrix(0.328 -0.9447 0.9447 0.328 6.8843 123.7582)"></ellipse>
                        <path d="M42.7,55.5c-3.3-6-6.6-12.3-6.5-19.1c0.2-6.8,5.3-14,12.1-13.7c1.2,0,2.4,0.3,3.5,0.1c2.3-0.3,4.1-2.3,6-3.7
		c4.3-3.2,10.3-3.9,15.2-1.9c3.1,1.2,5.7,3.4,8.6,4.8c5.6,2.6,12.4,2.4,17.8-0.7c-1.1,2.1-3,3.8-5.2,4.6c2,0.6,4.3,0.6,6.3-0.2
		c-1.2,2.2-3.2,3.9-5.5,4.8c1.7,0.1,3.4,0.2,5.2,0.4c-1.5,2.1-3.6,3.7-6,4.6c1.4,0,2.7,0.1,4.1,0.1c-1,3-3.6,5.4-6.7,6.1
		c0.9,0,1.7,0,2.6,0c-2.9,4.1-5.7,8.2-8.6,12.4c-0.8,1.2-1.7,2.4-2.9,3.2c-1,0.6-2.2,0.9-3.3,1.2c-8.5,1.9-17.2,2.5-25.8,1.7
		c-3-0.3-6-0.8-8.4-2.6c-2.3-1.8-3.6-5.4-2-7.8" class="st1"></path>
                        <path d="M48.5,95.3c0.2-3.4,0.6-6.8,1.3-10.2c1.7,1.9,4.6,2.2,7.1,2.3c3.9,0.2,7.8,0.3,11.6,0.5
		c0.5,2.6,0.8,5.8-1.1,7.6c-0.9,0.9-2.1,1.3-3.3,1.6c-2.6,0.7-5.3,1.1-8,1.1c-3.2,0-7.1-0.9-8.1-4c0.3-0.3,0.7-0.6,1-0.9" class="st1"></path>
                        <path d="M81,95.3c-0.2-3.4-0.6-6.8-1.3-10.2c-1.7,1.9-4.6,2.2-7.1,2.3c-3.9,0.2-7.8,0.3-11.6,0.5
		c-0.5,2.6-0.8,5.8,1.1,7.6c0.9,0.9,2.1,1.3,3.3,1.6c2.6,0.7,5.3,1.1,8,1.1c3.2,0,7.1-0.9,8.1-4c-0.3-0.3-0.7-0.6-1-0.9" class="st1"></path>
                    </g>
                </svg>
            </a>
        </main>
        <span>
            <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="12" width="12" xmlns="http://www.w3.org/2000/svg">
                <path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path>
            </svg>
        </span>
    </div>
    <div class="info">
        <h2>Igor Brown</h2>
        <p>Developer</p>
    </div>
</div>