Finished styling services section on main page
This commit is contained in:
+9
-10
@@ -98,7 +98,6 @@ function grid() {
|
|||||||
<div class='max-w-7xl mx-auto px-4 sm:px-6 lg:px-8'>
|
<div class='max-w-7xl mx-auto px-4 sm:px-6 lg:px-8'>
|
||||||
<!-- Centered Header -->
|
<!-- Centered Header -->
|
||||||
<div class='text-center max-w-3xl mx-auto mb-16' data-motion='header' style='opacity: 1;'>
|
<div class='text-center max-w-3xl mx-auto mb-16' data-motion='header' style='opacity: 1;'>
|
||||||
<!-- <h1 class='text-indigo-400 text-l font-bold'>Balls</h1> -->
|
|
||||||
<h2 class='text-slate-900 dark:text-white text-4xl sm:text-5xl font-bold mb-6'>
|
<h2 class='text-slate-900 dark:text-white text-4xl sm:text-5xl font-bold mb-6'>
|
||||||
Services
|
Services
|
||||||
</h2>
|
</h2>
|
||||||
@@ -160,10 +159,10 @@ function grid() {
|
|||||||
|
|
||||||
|
|
||||||
<!-- ROW 2 -->
|
<!-- ROW 2 -->
|
||||||
<div data-motion='card' class='p-8 bg-fuchsia-700/40 rounded-3xl flex flex-col justify-between'>
|
<div data-motion='card' class='p-8 bg-fuchsia-800/80 dark:bg-fuchsia-700/40 rounded-3xl flex flex-col justify-between'>
|
||||||
<a href='https://navidrome.happylizard.me'>
|
<a href='https://gitea.happylizard.me'>
|
||||||
<div>
|
<div>
|
||||||
<div data-motion='icon' class='w-20 h-20 rounded-xl flex items-center justify-center mb-6'>
|
<div data-motion='icon' class='w-25 h-20 rounded-xl flex items-center justify-center mb-6'>
|
||||||
<img src='assets/img/gitea.png'>
|
<img src='assets/img/gitea.png'>
|
||||||
</div>
|
</div>
|
||||||
<h3 class='text-white text-xl font-semibold mb-3'>Gitea</h3>
|
<h3 class='text-white text-xl font-semibold mb-3'>Gitea</h3>
|
||||||
@@ -214,23 +213,23 @@ function grid() {
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div data-motion='card' class='p-6 bg-white dark:bg-neutral-800 rounded-3xl' style='opacity: 1; transform: translateY(0px); filter: blur(0px);'>
|
<div data-motion='card' class='p-6 bg-neutral-300 dark:bg-neutral-800 rounded-3xl' style='opacity: 1; transform: translateY(0px); filter: blur(0px);'>
|
||||||
<a href='https://convert.happylizard.me'>
|
<a href='https://convert.happylizard.me'>
|
||||||
<div data-motion='icon' class='w-15 h-15 flex items-center justify-center mb-5'>
|
<div data-motion='icon' class='w-20 h-20 flex items-center justify-center mb-5'>
|
||||||
<img src='assets/img/portal_runner.png'>
|
<img src='assets/img/portal_runner.png'>
|
||||||
</div>
|
</div>
|
||||||
<h3 class='text-slate-900 dark:text-white text-lg font-semibold mb-2'>Any-File converter</h3>
|
<h3 class='text-slate-900 dark:text-white text-lg font-semibold mb-2'>Any-File converter</h3>
|
||||||
<p class='text-slate-600 dark:text-neutral-400 text-sm'>
|
<p class='text-black dark:text-neutral-400 text-sm'>
|
||||||
A ffmpeg converter that attempts to take any file and convert it into another format SYNCRONOUSLY
|
A ffmpeg converter that attempts to take any file and convert it into another format SYNCRONOUSLY
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
<a data-motion='button' href='https://www.youtube.com/watch?v=btUbcsTbVA8' class='inline-flex items-center gap-2 text-white font-medium hover:gap-3 transition-all duration-300 w-fit mt-6'>
|
<a data-motion='button' href='https://www.youtube.com/watch?v=btUbcsTbVA8' class='inline-flex items-center gap-2 text-black dark:text-white font-medium hover:gap-3 transition-all duration-300 w-fit mt-6'>
|
||||||
Youtube video explaining it
|
Youtube video explaining it
|
||||||
<svg class='w-4 h-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
|
<svg class='w-4 h-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
|
||||||
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M17 8l4 4m0 0l-4 4m4-4H3'></path>
|
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M17 8l4 4m0 0l-4 4m4-4H3'></path>
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
<a data-motion='button' href='https://github.com/p2r3/convert' class='inline-flex items-center gap-2 text-white font-medium hover:gap-3 transition-all duration-300 w-fit mt-6'>
|
<a data-motion='button' href='https://github.com/p2r3/convert' class='inline-flex items-center gap-2 text-black dark:text-white font-medium hover:gap-3 transition-all duration-300 w-fit mt-6'>
|
||||||
Github to project
|
Github to project
|
||||||
<svg class='w-4 h-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
|
<svg class='w-4 h-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
|
||||||
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M17 8l4 4m0 0l-4 4m4-4H3'></path>
|
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M17 8l4 4m0 0l-4 4m4-4H3'></path>
|
||||||
@@ -238,7 +237,7 @@ function grid() {
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div data-motion='card' class='p-8 bg-blue-800/60 rounded-3xl flex flex-col justify-between'>
|
<div data-motion='card' class='p-8 bg-blue-800/80 rounded-3xl flex flex-col justify-between'>
|
||||||
<a href='https://copyparty.happylizard.me'>
|
<a href='https://copyparty.happylizard.me'>
|
||||||
<div>
|
<div>
|
||||||
<div data-motion='icon' class='w-20 h-20 rounded-xl flex items-center justify-center mb-6'>
|
<div data-motion='icon' class='w-20 h-20 rounded-xl flex items-center justify-center mb-6'>
|
||||||
|
|||||||
Reference in New Issue
Block a user