village-hall
/
opnform
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

adding CSS transition to welcome page (#65)

This commit is contained in:
Ali 2023-01-10 15:28:17 +03:00 committed by GitHub
parent 977cd1647a
commit 997a86f734
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
resources/js/components/pages/welcome/Features.vue
View File

@ -84,7 +84,10 @@
</div> </div>
<div class="w-full md:w-1/2 lg:w-7/12 flex items-center justify-center relative w-full" <div class="w-full md:w-1/2 lg:w-7/12 flex items-center justify-center relative w-full"
:class="{'md:pr-8':index%2==1, 'md:pl-8':index%2==0}"> :class="{'md:pr-8':index%2==1, 'md:pl-8':index%2==0}">
<img loading="lazy" class="block rounded-2xl w-full" <img loading="lazy" class="
ease-in-out delay-300 rounded shadow-lg shadow-blue-600/50 hover:skew-y-3 hover:border-blue-600
transition ease-in-out hover:-translate-y-1 hover:scale-110 duration-300
block rounded-2xl w-full"
:src="asset(step.img)" alt="cover-product"> :src="asset(step.img)" alt="cover-product">
</div> </div>
</div> </div>

5
resources/js/pages/welcome.vue
View File

@ -46,7 +46,10 @@
</div> </div>
</div> </div>
</div> </div>
<div class="w-full mt-8 relative px-6 mx-auto max-w-4xl sm:px-10 lg:px-0 z-10 flex items-center justify-center"> <div class="
ease-in-out delay-300 rounded shadow-lg shadow-blue-600/50 hover:skew-z-3 hover:border-blue-600
transition ease-in-out hover:-translate-y-1 hover:scale-110 duration-300
w-full mt-8 relative px-6 mx-auto max-w-4xl sm:px-10 lg:px-0 z-10 flex items-center justify-center">
<img loading="lazy" class="w-full shadow-2xl rounded-xl block max-w-2xl lg:max-w-5xl" <img loading="lazy" class="w-full shadow-2xl rounded-xl block max-w-2xl lg:max-w-5xl"
:src="asset('img/pages/welcome/product-cover.jpg')" alt="cover-product"> :src="asset('img/pages/welcome/product-cover.jpg')" alt="cover-product">
</div> </div>