<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<title>Hello Bulma!</title>
<link rel="stylesheet" href=
<link rel="stylesheet" href="style.css">
<script src=
</script>
</head>
<body>
<center>
<h1 class="title has-text-centered has-text-success">
GeeksforGeeks
</h1>
<h3 class="subtitle has-text-centered">
A computer science portal for geeks.
</h3>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-4'>
<button class="button is-primary" id='btn'>
Click to see modal
</button>
<div class="modal">
<div class="modal-content">
<div class='box'>
<h1 class='title' style='color:green'>
Geek for Geeks
</h1>
<p class='is-family-monospace'>
'GeeksforGeeks' is a computer
science portal.it was created with
a goal in mind to provide well
written, well thought and
well explained solutions for
selected questions. The core team
of five super geeks constituting
of technology lovers and
computer science enthusiasts
have been constantly working
in this direction .
</p>
<div class='buttons'>
<button class='button is-fullwidth'>
Know more about GfG
</button>
</div>
</div>
</div>
<button class="modal-close is-large" aria-label="close">
Modal
</button>
</div>
</div>
</div>
</div>
<script>
// Bulma does not have JavaScript included,
// hence custom JavaScript has to be
// written to open or close the modal
const modal = document.querySelector('.modal');
const btn = document.querySelector('#btn')
const close = document.querySelector('.modal-close')
btn.addEventListener('click', function () {
modal.style.display = 'block'
})
close.addEventListener('click',function () {
modal.style.display = 'none'
})
window.addEventListener('click',function (event) {
if (event.target.className === 'modal-background') {
modal.style.display = 'none'
}
})
</script>
</center>
</body>
</html>