Gallery Action Seven by @marco_ballarin - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura
widthImposta la larghezza di un elemento HTML
<head>Tag primario di un documento HTML
<select>Usato per creare un menu a tendina.
<tr>Definisce le righe di una tabella (rows)
forSpecifica a quale id è associato l'elemento in cui è dichiarato.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

esercizio 03 pagina form

5/10/24 es. 3 - inverti stringa

Prototipo di form

WEX prova HTML(2)

esercitazione6.html

CodeMirror preview

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="it">
  <head>
    <title>SEMI al FUTURO Action Seven!</title>
    <link rel="icon" type="image/x-icon" href="http://pcto-minisiti.netsons.org/wp-content/uploads/Icona.png">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
      body {
        background-color:rgba(24, 24, 27, 0.98);
      }
      .div-header {
        display:flex;
      }
      .div-title {
        color:white;
        text-align:left;
        font-family:Lato, Helvetica, sans-serif;
        font-size:20px;
        padding:10px;
        width:50%;
      }
      .div-icon {
        text-align:right;
        font-size:20px;
        padding:10px;
        width:50%;
      }
      .a-icon {
        color:white;
      }
      .div-gallery {
        display:none;
      }
    </style>
  </head>
  <body>
    <div class="div-header">
      <div class="div-title">Galleria di foto</div>
      <div class="div-icon">
      <a class="a-icon" href="https://pcto-minisiti.netsons.org/semi-al-futuro-action-seven.html#gallery-1">
      <i class="fa-sharp fa-solid fa-rotate-right"></i>
      </a>
      </div>
    </div>
    <div class="div-gallery">
      <a data-fancybox="gallery" href="http://pcto-minisiti.netsons.org/wp-content/uploads/SEMI-al-FUTURO-Action-Seven-1-scaled.jpg">
      <img src="http://pcto-minisiti.netsons.org/wp-content/uploads/SEMI-al-FUTURO-Action-Seven-1-scaled.jpg"/>
      </a>
      <a data-fancybox="gallery" href="http://pcto-minisiti.netsons.org/wp-content/uploads/SEMI-al-FUTURO-Action-Seven-5-scaled.jpg">
      <img src="http://pcto-minisiti.netsons.org/wp-content/uploads/SEMI-al-FUTURO-Action-Seven-5-scaled.jpg"/>
      </a>
      <a data-fancybox="gallery" href="http://pcto-minisiti.netsons.org/wp-content/uploads/SEMI-al-FUTURO-Action-Seven-2-scaled.jpg">
      <img src="http://pcto-minisiti.netsons.org/wp-content/uploads/SEMI-al-FUTURO-Action-Seven-2-scaled.jpg"/>
      </a>
      <a data-fancybox="gallery" href="http://pcto-minisiti.netsons.org/wp-content/uploads/SEMI-al-FUTURO-Action-Seven-4-scaled.jpg">
      <img src="http://pcto-minisiti.netsons.org/wp-content/uploads/SEMI-al-FUTURO-Action-Seven-4-scaled.jpg"/>
      </a>
      <a data-fancybox="gallery" href="http://pcto-minisiti.netsons.org/wp-content/uploads/SEMI-al-FUTURO-Action-Seven-3-scaled.jpg">
      <img src="http://pcto-minisiti.netsons.org/wp-content/uploads/SEMI-al-FUTURO-Action-Seven-3-scaled.jpg"/>
      </a>
      <a data-fancybox="gallery" href="http://pcto-minisiti.netsons.org/wp-content/uploads/SEMI-al-FUTURO-Action-Seven-6.jpg">
      <img src="http://pcto-minisiti.netsons.org/wp-content/uploads/SEMI-al-FUTURO-Action-Seven-6.jpg"/>
      </a>
      <a data-fancybox="gallery" href="http://pcto-minisiti.netsons.org/wp-content/uploads/SEMI-al-FUTURO-Action-Seven-7.jpg">
      <img src="http://pcto-minisiti.netsons.org/wp-content/uploads/SEMI-al-FUTURO-Action-Seven-7.jpg"/>
      </a>
      <a data-fancybox="gallery" href="http://pcto-minisiti.netsons.org/wp-content/uploads/SEMI-al-FUTURO-Action-Seven-8.jpg">
      <img src="http://pcto-minisiti.netsons.org/wp-content/uploads/SEMI-al-FUTURO-Action-Seven-8.jpg"/>
      </a>
      <a data-fancybox="gallery" href="http://pcto-minisiti.netsons.org/wp-content/uploads/SEMI-al-FUTURO-Action-Seven-9.jpg">
      <img src="http://pcto-minisiti.netsons.org/wp-content/uploads/SEMI-al-FUTURO-Action-Seven-9.jpg"/>
      </a>
      <a data-fancybox="gallery" href="http://pcto-minisiti.netsons.org/wp-content/uploads/SEMI-al-FUTURO-Action-Seven-10.jpg">
      <img src="http://pcto-minisiti.netsons.org/wp-content/uploads/SEMI-al-FUTURO-Action-Seven-10.jpg"/>
      </a>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
    <script>
      Fancybox.bind('[data-fancybox="gallery"]', {
        Carousel : {
          infinite: false,
        }
      });   
    </script>
  </body>
</html>