From de76bda40104f851647b8629dd5b6daa3651de38 Mon Sep 17 00:00:00 2001 From: shyamtala003 Date: Thu, 6 Oct 2022 18:45:49 +0530 Subject: [PATCH] gradient color section added --- constants/gradientCard.js | 110 +++++++++++++++++++++++++++++++++++++ index.html | 17 ++++++ style.css | 111 +++++++++++++++++++++++++++++++++++--- 3 files changed, 231 insertions(+), 7 deletions(-) create mode 100644 constants/gradientCard.js diff --git a/constants/gradientCard.js b/constants/gradientCard.js new file mode 100644 index 0000000..d045ce7 --- /dev/null +++ b/constants/gradientCard.js @@ -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 += ` +
+
+
+

${element.gradientName}

+ +
+

by ${element.gradientMaker}

+
+
+ `; +}) \ No newline at end of file diff --git a/index.html b/index.html index 9c3c24d..a52c5d1 100644 --- a/index.html +++ b/index.html @@ -36,6 +36,23 @@ +
+ + + + + + +
+ diff --git a/style.css b/style.css index 4cbbc10..4419d0c 100644 --- a/style.css +++ b/style.css @@ -8,10 +8,9 @@ .container { 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); padding-inline: 8%; + overflow-x: hidden; } h1.logo_text { @@ -23,7 +22,7 @@ h1.logo_text { } main.hero_section { - padding-block: 3rem; + padding-block: 3.5rem; } .hero_section h2 { @@ -113,6 +112,8 @@ main.hero_section { font-weight: 400; } + +/* make hero section fully responsive */ @media screen and (max-width:640px) { .container { padding-inline: 15px; @@ -126,15 +127,111 @@ main.hero_section { flex-direction: column; } - .form input - { + .form input { width: 100%; } - .form button - { + .form button { 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; + } } \ No newline at end of file