Preview
-
1186
Invites
-
846
Accepted
-
290
Pending
-
50
Rejected
HTML
SCSS
*, ::after, ::before {
box-sizing: border-box;
}
/* css element */
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;700;900&display=swap');
.value-card {
padding: 0;
margin: 0;
list-style: none;
width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
justify-content: center;
li {
background-color: #ffffff;
border-radius: 10px;
padding: 20px;
margin: 5px;
width: 100%;
max-width: 190px;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
.circle {
width: 54px;
height: 54px;
line-height: 52px;
border-radius: 100px;
text-align: center;
svg {
width: 40px;
overflow: hidden;
vertical-align: middle;
}
&.orange {
background-color: #FEF4D0;
svg {
fill: #FF6B0D;
}
}
&.green {
background-color: #D1FFCF;
svg {
fill: #35C631;
}
}
&.purple {
background-color: #E8EAFF;
svg {
fill: #586CFF;
}
}
&.red {
background-color: #FFE5EB;
svg {
fill: #ED2757;
}
}
}
.info {
margin-left: 10px;
h2 {
color: #162B39;
font-size: 28px;
line-height: 28px;
font-weight: 700;
margin: 0;
}
p {
color: #8492A6;
font-size: 14px;
line-height: 14px;
font-weight: 400;
margin: 0;
}
}
}
}