SITO NON DISPONIBILE 2 
SFONDO ADATTATO
Progetto FREE
In questo secondo tutorial andremo a lavorare direttamente sul vostro sito senza cambiare nulla come nel primo esempio
In questo progetto non è indispensabile avere dei break point particolari vanno bene anche quelli di default che il software prepara in fase di progetto.
PRO
- Ottieni pagine di manutenzione molto professionali. Dipende dal grado di conoscenze grafiche che hai.
- Rispetto al tutorial 1 questo è più rapido nel metterlo in azione. Ci vuole pochissimo tempo. Utile se bisogna mettere il sito Of-Line nell'immediatezza,
CONTRO
- Si perde un po di tempo per le immagini.
- Lo sfondo è adattato (non responsive)
- Le immagini devono avere un focus centrale in maniera tale che risulti meno invadente il taglio dell'immagine a risoluzioni device
Sei Pronto? Mettiti comodo, affina le tue idee e seguimi.
STEEP 1/1
Vai al passo 1 - in codice e statistiche e inserisci tutto il codice seguente:
In neretto ti ho lasciato il percorso dell'immagine che tu dovrai cambiare con il tuo percorso.
Codice aggiornato il 18.03.2025 nella chiusura della pagina con un redirect. Alcune versione di android non permettevano la chiusura della pagina.
<div id="downgrade-message"> <div class="overlay"></div> <!-- Effetto retina per migliorare leggibilità --> <div class="message-box"> <h2>🔧 SITO IN MANUTENZIONE</h2> <p>Al momento non è possibile visitare il sito!</p> <p> www.yoursite.com </p> <button onclick="window.location.href='https://www.google.com';">Chiudi la Pagina</button> </div> </div> <style> /* Blocco principale */ #imStickyBarContainer div {display:none} #imHeaderObjects div {display:none} #downgrade-message { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; color: white; font-family: Arial, sans-serif; z-index: 9999; animation: fadeIn 0.5s ease-in-out; overflow: hidden; } /* Sfondo immagine perfettamente responsive */ #downgrade-message::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('https://www.templatemaxdesign.altervista.org/images/ND2.jpg') no-repeat center center / cover; filter: brightness(80%); z-index: -2; } /* Effetto retina sopra l'immagine */ .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); z-index: -1; } /* Box messaggio perfettamente centrato */ .message-box { position: relative; background: rgba(255, 255, 255, 0.1); padding: 30px; border-radius: 10px; box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.4); backdrop-filter: blur(8px); max-width: 380px; width: 90%; animation: slideUp 0.6s ease-out; } /* Titolo */ h2 { font-size: 22px; margin-bottom: 15px; } /* Testo */ p { font-size: 18px; line-height: 1.8; margin-bottom: 20px; } /* Pulsante */ button { background: #ff4b2b; color: white; border: none; padding: 12px 20px; cursor: pointer; font-size: 16px; border-radius: 6px; transition: all 0.3s ease; width: 100%; max-width: 250px; } button:hover { background: #ff2b2b; } /* Animazioni */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } </style> <script> document.body.style.overflow = "hidden"; // Blocca lo scroll della pagina </script> |
GUARDA ANCHE QUESTO TUTORIAL IN ESECUZIONE.
FINE.
COMMENTA ▼
Non sono presenti ancora recensioni.