index.html

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Header Layout</title>
    <link rel="icon" href="favicon.png" type="image/png">
    <!-- Importazione Space Grotesk da Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400&display=swap" rel="stylesheet">
    
    <style>
        :root {
            --primary: #970a2c;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        html, body {
            height: 100%;
            width: 100%;
            overflow-x: hidden;
            font-family: "Space Grotesk", sans-serif;
            font-weight: 400;
        }
        
        body {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        
        main {
            flex: 1;
            min-height: 200px;
        }
        
        .top-band {
            height: 1.7cm;
            background-color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 2rem;
        }
        
        .logo-container img {
            height: 1.2cm;
            object-fit: contain;
        }
        
        .right-icons {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .right-icons img {
            height: 24px;
            width: 24px;
        }
        
        .right-icons svg {
            height: 24px;
            width: 24px;
            fill: var(--primary);
        }
        
        .facebook-icon {
            height: 28px !important;
            width: 28px !important;
        }
        
        .bottom-band {
            height: 6.5cm; /* Aumentata da 6cm a 6.5cm */
            background-color: var(--primary);
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8rem;
        }
        
        .logo-link {
            display: flex;
            align-items: center;
        }
        
        .logo-bianco {
            height: 70px;
            width: auto;
            object-fit: contain;
        }
        
        .logo-morante {
            height: 160px;
            width: auto;
            object-fit: contain;
        }
        
        .footer {
            height: 2.7cm;
            background-color: var(--primary);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 4rem;
            color: white;
            margin-top: auto;
            margin-bottom: 0;
        }
        
        .footer-logo {
            flex: 1;
            display: flex;
            justify-content: flex-end;
        }
        
        .footer-logo img {
            height: 1cm;
            width: auto;
            object-fit: contain;
            margin-right: 2rem;
        }
        
        .footer-info {
            flex: 2;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 3rem;
        }
        
        .info-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: white;
            text-decoration: none;
            font-size: 0.8em; /* Ridotto da 1em a 0.8em */
        }
        
        .info-item svg {
            height: 20px;
            width: 20px;
            fill: white;
        }
        
        .info-item img {
            height: 20px;
            width: 20px;
            filter: brightness(0) invert(1);
        }
        
        .info-text {
            display: flex;
            flex-direction: column;
        }
        
        @media (max-width: 768px) {

            .top-band {
                padding: 0 0.5rem 0 0.2rem; /* Ridotto il padding sinistro */
            }
            
            .logo-morante {
                display: none;
            }
            
            .bottom-band {
                height: 3.5cm;
                gap: 0;
                justify-content: center;
            }
            
            .footer {
                height: auto;
                padding: 1rem;
                flex-direction: column;
                gap: 1.5rem;
            }
            
            .footer-logo {
                justify-content: center;
            }
            
            .footer-logo img {
                height: 0.7cm;
                margin-right: 0;
            }
            
            .footer-info {
                flex-direction: column;
                gap: 1.5rem;
                width: 100%;
            }
            
            .info-item {
                width: 100%;
                justify-content: center;
                text-align: center;
                font-size: 0.85em; /* Ridotto ulteriormente per mobile */
            }
            
            .info-text {
                align-items: center;
            }
        }

        .link-container {
  /* Assicura che il contenitore del link stia sopra il pulsante "Torna su" */
  position: relative;
  z-index: 2;
}
        
    </style>
</head>
<body>
    <header>
        <div class="top-band">
            <div class="logo-container">
                <a href="https://culture.roma.it/" target="_blank" title="Questo link si apre in una nuova finestra">
                    <img src="roma.png" alt="Logo Roma">
                </a>
            </div>
            <div class="right-icons">
                <a href="https://www.bibliotechediroma.it/opac" target="_blank" title="Questo link si apre in una nuova finestra">
                    <img src="search.svg" alt="Cerca" title="Cerca nel catalogo delle biblioteche di Roma">
                </a>
                <a href="https://www.facebook.com/biblioteca.elsamorante?locale=it_IT" target="_blank" title="Questo link si apre in una nuova finestra">
                    <svg class="facebook-icon" viewBox="0 0 24 24"><path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z"/></svg>
                </a>
                <a href="https://www.instagram.com/bibliotecaelsamorante/" target="_blank" title="Questo link si apre in una nuova finestra">
                    <svg viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
                </a>
                <a href="https://x.com/bibliomorante" target="_blank" title="Questo link si apre in una nuova finestra">
                    <svg viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
                </a>
                <a href="https://www.youtube.com/@bibliotecaelsamorante1172/featured" target="_blank" title="Questo link si apre in una nuova finestra">
                    <svg viewBox="0 0 24 24"><path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/></svg>
                </a>
            </div>
        </div>
        <div class="bottom-band">
            <a href="https://www.bibliotechediroma.it/opac/.do" target="_blank" class="logo-link">
                <img src="logobianco.png" alt="Logo Bianco" class="logo-bianco">
            </a>
            <a href="https://www.bibliotechediroma.it/opac/library/Biblioteca%20Elsa%20Morante/RMBO2" target="_blank" class="logo-link">
                <img src="logomorante.png" alt="Logo Morante" class="logo-morante">
            </a>
        </div>
    </header>
    
<main>
    <p>Consulta gli orari di apertura della Biblioteca Elsa Morante:</p>

    
    
<a href="https://www.bibliotechediroma.it/opac/library/Biblioteca%20Elsa%20Morante/RMBO2" 
   target="_blank" 
   class="orari-link" 
   onclick="handleOrariClick(event)">
   Orari di apertura
</a>

<script>
function handleOrariClick(event) {
    event.preventDefault(); // Impedisce il comportamento predefinito del link
    const url = 'https://www.bibliotechediroma.it/opac/library/Biblioteca%20Elsa%20Morante/RMBO2';
    const win = window.open(url, '_blank');

    // Attendi 1 secondo prima di eseguire lo scroll
    setTimeout(() => {
        const targetElement = win.document.getElementById('where_openings');
        if (targetElement) {
            targetElement.scrollIntoView({ behavior: 'smooth' });
        }
    }, 1000); // Ritardo di 1 secondo
}
</script>


    
</main>
       

    
    <footer class="footer">
        <div class="footer-logo">
            <a href="https://www.bibliotechediroma.it/opac/library/Biblioteca%20Elsa%20Morante/RMBO2" target="_blank">
                <img src="footermorante.png" alt="Logo Morante Footer">
            </a>
        </div>
        <div class="footer-info">
            <a href="https://bibliotecamorante.github.io/mappa/" class="info-item" title="Visualizza la posizione sulla mappa" target="_blank">
                <img src="location.svg" alt="Indirizzo">
                <div class="info-text">
                    <span>Via Adolfo Cozza 7</span>
                    <span>Municipio X, 00121 Roma</span>
                </div>
            </a>
            <div class="info-item">
                <svg viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
                <div class="info-text">
                    <span>06 4546 0481 / 0483</span>
                </div>
            </div>
            <div class="info-item">
                <svg viewBox="0 0 24 24"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg>
                <div class="info-text">
                    <span>Lunedì-Venerdì 09:00-18:30</span>
                    <span>Sabato 09:00-13:00</span>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>