Untitled
unknown
plain_text
4 years ago
4.5 kB
8
Indexable
<!DOCTYPE html> <html lang="it"> <head> <meta charset="utf-8"> <title>Inserisci il titolo</title> <meta name="description" content="Inserisci la descrizione"> <!-- DA AGGIUNGERE in HEAD --> <link rel="stylesheet" href="../../../lezione5/Esercizio Audi/css/bootstrap.css"> <link rel="stylesheet" href="css/stile.css"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, intial-scale=1"> <style> body{ background: url(sfondo.jpg); background-image: cover; color: white; font-size: 20px; font-weight: 800; } .argomenti{ position: absolute; width: 100%; height: 100%; background-size: cover; background-position: center; /*left: -50%;*/ } .bottoni{ position: absolute; height: 100%; width: 200px; right: 0px; text-align: center; } .chiudi{ width: 150px; height: 30px; right: 260px; border-radius: 10px; background-color: white; top: 20px; position: absolute; color: black; text-align: center; } #musica{ left: calc(-100% + 200px); background-image: url(musica.jpg); z-index: 300; } #informatica{ left: calc(-100% + 400px); background-image: url(informatica.jpg); z-index: 200; } #hifi{ left: calc(-100% + 600px); background-image: url(hi-fi.jpg); z-index: 100; } #btn-musica{ background: rgb(41, 187, 192); } #btn-informatica{ background: rgb(43, 143, 18); } #btn-hifi{ background: rgb(149, 19, 175); } </style> </head> <body> <div id="musica" class="argomenti"> <div class="bottoni" id="btn-musica" onclick="apriMusica();">Musica</div> <div class="chiudi" id="chiudi-musica" onclick="chiudiMusica();">Chiudi</div> </div> <div id="informatica" class="argomenti"> <div class="bottoni" id="btn-informatica" onclick="apriInformatica();">informatica</div> <div class="chiudi" id="chiudi-informatica" onclick="chiudiInformatica();">Chiudi</div> </div> <div id="hifi" class="argomenti"> <div class="bottoni" id="btn-hifi" onclick="apriHifi();">hifi</div> <div class="chiudi" id="chiudi-hifi" onclick="chiudiHifi();">Chiudi</div> </div> </body> <!-- IN FONDO ALL'HTML --> <script src="https://code.jquery.com/jquery-3.3.1.js" type="text/javascript"></script> <script src="/lezione4/Bootstrap - bkup/js/bootstrap.js"></script> <script> function apriMusica(){ document.getElementById('musica').style.left= "0px"; document.getElementById('musica').style.zIndex= "1000"; } function apriInformatica(){ document.getElementById('informatica').style.left= "0px"; document.getElementById('informatica').style.zIndex= "1000"; } function apriHifi(){ document.getElementById('hifi').style.left= "0px"; document.getElementById('hifi').style.zIndex= "1000"; } function chiudiMusica(){ document.getElementById('musica').style.left= "calc(-100% + 200px)"; document.getElementById('musica').style.zIndex= "300"; } function chiudiInformatica(){ document.getElementById('informatica').style.left= "calc(-100% + 400px)"; document.getElementById('informatica').style.zIndex= "200"; } function chiudiHifi(){ document.getElementById('hifi').style.left="calc(-100% + 600px)"; document.getElementById('hifi').style.zIndex= "100"; } </script> </html>
Editor is loading...