more gradients color added
This commit is contained in:
shyamtala003
parent
4ad335133b
commit
5a167d8c47
3 changed files with 253 additions and 157 deletions
|
|
@ -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'
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
|
|
|
|||
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;
|
||||
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;
|
||||
|
|
|
|||
301
style.css
301
style.css
|
|
@ -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,142 +230,156 @@ 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 */
|
||||
|
||||
/* 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 {
|
||||
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.1rem;
|
||||
line-height: 20px;
|
||||
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 {
|
||||
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