RhenCloud/Cloud-Blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update navbar

Browse Source 
Signed-off-by: nurRiyad <asadnurriyad@gmail.com>
This commit is contained in:
nurRiyad
2022-12-10 03:08:51 +06:00
parent b17cb182c0
commit fca51145ad
7 changed files with 8 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/img/wave.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.2 KiB

1
assets/svg/wave-haikei (1).svg
View File

@@ -1 +0,0 @@
<svg id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="900" height="600" fill="#002233"></rect><path d="M0 451L15 459.3C30 467.7 60 484.3 90 473.8C120 463.3 150 425.7 180 409.8C210 394 240 400 270 413.3C300 426.7 330 447.3 360 449.7C390 452 420 436 450 427C480 418 510 416 540 432.5C570 449 600 484 630 500.2C660 516.3 690 513.7 720 511.2C750 508.7 780 506.3 810 493C840 479.7 870 455.3 885 443.2L900 431L900 601L885 601C870 601 840 601 810 601C780 601 750 601 720 601C690 601 660 601 630 601C600 601 570 601 540 601C510 601 480 601 450 601C420 601 390 601 360 601C330 601 300 601 270 601C240 601 210 601 180 601C150 601 120 601 90 601C60 601 30 601 15 601L0 601Z" fill="#4FACF7" stroke-linecap="round" stroke-linejoin="miter"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 866 B

1
assets/svg/wave-haikei (2).svg
View File

@@ -1 +0,0 @@
<svg id="visual" viewBox="0 0 900 450" width="900" height="450" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="900" height="450" fill="#c3f8f5"></rect><path d="M0 338L15 344.2C30 350.3 60 362.7 90 354.8C120 347 150 319 180 307.2C210 295.3 240 299.7 270 309.7C300 319.7 330 335.3 360 337.2C390 339 420 327 450 320.2C480 313.3 510 311.7 540 324C570 336.3 600 362.7 630 374.8C660 387 690 385 720 383C750 381 780 379 810 369C840 359 870 341 885 332L900 323L900 451L885 451C870 451 840 451 810 451C780 451 750 451 720 451C690 451 660 451 630 451C600 451 570 451 540 451C510 451 480 451 450 451C420 451 390 451 360 451C330 451 300 451 270 451C240 451 210 451 180 451C150 451 120 451 90 451C60 451 30 451 15 451L0 451Z" fill="#4FACF7" stroke-linecap="round" stroke-linejoin="miter"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 858 B

1
assets/svg/wave-haikei.svg
View File

@@ -1 +0,0 @@
<svg id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="900" height="600" fill="#002233"></rect><path d="M0 457L21.5 462.3C43 467.7 86 478.3 128.8 481.3C171.7 484.3 214.3 479.7 257.2 465.7C300 451.7 343 428.3 385.8 421.5C428.7 414.7 471.3 424.3 514.2 442.7C557 461 600 488 642.8 494.5C685.7 501 728.3 487 771.2 467.8C814 448.7 857 424.3 878.5 412.2L900 400L900 601L878.5 601C857 601 814 601 771.2 601C728.3 601 685.7 601 642.8 601C600 601 557 601 514.2 601C471.3 601 428.7 601 385.8 601C343 601 300 601 257.2 601C214.3 601 171.7 601 128.8 601C86 601 43 601 21.5 601L0 601Z" fill="#0066FF" stroke-linecap="round" stroke-linejoin="miter"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 774 B

9
components/svg/Wave.vue
View File

@@ -1,9 +0,0 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path
fill="#a2d9ff"
fill-opacity="1"
d="M0,224L60,208C120,192,240,160,360,138.7C480,117,600,107,720,122.7C840,139,960,181,1080,197.3C1200,213,1320,203,1380,197.3L1440,192L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z"
></path>
</svg>
</template>

2
layouts/default.vue
View File

@@ -3,7 +3,7 @@
<div class="h-10 bg-[#a2d9ff]"></div> <div class="h-10 bg-[#a2d9ff]"></div>
<navbar-com /> <navbar-com />
<div class="h-10 bg-[#a2d9ff]"></div> <div class="h-10 bg-[#a2d9ff]"></div>
<svg-wave /> <img src="@/assets/img/wave.png" class="w-full" alt="this is wave image" />
<div> <div>
<slot /> <slot />
</div> </div>

251
pages/index.vue
View File

@@ -3,249 +3,12 @@ let x = ref(10);
</script> </script>
<template> <template>
<div class="text-center"> <div class="container px-3 mx-auto max-w-6xl flex">
<h1 class="text-3xl">Index page</h1> <div>
<h4>Count = {{ x }}</h4> <h1>This is main section</h1>
<input type="button" @click="x += 1" value="increase count" /> </div>
<p> <div>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a <h1>This is sub section</h1>
sint qui sit, totam minima modi placeat quaerat dolore quo. </div>
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum a
sint qui sit, totam minima modi placeat quaerat dolore quo.
</p>
</div> </div>
</template> </template>