Cara Membuat Auto Pop Up Menggunakan HTML dan CSS
Pop Up adalah sebuah jendela yang muncul di halaman sebuah laman di ketika user atau pengunjung membuka sebuah laman, Auto Pop Up biasanya digunakan bagi memasang sebuah iklan-iklan yang terdapat di laman tersebut, nah di pembahasan kali ini kita akan mebahas Cara Merancang Auto Pop Up Menggunakan HTML dan CSS, cara kerja dari Auto Pop up ini yaitu ketika pengunjung ingin mengunjungi sebuah halaman laman, karenanya secara otomatis akan muncul sebuah jendela pop-up yang terdapat di laman tersebut.
Cara Merancang Auto Pop Up Menggunakan HTML dan CSS, langkah pertama-tama kita akan membangun file html bagi strukturnya dan file CSS bagi mengatur layout atau tampilan dari pop up yang akan kita bikin, tanpa berlama-lama kita yang pertama-tama kita akan membangun file indexnya, dan silahkan teman-teman simpan script yang terdapat dibawah ini dengan nama index.html
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Cara Merancang Auto Pop Up Menggunakan HTML dan CSS</title>
<link rel=stylesheet href=style.css>
</head>
<body>
<article>
<h1>Cara Merancang Auto Pop Up Menggunakan HTML dan CSS</h1>
</article>
<!-- start popup -->
<div id=close>
<div class=container-popup>
<form action=# method=post class=popup-form>
<img src=http://files.wacana.siap.web.id/content/uploads/2016/06/kursus-desain-jakarta.jpg alt= adalah sebuah jendela yang muncul di halaman sebuah laman di ketika user atau peng Cara Merancang Auto Pop Up Menggunakan HTML dan CSS>
</form>
<a class=close href=#close>close</a>
</div>
</div>
<!-- end popup -->
</body>
</html>
Setelah kita membangun file index.html berikutnya kita akan membangun file CSS bagi mengatur layout atau tampilannya, dan silahkan teman-teman simpan script yang terdapat dibawah ini dengan nama style.css
*{margin: 0; padding: 0}
@keyframes autopopup {
from {opacity: 0;margin-top:-200px;}
to {opacity: 1;}
}
#close {
background-color: rgba(64, 68, 65, 0.5);
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
animation:autopopup 3.5s;
}
#close:target {
-webkit-transition:all 1s;
-moz-transition:all 1s;
transition:all 1s;
opacity: 0;
visibility: hidden;
}
@media (min-width: 768px){
.container-popup {
width:30%;
}
}
@media (max-width: 767px){
.container-popup {
width:30%;
}
}
.container-popup {
position: relative;
margin: 5% auto;
padding: 4px 3px;
background-color: #e1fff5;
color: #333;
border-radius: 8px;
}
.container-popup img {
width: 100%
}
.close {
position: absolute;
top:3px;
right:3px;
background-color: #33898B;
padding:7px 10px;
font-size: 15px;
text-decoration: none;
line-height: 1;
color:#fff;
}Berikutnya silahkan di save seluruh filenya kalau kita jalankan di browser karenanya akan terlihat hasilnya seperti dibawah ini
Bagaimana teman-teman lumayan gampang bukan, Cara Merancang Auto Pop Up Menggunakan HTML dan CSS-nya, sekianlah dulu panduan saya kali ini mengenai Cara Merancang Auto Pop Up Menggunakan HTML dan CSS.
Semoga bermanfaat.
Terimakasih.
Sumber https://kursuswebsite.org
