Esta es mi página principal en mi sitio web, quiero que mi sitio web no sea fácil y no tenga tantas páginas, así que cuando presione "nosotros" quiero que se abra un modal con opciones para navegar a otras páginas, como esta foto de arriba :
Mi código:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/src/styles/pages/menu2.css"> <title>menu</title> </head> <body> <div class="container"> <div class="left"><a class="clickable" href="http://perspetiva-m.pt/projects">projects</a></div> <div class="right">us</div> </div> </body> </html>CSS:
html, body, .container { height: 100%; } body { margin: 0; } .container { display: flex; } .left, .right { font-family: 'Times New Roman', Times, serif; font-size: 50px; width: 50%; height: 100%; } .left { background-image: url("https://images.unsplash.com/photo-1631031651060-424d82e511de?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80"); background-size: cover; } .left, .right { display: flex; align-items: center; justify-content: center; } .left { color: white; } .clickable { cursor: pointer; text-decoration: none; color: white; }¿Alguien me puede ayudar?
Gracias,
puedes usar este código que agregué
html, body, .container { height: 100%; } body { margin: 0; } .container { display: flex; } .left, .right { font-family: 'Times New Roman', Times, serif; font-size: 50px; width: 50%; height: 100%; } .right a{ text-decoration: none; color: black; } .left { background-image: url("https://images.unsplash.com/photo-1631031651060-424d82e511de?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80"); background-size: cover; } .left, .right { display: flex; align-items: center; justify-content: center; } .left { color: white; } .clickable { cursor: pointer; text-decoration: none; color: white; } #model{ position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: #fff; opacity: 0.8; display: none; flex-direction: column; justify-content: center; align-items: center; } .option{ margin-top: 10px; margin-bottom: 10px; font-weight: bold; cursor: pointer; } .option a { text-decoration: none; color: black; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/src/styles/pages/menu2.css"> <title>menu</title> </head> <body> <div class="container"> <div class="left"><a class="clickable" href="http://perspetiva-m.pt/projects">projects</a></div> <div class="right" id='us'><a href="#">us</a></div> </div> <div id="model"> <div class="option"><a href="">About</a></div> <div class="option"><a href="#">News</a></div> <div class="option"><a href="#">Contact</a></div> </div> </body> <script> const $us = document.getElementById('us'); const $model = document.getElementById('model'); $us.onclick = function(){ $model.style.display = 'flex'; } $model.onclick = function(){ this.style.display = 'none'; } </script> </html>