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

animated background added in hero section

Browse source
This commit is contained in:
shyamtala003 2022-10-08 09:20:09 +05:30
parent eacd435e8f
commit 4ad335133b
1 changed files with 24 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
style.css
View file

@ -107,29 +107,45 @@ span#notify_toast {
@media screen and (max-width:380px) { @media screen and (max-width:380px) {
.color_maker { .color_maker {
width: 100%; width: 100%;
min-height:100vh; min-height: 100vh;
} }
.color_maker .gradient_card .color_maker .gradient_card {
{
width: 100%; width: 100%;
min-height:100vh; min-height: 100vh;
box-shadow: none; box-shadow: none;
} }
.color_maker .gradient_card::before .color_maker .gradient_card::before {
{
display: none; display: none;
} }
} }
.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";
background: linear-gradient(to right, #6d28d9, #db2777); background: linear-gradient(90deg, #6d28d9,#db2777,#feac5e, #c779d0, #4bc0c8);
/* background:linear-gradient(to right, #6d28d9, #db2777); */
background-size: 600% 600%;
padding-inline: 8%; padding-inline: 8%;
overflow-x: hidden; overflow-x: hidden;
animation: gradient 16s ease infinite;
} }
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
h1.logo_text { h1.logo_text {
padding-block: 1.5rem; padding-block: 1.5rem;
font-size: 20px; font-size: 20px;
@ -150,7 +166,7 @@ main.hero_section {
} }
.hero_section h2:nth-child(2) { .hero_section h2:nth-child(2) {
color: #c4b5fb; color: #ffffff;
} }
.form { .form {