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

8 new mesh gradient color added

Browse source
This commit is contained in:
shyamtala003 2022-10-18 18:21:21 +05:30
parent ce4327f246
commit 82e1657a29
4 changed files with 353 additions and 136 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
README.md
View file

@ -1,2 +1,3 @@
# gradient_container # gradient_container
✨Explore a constantly updated library of gradients, curated by the community ✨Explore a constantly updated library of gradients, curated by the community

69
constants/gradientCard.js
View file

@ -1,208 +1,209 @@
// let autoId = 0; this variable value comes from meshgradientcard.js
let gradientCards = [{ let gradientCards = [{
id: 1, id: ++autoId,
colors: ['#6d28d9', '#db2777'], colors: ['#6d28d9', '#db2777'],
gradientColor: 'linear-gradient(to right, #6d28d9, #db2777)', gradientColor: 'linear-gradient(to right, #6d28d9, #db2777)',
gradientName: 'daring new color monster', gradientName: 'daring new color monster',
gradientMaker: 'ShyamTala' gradientMaker: 'ShyamTala'
}, },
{ {
id: 2, id: ++autoId,
colors: ['#f12711', '#f5af19'], colors: ['#f12711', '#f5af19'],
gradientColor: 'linear-gradient(to right, #f12711,#f5af19)', gradientColor: 'linear-gradient(to right, #f12711,#f5af19)',
gradientName: 'flare', gradientName: 'flare',
gradientMaker: 'ShyamTala' gradientMaker: 'ShyamTala'
}, },
{ {
id: 3, id: ++autoId,
colors: ['#12c2e9', '#c471ed', '#f64f59'], colors: ['#12c2e9', '#c471ed', '#f64f59'],
gradientColor: 'linear-gradient(to right, #12c2e9,#c471ed,#f64f59)', gradientColor: 'linear-gradient(to right, #12c2e9,#c471ed,#f64f59)',
gradientName: 'jshine', gradientName: 'jshine',
gradientMaker: 'ShyamTala' gradientMaker: 'ShyamTala'
}, },
{ {
id: 4, id: ++autoId,
colors: ['#00b09b', '#96c93d'], colors: ['#00b09b', '#96c93d'],
gradientColor: 'linear-gradient(to right, #00b09b, #96c93d)', gradientColor: 'linear-gradient(to right, #00b09b, #96c93d)',
gradientName: 'ohhappiness', gradientName: 'ohhappiness',
gradientMaker: 'ShyamTala' gradientMaker: 'ShyamTala'
}, },
{ {
id: 5, id: ++autoId,
colors: ['#c0392b', '#8e44ad'], colors: ['#c0392b', '#8e44ad'],
gradientColor: 'linear-gradient(to right, #c0392b, #8e44ad)', gradientColor: 'linear-gradient(to right, #c0392b, #8e44ad)',
gradientName: 'mello', gradientName: 'mello',
gradientMaker: 'ShyamTala' gradientMaker: 'ShyamTala'
}, },
{ {
id: 6, id: ++autoId,
colors: ['#ad8cea', '#50dfb2'], colors: ['#ad8cea', '#50dfb2'],
gradientColor: 'linear-gradient(to right, #ad8cea, #50dfb2)', gradientColor: 'linear-gradient(to right, #ad8cea, #50dfb2)',
gradientName: 'emeald', gradientName: 'emeald',
gradientMaker: 'ShyamTala' gradientMaker: 'ShyamTala'
}, },
{ {
id: 7, id: ++autoId,
colors: ['#f9e7fe', '#dafcfc'], colors: ['#f9e7fe', '#dafcfc'],
gradientColor: 'linear-gradient(to right, #f9e7fe, #dafcfc)', gradientColor: 'linear-gradient(to right, #f9e7fe, #dafcfc)',
gradientName: 'almost', gradientName: 'almost',
gradientMaker: 'ShyamTala' gradientMaker: 'ShyamTala'
}, },
{ {
id: 8, id: ++autoId,
colors: ['#6a11cb', '#fc6767'], colors: ['#6a11cb', '#fc6767'],
gradientColor: 'linear-gradient(to right, #6a11cb, #fc6767)', gradientColor: 'linear-gradient(to right, #6a11cb, #fc6767)',
gradientName: 'galaxy', gradientName: 'galaxy',
gradientMaker: 'ShyamTala' gradientMaker: 'ShyamTala'
}, },
{ {
id: 9, id: ++autoId,
colors: ['#ff1f01', '#ffc700'], colors: ['#ff1f01', '#ffc700'],
gradientColor: 'linear-gradient(to right, #ff1f01, #ffc700)', gradientColor: 'linear-gradient(to right, #ff1f01, #ffc700)',
gradientName: 'sol', gradientName: 'sol',
gradientMaker: 'ShyamTala' gradientMaker: 'ShyamTala'
}, },
{ {
id: 10, id: ++autoId,
colors: ['#d0dae0', '#8a2eff'], colors: ['#d0dae0', '#8a2eff'],
gradientColor: 'linear-gradient(to right, #d0dae0, #8a2eff)', gradientColor: 'linear-gradient(to right, #d0dae0, #8a2eff)',
gradientName: 'mikyway', gradientName: 'mikyway',
gradientMaker: 'ShyamTala' gradientMaker: 'ShyamTala'
}, },
{ {
id: 11, id: ++autoId,
colors: ['#e3d2c4', '#fcfcfb'], colors: ['#e3d2c4', '#fcfcfb'],
gradientColor: 'linear-gradient(to right, #e3d2c4, #fcfcfb)', gradientColor: 'linear-gradient(to right, #e3d2c4, #fcfcfb)',
gradientName: 'gold dust', gradientName: 'gold dust',
gradientMaker: 'ShyamTala' gradientMaker: 'ShyamTala'
}, },
{ {
id: 12, id: ++autoId,
colors: ['#1e130c', '#9a8478'], colors: ['#1e130c', '#9a8478'],
gradientColor: 'linear-gradient(to right, #1e130c, #9a8478)', gradientColor: 'linear-gradient(to right, #1e130c, #9a8478)',
gradientName: 'coffee', gradientName: 'coffee',
gradientMaker: 'ShyamTala' gradientMaker: 'ShyamTala'
}, },
{ {
id: 13, id: ++autoId,
colors: ['#1a2980', '#26d0ce'], colors: ['#1a2980', '#26d0ce'],
gradientColor: 'linear-gradient(to right, #1a2980, #26d0ce)', gradientColor: 'linear-gradient(to right, #1a2980, #26d0ce)',
gradientName: 'aqua', gradientName: 'aqua',
gradientMaker: 'ShyamTala' gradientMaker: 'ShyamTala'
}, },
{ {
id: 14, id: ++autoId,
colors: ['#4158D0', '#C850C0', 'FFCC70'], colors: ['#4158D0', '#C850C0', 'FFCC70'],
gradientColor: 'linear-gradient(43deg, #4158D0,#C850C0,#FFCC70)', gradientColor: 'linear-gradient(43deg, #4158D0,#C850C0,#FFCC70)',
gradientName: 'smesh', gradientName: 'smesh',
gradientMaker: 'ShyamTala' gradientMaker: 'ShyamTala'
}, },
{ {
id: 15, id: ++autoId,
colors: ['#00DBDE', '#FC00FF'], colors: ['#00DBDE', '#FC00FF'],
gradientColor: 'linear-gradient(90deg, #00DBDE, #FC00FF)', gradientColor: 'linear-gradient(90deg, #00DBDE, #FC00FF)',
gradientName: 'smoothy', gradientName: 'smoothy',
gradientMaker: 'ShyamTala' gradientMaker: 'ShyamTala'
}, },
{ {
id: 16, id: ++autoId,
colors: ['#3a6186', '#89253e'], colors: ['#3a6186', '#89253e'],
gradientColor: 'linear-gradient(90deg, #3a6186, #89253e)', gradientColor: 'linear-gradient(90deg, #3a6186, #89253e)',
gradientName: 'love couple', gradientName: 'love couple',
gradientMaker: 'ShyamTala' gradientMaker: 'ShyamTala'
}, },
{ {
id: 17, id: ++autoId,
colors: ['#FD297A', '#9424F0'], colors: ['#FD297A', '#9424F0'],
gradientColor: 'linear-gradient(90deg, #FD297A, #9424F0)', gradientColor: 'linear-gradient(90deg, #FD297A, #9424F0)',
gradientName: 'cripy', gradientName: 'cripy',
gradientMaker: 'ShyamTala' gradientMaker: 'ShyamTala'
}, },
{ {
id: 18, id: ++autoId,
colors: ['#FED54A', '#FF9347'], colors: ['#FED54A', '#FF9347'],
gradientColor: 'linear-gradient(90deg, #FED54A, #FF9347)', gradientColor: 'linear-gradient(90deg, #FED54A, #FF9347)',
gradientName: 'sunset', gradientName: 'sunset',
gradientMaker: 'ShyamTala' gradientMaker: 'ShyamTala'
}, },
{ {
id: 19, id: ++autoId,
colors: ['#70e1f5', '#ffd194'], colors: ['#70e1f5', '#ffd194'],
gradientColor: 'linear-gradient(90deg, #70e1f5, #ffd194)', gradientColor: 'linear-gradient(90deg, #70e1f5, #ffd194)',
gradientName: 'shore', gradientName: 'shore',
gradientMaker: 'ShyamTala' gradientMaker: 'ShyamTala'
}, },
{ {
id: 20, id: ++autoId,
colors: ['#00c6ff', '#0072ff'], colors: ['#00c6ff', '#0072ff'],
gradientColor: 'linear-gradient(90deg, #00c6ff, #0072ff)', gradientColor: 'linear-gradient(90deg, #00c6ff, #0072ff)',
gradientName: 'Facebook Messenger', gradientName: 'Facebook Messenger',
gradientMaker: 'ShyamTala' gradientMaker: 'ShyamTala'
}, },
{ {
id: 21, id: ++autoId,
colors: ['#d38312', '#a83279'], colors: ['#d38312', '#a83279'],
gradientColor: 'linear-gradient(90deg, #d38312, #a83279)', gradientColor: 'linear-gradient(90deg, #d38312, #a83279)',
gradientName: 'Crazy Orange!', gradientName: 'Crazy Orange!',
gradientMaker: 'ShyamTala' gradientMaker: 'ShyamTala'
}, },
{ {
id: 22, id: ++autoId,
colors: ['#43cea2', '#185a9d'], colors: ['#43cea2', '#185a9d'],
gradientColor: 'linear-gradient(90deg, #43cea2, #185a9d)', gradientColor: 'linear-gradient(90deg, #43cea2, #185a9d)',
gradientName: 'Endless river!', gradientName: 'Endless river!',
gradientMaker: 'ShyamTala' gradientMaker: 'ShyamTala'
}, },
{ {
id: 23, id: ++autoId,
colors: ['#ffb347', '#ffcc33'], colors: ['#ffb347', '#ffcc33'],
gradientColor: 'linear-gradient(90deg, #ffb347, #ffcc33)', gradientColor: 'linear-gradient(90deg, #ffb347, #ffcc33)',
gradientName: 'Crazy Orange!', gradientName: 'Crazy Orange!',
gradientMaker: 'ShyamTala' gradientMaker: 'ShyamTala'
}, },
{ {
id: 24, id: ++autoId,
colors: ['#FEAC5E', '#C779D0','#4BC0C8'], colors: ['#FEAC5E', '#C779D0', '#4BC0C8'],
gradientColor: 'linear-gradient(90deg,#FEAC5E, #C779D0, #4BC0C8)', gradientColor: 'linear-gradient(90deg,#FEAC5E, #C779D0, #4BC0C8)',
gradientName: 'Atlas!', gradientName: 'Atlas!',
gradientMaker: 'ShyamTala' gradientMaker: 'ShyamTala'
}, },
{ {
id: 25, id: ++autoId,
colors: ['#7b4397', '#dc2430'], colors: ['#7b4397', '#dc2430'],
gradientColor: 'linear-gradient(90deg,#7b4397, #dc2430)', gradientColor: 'linear-gradient(90deg,#7b4397, #dc2430)',
gradientName: 'virgin america', gradientName: 'virgin america',
gradientMaker: 'ShyamTala' gradientMaker: 'ShyamTala'
}, },
{ {
id: 26, id: ++autoId,
colors: ['#fc00ff', '#00dbde'], colors: ['#fc00ff', '#00dbde'],
gradientColor: 'linear-gradient(90deg,#fc00ff, #00dbde)', gradientColor: 'linear-gradient(90deg,#fc00ff, #00dbde)',
gradientName: 'timber', gradientName: 'timber',
gradientMaker: 'ShyamTala' gradientMaker: 'ShyamTala'
}, },
{ {
id: 27, id: ++autoId,
colors: ['#f46b45', '#eea849'], colors: ['#f46b45', '#eea849'],
gradientColor: 'linear-gradient(90deg,#f46b45, #eea849)', gradientColor: 'linear-gradient(90deg,#f46b45, #eea849)',
gradientName: 'master card', gradientName: 'master card',
gradientMaker: 'ShyamTala' gradientMaker: 'ShyamTala'
}, },
{ {
id: 28, id: ++autoId,
colors: ['#00C9FF', '#92FE9D'], colors: ['#00C9FF', '#92FE9D'],
gradientColor: 'linear-gradient(90deg,#00C9FF, #92FE9D)', gradientColor: 'linear-gradient(90deg,#00C9FF, #92FE9D)',
gradientName: 'back to earth', gradientName: 'back to earth',
gradientMaker: 'ShyamTala' gradientMaker: 'ShyamTala'
}, },
{ {
id: 29, id: ++autoId,
colors: ['#fd746c', '#ff9068'], colors: ['#fd746c', '#ff9068'],
gradientColor: 'linear-gradient(90deg,#fd746c, #ff9068)', gradientColor: 'linear-gradient(90deg,#fd746c, #ff9068)',
gradientName: 'haikus', gradientName: 'haikus',
gradientMaker: 'ShyamTala' gradientMaker: 'ShyamTala'
}, },
{ {
id: 30, id: ++autoId,
colors: ['#3434e6', '#ec6ead'], colors: ['#3434e6', '#ec6ead'],
gradientColor: 'linear-gradient(90deg,#3434e6, #ec6ead)', gradientColor: 'linear-gradient(90deg,#3434e6, #ec6ead)',
gradientName: 'vice city', gradientName: 'vice city',
@ -211,13 +212,13 @@ let gradientCards = [{
]; ];
let gradientContaier = document.querySelector('.gradient_container'); let gradientContaier1 = document.querySelector('.gradient_container');
gradientCards.forEach((element) => { gradientCards.forEach((element) => {
let gradientCard = document.createElement("div"); let gradientCard = document.createElement("div");
gradientCard.classList.add('gradient_card'); gradientCard.classList.add('gradient_card');
gradientCard.setAttribute("style", `background:${element.gradientColor}`); gradientCard.setAttribute("style", `background-image:${element.gradientColor}`);
let gradientInfo = document.createElement('div'); let gradientInfo = document.createElement('div');
gradientInfo.classList.add('gradient_info'); gradientInfo.classList.add('gradient_info');
@ -263,6 +264,6 @@ gradientCards.forEach((element) => {
gradientCard.append(gradientInfo); gradientCard.append(gradientInfo);
gradientContaier.append(gradientCard); gradientContaier1.append(gradientCard);
}) })

155
constants/meshGradientCard.js Normal file
View file

@ -0,0 +1,155 @@
let autoId = 0;
let meshGradientCards = [{
id: ++autoId,
colors: ['#aeffbe', '#94fff1', '#ffe48a', '#ff9ebe'],
backgroundColor: '#b3ff99',
gradientColor: `radial-gradient(at 43% 0%, hsla(97,75%,68%,1) 0px, transparent 50%),
radial-gradient(at 100% 1%, hsla(176,100%,79%,1) 0px, transparent 50%),
radial-gradient(at 14% 99%, hsla(50,100%,77%,1) 0px, transparent 50%),
radial-gradient(at 100% 98%, hsla(344,100%,80%,1) 0px, transparent 50%)`,
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'],
gradientColor: `radial-gradient(at 100% 100%, hsla(326,100%,78%,0.73) 0px, transparent 50%),
radial-gradient(at 100% 0%, hsla(182,100%,88%,1) 0px, transparent 50%),
radial-gradient(at 0% 99%, hsla(186,100%,79%,1) 0px, transparent 50%),
radial-gradient(at 1% 0%, hsla(122,100%,86%,1) 0px, transparent 50%)`,
backgroundColor: '#b3ff99',
gradientName: 'smoothy mesh gradient',
gradientMaker: 'ShyamTala'
},
{
id: ++autoId,
colors: ['#9bffe1', '#a8c5ff', '#ccedff', '#cbbcfc'],
gradientColor: `radial-gradient(at 100% 0%, hsla(162,100%,80%,1) 0px, transparent 50%),
radial-gradient(at 9% 89%, hsla(219,100%,82%,1) 0px, transparent 50%),
radial-gradient(at 99% 98%, hsla(201,100%,90%,1) 0px, transparent 50%),
radial-gradient(at 0% 0%, hsla(254,91%,86%,1) 0px, transparent 50%)`,
backgroundColor: '#b3ff99',
gradientName: 'staunch mesh gradie',
gradientMaker: 'ShyamTala'
},
{
id: ++autoId,
colors: ['#f2ffa3', '#deffa8', '#ff99da', '#affefb'],
gradientColor: `radial-gradient(at 0% 0%, hsla(68,97%,83%,1) 0px, transparent 50%),
radial-gradient(at 100% 0%, hsla(82,100%,82%,1) 0px, transparent 50%),
radial-gradient(at 0% 99%, hsla(321,100%,80%,1) 0px, transparent 50%),
radial-gradient(at 99% 98%, hsla(177,97%,84%,1) 0px, transparent 50%)`,
backgroundColor: '#b3ff99',
gradientName: 'mesh gradient',
gradientMaker: 'ShyamTala'
},
{
id: ++autoId,
colors: ['#da99fd', '#fffd90', '#9b96f9', '#ffa694'],
gradientColor: `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%)`,
backgroundColor: '#b3ff99',
gradientName: 'sun-shine mesh gradie',
gradientMaker: 'ShyamTala'
},
{
id: ++autoId,
colors: ['#ccbeff', '#c8f9fe', '#8d85ff', '#ffbec6'],
gradientColor: `radial-gradient(at 0% 0%, hsla(252,100%,87%,1) 0px, transparent 50%),
radial-gradient(at 100% 0%, hsla(185,96%,89%,1) 0px, transparent 50%),
radial-gradient(at 9% 89%, hsla(243,100%,76%,1) 0px, transparent 50%),
radial-gradient(at 99% 98%, hsla(352,100%,87%,1) 0px, transparent 50%)`,
backgroundColor: '#b3ff99',
gradientName: 'beautiful mesh gradie',
gradientMaker: 'ShyamTala'
},
{
id: ++autoId,
colors: ['#f9bcff', '#98efff', '#ffa29a', '#be99ff'],
gradientColor: `radial-gradient(at 0% 0%, hsla(294,100%,86%,1) 0px, transparent 50%),
radial-gradient(at 100% 0%, hsla(189,100%,79%,1) 0px, transparent 50%),
radial-gradient(at 9% 89%, hsla(4,100%,80%,1) 0px, transparent 50%),
radial-gradient(at 99% 98%, hsla(261,100%,80%,1) 0px, transparent 50%)`,
backgroundColor: '#b3ff99',
gradientName: 'radial mesh gradie',
gradientMaker: 'ShyamTala'
},
];
let gradientContaier = document.querySelector('.gradient_container');
meshGradientCards.forEach((element) => {
let gradientCard = document.createElement("div");
gradientCard.classList.add('gradient_card');
gradientCard.setAttribute("style", `background:${element.backgroundColor};background-image:${element.gradientColor}`);
let gradientCanvas = document.createElement('div');
gradientCanvas.classList.add("gradient_canvas");
gradientCanvas.setAttribute("style", `height: 75%;background:${element.backgroundColor};background-image:${element.gradientColor}`);
let gradientInfo = document.createElement('div');
gradientInfo.classList.add('gradient_info');
let colors = document.createElement("div");
colors.classList.add("colors");
element.colors.forEach((color) => {
let colorInput = document.createElement('input');
colorInput.classList.add("color")
colorInput.setAttribute("type", "color");
colorInput.setAttribute("value", color)
colors.append(colorInput)
})
let titleWithCopyBtn = document.createElement('div');
titleWithCopyBtn.classList.add("title_with_copy_btn");
let gradientTitle = document.createElement('h1');
gradientTitle.classList.add('gradient_title');
gradientTitle.textContent = element.gradientName;
gradientTitle.setAttribute("style", `background:${element.backgroundColor};background-image:${element.gradientColor};-webkit-background-clip: text;
-webkit-text-fill-color: rgba(0,0,0,.2);`);
let coptToClipBoard = document.createElement('button');
coptToClipBoard.classList.add('copy_to_clipboard');
coptToClipBoard.setAttribute("data-clipboard-text", `background:${element.backgroundColor};\nbackground-image:${element.gradientColor};`)
coptToClipBoard.innerHTML = `<ion-icon name="copy-outline"></ion-icon>`;
let gradientAuther = document.createElement('p');
gradientAuther.classList.add("gradient_maker");
gradientAuther.textContent = `by ${element.gradientMaker}`;
// append elements
titleWithCopyBtn.append(gradientTitle);
titleWithCopyBtn.append(coptToClipBoard);
gradientInfo.append(colors)
gradientInfo.append(titleWithCopyBtn);
gradientInfo.append(gradientAuther);
gradientCard.append(gradientCanvas)
gradientCard.append(gradientInfo);
gradientContaier.append(gradientCard);
})

264
index.html
View file

@ -1,147 +1,207 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- favicon --> <!-- favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="./favicons/apple-touch-icon.png"> <link
<link rel="icon" type="image/png" sizes="32x32" href="./favicons/favicon-32x32.png"> rel="apple-touch-icon"
<link rel="icon" type="image/png" sizes="16x16" href="./favicons/favicon-16x16.png"> sizes="180x180"
href="./favicons/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./favicons/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="./favicons/favicon-16x16.png"
/>
<title>🌈Monogradients🎉</title> <title>🌈Monogradients🎉</title>
<!-- circular range slider --> <!-- circular range slider -->
<link rel="stylesheet" href="./dist/jquery.lcnCircleRangeSelect.css"> <link rel="stylesheet" href="./dist/jquery.lcnCircleRangeSelect.css" />
<script defer src="./dist/jquery.lcnCircleRangeSelect.js"></script> <script defer src="./dist/jquery.lcnCircleRangeSelect.js"></script>
<!-- general style sheet --> <!-- general style sheet -->
<link rel="stylesheet" href="./style.css"> <link rel="stylesheet" href="./style.css" />
</head>
</head>
<body>
<body>
<div class="color_maker color_maker_close"> <div class="color_maker color_maker_close">
<div class="gradient_card" id="gradient_card_edit"> <div class="gradient_card" id="gradient_card_edit">
<button id="close"> <button id="close">
<ion-icon name="close"></ion-icon> <ion-icon name="close"></ion-icon>
</button>
<input
type="text"
class="circle-range-select"
id="rangeSlider"
data-single-value
data-auto-init
value="34"
onchange="generateGradient()"
/>
<div class="gradient_info">
<div class="colors" id="color_inputs">
<button id="add_input_btn" onclick="addColorInputer()">
<ion-icon name="add-outline"></ion-icon>
</button> </button>
<input type="text" class="circle-range-select" id="rangeSlider" data-single-value data-auto-init value="34" <input
onchange="generateGradient()"> class="color colorinput"
<div class="gradient_info"> type="color"
<div class="colors" id="color_inputs"> value="#6d28d9"
<button id="add_input_btn" onclick="addColorInputer()"> id="c1"
<ion-icon name="add-outline"></ion-icon> oninput="generateGradient()"
</button> />
<input class="color colorinput" type="color" value="#6d28d9" id="c1" oninput="generateGradient()"> <input
<input class="color colorinput" type="color" value="#db2777" id="c2" oninput="generateGradient()"> class="color colorinput"
</div> type="color"
value="#db2777"
id="c2"
oninput="generateGradient()"
/>
</div>
<div class="title_with_copy_btn"> <div class="title_with_copy_btn">
<button class="copy_to_clipboard" id="color_maker_copy_btn" <button
data-clipboard-text="background:linear-gradient(to right, #6d28d9, #db2777);"> class="copy_to_clipboard"
<ion-icon name="copy-outline" role="img" class="md hydrated" aria-label="copy outline"> id="color_maker_copy_btn"
</ion-icon> data-clipboard-text="background:linear-gradient(to right, #6d28d9, #db2777);"
</button> >
</div> <ion-icon
</div> name="copy-outline"
role="img"
class="md hydrated"
aria-label="copy outline"
>
</ion-icon>
</button>
</div>
</div> </div>
</div>
</div> </div>
<!-- notifier --> <!-- notifier -->
<span id="notify_toast" class="hide_toast">color copied!</span> <span id="notify_toast" class="hide_toast">color copied!</span>
<div class="container"> <div class="container">
<nav>
<h1 class="logo_text">🌈Monogradients🎉</h1>
</nav>
<nav> <main class="hero_section">
<h1 class="logo_text">🌈Monogradients🎉</h1> <h2>Beautiful hand-crafted gradients,</h2>
</nav> <h2>curated by the community.</h2>
<main class="hero_section">
<h2>Beautiful hand-crafted gradients,</h2>
<h2>curated by the community.</h2>
<div class="form">
<!-- <input type="email" placeholder="Enter your email"> -->
<a class="btn" id="make_gradient_btn">
<ion-icon name="add-outline"></ion-icon> Make Your Own
</a>
<a href="https://github.com/shyamtala003/gradient_container" class="btn">
<ion-icon name="logo-github"></ion-icon> View on Github
</a>
</div>
</main>
<div class="form">
<!-- <input type="email" placeholder="Enter your email"> -->
<a class="btn" id="make_gradient_btn">
<ion-icon name="add-outline"></ion-icon> Make Your Own
</a>
<a
href="https://github.com/shyamtala003/gradient_container"
class="btn"
>
<ion-icon name="logo-github"></ion-icon> View on Github
</a>
</div>
</main>
</div> </div>
<div class="gradient_container"> <div class="gradient_container">
<!-- color data comes from below script -->
<!-- color data comes from below script --> <script src="./constants/meshGradientCard.js"></script>
<script src="./constants/gradientCard.js"></script> <script src="./constants/gradientCard.js"></script>
</div> </div>
<footer> <footer>
<p class="text">Join my newsletter to hear about new projects, content and articles that I publish.</p> <p class="text">
<div class="subscription_form"> Join my newsletter to hear about new projects, content and articles that
<input type="email" placeholder="Enter your email" name="email" id="email_input"> I publish.
<button class="subscribe"> </p>
<ion-icon name="mail-outline"></ion-icon> Subscribe <div class="subscription_form">
</button> <input
</div> type="email"
placeholder="Enter your email"
name="email"
id="email_input"
/>
<button class="subscribe">
<ion-icon name="mail-outline"></ion-icon> Subscribe
</button>
</div>
<div class="contributor_desc"> <div class="contributor_desc">
<img src="./images/shyam_tala.jpg" class="profile" alt=""> <img src="./images/shyam_tala.jpg" class="profile" alt="" />
<div class="desc"> <div class="desc">
<p class="title">Hey there, 👋</p> <p class="title">Hey there, 👋</p>
<p class="detailed d1">I’m Shyam - a full-stack developer, blogger and the creator of this web app.</p> <p class="detailed d1">
<p class="detailed d2">I love all things related to front-end development and love connecting with I’m Shyam - a full-stack developer, blogger and the creator of this
individuals.</p> web app.
<a href="https://shyamtala.netlify.app/">Learn more about me</a> </p>
</div> <p class="detailed d2">
I love all things related to front-end development and love
connecting with individuals.
</p>
<a href="https://shyamtala.netlify.app/">Learn more about me</a>
</div> </div>
</div>
<div class="social_links"> <div class="social_links">
<a href="https://twitter.com/ShyamTala9"> <a href="https://twitter.com/ShyamTala9">
<ion-icon name="logo-twitter"></ion-icon> <ion-icon name="logo-twitter"></ion-icon>
</a> </a>
<a href="https://www.instagram.com/shyamtala_official/"> <a href="https://www.instagram.com/shyamtala_official/">
<ion-icon name="logo-instagram"></ion-icon> <ion-icon name="logo-instagram"></ion-icon>
</a> </a>
<a href="https://github.com/shyamtala003"> <a href="https://github.com/shyamtala003">
<ion-icon name="logo-github"></ion-icon> <ion-icon name="logo-github"></ion-icon>
</a> </a>
<a href="https://www.linkedin.com/in/shyam-tala-666828169/"> <a href="https://www.linkedin.com/in/shyam-tala-666828169/">
<ion-icon name="logo-linkedin"></ion-icon> <ion-icon name="logo-linkedin"></ion-icon>
</a> </a>
</div> </div>
<p class="copyright">© <script> <p class="copyright">
let year = new Date().getFullYear(); ©
document.write(year); <script>
</script> Monogradient. All rights reserved.</p> let year = new Date().getFullYear();
document.write(year);
</script>
Monogradient. All rights reserved.
</p>
</footer> </footer>
<!-- ion icon cdn script --> <!-- ion icon cdn script -->
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script> type="module"
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
></script>
<script
nomodule
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
></script>
<!-- JQuery cdn --> <!-- JQuery cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" <script
integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"
crossorigin="anonymous" referrerpolicy="no-referrer"></script> integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<!-- copy to clipboard --> <!-- copy to clipboard -->
<script src="dist/clipboard.min.js"></script> <script src="dist/clipboard.min.js"></script>
<!-- main script --> <!-- main script -->
<script src="./main.js"></script> <script src="./main.js"></script>
</body> </body>
</html>
</html>