Смена gen
This commit is contained in:
114
DonationGoals/k1r4ka/generation 2/style.css
Normal file
114
DonationGoals/k1r4ka/generation 2/style.css
Normal file
@ -0,0 +1,114 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital@0;1&display=swap');
|
||||
|
||||
#widget {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#donationgoal {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 40px;
|
||||
justify-content: center;
|
||||
font-family: 'Montserrat';
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.bar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 75px;
|
||||
background-position: bottom 0% right 5%;
|
||||
background-size: 20%, 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='171' height='80' fill='none'%3E%3Cpath fill='url(%23a)' d='M131.467 24.596C154.218 33.954 171 87.506 171 88.971L1.72 91c-6.645-8.794 8.109-30.102 8.109-33.71 0-3.608 1.239-34.95 6.87-38.782 5.632-3.834 25.004 7.44 28.608 6.087 17.795-13.19 49.782-7.779 52.597-10.372 2.816-2.593 19.147-15.67 24.778-14.092 4.506 1.263 7.734 16.836 8.785 24.464Z' opacity='.46'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='85.5' x2='85.5' y1='0' y2='107.372' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23FFDFD7'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E"), linear-gradient(45deg, #EF9543 -100%, #F2E4D9 100%);
|
||||
border-radius: 25px;
|
||||
padding: 25px 50px;
|
||||
}
|
||||
|
||||
.bar::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 0;
|
||||
left: 25px;
|
||||
transform: translateY(-50%);
|
||||
width: 150px;
|
||||
aspect-ratio: 74 / 92;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='92' fill='none'%3E%3Cpath stroke='%236C840A' stroke-width='4' d='M50.25 87.923c-9.147-10.149-27.82-38.02-29.34-68.32'/%3E%3Cpath fill='url(%23a)' d='M30.386 16.854c-4.786 3.099-8.509 3.13-9.772 2.758.994-2.186 3.693-6.904 6.543-8.292 2.85-1.387 8.734.907 11.32 2.228-.703-.189-3.305.208-8.091 3.306Z'/%3E%3Cpath fill='url(%23b)' d='M11.938 22.177c5.691.172 8.889-1.705 9.776-2.665-1.978-1.339-6.722-3.946-9.875-3.661-3.153.284-6.996 5.231-8.523 7.669.502-.52 2.931-1.514 8.622-1.343Z'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='26.642' x2='30.494' y1='11.604' y2='18.206' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='12.425' x2='12.544' y1='15.827' y2='23.375' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.bar::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 0;
|
||||
right: 35px;
|
||||
height: 50px;
|
||||
aspect-ratio: 178 / 25;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='178' height='25' fill='none'%3E%3Cpath stroke='%23B84939' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M148.497.01c.888 4.204 3.931 11.819 9 8.643 5.069-3.175-3.888-7.085-9-8.643Zm0 0c-.979 4.145-4.15 11.678-8.999 8.643-6.061-3.792 8.173-8.905 8.999-8.643Zm0 0L144.64 24M148.497.01 152.446 24'/%3E%3Cpath stroke='%23F09C50' stroke-linecap='round' stroke-linejoin='round' d='M170.998.006c.508 2.452 2.246 6.894 5.143 5.042 2.896-1.852-2.222-4.133-5.143-5.042Zm0 0c-.559 2.418-2.371 6.812-5.142 5.042-3.463-2.212 4.67-5.195 5.142-5.042Zm0 0L168.795 14M170.998.006 173.255 14'/%3E%3Cpath fill='url(%23a)' d='M10.664-4.569s-3.8.796-5.488 2.11C3.17-.896 0 4.449 0 4.449s3.29.66 6.117-.755c2.826-1.414 4.547-8.262 4.547-8.262Z'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='.83' x2='9.833' y1='-.775' y2='.656' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
#name {
|
||||
color: white;
|
||||
margin-bottom: 15px;
|
||||
font-size: 42px;
|
||||
}
|
||||
|
||||
#name::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 20px;
|
||||
aspect-ratio: 9 / 11;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='11' fill='none'%3E%3Cpath fill='%23302321' d='M5.843 7.388c.46.21.343.768.48 1.255.137.487.514.825.223 1.24-.375.534-1.025-.092-1.62-.354-.624-.274-1.62-.299-1.448-.96.13-.5.624-.449 1.086-.68.462-.23.81-.715 1.28-.501ZM7.566 8.493c-.167.257-.435.38-.6.273-.164-.107-.162-.402.005-.66.166-.257.435-.379.599-.272.164.107.163.402-.004.66ZM3.833 6.894c-.071.298.026.577.216.622.19.045.403-.16.474-.458.072-.298-.025-.576-.216-.621-.19-.046-.403.159-.474.457ZM7.013 7.197c-.167.257-.435.38-.6.272-.164-.106-.162-.401.004-.659.167-.257.435-.379.6-.272.164.106.162.401-.004.659ZM5.153 6.4c-.071.298.026.577.216.622.191.046.403-.16.475-.457.071-.298-.026-.577-.216-.622-.191-.046-.403.16-.475.457ZM2.843 2.388c.46.21.343.768.48 1.255.137.487.514.825.223 1.24-.375.534-1.025-.092-1.62-.354-.624-.274-1.62-.299-1.448-.96.13-.5.624-.449 1.086-.68.462-.23.81-.715 1.28-.501ZM4.566 3.493c-.167.257-.435.38-.6.273-.164-.107-.162-.402.005-.66.166-.257.435-.379.599-.272.164.107.163.402-.004.66ZM.833 1.894c-.071.298.026.577.216.622.19.045.403-.16.474-.458.072-.298-.025-.576-.216-.621-.19-.046-.403.159-.474.457ZM4.013 2.197c-.167.257-.435.38-.6.272-.164-.106-.162-.401.004-.659.167-.257.435-.379.6-.272.164.106.162.401-.004.659ZM2.153 1.4c-.071.298.026.577.216.622.191.046.403-.16.475-.457.071-.298-.026-.577-.216-.622-.191-.046-.403.16-.475.457Z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.progress {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 20px;
|
||||
background-image: linear-gradient(to right, #FFE3C9, #FFD6B1);
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.progress::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background-image: linear-gradient(to right, #B84939, #F09C50);
|
||||
max-width: var(--progress);
|
||||
transition: max-width 1.2s ease-in-out;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#to {
|
||||
color: #B84939;
|
||||
}
|
||||
|
||||
.info::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: 250px;
|
||||
bottom: 0;
|
||||
width: 35px;
|
||||
aspect-ratio: 14 / 7;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='7' fill='none'%3E%3Cpath fill='url(%23a)' d='M13.632 10.897S11.632 6.63 9.608 5C7.204 3.065.003.808.003.808S.14 4.88 2.6 7.827c2.46 2.946 11.032 3.07 11.032 3.07Z'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='6.407' x2='7.225' y1='.333' y2='11.372' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
|
||||
}
|
||||
Reference in New Issue
Block a user