more gradients color added

This commit is contained in:
shyamtala003 2022-10-08 12:06:41 +05:30
parent 4ad335133b
commit 5a167d8c47
3 changed files with 253 additions and 157 deletions

View file

@ -103,6 +103,111 @@ let gradientCards = [{
gradientName: 'smoothy',
gradientMaker: 'ShyamTala'
},
{
id: 16,
colors: ['#3a6186', '#89253e'],
gradientColor: 'linear-gradient(90deg, #3a6186, #89253e)',
gradientName: 'love couple',
gradientMaker: 'ShyamTala'
},
{
id: 17,
colors: ['#FD297A', '#9424F0'],
gradientColor: 'linear-gradient(90deg, #FD297A, #9424F0)',
gradientName: 'cripy',
gradientMaker: 'ShyamTala'
},
{
id: 18,
colors: ['#FED54A', '#FF9347'],
gradientColor: 'linear-gradient(90deg, #FED54A, #FF9347)',
gradientName: 'sunset',
gradientMaker: 'ShyamTala'
},
{
id: 19,
colors: ['#70e1f5', '#ffd194'],
gradientColor: 'linear-gradient(90deg, #70e1f5, #ffd194)',
gradientName: 'shore',
gradientMaker: 'ShyamTala'
},
{
id: 20,
colors: ['#00c6ff', '#0072ff'],
gradientColor: 'linear-gradient(90deg, #00c6ff, #0072ff)',
gradientName: 'Facebook Messenger',
gradientMaker: 'ShyamTala'
},
{
id: 21,
colors: ['#d38312', '#a83279'],
gradientColor: 'linear-gradient(90deg, #d38312, #a83279)',
gradientName: 'Crazy Orange!',
gradientMaker: 'ShyamTala'
},
{
id: 22,
colors: ['#43cea2', '#185a9d'],
gradientColor: 'linear-gradient(90deg, #43cea2, #185a9d)',
gradientName: 'Endless river!',
gradientMaker: 'ShyamTala'
},
{
id: 23,
colors: ['#ffb347', '#ffcc33'],
gradientColor: 'linear-gradient(90deg, #ffb347, #ffcc33)',
gradientName: 'Crazy Orange!',
gradientMaker: 'ShyamTala'
},
{
id: 24,
colors: ['#FEAC5E', '#C779D0','#4BC0C8'],
gradientColor: 'linear-gradient(90deg,#FEAC5E, #C779D0, #4BC0C8)',
gradientName: 'Atlas!',
gradientMaker: 'ShyamTala'
},
{
id: 25,
colors: ['#7b4397', '#dc2430'],
gradientColor: 'linear-gradient(90deg,#7b4397, #dc2430)',
gradientName: 'virgin america',
gradientMaker: 'ShyamTala'
},
{
id: 26,
colors: ['#fc00ff', '#00dbde'],
gradientColor: 'linear-gradient(90deg,#fc00ff, #00dbde)',
gradientName: 'timber',
gradientMaker: 'ShyamTala'
},
{
id: 27,
colors: ['#f46b45', '#eea849'],
gradientColor: 'linear-gradient(90deg,#f46b45, #eea849)',
gradientName: 'master card',
gradientMaker: 'ShyamTala'
},
{
id: 28,
colors: ['#00C9FF', '#92FE9D'],
gradientColor: 'linear-gradient(90deg,#00C9FF, #92FE9D)',
gradientName: 'back to earth',
gradientMaker: 'ShyamTala'
},
{
id: 29,
colors: ['#fd746c', '#ff9068'],
gradientColor: 'linear-gradient(90deg,#fd746c, #ff9068)',
gradientName: 'haikus',
gradientMaker: 'ShyamTala'
},
{
id: 30,
colors: ['#3434e6', '#ec6ead'],
gradientColor: 'linear-gradient(90deg,#3434e6, #ec6ead)',
gradientName: 'vice city',
gradientMaker: 'ShyamTala'
},
];

View file

@ -10,7 +10,7 @@ input.circle-range-select {
margin:auto 0.65em 45% 0.65em;
padding: 0.65em !important;
border-radius: 50%;
border: 0.4em solid rgba(204, 204, 204, 0.326);
border: 0.4em solid rgba(204, 204, 204, 0.518);
cursor: default;
}
@ -43,7 +43,7 @@ input.circle-range-select {
}
.circle-range-select-wrapper .values {
color: rgba(255, 255, 255, 0.733);
color: rgba(255, 255, 255, 0.877);
pointer-events: none;
position: absolute;
z-index: 2;

View file

@ -7,15 +7,7 @@
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(to top, #6c28d9, #db2778);
display: none;
}
/* code for toast msg */
@ -123,27 +115,12 @@ span#notify_toast {
.container {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background: linear-gradient(90deg, #6d28d9,#db2777,#feac5e, #c779d0, #4bc0c8);
/* background:linear-gradient(to right, #6d28d9, #db2777); */
background-size: 600% 600%;
background: linear-gradient(to right, #6d28d9, #db2777);
padding-inline: 8%;
overflow-x: hidden;
animation: gradient 16s ease infinite;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
h1.logo_text {
@ -165,9 +142,6 @@ main.hero_section {
color: #ffffff;
}
.hero_section h2:nth-child(2) {
color: #ffffff;
}
.form {
margin-top: 1.5rem;
@ -235,6 +209,9 @@ main.hero_section {
@media screen and (max-width:640px) {
.container {
padding-inline: 15px;
background: linear-gradient(90deg, #6d28d9, #db2777, #feac5e, #c779d0, #4bc0c8);
background-size: 600% 600%;
animation: gradient 16s ease infinite;
}
.hero_section h2 {
@ -253,8 +230,22 @@ main.hero_section {
width: 100%;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
}
/* gradient container section */