tuxarmy/persegi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: tambah efek batas section miring dengan clip-path

Browse Source
This commit is contained in:
tuxarmy
2026-04-03 05:57:32 +07:00
parent 61ff827ca0
commit 3a4e8a271c
2 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/public/home.blade.php
+3 -3
View File
@@ -46,8 +46,8 @@
</section> </section>
{{-- Stats --}} {{-- Stats --}}
<section class="border-y border-gray-100 bg-gray-50"> <section class="skew-both bg-gray-50">
<div class="max-w-6xl mx-auto px-6 py-12 grid grid-cols-3 gap-8 text-center"> <div class="max-w-6xl mx-auto px-6 py-4 grid grid-cols-3 gap-8 text-center">
<div> <div>
<div class="text-4xl font-bold">{{ $totalAnggota }}</div> <div class="text-4xl font-bold">{{ $totalAnggota }}</div>
<div class="text-sm text-gray-500 mt-1">Anggota Aktif</div> <div class="text-sm text-gray-500 mt-1">Anggota Aktif</div>
@@ -84,7 +84,7 @@
</section> </section>
{{-- CTA --}} {{-- CTA --}}
<section class="bg-gray-900 text-white"> <section class="skew-both bg-gray-900 text-white">
<div class="max-w-6xl mx-auto px-6 py-24 grid md:grid-cols-2 gap-16 items-center"> <div class="max-w-6xl mx-auto px-6 py-24 grid md:grid-cols-2 gap-16 items-center">
<div> <div>
<p class="text-xs font-semibold text-gray-400 uppercase tracking-widest mb-4 flex items-center gap-2"> <p class="text-xs font-semibold text-gray-400 uppercase tracking-widest mb-4 flex items-center gap-2">
resources/views/public/layout.blade.php
+3
View File
@@ -10,6 +10,9 @@
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prose p { margin-bottom: 1rem; } .prose p { margin-bottom: 1rem; }
.skew-top { clip-path: polygon(0 4%, 100% 0, 100% 100%, 0 100%); margin-top: -2rem; padding-top: 5rem; }
.skew-bottom { clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%); padding-bottom: 5rem; }
.skew-both { clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%); margin-top: -2rem; padding-top: 5rem; padding-bottom: 5rem; }
</style> </style>
</head> </head>
<body class="bg-white text-gray-900 font-sans antialiased"> <body class="bg-white text-gray-900 font-sans antialiased">