gradient color section added
This commit is contained in:
parent
7f97ad27cb
commit
de76bda401
3 changed files with 231 additions and 7 deletions
110
constants/gradientCard.js
Normal file
110
constants/gradientCard.js
Normal file
|
@ -0,0 +1,110 @@
|
||||||
|
let gradientCards = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
gradientColor: 'linear-gradient(to right, #6d28d9, #db2777)',
|
||||||
|
gradientName: 'daring new color monster',
|
||||||
|
gradientMaker: 'ShyamTala'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
gradientColor: 'linear-gradient(to right, #f12711,#f5af19)',
|
||||||
|
gradientName: 'flare',
|
||||||
|
gradientMaker: 'ShyamTala'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
gradientColor: 'linear-gradient(to right, #12c2e9, #c471ed,#f64f59)',
|
||||||
|
gradientName: 'jshine',
|
||||||
|
gradientMaker: 'ShyamTala'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
gradientColor: 'linear-gradient(to right, #00b09b, #96c93d)',
|
||||||
|
gradientName: 'ohhappiness',
|
||||||
|
gradientMaker: 'ShyamTala'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
gradientColor: 'linear-gradient(to right, #c0392b, #8e44ad)',
|
||||||
|
gradientName: 'mello',
|
||||||
|
gradientMaker: 'ShyamTala'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
gradientColor: 'linear-gradient(to right, #ad8cea, #50dfb2)',
|
||||||
|
gradientName: 'emeald',
|
||||||
|
gradientMaker: 'ShyamTala'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
gradientColor: 'linear-gradient(to right, #f9e7fe, #dafcfc)',
|
||||||
|
gradientName: 'almost',
|
||||||
|
gradientMaker: 'ShyamTala'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
gradientColor: 'linear-gradient(to right, #6a11cb, #fc6767)',
|
||||||
|
gradientName: 'galaxy',
|
||||||
|
gradientMaker: 'ShyamTala'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
gradientColor: 'linear-gradient(to right, #ff1f01, #ffc700)',
|
||||||
|
gradientName: 'sol',
|
||||||
|
gradientMaker: 'ShyamTala'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10,
|
||||||
|
gradientColor: 'linear-gradient(to right, #d0dae0, #8a2eff)',
|
||||||
|
gradientName: 'mikyway',
|
||||||
|
gradientMaker: 'ShyamTala'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 11,
|
||||||
|
gradientColor: 'linear-gradient(to right, #e3d2c4, #fcfcfb)',
|
||||||
|
gradientName: 'gold dust',
|
||||||
|
gradientMaker: 'ShyamTala'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 12,
|
||||||
|
gradientColor: 'linear-gradient(to right, #1e130c, #9a8478)',
|
||||||
|
gradientName: 'coffee',
|
||||||
|
gradientMaker: 'ShyamTala'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 13,
|
||||||
|
gradientColor: 'linear-gradient(to right, #1a2980, #26d0ce)',
|
||||||
|
gradientName: 'aqua',
|
||||||
|
gradientMaker: 'ShyamTala'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 14,
|
||||||
|
gradientColor: 'linear-gradient(43deg, #4158D0,#C850C0,#FFCC70)',
|
||||||
|
gradientName: 'smesh',
|
||||||
|
gradientMaker: 'ShyamTala'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 15,
|
||||||
|
gradientColor: 'linear-gradient(90deg, #00DBDE, #FC00FF)',
|
||||||
|
gradientName: 'smoothy',
|
||||||
|
gradientMaker: 'ShyamTala'
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
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><ion-icon name="copy-outline"></ion-icon></button>
|
||||||
|
</div>
|
||||||
|
<p class="gradient_maker">by ${element.gradientMaker}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
})
|
17
index.html
17
index.html
|
@ -36,6 +36,23 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="gradient_container">
|
||||||
|
|
||||||
|
<!-- <div class="gradient_card">
|
||||||
|
<div class="gradient_info">
|
||||||
|
<div class="title_with_copy_btn">
|
||||||
|
<h1 class="gradient_title">Daring Dew</h1>
|
||||||
|
<button><ion-icon name="copy-outline"></ion-icon></button>
|
||||||
|
</div>
|
||||||
|
<p class="gradient_maker">by ShyamTala</p>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<script src="./constants/gradientCard.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- 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 type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
|
||||||
|
|
111
style.css
111
style.css
|
@ -8,10 +8,9 @@
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||||
width: 100vw;
|
|
||||||
min-height: 50vh;
|
|
||||||
background: linear-gradient(to right, #6d28d9, #db2777);
|
background: linear-gradient(to right, #6d28d9, #db2777);
|
||||||
padding-inline: 8%;
|
padding-inline: 8%;
|
||||||
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1.logo_text {
|
h1.logo_text {
|
||||||
|
@ -23,7 +22,7 @@ h1.logo_text {
|
||||||
}
|
}
|
||||||
|
|
||||||
main.hero_section {
|
main.hero_section {
|
||||||
padding-block: 3rem;
|
padding-block: 3.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero_section h2 {
|
.hero_section h2 {
|
||||||
|
@ -113,6 +112,8 @@ main.hero_section {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* make hero section fully responsive */
|
||||||
@media screen and (max-width:640px) {
|
@media screen and (max-width:640px) {
|
||||||
.container {
|
.container {
|
||||||
padding-inline: 15px;
|
padding-inline: 15px;
|
||||||
|
@ -126,15 +127,111 @@ main.hero_section {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form input
|
.form input {
|
||||||
{
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form button
|
.form button {
|
||||||
{
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* gradient container section */
|
||||||
|
|
||||||
|
.gradient_container {
|
||||||
|
max-width: 100vw;
|
||||||
|
padding-top: 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::before
|
||||||
|
{
|
||||||
|
|
||||||
|
} */
|
||||||
|
|
||||||
|
.gradient_card:hover+.gradient_card::before {
|
||||||
|
content: '';
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: inherit;
|
||||||
|
scale: .9;
|
||||||
|
filter: blur(48px);
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.gradient_info {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
background: #fff;
|
||||||
|
padding: 15px;
|
||||||
|
border-bottom-left-radius: 5px;
|
||||||
|
border-bottom-right-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title_with_copy_btn {
|
||||||
|
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 {
|
||||||
|
margin-top: 5px;
|
||||||
|
color: #adb1b5;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
line-height: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
@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