diff options
| -rw-r--r-- | src/app.scss | 19 | ||||
| -rw-r--r-- | src/lib/assets/wave1.svg | 1 | ||||
| -rw-r--r-- | src/lib/assets/wave2.svg | 1 | ||||
| -rw-r--r-- | src/routes/+page.svelte | 7 |
4 files changed, 25 insertions, 3 deletions
diff --git a/src/app.scss b/src/app.scss index d60437a..a8669f5 100644 --- a/src/app.scss +++ b/src/app.scss @@ -8,6 +8,8 @@ body { background-color: #1e1e2e; color: #a6fbb2; font-family: 'Rubik', sans-serif; + width: 100%; + overflow: hidden; } .ii { @@ -31,3 +33,20 @@ body { width: 100%; z-index: 100; } + +.wave { + position: absolute; + top: 0; + max-width: 100vw; + max-height: 100vh; +} + +.wave1 { + left: 0; + transform: rotate(-45deg) translate(-30%, -80%); +} + +.wave2 { + right: 0; + transform: rotate(45deg) translate(50%, -90%); +} diff --git a/src/lib/assets/wave1.svg b/src/lib/assets/wave1.svg new file mode 100644 index 0000000..76699ab --- /dev/null +++ b/src/lib/assets/wave1.svg @@ -0,0 +1 @@ +<svg id="visual" viewBox="0 0 900 360" width="900" height="360" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="M0 196L18.8 198.3C37.7 200.7 75.3 205.3 112.8 195.3C150.3 185.3 187.7 160.7 225.2 146.7C262.7 132.7 300.3 129.3 337.8 141.3C375.3 153.3 412.7 180.7 450.2 189.3C487.7 198 525.3 188 562.8 188.7C600.3 189.3 637.7 200.7 675.2 195C712.7 189.3 750.3 166.7 787.8 159.7C825.3 152.7 862.7 161.3 881.3 165.7L900 170L900 0L881.3 0C862.7 0 825.3 0 787.8 0C750.3 0 712.7 0 675.2 0C637.7 0 600.3 0 562.8 0C525.3 0 487.7 0 450.2 0C412.7 0 375.3 0 337.8 0C300.3 0 262.7 0 225.2 0C187.7 0 150.3 0 112.8 0C75.3 0 37.7 0 18.8 0L0 0Z" fill="#a6fbb2" stroke-linecap="round" stroke-linejoin="miter"></path></svg>
\ No newline at end of file diff --git a/src/lib/assets/wave2.svg b/src/lib/assets/wave2.svg new file mode 100644 index 0000000..95d41a5 --- /dev/null +++ b/src/lib/assets/wave2.svg @@ -0,0 +1 @@ +<svg id="visual" viewBox="0 0 900 360" width="900" height="360" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="M0 179L18.8 188C37.7 197 75.3 215 112.8 223.5C150.3 232 187.7 231 225.2 214.7C262.7 198.3 300.3 166.7 337.8 146.7C375.3 126.7 412.7 118.3 450.2 124.7C487.7 131 525.3 152 562.8 155C600.3 158 637.7 143 675.2 153C712.7 163 750.3 198 787.8 190.2C825.3 182.3 862.7 131.7 881.3 106.3L900 81L900 0L881.3 0C862.7 0 825.3 0 787.8 0C750.3 0 712.7 0 675.2 0C637.7 0 600.3 0 562.8 0C525.3 0 487.7 0 450.2 0C412.7 0 375.3 0 337.8 0C300.3 0 262.7 0 225.2 0C187.7 0 150.3 0 112.8 0C75.3 0 37.7 0 18.8 0L0 0Z" fill="#a6fbb2" stroke-linecap="round" stroke-linejoin="miter"></path></svg>
\ No newline at end of file diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index f710315..938ebaf 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,13 +1,14 @@ <script lang="ts"> import '../app.scss' + import wave1 from '$lib/assets/wave1.svg' + import wave2 from '$lib/assets/wave2.svg' </script> <svelte:head> <title>pml68</title> </svelte:head> +<img src={wave1} alt="Wave 1" class="wave wave1"> +<img src={wave2} alt="Wave 2" class="wave wave2"> <div class="container"> - <div class="ii"> - <h1>Hey boy</h1> - </div> </div> |
