<!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
>