Skip to content

Commit

Permalink
Final Test Adjustment
Browse files Browse the repository at this point in the history
  • Loading branch information
@YOLO-GIT
YOLO-GIT committed Mar 16, 2024
1 parent 9edeecd commit 31506d5
Show file tree
Hide file tree
Showing 3 changed files with 91 additions and 67 deletions.
8 changes: 4 additions & 4 deletions example/src/input.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,11 @@
/* Adjust as needed */
}

/* .parallax_third {
.parallax_third {
@apply relative flex justify-center items-center;
height: 60vh;
Adjust as needed
} */
height: 110vh;
/* Adjust as needed */
}

/* For images inside .parallax */
.parallax img {
Expand Down
76 changes: 70 additions & 6 deletions example/src/output.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1066,12 +1066,6 @@ input:checked + .toggle-bg {
/* Adjust as needed */
}

/* .parallax_third {
@apply relative flex justify-center items-center;
height: 60vh;
Adjust as needed
} */

/* For images inside .parallax */

.parallax img {
Expand Down Expand Up @@ -1440,6 +1434,10 @@ body::-webkit-scrollbar {
height: auto;
}

.h-full {
height: 100%;
}

.max-h-full {
max-height: 100%;
}
Expand Down Expand Up @@ -1472,6 +1470,10 @@ body::-webkit-scrollbar {
width: 100%;
}

.w-6 {
width: 1.5rem;
}

.max-w-2xl {
max-width: 42rem;
}
Expand Down Expand Up @@ -2104,6 +2106,25 @@ body::-webkit-scrollbar {
}
}

@media (min-width: 1280px) {
.xl\:parallax_third {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 110vh;
/* Adjust as needed */
}

.xl\:parallax_third img {
pointer-events: none;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
}
}

.hover\:scale-105:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
Expand Down Expand Up @@ -2323,6 +2344,15 @@ body::-webkit-scrollbar {
}

@media (min-width: 640px) {
.sm\:relative {
position: relative;
}

.sm\:mx-0 {
margin-left: 0px;
margin-right: 0px;
}

.sm\:mb-0 {
margin-bottom: 0px;
}
Expand All @@ -2335,14 +2365,30 @@ body::-webkit-scrollbar {
height: 2.5rem;
}

.sm\:max-h-full {
max-height: 100%;
}

.sm\:w-10 {
width: 2.5rem;
}

.sm\:w-full {
width: 100%;
}

.sm\:max-w-2xl {
max-width: 42rem;
}

.sm\:justify-start {
justify-content: flex-start;
}

.sm\:p-4 {
padding: 1rem;
}

.sm\:text-left {
text-align: left;
}
Expand All @@ -2368,6 +2414,10 @@ body::-webkit-scrollbar {
inset: 0px;
}

.md\:h-auto {
height: auto;
}

.md\:p-5 {
padding: 1.25rem;
}
Expand All @@ -2384,6 +2434,11 @@ body::-webkit-scrollbar {
}

@media (min-width: 1024px) {
.lg\:mx-0 {
margin-left: 0px;
margin-right: 0px;
}

.lg\:flex {
display: flex;
}
Expand Down Expand Up @@ -2412,6 +2467,15 @@ body::-webkit-scrollbar {
}

@media (min-width: 1280px) {
.xl\:mx-0 {
margin-left: 0px;
margin-right: 0px;
}

.xl\:flex-col {
flex-direction: column;
}

.xl\:text-6xl {
font-size: 3.75rem;
line-height: 1;
Expand Down
74 changes: 17 additions & 57 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
</div>
</nav>

<section class="parallax_mobile lg:parallax md:parallax_mid">
<section class="parallax_mobile lg:parallax md:parallax_mid xl:parallax_third">
<!-- <img src="" id="struktur" alt="structure"> -->
<img src="example/bolls/Another Design/new_bg.png" id="bg" alt="bg" />
<img src="example/bolls/Another Design/shadow_left.png" id="shadow_left" alt="shadow_left" />
Expand Down Expand Up @@ -116,7 +116,7 @@ <h2 class="text-xs text-center sm:text-3xl sm:text-left font-semibold text-white
</p>
</section>

<section class="sec mx-7 mb-2 flex flex-wrap lg:flex-row justify-center items-center sm:justify-start">
<section class="sec mx-7 mb-2 flex flex-wrap lg:flex-row xl:flex-col justify-center items-center sm:justify-start">
<div
class="lg:max-w-xs max-w-none bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 mb-4 mx-2 transform transition-transform hover:scale-105 ease-in-out duration-500 hover:shadow-lg">
<div>
Expand All @@ -133,14 +133,6 @@ <h2 class="text-xs text-center sm:text-3xl sm:text-left font-semibold text-white
<!-- Modal footer -->
<div
class="flex items-center justify-between p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
<div>
<button data-modal-hide="default-modal" type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">ٱلْحَمْدُ
لِلَّٰهِ</button>
<button data-modal-hide="default-modal" type="button"
class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-red-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">سُبْحَانَ
اللَّه</button>
</div>
<h1 class="text-white font-semibold italic hover:text-red-500">
- YOLO-GIT
</h1>
Expand All @@ -164,14 +156,6 @@ <h1 class="text-white font-semibold italic hover:text-red-500">
<!-- Modal footer -->
<div
class="flex items-center justify-between p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
<div>
<button data-modal-hide="default-modal" type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">ٱلْحَمْدُ
لِلَّٰهِ</button>
<button data-modal-hide="default-modal" type="button"
class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-red-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">سُبْحَانَ
اللَّه</button>
</div>
<h1 class="text-white font-semibold italic hover:text-red-500">
- YOLO-GIT
</h1>
Expand All @@ -195,14 +179,6 @@ <h1 class="text-white font-semibold italic hover:text-red-500">
<!-- Modal footer -->
<div
class="flex items-center justify-between p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
<div>
<button data-modal-hide="default-modal" type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">ٱلْحَمْدُ
لِلَّٰهِ</button>
<button data-modal-hide="default-modal" type="button"
class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-red-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">سُبْحَانَ
اللَّه</button>
</div>
<h1 class="text-white font-semibold italic hover:text-red-500">
- YOLO-GIT
</h1>
Expand All @@ -218,22 +194,14 @@ <h1 class="text-white font-semibold italic hover:text-red-500">
</div>
</div>
<div id="default-four" tabindex="-1" aria-hidden="true"
class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-full md:h-auto max-h-full">
<div class="relative p-4 w-full max-w-2xl max-h-full">
<!-- Modal content -->
<div class="relative bg-slate-800 rounded-lg shadow">
<img src="example/bolls/Card/card_4.png">
<!-- Modal footer -->
<div
class="flex items-center justify-between p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
<div>
<button data-modal-hide="default-modal" type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">ٱلْحَمْدُ
لِلَّٰهِ</button>
<button data-modal-hide="default-modal" type="button"
class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-red-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">سُبْحَانَ
اللَّه</button>
</div>
<h1 class="text-white font-semibold italic hover:text-red-500">
- YOLO-GIT
</h1>
Expand All @@ -257,14 +225,6 @@ <h1 class="text-white font-semibold italic hover:text-red-500">
<!-- Modal footer -->
<div
class="flex items-center justify-between p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
<div>
<button data-modal-hide="default-modal" type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">ٱلْحَمْدُ
لِلَّٰهِ</button>
<button data-modal-hide="default-modal" type="button"
class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-red-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">سُبْحَانَ
اللَّه</button>
</div>
<h1 class="text-white font-semibold italic hover:text-red-500">
- YOLO-GIT
</h1>
Expand All @@ -288,14 +248,6 @@ <h1 class="text-white font-semibold italic hover:text-red-500">
<!-- Modal footer -->
<div
class="flex items-center justify-between p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
<div>
<button data-modal-hide="default-modal" type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">ٱلْحَمْدُ
لِلَّٰهِ</button>
<button data-modal-hide="default-modal" type="button"
class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-red-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">سُبْحَانَ
اللَّه</button>
</div>
<h1 class="text-white font-semibold italic hover:text-red-500">
- YOLO-GIT
</h1>
Expand Down Expand Up @@ -354,10 +306,12 @@ <h2 class="text-xs text-center sm:text-left sm:text-3xl font-semibold text-white
Sedekah itu amalan baik. Jadi sekiranya tidak keberatan, support saya dengan tekan link
dibawah.<br>👇👇👇
</p>
<script type="text/javascript" src="https://cdnjs.buymeacoffee.com/1.0.0/button.prod.min.js"
data-name="bmc-button" data-slug="YOLOGIT" data-color="#FF5F5F" data-emoji="" data-font="Cookie"
data-text="Buy me a coffee ❤️" data-outline-color="#000000" data-font-color="#ffffff"
data-coffee-color="#FFDD00"></script>
<div class="mx-auto lg:mx-0 xl:mx-0 sm:mx-0">
<script type="text/javascript" src="https://cdnjs.buymeacoffee.com/1.0.0/button.prod.min.js"
data-name="bmc-button" data-slug="YOLOGIT" data-color="#FF5F5F" data-emoji=""
data-font="Cookie" data-text="Buy me a coffee ❤️" data-outline-color="#000000"
data-font-color="#ffffff" data-coffee-color="#FFDD00"></script>
</div>
</div>
<div class="hidden lg:flex">
<video class="w-full h-auto max-w-full rounded-lg" controls>
Expand All @@ -370,8 +324,14 @@ <h2 class="text-xs text-center sm:text-left sm:text-3xl font-semibold text-white
</section>

<section class="sec bg-slate-700">
<h2 class="text-xs sm:text-3xl text-center sm:text-left font-semibold text-white">
Jangan Lupa Puasa :D
<h2 class="text-xs sm:text-3xl text-center sm:text-left font-semibold text-white flex flex-row">
Jangan Lupa Puasa!
<svg class="w-28 h-28 sm:w-10 sm:h-10 ml-3" data-slot="icon" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M1 8.25a1.25 1.25 0 1 1 2.5 0v7.5a1.25 1.25 0 1 1-2.5 0v-7.5ZM11 3V1.7c0-.268.14-.526.395-.607A2 2 0 0 1 14 3c0 .995-.182 1.948-.514 2.826-.204.54.166 1.174.744 1.174h2.52c1.243 0 2.261 1.01 2.146 2.247a23.864 23.864 0 0 1-1.341 5.974C17.153 16.323 16.072 17 14.9 17h-3.192a3 3 0 0 1-1.341-.317l-2.734-1.366A3 3 0 0 0 6.292 15H5V8h.963c.685 0 1.258-.483 1.612-1.068a4.011 4.011 0 0 1 2.166-1.73c.432-.143.853-.386 1.011-.814.16-.432.248-.9.248-1.388Z">
</path>
</svg>
</h2>
<p class="text-xs sm:text-lg text-center sm:text-left text-white">
Ramadan bukan hanya tentang menagan lapar, tapi juga tentang mengelola
Expand Down

0 comments on commit 31506d5

Please sign in to comment.