V.1.1
This commit is contained in:
parent
e433cb90b2
commit
6db09898fe
3 changed files with 98 additions and 23 deletions
|
@ -1,89 +1,104 @@
|
|||
let gradientCards = [{
|
||||
id: 1,
|
||||
colors: ['#6d28d9', '#db2777'],
|
||||
gradientColor: 'linear-gradient(to right, #6d28d9, #db2777)',
|
||||
gradientName: 'daring new color monster',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
colors: ['#f12711', '#f5af19'],
|
||||
gradientColor: 'linear-gradient(to right, #f12711,#f5af19)',
|
||||
gradientName: 'flare',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
colors: ['#12c2e9', '#c471ed', '#f64f59'],
|
||||
gradientColor: 'linear-gradient(to right, #12c2e9,#c471ed,#f64f59)',
|
||||
gradientName: 'jshine',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
colors: ['#00b09b', '#96c93d'],
|
||||
gradientColor: 'linear-gradient(to right, #00b09b, #96c93d)',
|
||||
gradientName: 'ohhappiness',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
colors: ['#c0392b', '#8e44ad'],
|
||||
gradientColor: 'linear-gradient(to right, #c0392b, #8e44ad)',
|
||||
gradientName: 'mello',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
colors: ['#ad8cea', '#50dfb2'],
|
||||
gradientColor: 'linear-gradient(to right, #ad8cea, #50dfb2)',
|
||||
gradientName: 'emeald',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
colors: ['#f9e7fe', '#dafcfc'],
|
||||
gradientColor: 'linear-gradient(to right, #f9e7fe, #dafcfc)',
|
||||
gradientName: 'almost',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
colors: ['#6a11cb', '#fc6767'],
|
||||
gradientColor: 'linear-gradient(to right, #6a11cb, #fc6767)',
|
||||
gradientName: 'galaxy',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
colors: ['#ff1f01', '#ffc700'],
|
||||
gradientColor: 'linear-gradient(to right, #ff1f01, #ffc700)',
|
||||
gradientName: 'sol',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
colors: ['#d0dae0', '#8a2eff'],
|
||||
gradientColor: 'linear-gradient(to right, #d0dae0, #8a2eff)',
|
||||
gradientName: 'mikyway',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
colors: ['#e3d2c4', '#fcfcfb'],
|
||||
gradientColor: 'linear-gradient(to right, #e3d2c4, #fcfcfb)',
|
||||
gradientName: 'gold dust',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
colors: ['#1e130c', '#9a8478'],
|
||||
gradientColor: 'linear-gradient(to right, #1e130c, #9a8478)',
|
||||
gradientName: 'coffee',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
colors: ['#1a2980', '#26d0ce'],
|
||||
gradientColor: 'linear-gradient(to right, #1a2980, #26d0ce)',
|
||||
gradientName: 'aqua',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
colors: ['#4158D0', '#C850C0', 'FFCC70'],
|
||||
gradientColor: 'linear-gradient(43deg, #4158D0,#C850C0,#FFCC70)',
|
||||
gradientName: 'smesh',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
colors: ['#00DBDE', '#FC00FF'],
|
||||
gradientColor: 'linear-gradient(90deg, #00DBDE, #FC00FF)',
|
||||
gradientName: 'smoothy',
|
||||
gradientMaker: 'ShyamTala'
|
||||
|
@ -94,19 +109,55 @@ let gradientCards = [{
|
|||
let gradientContaier = document.querySelector('.gradient_container');
|
||||
|
||||
gradientCards.forEach((element) => {
|
||||
gradientContaier.innerHTML += `
|
||||
<div class="gradient_card" style="background:${element.gradientColor}">
|
||||
<div class="gradient_info">
|
||||
<div class="title_with_copy_btn">
|
||||
<h1 class="gradient_title" style="background:${element.gradientColor};-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;">${element.gradientName}</h1>
|
||||
<button class="copy_to_clipboard" data-clipboard-text="background:${element.gradientColor};" ><ion-icon name="copy-outline"></ion-icon></button>
|
||||
</div>
|
||||
<p class="gradient_maker">by ${element.gradientMaker}</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
let gradientCard = document.createElement("div");
|
||||
gradientCard.classList.add('gradient_card');
|
||||
gradientCard.setAttribute("style", `background:${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.gradientColor};-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;`);
|
||||
|
||||
let coptToClipBoard = document.createElement('button');
|
||||
coptToClipBoard.classList.add('copy_to_clipboard');
|
||||
coptToClipBoard.setAttribute("data-clipboard-text", `background:${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(gradientInfo);
|
||||
|
||||
gradientContaier.append(gradientCard);
|
||||
|
||||
})
|
|
@ -10,9 +10,8 @@
|
|||
<link rel="apple-touch-icon" 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">
|
||||
<link rel="manifest" href="/site.webmanifest">
|
||||
|
||||
<title>Monogradients</title>
|
||||
<title>🌈Monogradients🎉</title>
|
||||
|
||||
<!-- general style sheet -->
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
|
|
39
style.css
39
style.css
|
@ -202,10 +202,6 @@ main.hero_section {
|
|||
/* overflow: hidden; */
|
||||
}
|
||||
|
||||
/* .gradient_card::before
|
||||
{
|
||||
|
||||
} */
|
||||
|
||||
.gradient_card:hover::before {
|
||||
content: '';
|
||||
|
@ -223,13 +219,38 @@ main.hero_section {
|
|||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
padding: 15px;
|
||||
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;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
input[type="color"]::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
input[type="color"]::-webkit-color-swatch {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.title_with_copy_btn {
|
||||
background: #fff;
|
||||
padding-inline: 15px;
|
||||
padding-top: 8px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
@ -254,11 +275,15 @@ main.hero_section {
|
|||
}
|
||||
|
||||
.gradient_info p {
|
||||
margin-top: 5px;
|
||||
background: #fff;
|
||||
padding-inline: 15px;
|
||||
padding-bottom: 8px;
|
||||
color: #adb1b5;
|
||||
font-size: 1.1rem;
|
||||
line-height: 20px;
|
||||
font-weight: 600;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
||||
span.copy_text
|
||||
|
|
Loading…
Reference in a new issue