Skip to content

Instantly share code, notes, and snippets.

@dikiwidia

dikiwidia/bootstrap_change_page.html

Last active December 8, 2021 08:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dikiwidia/0070d57ddb36706cd3fd305e120e4348 to your computer and use it in GitHub Desktop.
Save dikiwidia/0070d57ddb36706cd3fd305e120e4348 to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap change page with button group
Raw
bootstrap_change_page.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<title>Happy</title>
<style type="text/css">
@font-face {
font-family: 'Elsie Swash Caps';
src: url('assets/fonts/ElsieSwashCaps-Regular.ttf') format('truetype')
}
body {
/*background-color: #FFDAB9;*/
background-image: url(assets/images/background.png);
background-repeat: no-repeat;
background-position: center;
height: auto;
width: 100%;
}
.home_content {
background-color: #FFFFFF;
border-radius: 25px;
}
.bridegroom_content {
/*background-color: #FFFFFF;*/
border-radius: 25px;
background-image: url(assets/images/background_alt.jpg);
background-size: cover;
}
.agenda_content {
/*background-color: #FFFFFF;*/
border-radius: 25px;
background-image: url(assets/images/background_alt.jpg);
background-size: cover;
}
.galery_content {
/*background-color: #FFFFFF;*/
border-radius: 25px;
background-image: url(assets/images/background_alt.jpg);
background-size: cover;
}
.style-secondary {
color: #d4af37;
font-family: "Elsie Swash Caps";
}
.modal-style {
background-image: url(assets/images/background.png);
background-repeat: no-repeat;
background-position: center;
height: auto;
width: 100%;
}
.btn-rounded {
border-radius: 25px;
}
.countdown-border {
border-style: solid;
border-color: #FFFFFF;
background-color: #d4af37;
border-radius: 12px;
}
</style>
</head>
<body>
<div id="frontend" class="container">
<div id="home" class="row inviti_content d-block p-2">
<div class="col-12 p-5 mb-5 home_content">
<center class="mt-1">
<img src="assets/images/basmalah.png" style="width: 140px;" />
<p class="text-center mt-2">WE INVITE YOU TO CELEBRATE OUR WEDDING</p>
<img src="assets/images/thania.png" style="width: 140px;">
</center>
<p class="text-center mt-1">The Wedding Of</p>
<h1 class="text-center style-secondary">Thania & Rifqy</h1>
<p class="text-center">Sabtu, 09 Oktober 2021</p>
<p class="text-center mb-4" style="font-size: 10px;">"Maha Suci Allah yang telah menciptakan pasangan-pasangan semuanya, baik dari apa yang ditumbuhkan oleh bumi dan dari diri mereka maupun dari apa yang tidak mereka ketahui" (QS. Ya-Sin : 36)</p>
</div>
</div>
<div id="bridegroom" class="row inviti_content d-none p-2">
<div class="col-12 p-5 mb-5 bridegroom_content">
<center class="mt-1">
<p class="text-center mt-2">Assalamu'alaikum Warahmatullahi Wabarakatuh</p>
<p class="text-center" style="font-size: 10px;">Dengan Memohon Rahmat Dan Ridho Allah SWT Yang Telah Menciptakan Makhluk-Nya Secara Berpasang-Pasangan, Kami Bermaksud Menyelenggarakan Pernikahan Kami.</p>
<img src="assets/images/clearfix.png" style="width: 100%;">
</center>
<div class="row">
<div class="col-12 col-lg-6">
<center class="mt-1">
<img src="assets/images/bride.png" style="width: 100%;">
</center>
<h2 class="text-center style-secondary">Thania Qothrunnada</h1>
<p class="text-center" style="font-size: 12px;">Putri pertama Bpk. Andi Khama & Ibu Neneng Sana'ah</p>
</div>
<div class="col-12 col-lg-6">
<center class="mt-1">
<img src="assets/images/groom.png" style="width: 100%;">
</center>
<h2 class="text-center style-secondary">Rifqy Gustio U.</h1>
<p class="text-center" style="font-size: 12px;">Putra pertama Bpk. Agus Pranojo & Ibu Eti Rohaeti</p>
</div>
</div>
</div>
</div>
<!-- Content here -->
<div id="agenda" class="row inviti_content d-none p-2">
<div class="col-12 p-5 mb-5 agenda_content">
<center class="mt-1">
<h2 class="text-center mt-2 style-secondary">Rangkaian Acara</h2>
<button class="btn btn-success btn-rounded">Save The Date</button>
<div class="row mt-3">
<div class="col-3">
<div class="countdown-border">
<h1 class="text-center">0</h1>
<p class="text-center" style="font-size: 10px">Hari</p>
</div>
</div>
<div class="col-3">
<div class="countdown-border">
<h1 class="text-center">0</h1>
<p class="text-center" style="font-size: 10px">Jam</p>
</div>
</div>
<div class="col-3">
<div class="countdown-border">
<h1 class="text-center">0</h1>
<p class="text-center" style="font-size: 10px">Menit</p>
</div>
</div>
<div class="col-3">
<div class="countdown-border">
<h1 class="text-center">0</h1>
<p class="text-center" style="font-size: 10px">Detik</p>
</div>
</div>
</div>
</center>
<div class="row mt-3">
<div class="col-12 col-lg-6">
<img src="assets/images/clearfix.png" style="width: 100%;">
<h1 class="text-center style-secondary mt-2">Akad Nikah</h1>
<p class="text-center" style="font-size: 12px;">Sabtu</p>
<h1 class="text-center style-secondary">09</h1>
<p class="text-center" style="font-size: 12px;">Oktober 2021</p>
<p class="text-center">Pukul: 09:00 WIB s.d Selesai</p>
<p class="text-center">Tempat: Jl. Raya Labuan KM. 5 Kp. Cikoneng RT 03 RW 02, Desa Palurahan, Kec. Kaduhejo, Pandeglang - Banten</p>
</div>
<div class="col-12 col-lg-6">
<h1 class="text-center style-secondary">Resepsi</h1>
<p class="text-center" style="font-size: 12px;">Minggu</p>
<h1 class="text-center style-secondary">10</h1>
<p class="text-center" style="font-size: 12px;">Oktober 2021</p>
<p class="text-center">Pukul: 09:00 WIB s.d Selesai</p>
<p class="text-center">Tempat: Jl. Raya Labuan KM. 5 Kp. Cikoneng RT 03 RW 02, Desa Palurahan, Kec. Kaduhejo, Pandeglang - Banten</p>
</div>
</div>
</div>
</div>
<!-- Content here -->
<div id="galery" class="row inviti_content d-none p-2">
<div class="col-12 p-5 mb-5 galery_content">
<center class="mt-1">
<h2 class="text-center mt-2 style-secondary">Galeri</h2>
<p class="text-center" style="font-size: 12px;">Memory is a way of holding on to the things you love, the things you are, the things you never want to lose.</p>
<img src="assets/images/clearfix.png" style="width: 100%;">
<div class="row mt-3">
<div class="col-12 col-lg-6">
<img src="assets/images/background_alt.jpg" class="rounded m-2" style="width: 100%">
</div>
<div class="col-12 col-lg-6">
<img src="assets/images/background_alt.jpg" class="rounded m-2" style="width: 100%">
</div>
<div class="col-12 col-lg-6">
<img src="assets/images/background_alt.jpg" class="rounded m-2" style="width: 100%">
</div>
<div class="col-12 col-lg-6">
<img src="assets/images/background_alt.jpg" class="rounded m-2" style="width: 100%">
</div>
<div class="col-12 col-lg-6">
<img src="assets/images/background_alt.jpg" class="rounded m-2" style="width: 100%">
</div>
<div class="col-12 col-lg-6">
<img src="assets/images/background_alt.jpg" class="rounded m-2" style="width: 100%">
</div>
</div>
</center>
</div>
</div>
</div>
<!-- Content here -->
</div>
<div class="position-fixed bottom-0 start-50 translate-middle w-75 d-sm-block d-none">
<div class="btn-group d-flex w-100" role="group" aria-label="Basic example">
<button type="button" data-target="#home" class="btn main-menu btn-success"><i class="fas fa-home fa-2x"></i><br />Pembuka</button>
<button type="button" data-target="#bridegroom" class="btn main-menu btn-success"><i class="fas fa-heart fa-2x"></i><br />Mempelai</button>
<button type="button" data-target="#agenda" class="btn main-menu btn-success"><i class="fas fa-rings-wedding fa-2x"></i><br />Agenda</button>
<button type="button" data-target="#galery" class="btn main-menu btn-success"><i class="fas fa-images fa-2x"></i><br />Galeri</button>
<button type="button" data-target="#right" class="btn main-menu btn-success"><i class="fas fa-shield fa-2x"></i><br />Protokol</button>
<button type="button" data-target="#right" class="btn main-menu btn-success"><i class="fas fa-comment-dots fa-2x"></i><br />Ucapan</button>
<button type="button" data-target="#right" class="btn main-menu btn-success"><i class="fas fa-handshake fa-2x"></i><br />Penutup</button>
</div>
</div>
<div class="position-fixed bottom-0 start-0 w-100 d-block d-sm-none">
<div class="btn-group d-flex w-100" role="group" aria-label="Basic example">
<button type="button" data-target="#home" class="btn main-menu btn-success"><i class="fas fa-home"></i></button>
<button type="button" data-target="#bridegroom" class="btn main-menu btn-success"><i class="fas fa-heart"></i></button>
<button type="button" data-target="#agenda" class="btn main-menu btn-success"><i class="fas fa-rings-wedding"></i></button>
<button type="button" data-target="#galery" class="btn main-menu btn-success"><i class="fas fa-images"></i></button>
<button type="button" data-target="#right" class="btn main-menu btn-success"><i class="fas fa-shield"></i></button>
<button type="button" data-target="#right" class="btn main-menu btn-success"><i class="fas fa-comment-dots"></i></button>
<button type="button" data-target="#right" class="btn main-menu btn-success"><i class="fas fa-handshake"></i></button>
</div>
</div>
<!-- Full screen modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content modal-style">
<div class="modal-body">
<div class="col-12">
<center class="mt-5">
<img src="assets/images/thania.png" style="width: 160px;">
</center>
<p class="text-center style-secondary">Sabtu & Minggu, 09-10 Oktober 2021</p>
<p class="text-center">Kepada Bpk/Ibu/Saudara/i</p>
<h2 class="text-center style-secondary">Moch Diki Widianto</h2>
<p class="text-center mb-5">Tanpa mengurangi rasa hormat, kami mengundang Anda untuk hadir di acara pernikahan kami.</p>
<div class="text-center">
<button type="button" class="btn btn-success" data-bs-dismiss="modal"><i class="fas fa-envelope-open-text"></i> Buka Undangan</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script type="text/javascript">
$( document ).ready(function() {
console.log( "ready!" );
var myModal = document.getElementById('exampleModal');
var modal = bootstrap.Modal.getOrCreateInstance(myModal);
modal.show();
$("button.main-menu").click(function() {
var target = $(this).attr("data-target");
// alert( "Handler for .click() called." );
$("#frontend").find(".inviti_content").removeClass(["d-block","d-none"]);
$("#frontend").find(".inviti_content").addClass("d-none");
$(target).addClass("d-block").removeClass("d-none");
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment