mirror of
https://github.com/remvze/moodist.git
synced 2025-09-29 15:30:49 -04:00
style: add gradient line
This commit is contained in:
parent
287d7b33fb
commit
ea722eabd2
18
src/components/gradient/gradient.module.css
Normal file
18
src/components/gradient/gradient.module.css
Normal 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
5
src/components/gradient/gradient.tsx
Normal 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
1
src/components/gradient/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export { Gradient } from './gradient';
|
@ -1,6 +1,7 @@
|
|||||||
---
|
---
|
||||||
import Layout from '@/layouts/layout.astro';
|
import Layout from '@/layouts/layout.astro';
|
||||||
|
|
||||||
|
import { Gradient } from '@/components/gradient';
|
||||||
import { Hero } from '@/components/hero';
|
import { Hero } from '@/components/hero';
|
||||||
import { App } from '@/components/app';
|
import { App } from '@/components/app';
|
||||||
import { Footer } from '@/components/footer';
|
import { Footer } from '@/components/footer';
|
||||||
@ -8,6 +9,7 @@ import { AboutSection, WhySection, ReadySection } from '@/components/sections';
|
|||||||
---
|
---
|
||||||
|
|
||||||
<Layout title="Welcome to Astro.">
|
<Layout title="Welcome to Astro.">
|
||||||
|
<Gradient />
|
||||||
<Hero />
|
<Hero />
|
||||||
<App client:load />
|
<App client:load />
|
||||||
<AboutSection />
|
<AboutSection />
|
||||||
|
Loading…
x
Reference in New Issue
Block a user