Cutlery/moodist
1
0
Fork 0
mirror of https://github.com/remvze/moodist.git synced 2025-09-29 15:30:49 -04:00
Code Issues Packages Projects Releases Wiki Activity

style: add gradient line

Browse Source
This commit is contained in:
MAZE 2023-11-05 15:22:52 +03:30
parent 287d7b33fb
commit ea722eabd2
4 changed files with 26 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/gradient/gradient.module.css Normal file
View File

@ -0,0 +1,18 @@
.gradient {
position: relative;
width: 100%;
height: 5px;
background: linear-gradient(90deg, #fcb0f3, #5b27ec);
&::before {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: inherit;
content: '';
filter: blur(10px);
}
}

5
src/components/gradient/gradient.tsx Normal file
View File

@ -0,0 +1,5 @@
import styles from './gradient.module.css';
export function Gradient() {
return <div className={styles.gradient} />;
}

1
src/components/gradient/index.ts Normal file
View File

@ -0,0 +1 @@
export { Gradient } from './gradient';

2
src/pages/index.astro
View File

@ -1,6 +1,7 @@
---
import Layout from '@/layouts/layout.astro';
import { Gradient } from '@/components/gradient';
import { Hero } from '@/components/hero';
import { App } from '@/components/app';
import { Footer } from '@/components/footer';
@ -8,6 +9,7 @@ import { AboutSection, WhySection, ReadySection } from '@/components/sections';
---
<Layout title="Welcome to Astro.">
<Gradient />
<Hero />
<App client:load />
<AboutSection />