Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title></title>
- <style type="text/css">
- * {
- margin: 0px;
- padding: 0px;
- }
- body {
- width: 100vw;
- height: 100vh;
- background-color: rgb(202, 219, 239);
- }
- .header {
- background-color: rgb(162, 225, 207);
- box-shadow: 0px 2px 2px 2px #84b3a5;
- }
- .header h1 {
- text-decoration: underline;
- color: white;
- }
- .main {
- width: 70vw;
- padding: 5vw;
- margin: auto;
- margin-top: 1vh;
- background-color: rgb(206, 255, 241);
- height: 70vh;
- box-shadow: 2px 2px 2px 2px #84b3a5;
- display: flex;
- flex-direction: column;
- justify-content: space-around;
- }
- .modal {
- position: absolute;
- padding: 5vw;
- top:20vh;
- left: 50vw;
- transform: translateX(-50%);
- margin: auto;
- background-color: rgb(241, 255, 206);
- height: 50vh;
- width: 50vw;
- box-shadow: 2px 2px 2px 2px #84b3a5;
- display: flex;
- flex-direction: column;
- justify-content: space-around;
- }
- .modal button {
- transform: translate(-5vw, -5vw);
- background-color: red;
- border-color: darkred;
- font-size: 1em;
- width: 1.5em;
- height: 1.5em;
- }
- </style>
- </head>
- <body>
- <div class="header">
- <h1>Mon Site</h1>
- </div>
- <div class="main">
- <h1>Ma page principale</h1>
- <p> Teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeext </p>
- <button onclick="toggleModal('modalJeux')">Mes jeux</button>
- </div>
- <div id="modalJeux" class="modal" style="display: none;">
- <button onclick="toggleModal('modalJeux')">X</button>
- <h1>Ma page de jeux</h1>
- <p>Texxxxxxxxxxxxxxxxxxt</p>
- </div>
- <script type="text/javascript">
- function toggleModal(id) {
- element = document.getElementById(id);
- if (element.style.display == "none"){
- element.style.display = "block";
- }else{
- element.style.display = "none";
- }
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement