Untitled

 avatar
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...