new gradient added
This commit is contained in:
parent
fdc679f8d2
commit
b7b254e38c
4 changed files with 141 additions and 28 deletions
|
@ -13,6 +13,104 @@ let gradientCards = [{
|
||||||
gradientName: 'flare',
|
gradientName: 'flare',
|
||||||
gradientMaker: 'ShyamTala'
|
gradientMaker: 'ShyamTala'
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: ++autoId,
|
||||||
|
colors: ['#4facfe', '#00f2fe'],
|
||||||
|
gradientColor: 'linear-gradient(to right, #4facfe,#00f2fe)',
|
||||||
|
gradientName: 'malibu beach',
|
||||||
|
gradientMaker: 'ShyamTala'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: ++autoId,
|
||||||
|
colors: ['#13547a', '#80d0c7'],
|
||||||
|
gradientColor: 'linear-gradient(to right, #13547a,#80d0c7)',
|
||||||
|
gradientName: 'aqua splash',
|
||||||
|
gradientMaker: 'ShyamTala'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: ++autoId,
|
||||||
|
colors: ['#50cc7f', '#f5d100'],
|
||||||
|
gradientColor: 'linear-gradient(to right, #50cc7f,#f5d100)',
|
||||||
|
gradientName: 'millennium pine',
|
||||||
|
gradientMaker: 'ShyamTala'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: ++autoId,
|
||||||
|
colors: ['#209cff', '#68e0cf'],
|
||||||
|
gradientColor: 'linear-gradient(to right, #209cff,#68e0cf)',
|
||||||
|
gradientName: 'sea shore',
|
||||||
|
gradientMaker: 'ShyamTala'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: ++autoId,
|
||||||
|
colors: ['#ff5858', '#f09819'],
|
||||||
|
gradientColor: 'linear-gradient(to right, #ff5858,#f09819)',
|
||||||
|
gradientName: 'happy memories',
|
||||||
|
gradientMaker: 'ShyamTala'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: ++autoId,
|
||||||
|
colors: ['#29323c', '#485563'],
|
||||||
|
gradientColor: 'linear-gradient(to right, #29323c,#485563)',
|
||||||
|
gradientName: 'vicious stance',
|
||||||
|
gradientMaker: 'ShyamTala'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: ++autoId,
|
||||||
|
colors: ['#808080', '#3fada8'],
|
||||||
|
gradientColor: 'linear-gradient(to right, #808080,#3fada8)',
|
||||||
|
gradientName: 'vicious stance',
|
||||||
|
gradientMaker: 'allen design'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: ++autoId,
|
||||||
|
colors: ['#eaf6a3', '#9aeabf'],
|
||||||
|
gradientColor: 'linear-gradient(to right, #eaf6a3,#9aeabf)',
|
||||||
|
gradientName: 'light shaded',
|
||||||
|
gradientMaker: 'surya design'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: ++autoId,
|
||||||
|
colors: ['#f2e7f8', '#cac2ff'],
|
||||||
|
gradientColor: 'linear-gradient(to right, #f2e7f8,#cac2ff)',
|
||||||
|
gradientName: 'light shaded',
|
||||||
|
gradientMaker: 'surya design'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: ++autoId,
|
||||||
|
colors: ['#ffffff', '#badbfb'],
|
||||||
|
gradientColor: 'linear-gradient(to right, #ffffff,#badbfb)',
|
||||||
|
gradientName: 'light shaded',
|
||||||
|
gradientMaker: 'surya design'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: ++autoId,
|
||||||
|
colors: ['#e0fff9', '#8be7c8'],
|
||||||
|
gradientColor: 'linear-gradient(to right, #e0fff9,#8be7c8)',
|
||||||
|
gradientName: 'light shaded',
|
||||||
|
gradientMaker: 'surya design'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: ++autoId,
|
||||||
|
colors: ['#ffe9c9', '#ffd260'],
|
||||||
|
gradientColor: 'linear-gradient(to right, #ffe9c9,#ffd260)',
|
||||||
|
gradientName: 'light shaded',
|
||||||
|
gradientMaker: 'surya design'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: ++autoId,
|
||||||
|
colors: ['#ed6ea0', '#ec8c69'],
|
||||||
|
gradientColor: 'linear-gradient(to right, #ed6ea0,#ec8c69)',
|
||||||
|
gradientName: 'royal garden',
|
||||||
|
gradientMaker: 'ShyamTala'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: ++autoId,
|
||||||
|
colors: ['#1aa37a', '#9dffb3'],
|
||||||
|
gradientColor: 'linear-gradient(to right, #1aa37a,#9dffb3)',
|
||||||
|
gradientName: 'lush',
|
||||||
|
gradientMaker: 'ShyamTala'
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: ++autoId,
|
id: ++autoId,
|
||||||
colors: ['#12c2e9', '#c471ed', '#f64f59'],
|
colors: ['#12c2e9', '#c471ed', '#f64f59'],
|
||||||
|
|
|
@ -10,17 +10,7 @@ let meshGradientCards = [{
|
||||||
gradientName: 'mesh gradient',
|
gradientName: 'mesh gradient',
|
||||||
gradientMaker: 'ShyamTala'
|
gradientMaker: 'ShyamTala'
|
||||||
},
|
},
|
||||||
{
|
|
||||||
id: ++autoId,
|
|
||||||
colors: ['#ac9dff', '#9384ff', '#ff93c4', '#ff80cd'],
|
|
||||||
gradientColor: `radial-gradient(at 100% 0%, hsla(249,100%,80%,1) 0px, transparent 50%),
|
|
||||||
radial-gradient(at 9% 89%, hsla(247,100%,75%,1) 0px, transparent 50%),
|
|
||||||
radial-gradient(at 99% 98%, hsla(332,100%,78%,1) 0px, transparent 50%),
|
|
||||||
radial-gradient(at 0% 0%, hsla(323,100%,75%,1) 0px, transparent 50%)`,
|
|
||||||
backgroundColor: '#b3ff99',
|
|
||||||
gradientName: 'killer mesh gradie',
|
|
||||||
gradientMaker: 'ShyamTala'
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: ++autoId,
|
id: ++autoId,
|
||||||
colors: ['#ff8fcd', '#c6fcfe', '#95f3ff', '#b8ffbb'],
|
colors: ['#ff8fcd', '#c6fcfe', '#95f3ff', '#b8ffbb'],
|
||||||
|
|
|
@ -98,7 +98,7 @@
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<main class="hero_section">
|
<main class="hero_section">
|
||||||
<h2>Beautiful hand-crafted gradients,</h2>
|
<h2>Explore a constantly updated library of gradients,</h2>
|
||||||
<h2>curated by the community.</h2>
|
<h2>curated by the community.</h2>
|
||||||
|
|
||||||
<div class="form">
|
<div class="form">
|
||||||
|
|
57
style.css
57
style.css
|
@ -7,7 +7,15 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
/* display: none; */
|
width: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: linear-gradient(to top, #e3d2c4, #fcfcfb);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: linear-gradient(to top, #ed6ea0, #ec8c69);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* code for toast msg */
|
/* code for toast msg */
|
||||||
|
@ -394,22 +402,37 @@ footer {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
line-height: 28px;
|
line-height: 28px;
|
||||||
color: #374151;
|
color: #374151;
|
||||||
background: #b3ff99;
|
background: linear-gradient(
|
||||||
background-image: radial-gradient(
|
90deg,
|
||||||
at 0% 0%,
|
#6d28d9,
|
||||||
hsla(279, 96%, 79%, 1) 0px,
|
#db2777,
|
||||||
transparent 50%
|
#feac5e,
|
||||||
),
|
#c779d0,
|
||||||
radial-gradient(at 100% 0%, hsla(58, 100%, 78%, 1) 0px, transparent 50%),
|
#4bc0c8
|
||||||
radial-gradient(at 9% 89%, hsla(243, 89%, 78%, 1) 0px, transparent 50%),
|
);
|
||||||
radial-gradient(at 99% 98%, hsla(10, 100%, 79%, 1) 0px, transparent 50%);
|
background-size: 600% 600%;
|
||||||
|
animation: gradient_footer 16s ease infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes gradient_footer {
|
||||||
|
0% {
|
||||||
|
background-position: 0% 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
background-position: 100% 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
background-position: 0% 50%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
footer p.text {
|
footer p.text {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
line-height: 28px;
|
line-height: 28px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #434343;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subscription_form {
|
.subscription_form {
|
||||||
|
@ -429,6 +452,7 @@ footer input[type="email"] {
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer input[type="email"]::placeholder {
|
footer input[type="email"]::placeholder {
|
||||||
|
@ -486,19 +510,20 @@ button.subscribe ion-icon {
|
||||||
|
|
||||||
.desc .title {
|
.desc .title {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.desc .detailed {
|
.desc .detailed {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
color: #374151;
|
color: #e7e7e7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.desc a {
|
.desc a {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #be185d;
|
color: #ffffff;
|
||||||
border-bottom: 2px solid;
|
border-bottom: 2px solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -511,18 +536,18 @@ button.subscribe ion-icon {
|
||||||
|
|
||||||
.social_links a {
|
.social_links a {
|
||||||
font-size: 1.3rem;
|
font-size: 1.3rem;
|
||||||
color: #555555;
|
color: #fff;
|
||||||
transition: all 0.4s;
|
transition: all 0.4s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.social_links a:hover {
|
.social_links a:hover {
|
||||||
color: #737982;
|
color: #e3e3e3;
|
||||||
transform: translateY(-20%);
|
transform: translateY(-20%);
|
||||||
}
|
}
|
||||||
|
|
||||||
p.copyright {
|
p.copyright {
|
||||||
margin-top: 0.5rem;
|
margin-top: 0.5rem;
|
||||||
color: #555555;
|
color: #d4d4d4;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
line-height: 1.2rem;
|
line-height: 1.2rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
Loading…
Reference in a new issue