sttt/index.html

## index.html
<!-- Pasang di bawah <body> -->
<div id='arlinaoverlay'/>
<div id='arlinafitri'>
      <p>Saya, selaku admin Arlina Design mengucapkan<br/>
"Selamat Hari Raya Idul Fitri 1 Syawal 1436 H, Minal Aidin Wal Faidzin Taqabalallahu minnaa wa minkum"</p>
    <div class='arlinaclick' onclick='document.getElementById("arlinafitri").style.display="none";arlinaoverlay.style.display="none";'>Close</div>
  </div>

<!-- Source : http://www.kompiajaib.com/2014/06/membuat-pesan-pembuka-ketika-masuk-blog.html -->

## modal-box-sederhana.markdown

      
    Raw
  

              modal-box-sederhana.markdown
            
          
    Modal Box Sederhana

Modal Box Sederhana Ucapan Selamat Idul Fitri
A Pen by Arlina Design on CodePen.
License.

  
## scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

## style.css
@import url(https://fonts.googleapis.com/css?family=Quicksand);
body {position:relative;background:#e3e3e3 none repeat scroll top left;margin:0 0 0 0;margin:0 0 0 0;padding:0 0 0 0;color:#333;font-family:'Quicksand';font-size:14px;font-weight:400;text-align:left;}

/* CSS Idul Fitri */
#arlinafitri{background:#8dbb90;position:fixed;width:30%;height:17%;z-index:109;text-align:center;margin:auto;padding:30px;border:10px solid #fff;box-shadow:0 0 10px rgba(0,0,0,.15);top:0;left:0;bottom:0;right:0;border-radius:6px;}
#arlinafitri p{color:#fff;font-size:130%;line-height:1.6em;margin:-5px 0 35px}
.arlinaclick{color:#fff;background:transparent;border:1px solid #fff;border-radius:3px;padding:8px 10px;text-align:center;margin:auto;cursor:pointer;display:inline-block;transition:all .3s}
.arlinaclick:hover{color:#6f9771;background:#fff}
#arlinaoverlay {position:fixed!important;position:absolute;z-index:108;top:0;right:0;bottom:0;left:0;background:transparent;}
	<!-- Pasang di bawah <body> -->
	<div id='arlinaoverlay'/>
	<div id='arlinafitri'>
	<p>Saya, selaku admin Arlina Design mengucapkan<br/>
	"Selamat Hari Raya Idul Fitri 1 Syawal 1436 H, Minal Aidin Wal Faidzin Taqabalallahu minnaa wa minkum"</p>
	<div class='arlinaclick' onclick='document.getElementById("arlinafitri").style.display="none";arlinaoverlay.style.display="none";'>Close</div>
	</div>

	<!-- Source : http://www.kompiajaib.com/2014/06/membuat-pesan-pembuka-ketika-masuk-blog.html -->
	@import url(https://fonts.googleapis.com/css?family=Quicksand);
	body {position:relative;background:#e3e3e3 none repeat scroll top left;margin:0 0 0 0;margin:0 0 0 0;padding:0 0 0 0;color:#333;font-family:'Quicksand';font-size:14px;font-weight:400;text-align:left;}

	/* CSS Idul Fitri */
	#arlinafitri{background:#8dbb90;position:fixed;width:30%;height:17%;z-index:109;text-align:center;margin:auto;padding:30px;border:10px solid #fff;box-shadow:0 0 10px rgba(0,0,0,.15);top:0;left:0;bottom:0;right:0;border-radius:6px;}
	#arlinafitri p{color:#fff;font-size:130%;line-height:1.6em;margin:-5px 0 35px}
	.arlinaclick{color:#fff;background:transparent;border:1px solid #fff;border-radius:3px;padding:8px 10px;text-align:center;margin:auto;cursor:pointer;display:inline-block;transition:all .3s}
	.arlinaclick:hover{color:#6f9771;background:#fff}
	#arlinaoverlay {position:fixed!important;position:absolute;z-index:108;top:0;right:0;bottom:0;left:0;background:transparent;}