<!DOCTYPE html>
<html>
<head>
<title>Jasa Undangan Charissa</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="//db.onlinewebfonts.com/c/36dbcc936678f9bd8ac2d078c5be3e75?family=Sweet+Lemonade" rel="stylesheet" type="text/css"/>
</head>
<style type="text/css">
@import url(//db.onlinewebfonts.com/c/36dbcc936678f9bd8ac2d078c5be3e75?family=Sweet+Lemonade);
@font-face {font-family: "Sweet Lemonade"; src: url("//db.onlinewebfonts.com/t/36dbcc936678f9bd8ac2d078c5be3e75.eot");
src: url("//db.onlinewebfonts.com/t/36dbcc936678f9bd8ac2d078c5be3e75.eot?#iefix") format("embedded-opentype"),
url("//db.onlinewebfonts.com/t/36dbcc936678f9bd8ac2d078c5be3e75.woff2") format("woff2"),
url("//db.onlinewebfonts.com/t/36dbcc936678f9bd8ac2d078c5be3e75.woff") format("woff"),
url("//db.onlinewebfonts.com/t/36dbcc936678f9bd8ac2d078c5be3e75.ttf") format("truetype"),
url("//db.onlinewebfonts.com/t/36dbcc936678f9bd8ac2d078c5be3e75.svg#Sweet Lemonade") format("svg"); }
.modalx{
position: fixed;
z-index: 2000;
width: 100%;
height: 100vh;
top:0;
left:0;
background-color: transparent;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transform: translateY(0)
}
.overlayy{
background-color: #000;
position:relative;
width: 100%;
height: 100%;
z-index: 2001;
top:0;
opacity: 0.4;
left: 0;
}
.content-modalx{
background-color: transparent;
position:absolute;
width: 100%;
height: 100%;
z-index: 2002;
top:0;
color:WHITE;
left: 0;
}
.info_modalx{
margin:150px auto;
width: 90%;
display: flex;
height: auto;
flex-direction: column;
justify-content: center;
}
.info_modalx{
width: 100%;
text-align: center;
height: auto;
margin-bottom: 30px;
}
.subjectacara{
font-family: "Sweet Lemonade", Sans-serif;
font-size: 65px;
line-height: 1.4em;
}
.info_button button{
background-color: #E57F85;
font-family: "Poppins";
font-weight: 400;
color: #FFFFFF;
border:none;
padding:15px 50px;
font-size: 15px;
border-radius: 100px;
cursor: pointer;
outline: none;
}
.removeModals{
transform: translateY(100%);
transition: 1s ease-in-out;
}
</style>
<body>
<div class="modalx" data-sampul='https://blog.charissa.website/wp-content/uploads/2022/06/foto-deddy-dan-lydia-cvr.jpg'>
<div class="overlayy"></div>
<div class="content-modalx">
<div class="info_modalx"> <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class=""><b>THE WEDDING OF</b></div>
<div class="subjectacara">Deddy ♥ Lydia</div>
<div class="">Kepada Bapak/Ibu/Saudara/i</div>
<div class=""><b style="font-size:20px">nama tamu</b></div>
<div class=""><i style="font-size:13px">Mohon maaf bila ada kesalahan pada penulisan nama/gelar</i></div>
<!-- <p style="text-align: center;"><span style="color: #ffffff;">Tanpa Mengurangi Rasa Hormat,
Kami Mengundang Anda<br>Untuk Hadir Di Acara Pernikahan Kami.</span></p><br> -->
<div class="info_button">
<button><i class="fa fa-envelope-open"></i> Buka
Undangan</button>
</div>
</div>
</div>
</div>
<script>
const sampul = jQuery('.modalx').data('sampul');
jQuery('.modalx').css('background-image','url('+sampul+')');
jQuery('body').css('overflow','hidden');
jQuery('.info_button button').on('click',function(){
jQuery('.modalx').addClass('removeModals');
jQuery('body').css('overflow','auto');
document.getElementById("song").play();
});
</script>
</body>
</html>
