dark theme added{this is not right way but ok😉}
This commit is contained in:
shyamtala003
parent
b7b254e38c
commit
80c487c283
6 changed files with 891 additions and 198 deletions
|
|
@ -1,3 +1,6 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Lobster+Two:ital,wght@0,700;1,700&display=swap');
|
||||
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -11,11 +14,11 @@
|
|||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: linear-gradient(to top, #e3d2c4, #fcfcfb);
|
||||
background: linear-gradient(to top, #010409, #2d2b2b);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(to top, #ed6ea0, #ec8c69);
|
||||
background:linear-gradient(to top, #00b09b, #96c93d);
|
||||
}
|
||||
|
||||
/* code for toast msg */
|
||||
|
|
@ -23,12 +26,13 @@ span#notify_toast {
|
|||
position: fixed;
|
||||
top: 90%;
|
||||
right: 5%;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border:2px solid #fff;
|
||||
backdrop-filter: blur(110px);
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
color: #fff;
|
||||
font-family: sans-serif;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
z-index: 2;
|
||||
|
|
@ -49,7 +53,7 @@ span#notify_toast {
|
|||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 1;
|
||||
z-index: 21;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
|
|
@ -121,19 +125,69 @@ span#notify_toast {
|
|||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
min-height: 65vh;
|
||||
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
background: linear-gradient(to right, #6d28d9, #db2777);
|
||||
padding-inline: 8%;
|
||||
overflow-x: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
h1.logo_text {
|
||||
.container::before
|
||||
{
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
background: linear-gradient(to top,#010409,transparent);
|
||||
backdrop-filter: blur(20px);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
nav
|
||||
{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #ffffff4e;
|
||||
}
|
||||
|
||||
nav h1.logo_text {
|
||||
padding-block: 1.5rem;
|
||||
font-size: 20px;
|
||||
line-height: 32px;
|
||||
color: #ffffffd6;
|
||||
border-bottom: 1px solid #ffffff4e;
|
||||
}
|
||||
|
||||
nav #theme_toggler
|
||||
{
|
||||
position: relative;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
border-radius:50%;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
border: 2px solid #fcfcfb9d;
|
||||
}
|
||||
|
||||
nav #theme_toggler:hover
|
||||
{
|
||||
scale: 1.1;
|
||||
}
|
||||
|
||||
nav #theme_toggler ion-icon
|
||||
{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
main.hero_section {
|
||||
|
|
@ -260,6 +314,7 @@ main.hero_section {
|
|||
/* gradient container section */
|
||||
|
||||
.gradient_container {
|
||||
background: #010409;
|
||||
max-width: 100vw;
|
||||
padding-block: 2.5rem;
|
||||
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
|
||||
|
|
@ -271,11 +326,22 @@ main.hero_section {
|
|||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.gradient_container .gradient_card:hover
|
||||
{
|
||||
filter: blur(0px);
|
||||
transform: translateY(-5px);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.gradient_card {
|
||||
position: relative;
|
||||
background: transparent;
|
||||
min-width: 260px;
|
||||
min-height: 300px;
|
||||
box-shadow: 0px 10px 40px #cec7c7;
|
||||
border:1px solid rgba(0, 0, 0, 0.4) ;
|
||||
box-shadow: 0px 10px 40px #2d2b2b;
|
||||
border-radius: 5px;
|
||||
/* overflow: hidden; */
|
||||
}
|
||||
|
|
@ -286,21 +352,44 @@ main.hero_section {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
background: inherit;
|
||||
scale: 1.02;
|
||||
filter: blur(30px);
|
||||
filter: blur(20px);
|
||||
z-index: -1;
|
||||
/* -webkit-animation: rotate-center 0.4s ease-in-out both; */
|
||||
/* animation: rotate-center 0.4s ease-in-out both; */
|
||||
}
|
||||
|
||||
/* @-webkit-keyframes rotate-center {
|
||||
0% {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes rotate-center {
|
||||
0% {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
} */
|
||||
|
||||
.gradient_info {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
background: linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,.6));
|
||||
}
|
||||
|
||||
.colors {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
background: linear-gradient(to top,rgba(0,0,0,.2),rgba(0,0,0,.2));
|
||||
-webkit-backdrop-filter: blur(25px);
|
||||
backdrop-filter: blur(25px);
|
||||
padding: 10px 20px;
|
||||
|
|
@ -336,7 +425,7 @@ input[type="color"]::-moz-color-swatch {
|
|||
}
|
||||
|
||||
.title_with_copy_btn {
|
||||
background: #fff;
|
||||
background: transparent;
|
||||
padding-inline: 15px;
|
||||
padding-top: 8px;
|
||||
display: flex;
|
||||
|
|
@ -349,25 +438,36 @@ input[type="color"]::-moz-color-swatch {
|
|||
font-size: 1.3rem;
|
||||
line-height: 24px;
|
||||
text-transform: capitalize;
|
||||
font-family: 'Lobster Two', cursive;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.title_with_copy_btn button {
|
||||
font-size: 1.6rem;
|
||||
color: #a5abae;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.title_with_copy_btn button:hover
|
||||
{
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.title_with_copy_btn button ion-icon {
|
||||
--ionicon-stroke-width: 56px;
|
||||
--ionicon-stroke-width: 32px;
|
||||
}
|
||||
|
||||
.title_with_copy_btn button:hover ion-icon {
|
||||
--ionicon-stroke-width: 42px;
|
||||
}
|
||||
|
||||
.gradient_info p {
|
||||
background: #fff;
|
||||
background:transparent;
|
||||
padding-inline: 15px;
|
||||
padding-bottom: 8px;
|
||||
padding-top: 6px;
|
||||
color: #adb1b5;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 1rem;
|
||||
line-height: 24px;
|
||||
font-weight: 600;
|
||||
|
|
@ -503,11 +603,14 @@ button.subscribe ion-icon {
|
|||
line-height: 24px;
|
||||
}
|
||||
|
||||
|
||||
.contributor_desc img.profile {
|
||||
width: 80px;
|
||||
border-radius: 50%;
|
||||
border: 5px solid rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
|
||||
.desc .title {
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
626
css/white.css
Normal file
626
css/white.css
Normal file
|
|
@ -0,0 +1,626 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
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 */
|
||||
span#notify_toast {
|
||||
position: fixed;
|
||||
top: 90%;
|
||||
right: 5%;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
backdrop-filter: blur(110px);
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
color: #fff;
|
||||
font-family: sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
z-index: 2;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.hide_toast {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.show_toast {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* code for create gradient dropdoan */
|
||||
.color_maker {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 22;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.color_maker_close {
|
||||
top: -100%;
|
||||
}
|
||||
|
||||
#gradient_card_edit {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#gradient_card_edit input[type="text"] {
|
||||
color: whitesmoke;
|
||||
margin-top: 3em;
|
||||
}
|
||||
|
||||
#gradient_card_edit #close {
|
||||
position: absolute;
|
||||
top: 5%;
|
||||
right: 5%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
#gradient_card_edit #close:hover {
|
||||
scale: 1.5;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
#color_inputs button {
|
||||
font-size: 1.4rem;
|
||||
color: #000;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#color_inputs button ion-icon {
|
||||
--ionicon-stroke-width: 26px;
|
||||
}
|
||||
|
||||
/* make color maker div responsive */
|
||||
@media screen and (max-width: 380px) {
|
||||
.color_maker {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.color_maker .gradient_card {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.color_maker .gradient_card::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
min-height: 65vh;
|
||||
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
background: linear-gradient(to right, #6d28d9, #db2777);
|
||||
padding-inline: 8%;
|
||||
overflow-x: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.container::before
|
||||
{
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
background: linear-gradient(to top,rgba(255, 255, 255, 1),transparent);
|
||||
/* backdrop-filter: blur(20px); */
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #ffffff4e;
|
||||
}
|
||||
|
||||
nav h1.logo_text {
|
||||
padding-block: 1.5rem;
|
||||
font-size: 20px;
|
||||
line-height: 32px;
|
||||
color: #ffffffd6;
|
||||
}
|
||||
|
||||
nav #theme_toggler {
|
||||
position: relative;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
border: 2px solid #fcfcfb9d;
|
||||
}
|
||||
|
||||
nav #theme_toggler:hover {
|
||||
scale: 1.1;
|
||||
}
|
||||
|
||||
nav #theme_toggler ion-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
main.hero_section {
|
||||
padding-block: 3.5rem;
|
||||
}
|
||||
|
||||
.hero_section h2 {
|
||||
font-size: 36px;
|
||||
line-height: 40px;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.form {
|
||||
margin-top: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.form input {
|
||||
padding: 12px 24px;
|
||||
width: min(100%, 350px);
|
||||
border-radius: 5px;
|
||||
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.form input::placeholder {
|
||||
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.form input:hover,
|
||||
.form input:focus {
|
||||
outline: 3px solid rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.form a.btn {
|
||||
padding: 12px 24px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 5px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form a.btn ion-icon {
|
||||
scale: 1.4;
|
||||
--ionicon-stroke-width: 46px;
|
||||
}
|
||||
|
||||
.form a.btn:hover {
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
/* make hero section fully responsive */
|
||||
@media screen and (max-width: 640px) {
|
||||
.container {
|
||||
padding-inline: 15px;
|
||||
background: linear-gradient(90deg,
|
||||
#6d28d9,
|
||||
#db2777,
|
||||
#feac5e,
|
||||
#c779d0,
|
||||
#4bc0c8);
|
||||
background-size: 600% 600%;
|
||||
animation: gradient 16s ease infinite;
|
||||
}
|
||||
|
||||
.hero_section h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.form {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.form input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form a {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@keyframes gradient {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* gradient container section */
|
||||
|
||||
.gradient_container {
|
||||
max-width: 100vw;
|
||||
padding-block: 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:hover::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: inherit;
|
||||
scale: 1.02;
|
||||
filter: blur(30px);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.gradient_info {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
||||
.colors {
|
||||
background: rgba(255, 255, 255, 0.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;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type="color"]::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input[type="color"]::-webkit-color-swatch {
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
input[type="color"]::-moz-color-swatch {
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.title_with_copy_btn {
|
||||
background: #fff;
|
||||
padding-inline: 15px;
|
||||
padding-top: 8px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.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 {
|
||||
background: #fff;
|
||||
padding-inline: 15px;
|
||||
padding-bottom: 8px;
|
||||
padding-top: 6px;
|
||||
color: #adb1b5;
|
||||
font-size: 1rem;
|
||||
line-height: 24px;
|
||||
font-weight: 600;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
||||
@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: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 4rem 8%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
justify-content: center;
|
||||
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
color: #374151;
|
||||
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: #ffffff;
|
||||
}
|
||||
|
||||
.subscription_form {
|
||||
max-width: 650px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
footer input[type="email"] {
|
||||
padding: 10px;
|
||||
border: 2px solid #d1d5db;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(30px);
|
||||
font-size: 0.8rem;
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
footer input[type="email"]::placeholder {
|
||||
padding: 10px;
|
||||
font-size: 0.8rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
footer input[type="email"]:focus {
|
||||
border: 1px solid #7c3aed;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button.subscribe {
|
||||
padding: 12px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
background: linear-gradient(to right, #6d28d9, #db2777);
|
||||
color: #ffffff;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
border-radius: 5px;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
button.subscribe:hover {
|
||||
background: linear-gradient(90deg, #fd746c, #ff9068);
|
||||
transform: translateY(-10%);
|
||||
box-shadow: 0px 3px 10px #c2c6cc;
|
||||
}
|
||||
|
||||
button.subscribe ion-icon {
|
||||
font-size: 1.2rem;
|
||||
--ionicon-stroke-width: 36px;
|
||||
}
|
||||
|
||||
.contributor_desc {
|
||||
margin-top: 2rem;
|
||||
max-width: 650px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 2rem;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.contributor_desc img.profile {
|
||||
width: 80px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.desc .title {
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.desc .detailed {
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
color: #e7e7e7;
|
||||
}
|
||||
|
||||
.desc a {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
border-bottom: 2px solid;
|
||||
}
|
||||
|
||||
.social_links {
|
||||
margin-top: 5rem;
|
||||
display: flex;
|
||||
gap: 1.8rem;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.social_links a {
|
||||
font-size: 1.3rem;
|
||||
color: #fff;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
|
||||
.social_links a:hover {
|
||||
color: #e3e3e3;
|
||||
transform: translateY(-20%);
|
||||
}
|
||||
|
||||
p.copyright {
|
||||
margin-top: 0.5rem;
|
||||
color: #d4d4d4;
|
||||
font-size: 1rem;
|
||||
line-height: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 510px) {
|
||||
footer {
|
||||
padding: 1rem 15px;
|
||||
}
|
||||
|
||||
footer p.text {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.subscription_form {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.subscription_form .subscribe {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.contributor_desc {
|
||||
/* flex-direction: column; */
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.desc .detailed.d2 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
BIN
images/shyam_tala.png
Normal file
BIN
images/shyam_tala.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 313 KiB |
309
index.html
309
index.html
|
|
@ -1,207 +1,152 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<!-- favicon -->
|
||||
<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"
|
||||
/>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<title>🌈Monogradients🎉</title>
|
||||
<!-- favicon -->
|
||||
<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" />
|
||||
|
||||
<!-- circular range slider -->
|
||||
<link rel="stylesheet" href="./dist/jquery.lcnCircleRangeSelect.css" />
|
||||
<script defer src="./dist/jquery.lcnCircleRangeSelect.js"></script>
|
||||
<title>🌈Monogradients🎉</title>
|
||||
|
||||
<!-- general style sheet -->
|
||||
<link rel="stylesheet" href="./style.css" />
|
||||
</head>
|
||||
<!-- circular range slider -->
|
||||
<link rel="stylesheet" href="./dist/jquery.lcnCircleRangeSelect.css" />
|
||||
<script defer src="./dist/jquery.lcnCircleRangeSelect.js"></script>
|
||||
|
||||
<body>
|
||||
<div class="color_maker color_maker_close">
|
||||
<div class="gradient_card" id="gradient_card_edit">
|
||||
<button id="close">
|
||||
<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>
|
||||
<input
|
||||
class="color colorinput"
|
||||
type="color"
|
||||
value="#6d28d9"
|
||||
id="c1"
|
||||
oninput="generateGradient()"
|
||||
/>
|
||||
<input
|
||||
class="color colorinput"
|
||||
type="color"
|
||||
value="#db2777"
|
||||
id="c2"
|
||||
oninput="generateGradient()"
|
||||
/>
|
||||
</div>
|
||||
<!-- general style sheet -->
|
||||
<link rel="stylesheet" href="./css/white.css" id="css_link" />
|
||||
</head>
|
||||
|
||||
<div class="title_with_copy_btn">
|
||||
<button
|
||||
class="copy_to_clipboard"
|
||||
id="color_maker_copy_btn"
|
||||
data-clipboard-text="background:linear-gradient(to right, #6d28d9, #db2777);"
|
||||
>
|
||||
<ion-icon
|
||||
name="copy-outline"
|
||||
role="img"
|
||||
class="md hydrated"
|
||||
aria-label="copy outline"
|
||||
>
|
||||
</ion-icon>
|
||||
</button>
|
||||
</div>
|
||||
<body>
|
||||
<div class="color_maker color_maker_close">
|
||||
<div class="gradient_card" id="gradient_card_edit">
|
||||
<button id="close">
|
||||
<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>
|
||||
<input class="color colorinput" type="color" value="#6d28d9" id="c1" oninput="generateGradient()" />
|
||||
<input class="color colorinput" type="color" value="#db2777" id="c2" oninput="generateGradient()" />
|
||||
</div>
|
||||
|
||||
<div class="title_with_copy_btn">
|
||||
<button class="copy_to_clipboard" id="color_maker_copy_btn"
|
||||
data-clipboard-text="background:linear-gradient(to right, #6d28d9, #db2777);">
|
||||
<ion-icon name="copy-outline" role="img" class="md hydrated" aria-label="copy outline">
|
||||
</ion-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- notifier -->
|
||||
<span id="notify_toast" class="hide_toast">color copied!</span>
|
||||
<!-- notifier -->
|
||||
<span id="notify_toast" class="hide_toast">color copied!</span>
|
||||
|
||||
<div class="container">
|
||||
<nav>
|
||||
<h1 class="logo_text">🌈Monogradients🎉</h1>
|
||||
</nav>
|
||||
<div class="container">
|
||||
<nav>
|
||||
<h1 class="logo_text">🌈Monogradients🎉</h1>
|
||||
<button id="theme_toggler"><ion-icon name="moon"></ion-icon></button>
|
||||
</nav>
|
||||
|
||||
<main class="hero_section">
|
||||
<h2>Explore a constantly updated library of gradients,</h2>
|
||||
<h2>curated by the community.</h2>
|
||||
<main class="hero_section">
|
||||
<h2>Explore a constantly updated library of 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 class="gradient_container">
|
||||
<!-- color data comes from below script -->
|
||||
<script src="./constants/meshGradientCard.js"></script>
|
||||
<script src="./constants/gradientCard.js"></script>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p class="text">
|
||||
Join my newsletter to hear about new projects, content and articles that
|
||||
I publish.
|
||||
</p>
|
||||
<div class="subscription_form">
|
||||
<input 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="gradient_container">
|
||||
<!-- color data comes from below script -->
|
||||
<script src="./constants/meshGradientCard.js"></script>
|
||||
<script src="./constants/gradientCard.js"></script>
|
||||
<div class="contributor_desc">
|
||||
<img src="./images/shyam_tala.png" class="profile" alt="" />
|
||||
<div class="desc">
|
||||
<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 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>
|
||||
|
||||
<footer>
|
||||
<p class="text">
|
||||
Join my newsletter to hear about new projects, content and articles that
|
||||
I publish.
|
||||
</p>
|
||||
<div class="subscription_form">
|
||||
<input
|
||||
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="social_links">
|
||||
<a href="https://twitter.com/ShyamTala9">
|
||||
<ion-icon name="logo-twitter"></ion-icon>
|
||||
</a>
|
||||
<a href="https://www.instagram.com/shyamtala_official/">
|
||||
<ion-icon name="logo-instagram"></ion-icon>
|
||||
</a>
|
||||
<a href="https://github.com/shyamtala003">
|
||||
<ion-icon name="logo-github"></ion-icon>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/in/shyam-tala-666828169/">
|
||||
<ion-icon name="logo-linkedin"></ion-icon>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="contributor_desc">
|
||||
<img src="./images/shyam_tala.jpg" class="profile" alt="" />
|
||||
<div class="desc">
|
||||
<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 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>
|
||||
<p class="copyright">
|
||||
©
|
||||
<script>
|
||||
let year = new Date().getFullYear();
|
||||
document.write(year);
|
||||
</script>
|
||||
Monogradient. All rights reserved.
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<div class="social_links">
|
||||
<a href="https://twitter.com/ShyamTala9">
|
||||
<ion-icon name="logo-twitter"></ion-icon>
|
||||
</a>
|
||||
<a href="https://www.instagram.com/shyamtala_official/">
|
||||
<ion-icon name="logo-instagram"></ion-icon>
|
||||
</a>
|
||||
<a href="https://github.com/shyamtala003">
|
||||
<ion-icon name="logo-github"></ion-icon>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/in/shyam-tala-666828169/">
|
||||
<ion-icon name="logo-linkedin"></ion-icon>
|
||||
</a>
|
||||
</div>
|
||||
<!-- ion icon cdn script -->
|
||||
<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>
|
||||
|
||||
<p class="copyright">
|
||||
©
|
||||
<script>
|
||||
let year = new Date().getFullYear();
|
||||
document.write(year);
|
||||
</script>
|
||||
Monogradient. All rights reserved.
|
||||
</p>
|
||||
</footer>
|
||||
<!-- JQuery cdn -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"
|
||||
integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA=="
|
||||
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
|
||||
<!-- ion icon cdn script -->
|
||||
<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>
|
||||
<!-- copy to clipboard -->
|
||||
<script src="dist/clipboard.min.js"></script>
|
||||
|
||||
<!-- JQuery cdn -->
|
||||
<script
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"
|
||||
integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"
|
||||
></script>
|
||||
<!-- main script -->
|
||||
<script src="./main.js"></script>
|
||||
</body>
|
||||
|
||||
<!-- copy to clipboard -->
|
||||
<script src="dist/clipboard.min.js"></script>
|
||||
|
||||
<!-- main script -->
|
||||
<script src="./main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
19
main.js
19
main.js
|
|
@ -1,3 +1,22 @@
|
|||
// theme toggler
|
||||
let themeTogglerBtn=document.getElementById('theme_toggler');
|
||||
let styleLink=document.getElementById('css_link');
|
||||
|
||||
themeTogglerBtn.addEventListener("click",()=>{
|
||||
let icon=Array.from(themeTogglerBtn.children);
|
||||
if(icon[0].name==="moon")
|
||||
{
|
||||
icon[0].setAttribute("name","sunny");
|
||||
styleLink.setAttribute("href","./css/dark.css");
|
||||
}else
|
||||
{
|
||||
icon[0].setAttribute("name","moon");
|
||||
styleLink.setAttribute("href","./css/white.css");
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
// copy to clipboard
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue