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

minor changes in bg-color => background-image

Browse source
This commit is contained in:
shyamtala003 2022-12-20 22:35:43 +05:30
parent 80c487c283
commit 2d18590dc6
8 changed files with 21 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
css/dark.css
View file

@ -143,7 +143,7 @@ span#notify_toast {
left: 0;
width: 100%;
height: 150px;
background: linear-gradient(to top,#010409,transparent);
background: linear-gradient(to top,#0b1121,transparent);
backdrop-filter: blur(20px);
z-index: -1;
}
@ -316,6 +316,7 @@ main.hero_section {
.gradient_container {
background: #010409;
max-width: 100vw;
min-height: 100vh;
padding-block: 2.5rem;
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@ -324,6 +325,11 @@ main.hero_section {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
gap: 5rem;
overflow-x: hidden;
background: url('../images/dark.jpg');
background-attachment: fixed;
background-repeat: no-repeat;
background-size:cover;
background-position: center;
}
@ -354,8 +360,8 @@ main.hero_section {
background: inherit;
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-animation: rotate-center 0.4s ease-in-out both;
animation: rotate-center 0.8s ease-in-out both; */
}
/* @-webkit-keyframes rotate-center {
@ -385,11 +391,11 @@ main.hero_section {
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));
background: linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,.6));
}
.colors {
background: linear-gradient(to top,rgba(0,0,0,.2),rgba(0,0,0,.2));
background: linear-gradient(to top,rgba(0,0,0,.4),rgba(0,0,0,.4));
-webkit-backdrop-filter: blur(25px);
backdrop-filter: blur(25px);
padding: 10px 20px;

9
css/white.css
View file

@ -139,7 +139,7 @@ span#notify_toast {
left: 0;
width: 100%;
height: 150px;
background: linear-gradient(to top,rgba(255, 255, 255, 1),transparent);
background: linear-gradient(to top,#e9e7f3,transparent);
/* backdrop-filter: blur(20px); */
z-index: -1;
}
@ -305,6 +305,7 @@ main.hero_section {
.gradient_container {
max-width: 100vw;
min-height: 100vh;
padding-block: 2.5rem;
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@ -313,6 +314,12 @@ main.hero_section {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
gap: 5rem;
overflow-x: hidden;
background: url('../images/light.jpg');
/* background-image: linear-gradient(180deg, rgba(255,255,255, 0.01), rgba(255,255,255, 1) 85%),radial-gradient(ellipse at top left, rgba(13,110,253, 0.5), transparent 50%),radial-gradient(ellipse at top right, rgba(255,228,132, 0.5), transparent 50%),radial-gradient(ellipse at center right, rgba(112.520718,44.062154,249.437846, 0.5), transparent 50%),radial-gradient(ellipse at center left, rgba(214,51,132, 0.5), transparent 50%); */
background-repeat: no-repeat;
background-size:cover;
background-position: center;
background-attachment: fixed;
}
.gradient_card {

1
images/cells.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(148 163 184 / 0.05)'><path d='M0 .5H31.5V32'/></svg>
Side by side

After

Width:  |  Height:  |  Size: 159 B

BIN
images/dark.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 60 KiB

BIN
images/dark2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 184 KiB

BIN
images/light.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
images/light2.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 38 KiB

2
index.html
View file

@ -18,7 +18,7 @@
<script defer src="./dist/jquery.lcnCircleRangeSelect.js"></script>
<!-- general style sheet -->
<link rel="stylesheet" href="./css/white.css" id="css_link" />
<link rel="stylesheet" href="./css/dark.css" id="css_link" />
</head>
<body>