Modal: #modal
1) Add a temporary background colour of 'orange'
2) Add a padding of 20px
3) Add a height of 200px
4) Add a margin of 0 & auto to make sure our Modal is centered
5) Add a max-width of 600px
**/
#modal {
background-color: orange;
max-width: 600px;
margin: 0 auto;
padding: 20px;
height: 200px;
}
/**
Overlay: #overlay
1) Add a width and a height of 100%
2) Position absolute (allows us to place any element exactly where we want it)
3) Set top, left, bottom, right to 0
4) Add a background colour of black
5) Add position relative to #modal so that it's relative to #overlay
**/
#overlay {
display: none;
}
html, body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
/**
Our buttons '#open-modal, #close-modal'
1) For the background colour use 'royalblue'
2) Be aware of the colour, padding & font size
3) Make sure the cursor has a pointer so that it demonstrates to the user the button is clickable
**/
#open-modal, #close-modal {
background-color: royalblue;
color: white;
padding: 15px;
font-size: 20px;
cursor: pointer;
}
/**