"WHO IS THIS HARUN PEHLIVAN ?"
Bootstrap 4.1.1 Snippet by harunpehlivan

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="HP IT GROUP" content="ie=edge"> <title> WHO IS THIS HARUN PEHLIVAN ?</title> <link rel="stylesheet" href="style.css"> </head> <body> <button id="btn">THIS HARUN PEHLİVAN </button> <div class="model-section"> <div class="model"> <div class="model--header"> <h3>IT (CODER,DESIGNER,DEVELOPER,ADMİNİSTRATOR) FOUNDER CEO BLOGGER INITIATIVE RESEARCH AND DEVELOPMENT</h3> <span id="close">×</span> </div> <!-- Close model--header --> <div class="model--body"> 22/07/1984 Çorum'da Doğdu aslen Samsun'un Havza ilçesi halen Amasya'nın Suluova ilçesinde ikamet etmekteyim. ilk orta ve lise eğitim ve öğretim hayatıma başlayıp devam ettirip ikame ettiğim yerde tamamladım 2008 TERCUMAN INFORMATICS CENTER <a target="_blank" href="http://tebimtebitagem.ticiz.com">TEBİM </a> 2012 TERCUMAN EDUCATION, SCIENCE,TECHNICAL RESEARCH AND DEVELOPMENT CENTER <a target="_blank" href="https://harunpehlivantebimtebitagem.business.site">TEBİTAGEM </a> 2016 TEBİMTEBİTAGEM GAZETESİ RADYO TELEVİZYONU <a target="_blank" href="http://harunpehlivan.fm.tc/">TTGRT</a> 2018 HARUN PEHLİVAN INFORMATION TECHNOLOGY GROUP <a target="_blank" href="https://harunpehlivantebimtebitagem.site123.me">HP IT GROUP </a> kurdum </div> </div> <!-- Close model --> </div> <!-- Close model-section --> </body> </html>
* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: sans-serif; padding: 30px; } #btn { display: inline-block; padding: 13px 14px; border-radius: 4px; color: #fff; background: #FF3D00; cursor: pointer; outline: none; border: none; } .model-section { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.6); z-index: 1; display: none; } .model { width: 60%; height: auto; border-radius: 5px; background: #fff; margin: 10% auto; overflow: hidden; animation: modelAnimate .5s; } @keyframes modelAnimate { from { opacity: 0; } to { opacity: 1; } } .model--header { background: #FF3D00; color: #fff; padding: 20px; } #close { display: block; font-size: 25px; float: right; margin-top: -25px; cursor: pointer; } .model--body { padding: 20px; }
const btn = document.getElementById("btn"); const model = document.querySelector(".model-section"); const close = document.getElementById("close"); btn.addEventListener("click", function(){ model.style.display = "block"; }); close.addEventListener("click", function(){ model.style.display = "none"; }); model.addEventListener("click", function(e){ let className = e.target.getAttribute("class"); if(className === "model-section"){ model.style.display = "none"; } })

Related: See More

Light Bootstrap Dashboard

Questions / Comments: