more gradients color added
This commit is contained in:
parent
4ad335133b
commit
5a167d8c47
3 changed files with 253 additions and 157 deletions
|
@ -103,6 +103,111 @@ let gradientCards = [{
|
||||||
gradientName: 'smoothy',
|
gradientName: 'smoothy',
|
||||||
gradientMaker: 'ShyamTala'
|
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'
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
||||||
|
|
4
dist/jquery.lcnCircleRangeSelect.css
vendored
4
dist/jquery.lcnCircleRangeSelect.css
vendored
|
@ -10,7 +10,7 @@ input.circle-range-select {
|
||||||
margin:auto 0.65em 45% 0.65em;
|
margin:auto 0.65em 45% 0.65em;
|
||||||
padding: 0.65em !important;
|
padding: 0.65em !important;
|
||||||
border-radius: 50%;
|
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;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -43,7 +43,7 @@ input.circle-range-select {
|
||||||
}
|
}
|
||||||
|
|
||||||
.circle-range-select-wrapper .values {
|
.circle-range-select-wrapper .values {
|
||||||
color: rgba(255, 255, 255, 0.733);
|
color: rgba(255, 255, 255, 0.877);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
|
301
style.css
301
style.css
|
@ -7,15 +7,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
width: 10px;
|
display: none;
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
background: #f1f1f1;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background: linear-gradient(to top, #6c28d9, #db2778);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* code for toast msg */
|
/* code for toast msg */
|
||||||
|
@ -123,27 +115,12 @@ span#notify_toast {
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
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:linear-gradient(to right, #6d28d9, #db2777); */
|
|
||||||
background-size: 600% 600%;
|
|
||||||
padding-inline: 8%;
|
padding-inline: 8%;
|
||||||
overflow-x: hidden;
|
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 {
|
h1.logo_text {
|
||||||
|
@ -165,9 +142,6 @@ main.hero_section {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero_section h2:nth-child(2) {
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form {
|
.form {
|
||||||
margin-top: 1.5rem;
|
margin-top: 1.5rem;
|
||||||
|
@ -235,6 +209,9 @@ main.hero_section {
|
||||||
@media screen and (max-width:640px) {
|
@media screen and (max-width:640px) {
|
||||||
.container {
|
.container {
|
||||||
padding-inline: 15px;
|
padding-inline: 15px;
|
||||||
|
background: linear-gradient(90deg, #6d28d9, #db2777, #feac5e, #c779d0, #4bc0c8);
|
||||||
|
background-size: 600% 600%;
|
||||||
|
animation: gradient 16s ease infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero_section h2 {
|
.hero_section h2 {
|
||||||
|
@ -253,142 +230,156 @@ main.hero_section {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@keyframes gradient {
|
||||||
|
0% {
|
||||||
|
background-position: 0% 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
background-position: 100% 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
background-position: 0% 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* gradient container section */
|
||||||
|
|
||||||
/* gradient container section */
|
|
||||||
|
|
||||||
.gradient_container {
|
|
||||||
max-width: 100vw;
|
|
||||||
padding-block: 2.5rem;
|
|
||||||
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
|
||||||
padding-inline: 8%;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
|
|
||||||
gap: 5rem;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gradient_card {
|
|
||||||
position: relative;
|
|
||||||
min-width: 260px;
|
|
||||||
min-height: 300px;
|
|
||||||
box-shadow: 0px 10px 40px #cec7c7;
|
|
||||||
border-radius: 5px;
|
|
||||||
/* overflow: hidden; */
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.gradient_card:hover::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: inherit;
|
|
||||||
scale: 1.02;
|
|
||||||
filter: blur(30px);
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.gradient_info {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
width: 100%;
|
|
||||||
border-bottom-left-radius: 5px;
|
|
||||||
border-bottom-right-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.colors {
|
|
||||||
background: rgba(255, 255, 255, .8);
|
|
||||||
-webkit-backdrop-filter: blur(25px);
|
|
||||||
backdrop-filter: blur(25px);
|
|
||||||
padding: 10px 20px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
input[type="color"] {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
-moz-appearance: none;
|
|
||||||
appearance: none;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
background-color: transparent;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="color"]::-webkit-color-swatch-wrapper {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="color"]::-webkit-color-swatch {
|
|
||||||
border-radius: 5px;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="color"]::-moz-color-swatch {
|
|
||||||
border-radius: 5px;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title_with_copy_btn {
|
|
||||||
background: #fff;
|
|
||||||
padding-inline: 15px;
|
|
||||||
padding-top: 8px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
gap: .5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title_with_copy_btn h1.gradient_title {
|
|
||||||
font-size: 1.3rem;
|
|
||||||
line-height: 24px;
|
|
||||||
text-transform: capitalize;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title_with_copy_btn button {
|
|
||||||
font-size: 1.6rem;
|
|
||||||
color: #a5abae;
|
|
||||||
cursor: pointer;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title_with_copy_btn button ion-icon {
|
|
||||||
--ionicon-stroke-width: 56px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gradient_info p {
|
|
||||||
background: #fff;
|
|
||||||
padding-inline: 15px;
|
|
||||||
padding-bottom: 8px;
|
|
||||||
padding-top: 6px;
|
|
||||||
color: #adb1b5;
|
|
||||||
font-size: 1rem;
|
|
||||||
line-height: 24px;
|
|
||||||
font-weight: 600;
|
|
||||||
border-bottom-left-radius: 5px;
|
|
||||||
border-bottom-right-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@media screen and (max-width:640px) {
|
|
||||||
.gradient_container {
|
.gradient_container {
|
||||||
|
max-width: 100vw;
|
||||||
|
padding-block: 2.5rem;
|
||||||
|
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||||
|
padding-inline: 8%;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
|
||||||
|
gap: 5rem;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient_card {
|
||||||
|
position: relative;
|
||||||
|
min-width: 260px;
|
||||||
|
min-height: 300px;
|
||||||
|
box-shadow: 0px 10px 40px #cec7c7;
|
||||||
|
border-radius: 5px;
|
||||||
|
/* overflow: hidden; */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.gradient_card:hover::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: inherit;
|
||||||
|
scale: 1.02;
|
||||||
|
filter: blur(30px);
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.gradient_info {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
border-bottom-left-radius: 5px;
|
||||||
|
border-bottom-right-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.colors {
|
||||||
|
background: rgba(255, 255, 255, .8);
|
||||||
|
-webkit-backdrop-filter: blur(25px);
|
||||||
|
backdrop-filter: blur(25px);
|
||||||
|
padding: 10px 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
input[type="color"] {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="color"]::-webkit-color-swatch-wrapper {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="color"]::-webkit-color-swatch {
|
||||||
|
border-radius: 5px;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="color"]::-moz-color-swatch {
|
||||||
|
border-radius: 5px;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title_with_copy_btn {
|
||||||
|
background: #fff;
|
||||||
padding-inline: 15px;
|
padding-inline: 15px;
|
||||||
|
padding-top: 8px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
gap: .5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title_with_copy_btn h1.gradient_title {
|
.title_with_copy_btn h1.gradient_title {
|
||||||
font-size: 1.1rem;
|
font-size: 1.3rem;
|
||||||
line-height: 20px;
|
line-height: 24px;
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title_with_copy_btn button {
|
||||||
|
font-size: 1.6rem;
|
||||||
|
color: #a5abae;
|
||||||
|
cursor: pointer;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title_with_copy_btn button ion-icon {
|
||||||
|
--ionicon-stroke-width: 56px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gradient_info p {
|
.gradient_info p {
|
||||||
font-size: .9rem;
|
background: #fff;
|
||||||
|
padding-inline: 15px;
|
||||||
|
padding-bottom: 8px;
|
||||||
|
padding-top: 6px;
|
||||||
|
color: #adb1b5;
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
border-bottom-left-radius: 5px;
|
||||||
|
border-bottom-right-radius: 5px;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
@media screen and (max-width:640px) {
|
||||||
|
.gradient_container {
|
||||||
|
padding-inline: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title_with_copy_btn h1.gradient_title {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient_info p {
|
||||||
|
font-size: .9rem;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in a new issue