Skip to content

Commit

Permalink
feat: updated ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@dewanakl
dewanakl committed Nov 10, 2024
1 parent ff1f17e commit 395ee96
Showing 1 changed file with 67 additions and 26 deletions.
93 changes: 67 additions & 26 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ <h1 class="font-esthetic my-4 fw-medium" style="font-size: 2.5rem;">Undangan Per
<img src="./assets/images/bg.png" alt="bg" onclick="util.modal(this)" class="img-center-crop rounded-circle border border-3 border-light shadow my-4 mx-auto">

<h2 class="font-esthetic my-4" style="font-size: 2.5rem;">Wahyu &amp; Riski</h2>
<p class="mb-0" style="font-size: 1.25rem;">Rabu, 15 Maret 2023</p>
<p class="mb-0 mt-2" style="font-size: 1.25rem;">Rabu, 15 Maret 2023</p>

<a class="btn btn-outline-light btn-sm shadow rounded-pill px-3 my-2" target="_blank" href="https://calendar.google.com/calendar/render?action=TEMPLATE&text=The%20Wedding%20of%20Wahyu%20and%20Riski&details=The%20Wedding%20of%20Wahyu%20and%20Riski%20%7C%2015%20Maret%202023%20%7C%20RT%2010%20RW%2002,%20Desa%20Pajerukan,%20Kec.%20Kalibagor,%20Kab.%20Banyumas,%20Jawa%20Tengah%2053191%20%7C%2010.00%20-%2011.00%20WIB&dates=20230315T100000/20230315T110000&location=https://goo.gl/maps/ALZR6FJZU3kxVwN86">
<i class="fa-solid fa-calendar-check me-2"></i>Save The Date
Expand All @@ -145,7 +145,7 @@ <h2 class="font-esthetic my-4" style="font-size: 2.5rem;">Wahyu &amp; Riski</h2>
<!-- Bride -->
<section class="dark-section bg-black" id="bride">
<div class="text-center">
<h2 class="font-arabic py-4 px-2" style="font-size: 2rem">بِسْمِ اللّٰهِ الرَّحْمٰنِ الرَّحِيْمِ</h2>
<h2 class="font-arabic py-4 px-2 m-0" style="font-size: 2rem">بِسْمِ اللّٰهِ الرَّحْمٰنِ الرَّحِيْمِ</h2>

<!-- Love animation -->
<div class="position-relative">
Expand All @@ -156,9 +156,9 @@ <h2 class="font-arabic py-4 px-2" style="font-size: 2rem">بِسْمِ اللّ
</div>
</div>

<h2 class="font-esthetic py-4 px-2" style="font-size: 2rem">Assalamualaikum Warahmatullahi Wabarakatuh</h2>
<h2 class="font-esthetic py-4 px-2 m-0" style="font-size: 2rem">Assalamualaikum Warahmatullahi Wabarakatuh</h2>

<p class="pb-3 px-3" style="font-size: 0.95rem;">Tanpa mengurangi rasa hormat, kami mengundang Bapak/Ibu/Saudara/i serta kerabat sekalian untuk menghadiri acara pernikahan kami:</p>
<p class="pb-4 px-3 m-0" style="font-size: 0.95rem;">Tanpa mengurangi rasa hormat, kami mengundang Anda untuk menghadiri acara pernikahan kami:</p>

<!-- Love animation -->
<div class="position-relative">
Expand All @@ -173,9 +173,9 @@ <h2 class="font-esthetic py-4 px-2" style="font-size: 2rem">Assalamualaikum Wara

<div data-aos="fade-right" data-aos-duration="2000">
<img src="./assets/images/cowo.png" alt="cowo" onclick="util.modal(this)" class="img-center-crop rounded-circle border border-3 border-light shadow my-4 mx-auto">
<h2 class="font-esthetic" style="font-size: 2.5rem;">Wahyu Siapa</h2>
<p class="mt-3 mb-0" style="font-size: 1.25rem;">Putra</p>
<p class="mb-0">Bapak ... &amp; Ibu ...</p>
<h2 class="font-esthetic m-0" style="font-size: 2.5rem;">Wahyu Siapa</h2>
<p class="mt-3 mb-1" style="font-size: 1.25rem;">Putra</p>
<p class="mb-0">Bapak ... dan Ibu ...</p>
</div>

<!-- Love animation -->
Expand All @@ -187,7 +187,7 @@ <h2 class="font-esthetic" style="font-size: 2.5rem;">Wahyu Siapa</h2>
</div>
</div>

<h2 class="font-esthetic my-4" style="font-size: 4rem;">&</h2>
<h2 class="font-esthetic my-4" style="font-size: 4rem;">&amp;</h2>

<!-- Love animation -->
<div class="position-relative">
Expand All @@ -200,9 +200,9 @@ <h2 class="font-esthetic my-4" style="font-size: 4rem;">&</h2>

<div data-aos="fade-left" data-aos-duration="2000">
<img src="./assets/images/cewe.png" alt="cewe" onclick="util.modal(this)" class="img-center-crop rounded-circle border border-3 border-light shadow my-4 mx-auto">
<h2 class="font-esthetic" style="font-size: 2.5rem;">Riski Siapa</h2>
<p class="mt-3 mb-0" style="font-size: 1.25rem;">Putri</p>
<p class="mb-0">Bapak ... &amp; Ibu ...</p>
<h2 class="font-esthetic m-0" style="font-size: 2.5rem;">Riski Siapa</h2>
<p class="mt-3 mb-1" style="font-size: 1.25rem;">Putri</p>
<p class="mb-0">Bapak ... dan Ibu ...</p>
</div>
</div>
</div>
Expand All @@ -223,20 +223,23 @@ <h2 class="font-esthetic" style="font-size: 2.5rem;">Riski Siapa</h2>
</svg>

<!-- Firman Allah Subhanahu Wa Ta'ala -->
<div class="container">
<div class="text-center" data-aos="fade-up" data-aos-duration="2000">

<h2 class="font-esthetic mt-0 mb-3" style="font-size: 2rem">Allah Subhanahu Wa Ta'ala berfirman</h2>
<div class="container pb-4">
<h2 class="font-esthetic text-center m-0" style="font-size: 2rem;">Allah Subhanahu Wa Ta'ala berfirman</h2>

<p class="px-2" style="font-size: 0.95rem;">
<div class="text-center mt-4 p-3 border shadow rounded-5" data-aos="fade-up" data-aos-duration="2000">
<p class="px-2 mb-4" style="font-size: 0.95rem;">
Dan di antara tanda-tanda (kebesaran)-Nya ialah Dia menciptakan pasangan-pasangan untukmu dari
jenismu sendiri, agar kamu cenderung dan merasa tenteram kepadanya, dan Dia menjadikan di antaramu
rasa kasih dan sayang. Sungguh, pada yang demikian itu benar-benar terdapat tanda-tanda
(kebesaran Allah) bagi kaum yang berpikir.
</p>

<p class="m-0 p-0 fw-bold">QS. Ar-Rum Ayat 21</p>
</div>

<div class="text-center mt-4 p-3 border shadow rounded-5" data-aos="fade-up" data-aos-duration="2000">
<p class="px-2 mb-4" style="font-size: 0.95rem;">Dan segala sesuatu Kami ciptakan berpasang-pasangan agar kamu mengingat (kebesaran Allah).</p>
<p class="m-0 p-0 fw-bold">QS. Az-Zariyat Ayat 49</p>
</div>
</div>

<!-- Ballon animation -->
Expand All @@ -257,11 +260,11 @@ <h2 class="font-esthetic mt-0 mb-3" style="font-size: 2rem">Allah Subhanahu Wa T
<section class="dark-section bg-black" id="wedding-date">

<div class="container">
<div class="text-center">
<div class="text-center pb-3">

<h2 class="font-esthetic py-3" style="font-size: 2.5rem;">Moment Bahagia</h2>
<h2 class="font-esthetic py-4 m-0" style="font-size: 2.5rem;">Moment Bahagia</h2>

<div class="border rounded-pill shadow py-2 px-4 mx-2 mb-4">
<div class="border rounded-pill shadow py-2 px-4 mx-2 mt-2 mb-4">
<!-- Ganti waktunya pada data-waktu (sesuai format tersebut) -->
<div class="row justify-content-center" data-time="2024-01-01 00:00:00" id="count-down">
<div class="col-3 p-1">
Expand All @@ -279,7 +282,7 @@ <h2 class="d-inline m-0 p-0" id="second">0</h2><small class="ms-1 me-0 my-0 p-0
</div>
</div>

<p class="mt-4 py-2" style="font-size: 0.95rem;">Dengan memohon rahmat dan ridho Allah Subhanahu Wa Ta'ala, insyaAllah kami akan menyelenggarakan acara:</p>
<p class="mt-4" style="font-size: 0.95rem;">Dengan memohon rahmat dan ridho Allah Subhanahu Wa Ta'ala, insyaAllah kami akan menyelenggarakan acara:</p>

<!-- Love animation -->
<div class="position-relative">
Expand All @@ -292,19 +295,19 @@ <h2 class="d-inline m-0 p-0" id="second">0</h2><small class="ms-1 me-0 my-0 p-0

<div class="overflow-x-hidden">
<div class="py-2" data-aos="fade-right" data-aos-duration="1500">
<h2 class="font-esthetic" style="font-size: 2rem;">Akad</h2>
<h2 class="font-esthetic m-0 p-2" style="font-size: 2rem;">Akad</h2>
<p style="font-size: 0.95rem;">Pukul 10.00 WIB - Selesai</p>
</div>

<div class="py-2" data-aos="fade-left" data-aos-duration="1500">
<h2 class="font-esthetic" style="font-size: 2rem;">Resepsi</h2>
<h2 class="font-esthetic m-0 p-2" style="font-size: 2rem;">Resepsi</h2>
<p style="font-size: 0.95rem;">Pukul 13.00 WIB - Selesai</p>
</div>
</div>

<div class="py-2" data-aos="fade-up" data-aos-duration="1500">
<a href="https://goo.gl/maps/ALZR6FJZU3kxVwN86" target="_blank" class="btn btn-outline-light btn-sm rounded-pill shadow mb-2 px-3"><i class="fa-solid fa-map-location-dot me-2"></i>Lihat Google Maps</a>
<p class="mb-0 mt-1 mx-1 pb-4" style="font-size: 0.95rem;">RT 10 RW 02, Desa Pajerukan, Kec. Kalibagor, Kab. Banyumas, Jawa Tengah 53191</p>
<p class="mb-4 mt-1 mx-1" style="font-size: 0.95rem;">RT 10 RW 02, Desa Pajerukan, Kec. Kalibagor, Kab. Banyumas, Jawa Tengah 53191</p>
</div>

<!-- Love animation -->
Expand All @@ -315,6 +318,14 @@ <h2 class="font-esthetic" style="font-size: 2rem;">Resepsi</h2>
</svg>
</div>
</div>

<div class="py-2 border shadow rounded-5" data-aos="fade-down" data-aos-duration="1500">
<h2 class="font-esthetic py-3 m-0" style="font-size: 2.5rem;">Dress Code</h2>
<p class="mb-4 mt-1 mx-2" style="font-size: 0.95rem;">Tanpa mengurangi rasa hormat, untuk menambah kehangatan kebersamaan, kami memohon kesediaan Anda untuk hadir dengan dress code berikut:</p>

<h2 class="font-esthetic m-0 p-2" style="font-size: 2rem;">Batik</h2>
<p style="font-size: 0.95rem;">Dominasi berwarna hitam</p>
</div>
</div>
</div>
</section>
Expand All @@ -324,7 +335,7 @@ <h2 class="font-esthetic" style="font-size: 2rem;">Resepsi</h2>
<div class="container pb-5 pt-4">
<div class="border rounded-5 shadow p-3">

<h2 class="font-esthetic text-center py-3" data-aos="fade-down" data-aos-duration="1500" style="font-size: 2.5rem;">Galeri</h2>
<h2 class="font-esthetic text-center pb-4 py-2 m-0" style="font-size: 2.5rem;">Galeri</h2>

<div id="carousel-image-one" data-aos="fade-up" data-aos-duration="1500" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
Expand Down Expand Up @@ -385,6 +396,36 @@ <h2 class="font-esthetic text-center py-3" data-aos="fade-down" data-aos-duratio
<span class="visually-hidden">Next</span>
</button>
</div>

<div id="carousel-image-three" data-aos="fade-up" data-aos-duration="1500" class="carousel slide mt-4" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carousel-image-three" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carousel-image-three" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carousel-image-three" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>

<div class="carousel-inner rounded-4">
<div class="carousel-item active">
<img src="https://picsum.photos/1280/720?random=7" alt="image 7" class="d-block w-100" onclick="util.modal(this)">
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1280/720?random=8" alt="image 8" class="d-block w-100" onclick="util.modal(this)">
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1280/720?random=9" alt="image 9" class="d-block w-100" onclick="util.modal(this)">
</div>
</div>

<button class="carousel-control-prev" type="button" data-bs-target="#carousel-image-three" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>

<button class="carousel-control-next" type="button" data-bs-target="#carousel-image-three" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</section>
Expand Down Expand Up @@ -543,7 +584,7 @@ <h2 class="font-esthetic mb-4" style="font-size: 2.5rem;">The Wedding Of</h2>

<img src="./assets/images/bg.png" alt="background" class="img-center-crop rounded-circle border border-3 border-light shadow mb-4 mx-auto">

<h2 class="font-esthetic my-4" style="font-size: 2.5rem;">Wahyu &amp; Riski</h2>
<h2 class="font-esthetic mb-4" style="font-size: 2.5rem;">Wahyu &amp; Riski</h2>
<div id="guest-name" data-message="Kepada Yth Bapak/Ibu/Saudara/i"></div>

<button type="button" class="btn btn-light shadow rounded-4 mt-4" onclick="guest.open(this)">
Expand Down

0 comments on commit 395ee96

Please sign in to comment.