archive/gradient_container
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

new gradient added

Browse source
This commit is contained in:
shyamtala003 2022-11-23 18:34:15 +05:30
parent fdc679f8d2
commit b7b254e38c
4 changed files with 141 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

98
constants/gradientCard.js
View file

@ -13,6 +13,104 @@ let gradientCards = [{
gradientName: 'flare',
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,
colors: ['#12c2e9', '#c471ed', '#f64f59'],

12
constants/meshGradientCard.js
View file

@ -10,17 +10,7 @@ let meshGradientCards = [{
gradientName: 'mesh gradient',
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,
colors: ['#ff8fcd', '#c6fcfe', '#95f3ff', '#b8ffbb'],

2
index.html
View file

@ -98,7 +98,7 @@
</nav>
<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>
<div class="form">

57
style.css
View file

@ -7,7 +7,15 @@
}
::-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 */
@ -394,22 +402,37 @@ footer {
font-size: 18px;
line-height: 28px;
color: #374151;
background: #b3ff99;
background-image: radial-gradient(
at 0% 0%,
hsla(279, 96%, 79%, 1) 0px,
transparent 50%
),
radial-gradient(at 100% 0%, hsla(58, 100%, 78%, 1) 0px, transparent 50%),
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: linear-gradient(
90deg,
#6d28d9,
#db2777,
#feac5e,
#c779d0,
#4bc0c8
);
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 {
font-size: 18px;
line-height: 28px;
font-weight: 400;
color: #434343;
color: #ffffff;
}
.subscription_form {
@ -429,6 +452,7 @@ footer input[type="email"] {
font-size: 0.8rem;
width: 100%;
border-radius: 5px;
color: #fff;
}
footer input[type="email"]::placeholder {
@ -486,19 +510,20 @@ button.subscribe ion-icon {
.desc .title {
font-weight: 700;
color: #fff;
}
.desc .detailed {
font-weight: 400;
line-height: 20px;
color: #374151;
color: #e7e7e7;
}
.desc a {
display: inline-block;
margin-top: 5px;
font-size: 16px;
color: #be185d;
color: #ffffff;
border-bottom: 2px solid;
}
@ -511,18 +536,18 @@ button.subscribe ion-icon {
.social_links a {
font-size: 1.3rem;
color: #555555;
color: #fff;
transition: all 0.4s;
}
.social_links a:hover {
color: #737982;
color: #e3e3e3;
transform: translateY(-20%);
}
p.copyright {
margin-top: 0.5rem;
color: #555555;
color: #d4d4d4;
font-size: 1rem;
line-height: 1.2rem;
text-align: center;