shark by @VirginiaGallucci - Codewith.it

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

References

<q>Indica una parte di testo come citazione breve
Inserisce un commento nel codice
<source>Il tag HTML <source> si usa per indicare una o più risorse multimediali per elementi media
sizeDetermina le dimensioni dell'elemento in base al valore contenuto
titleIndica informazioni aggiuntive riguardo un elemento HTML
loopL'attributo loop è usato per la riproduzione continua dei contenuti video e audio

Users

Log in to search for users

Explore

Find inspiration

esercitazione6.html

Creazione di un form

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html lang="it">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shark Web Agency
    </title>
    <link rel="stylesheet" href="css/all.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/style-switcher.css">
    <link rel="stylesheet" href="css/coolor-1.css">
    <link rel="stylesheet" href="css/responsive.css">
    <link rel="stylesheet" class="alternate-style" title="color-1" href="css/coolor-1.css" disabled>
    <link rel="stylesheet" class="alternate-style" title="color-2" href="css/coolor-2.css" disabled>
    <link rel="stylesheet" class="alternate-style" title="color-3" href="css/coolor-3.css" disabled>
    <link rel="stylesheet" class="alternate-style" title="color-4" href="css/coolor-4.css" disabled>
    <link rel="stylesheet" class="alternate-style" title="color-5" href="css/coolor-5.css" disabled>
  </head>
  <body>
    <header class="header">
      <div class="container">
        <div class="row justify-content-between">
          <div class="logo">
            <img src="img/Progetto senza titolo (2) 1.png" id="shark" alt="Logo">
          </div>
          <div class="hamburger-btn outer-shadow hover-in-shadow">
            <span>
            </span>
          </div>
        </div>
      </div>
    </header>
    <!-- header finisce-->
    <!-- menu di navigazione-->
    <nav class="nav-menu">
      <div class="close-nav-menu outer-shadow hover-in-shadow">&times;
      </div>
      <div class="nav-menu-inner">
        <ul>
          <li>
            <a href="index.html" class="link-item inner-shadow active menu">Home
            </a>
          </li>
          <li>
            <a href="#about" class="link-item outer-shadow hover-in-shadow">Su di noi
            </a>
          </li>
          <li>
            <a href="servizi.html" class="link-item outer-shadow hover-in-shadow">Servizi
            </a>
          </li>
          <li>
            <a href="#portfolio" class="link-item outer-shadow hover-in-shadow">Lavori
            </a>
          </li>
          <li>
            <a href="#contatti" class="link-item outer-shadow hover-in-shadow">Contatti
            </a>
          </li>
        </ul>
      </div>
    </nav>
    <div class="fade-out-effect">
    </div>
    <!-- home section start-->
    <section>
      <div class="home-section section active" id="home">
        <!--Effect wrap start-->
        <div class="effect-wrap">
          <div class="effect effect-1">
          </div>
          <div class="effect effect-2">
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
          </div>
          <div class="effect effect-3">
          </div>
          <div class="effect effect-4">
          </div>
          <div class="effect effect-5">
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
            <div>
            </div>
          </div>
        </div>
        <!-- Effect wrap end-->
        <div class="container">
          <div class="row full-screen align-items-center">
            <div class="home-text">
              <p>Ciao!
              </p>
              <h2>Sono Shark
              </h2>
              <h1>Uno squalo che fa siti
              </h1>
              <a href="servizi.html" class="link-item btn-1 outer-shadow hover-in-shadow">Scopri di Più
              </a>
            </div>
            <div class="home-img">
              <div class="img-box inner-shadow">
                <img src="img/Component 1.png" class="outer-shadow" alt="shark">
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Home Section end-->
    <section class="about-section section" id="about">
      <div class="container">
        <div class="row">
          <div class="section-title">
            <h2 class="chisiamo" data-heading="chi siamo">un'azienda da remoto
            </h2>
          </div>
        </div>
        <div class="row">
          <div class="about-img">
            <div class="img-box inner-shadow">
              <img src="img/Component 1.png" alt="" class="outer-shadow">
            </div>
            <!-- social links-->
            <div class="social-links">
              <a href="https://www.facebook.com/SharkParma" class="outer-shadow hover-in-shadow">
                <i
                   class="fab fa-facebook-f">
                </i>
              </a>
              <a href="https://www.instagram.com/shark_webagency/" class="outer-shadow hover-in-shadow">
                <i
                   class="fab fa-instagram">
                </i>
              </a>
            </div>
          </div>
          <div class="about-info">
            <p id="info">
              Noi crediamo in un 
              <strong>futuro non convenzionale
              </strong>, libero dai vincoli che sono stati
              imposti sino ad oggi dal sistema professionale. 
              <br>
              Non indossiamo cravatte, non timbriamo il cartellino e la nostra vita non appartiene
              all’ufficio. 
              <br>
              <strong>Siamo specializzati nel mondo del digital. 
              </strong>
              Progettiamo esperienze online e offline in grado di coinvolgere gli utenti. 
              <br>
              Siamo proiettati nel futuro. 
              <strong>Combiniamo tecnologia, design e creatività.
              </strong>
            </p>
            <a href="mailto:info@sharkwebagency.it" class="btn-1 cont outer-shadow hover-in-shadow">Scrivici
            </a>
            <a href="tel:+393914004193" class="btn-1 cont outer-shadow hover-in-shadow">Chiamaci
            </a>
            <a href="https://wa.me/]393914004193" class="btn-1 cont outer-shadow hover-in-shadow">Whatsapp
            </a>
          </div>
        </div>
        <!--about tabs start-->
        <div class="row">
          <div class="about-tabs">
            <span class="tab-item outer-shadow active" data-target=".skills">Skills
            </span>
          </div>
        </div>
        <!--about tabs end-->
        <!-- skills start-->
        <div class="row">
          <div class="skills tab-content">
            <div class="row">
              <!-- skills-item-start-->
              <div class="skill-item">
                <p>Web Development
                </p>
                <div class="progress inner-shadow">
                  <div class="progress-bar" style="width: calc(90% - 14px);">
                    <span class="percentuale">90%
                    </span>
                  </div>
                </div>
              </div>
              <!-- skills item end-->
              <!-- skills-item-start-->
              <div class="skill-item">
                <p>Web Design
                </p>
                <div class="progress inner-shadow">
                  <div class="progress-bar" style="width: calc(85% - 14px);">
                    <span class="percentuale">85%
                    </span>
                  </div>
                </div>
              </div>
              <!-- skills item end-->
              <!-- skills-item-start-->
              <div class="skill-item">
                <p>Web Marketing
                </p>
                <div class="progress inner-shadow">
                  <div class="progress-bar" style="width: calc(80% - 14px);">
                    <span class="percentuale">80%
                    </span>
                  </div>
                </div>
              </div>
              <!-- skills item end-->
              <!-- skills-item-start-->
              <div class="skill-item">
                <p>E-Commerce
                </p>
                <div class="progress inner-shadow">
                  <div class="progress-bar" style="width: calc(100% - 14px);">
                    <span class="percentuale">100%
                    </span>
                  </div>
                </div>
              </div>
              <!-- skills item end-->
              <!-- skills-item-start-->
              <div class="skill-item">
                <p>UX - UI
                </p>
                <div class="progress inner-shadow">
                  <div class="progress-bar" style="width: calc(80% - 14px);">
                    <span class="percentuale">80%
                    </span>
                  </div>
                </div>
              </div>
              <!-- skills item end-->
              <!-- skills-item-start-->
              <div class="skill-item">
                <p>Copywriting
                </p>
                <div class="progress inner-shadow">
                  <div class="progress-bar" style="width: calc(90% - 14px);">
                    <span class="percentuale">90%
                    </span>
                  </div>
                </div>
              </div>
              <!-- skills item end-->
            </div>
          </div>
        </div>
        <!-- skills end-->
      </div>
    </section>
    <!--About section end-->
    <!-- servizi start-->
    <section class="service-section section">
      <div class="container">
        <div class="row">
          <div class="section-title">
            <h2 class="chisiamo" data-heading="Servizi">Cosa facciamo
            </h2>
          </div>
        </div>
        <div class="row">
          <!--service item start -->
          <div class="service-item">
            <div class="service-item-inner outer-shadow">
              <div class="icon inner-shadow">
                <i class="fas fa-mobile-alt">
                </i>
              </div>
              <h3>Responsive design
              </h3>
              <p>
                <br>Ogni portale web sarà strutturato ad hoc - anche e soprattutto - per i dispositivi
                mobili.
                <br>
                <br> 
                <strong>Che significa?
                </strong>
                <br>
                <br>
                Gli utenti potranno navigare da diversi dispositivi! Mobile, Desktop, Tablet: non farti
                trovare impreparato!
              </p>
            </div>
          </div>
          <!--service item end -->
          <!--service item start -->
          <div class="service-item">
            <div class="service-item-inner outer-shadow">
              <div class="icon inner-shadow">
                <i class="fas fa-laptop-code">
                </i>
              </div>
              <h3>Web design
              </h3>
              <p>
                <br>
                <strong>I dettagli fanno la differenza.
                </strong> 
                <br>
                Un sito web definisce la tua presenza online. Non basta essere online, conta esserci e nel
                modo giusto. Dai un boost al tuo sito web con il nostro servizio di Web Design. 
                <br>
                Lavoreremo al tuo sito web con un’attenzione al target identificato per fornire la migliore
                User Experience possibile.
              </p>
            </div>
          </div>
          <!--service item end -->
          <!--service item start -->
          <div class="service-item">
            <div class="service-item-inner outer-shadow">
              <div class="icon inner-shadow">
                <i class="fas fa-code">
                </i>
              </div>
              <h3>E-Commerce
              </h3>
              <p>
                <br>
                <strong>Realizzazione ecommerce
                </strong> per la creazione del tuo Funnel e
                l’individuazione del tuo Target. Creeremo il tuo E-Ccommerce con indicizzazione Seo. 
                <br>
                L’ecommerce è uno dei metodi di vendita più utilizzato che venta il maggior successo nel
                presente e nel prossimo futuro. 
                <br>
                Ora 
                <strong>sì
                </strong> che si può iniziare davvero.
              </p>
            </div>
          </div>
          <!--service item end -->
        </div>
      </div>
    </section>
    <!-- servizi end-->
    <!-- Portfolio section start -->
    <section class="portfolio-section section" id="portfolio">
      <div class="container">
        <div class="row">
          <div class="section-title">
            <h2 class="chisiamo" data-heading="portfolio">Ultimi Lavori
            </h2>
          </div>
        </div>
        <!-- portfolio filter start -->
        <div class="row">
          <div class="portfolio-filter">
            <span class="filter-item active" data-target="tutto">Tutto
            </span>
            <span class="filter-item" data-target="desktop">Desktop
            </span>
            <span class="filter-item" data-target="mobile-app">mobile app
            </span>
            <span class="filter-item" data-target="figma">figma
            </span>
            <span class="filter-item" data-target="ecommerce">e-commerce
            </span>
          </div>
        </div>
        <!-- portfolio filter end -->
        <!-- portfolio items start-->
        <div class="row portfolio-items">
          <!--portfolio ITEM start-->
          <div class="portfolio-item" data-category="desktop">
            <div class="portfolio-item-inner outer-shadow">
              <div class="portfolio-item-img">
                <img src="pizza.jpg" alt="pizzeria"  data-screenshots="pizza.jpg,
                                                                       img/progetti/MacBook Pro - 3.jpg,
                                                                       img/progetti/MacBook Pro - 4.jpg,
                                                                       img/progetti/MacBook Pro - 5.jpg">
                <!--vedi foto-->
                <span class="view-project">Espandi
                </span>
              </div>
              <p class="portfolio-item-title">Best Pizza in town
              </p>
            </div>
          </div>
          <!-- portfolio items end-->
          <!-- portfolio items start-->
          <div class="portfolio-item" data-category="mobile-app">
            <div class="portfolio-item-inner outer-shadow">
              <div class="portfolio-item-img">
                <img src="Desktop - 2.jpg" alt="" data-screenshots="
                                                                    img/progetti/birra/iPhone 11 Pro/X - 1.jpg,
                                                                    img/progetti/birra/iPhone 11 Pro/X - 2.jpg,
                                                                    img/progetti/birra/iPhone 11 Pro/X - 3.jpg">
                <!--vedi foto-->
                <span class="view-project">Espandi
                </span>
              </div>
              <p class="portfolio-item-title">Una bionda vale più di mille parole
              </p>
            </div>
          </div>
          <!-- portfolio items end-->
          <!-- portfolio items end-->
          <!-- portfolio items start-->
          <div class="portfolio-item" data-category="ecommerce">
            <div class="portfolio-item-inner outer-shadow">
              <div class="portfolio-item-img">
                <img src="Desktop - 1.jpg" alt="" 
                     data-screenshots="img/progetti/iPhone 11 Pro/X - 2.jpg,
                                       img/progetti/iPhone 11 Pro/X - 3.jpg">
                <!--vedi foto-->
                <span class="view-project">Espandi
                </span>
              </div>
              <p class="portfolio-item-title">Divano o Poltrona?
              </p>
            </div>
          </div>
          <!-- portfolio items end-->
        </div>
      </div>
    </section>
    <!-- contact section start-->
    <section class="contact-section section" id="contatti">
      <div class="container">
        <div class="row">
          <div class="section-title">
            <h2 class="chisiamo" data-heading="contatti">Parlaci del tuo Progetto
            </h2>
          </div>
        </div>
        <div class="row">
          <!-- Contact item start-->
          <div class="contact-item">
            <div class="contact-item-inner outer-shadow">
              <img src="./img/Progetto senza titolo (2) 1.png" alt="">
              <span>Telefono
              </span>
              <a href="tel:+393914004193">3914004193
              </a>
            </div>
          </div>
          <!-- Contact item end-->
          <!-- Contact item start-->
          <div class="contact-item">
            <div class="contact-item-inner outer-shadow">
              <img src="./img/Progetto senza titolo (2) 1.png" alt="">
              <span>Email
              </span>
              <a href="mailto:info@sharkwebagency.it">info@sharkwebagency.it
              </a>
            </div>
          </div>
          <!-- Contact item end-->
          <!-- Contact item start-->
          <div class="contact-item">
            <div class="contact-item-inner outer-shadow">
              <img src="./img/Progetto senza titolo (2) 1.png" alt="">
              <span>Indirizzo
              </span>
              <a href="https://goo.gl/maps/bMtgeYyDX2eHTLmv6">Parma, Viale Milazzo
              </a>
            </div>
          </div>
          <!-- Contact item end-->
        </div>
        <div class="row">
          <div class="contact-form">
            <form method="POST" action="mailto:info@sharkwebahency.it" enctype="text/plain">
              <div class="row">
                <div class="w-50">
                  <div class="input-group outer-shadow hover-in-shadow">
                    <input type="text" placeholder="Nome" class="input-control">
                  </div>
                  <div class="input-group outer-shadow hover-in-shadow">
                    <input type="text" placeholder="Email" class="input-control">
                  </div>
                  <div class="input-group outer-shadow hover-in-shadow">
                    <input type="text" placeholder="Oggetto" class="input-control">
                  </div>
                </div>
                <div class="w-50">
                  <div class="input-group outer-shadow hover-in-shadow">
                    <textarea class="input-control" placeholder="Messaggio">
                    </textarea>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="submit-btn">
                  <button type="submit" class="btn-1 outer-shadow hover-in-shadow">Invia la Richiesta
                  </button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>
    <!--contact section end-->
    <!-- Portfolio section end -->
    <div class="pp portfolio-popup">
      <div class="pp-main">
        <div class="pp-main-inner">
          <div class="pp-close outer-shadow hover-in-shadow">&times; 
          </div>
          <img src="pizza.jpg" alt="pizza" class="pp-img outer-shadow">
          <div class="pp-counter">
          </div>
        </div>
        <div class="pp-loader">
          <div>
          </div>
        </div>
        <!-- pp navigation -->
        <div class="pp-prev">
          <i class="fas fa-play">
          </i>
        </div>
        <div class="pp-next">
          <i class="fas fa-play">
          </i>
        </div>
      </div>
    </div>
    <!-- portfolio popup start -->
    <div class="style-switcher outer-shadow">
      <div class="style-switcher-toggler s-icon outer-shadow hover-in-shadow">
        <i class="fas fa-cog fa-spin">
        </i>
      </div>
      <div class="day-night s-icon outer-shadow hover-in-shadow">
        <i class="fas ">
        </i>
      </div>
      <h4>Scegli un Colore
      </h4>
      <div class="colors">
        <span class="color-1" onclick="setActiveStyle('color-1')">
        </span>
        <span class="color-2" onclick="setActiveStyle('color-2')">
        </span>
        <span class="color-3" onclick="setActiveStyle('color-3')">
        </span>
        <span class="color-4" onclick="setActiveStyle('color-4')">
        </span>
        <span class="color-5" onclick="setActiveStyle('color-5')">
        </span>
      </div>
    </div>
    <script src="js/script.js">
    </script>
    <script src="js/style-switcher.js">
    </script>
  </body>
</html>

/*------ 
fonts
-------*/

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/*----- 
global style 
------*/

/*------ 
definisco le variabili custom
------*/
:root{
    --bg-black-900: #000000;
    --bg-black-100: #dddddd;
    --bg-black-50: #eff0f4;
    --bg-opacity: rgba(255,255, 255, 0.5);
    --text-black-900: #000000;
    --text-black-700: #555555;
    --text-black-600: #666666;
    --text-black-300: #bbbbbb;
    --outer-shadow: 3px 3px 3px #d0d0d0, -3px -3px 3px #f8f8f8;
    --outer-shadow-0: 0 0 0 #d0d0d0, 0 0 0 #f8f8f8;
    --inner-shadow: inset 3px 3px 3px #d0d0d0, inset -3px -3px 3px #f8f8f8;
    --inner-shadow-0: inset 0 0 0 #d0d0d0, inset 0 0 0 #f8f8f8;
}
/*----- dark theme -----*/
body.dark{
    --bg-black-900: #ffffff;
    --bg-black-100: #353535;
    --bg-black-50: #2b2c2f;
    --bg-opacity: rgba(43, 44, 47, 0.5);
    --text-black-900: #ffffff;
    --text-black-700: #ffffff;
    --text-black-600: #bbbbbb;
    --outer-shadow: 3px 3px 3px #222327, -3px -3px 3px #363636;
    --outer-shadow-0: 0 0 0 #222327, 0 0 0 #363636;
    --inner-shadow: inset 3px 3px 3px #222327, inset -3px -3px 3px #363636;
    --inner-shadow-0: inset 0 0 0 #222327, inset 0 0 0 #363636;
}
body{
    font-size: 16px;
    line-height: 1.5;
    overflow-x: hidden;
    background-color: var(--bg-black-50);
    font-family: 'Raleway', sans-serif;
    font-weight: 400;

}
body.stop-scrolling{
    overflow-y: hidden;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
}
::before, ::after{
    box-sizing: border-box;
}
#shark{
    text-decoration: none;
    width: 100px;
    height: 100px;
    margin-top: -20px;
}
ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
img{
    vertical-align: middle;
    max-width: 100%;
}
.container{
    max-width: 1140px;
    margin: auto;
}
.row{
    display: flex;
    flex-wrap: wrap;
}
.justify-content-between{
    justify-content: space-between;
}

.outer-shadow{
    box-shadow: var(--outer-shadow);
}
.inner-shadow{
   box-shadow: var(--inner-shadow);
}
.hover-in-shadow{
position: relative;
z-index:1;
}
.hover-in-shadow:hover{
    box-shadow: var(--outer-shadow-0);
}
.hover-in-shadow::after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: all 0.3s all;    
}
.hover-in-shadow:hover:after{
    box-shadow: var(--inner-shadow);
}
.align-items-center{
    align-items: center;
}
.btn-1{
    padding: 10px 25px;
    font-size: 18px;
    font-weight: 500;
    color: var(--skin-color);
    background-color: transparent;
    line-height: 1.5;
    border-radius: 30px;
    transition: all 0.3s ease;
    cursor: pointer;
    display: inline-block;
    margin-top: 30px;
    text-decoration: none;
    border: none;
}
.btn-1::after{
    border-radius: 30px;
}
.effect{
    position: absolute;
    z-index: -1;
}
.effect-1{
    width: 30px;
    height: 30px;
    border: 4px solid #8a49ff;
    right: 10%;
    bottom: 10%;
    animation: spin 10s linear infinite;
}
.effect-2{
    left: 3%;
    bottom: 20%;
    width: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /*animation: topBounce 3s ease-in-out infinite;*/
}
.effect-2 div{
    height: 3px;
    width: 3px;
    background-color: #ff9c07;
    margin: 0 3px 8px;
}
.effect-3{
    height: 180px;
    width: 180px;
    border: 25px solid var(--skin-color);
    border-radius: 50%;
    left: 50%;
    top: -120px;
    animation: leftBounce 3s ease-in-out infinite;
}
.effect-4{
    border-top: 30px solid transparent;
    border-left: 30px solid #06d79c;
    left: 30%;
    top: 20%;
    animation: spin 10s linear infinite;
}
.effect-4::before{
    content: "";
    border-top: 30px solid transparent;
    border-left: 30px solid #06d79c;
    position: absolute;
    opacity: 0.5;
    left: -35px;
    top: -25px;
}
.effect-5{
    height: 50px;
    width: 50px;
    right: 10%;
    top: 30%;
    display: flex;
    justify-content: space-between;
    border-radius: 50%;
    overflow:hidden;
    animation: spin 10s linear infinite;
}
.effect-5 div{
    width: 1px;
    background-color: #4dd0e1;

}
@keyframes spin {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
@keyframes topBounce {
    0%, 100%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(5px);
    }
}
@keyframes leftBounce {
    0%, 100%{
        transform: translateX(0);
    }
    50%{
        transform: translateX(15px);
    }
}
.section-hide{
    display: none;
}
/*---- 
header
------*/
.header{
    padding: 20px 15px;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 99;
}


.header .hamburger-btn{
    height: 40px;
    width: 40px;
   display: flex;
   align-items: center;
   cursor: pointer;
   border-radius: 50%;
   justify-content: center;
   transition: all 0.3s ease;
}
.header .hamburger-btn::after{
    border-radius: 50%;
}
.header .hamburger-btn span{
    display: block;
    height: 2px;
    width:16px;
    background-color: var(--bg-black-900);
    position: relative;
}
.header .hamburger-btn span::before, 
.header .hamburger-btn span::after{
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-black-900);
}
.header .hamburger-btn span::before{
    top: -6px;
}
.header .hamburger-btn span::after{
    top: 6px;
}
/*---- 
Menu di navigazione 
____*/

.nav-menu{
    position: fixed;
    background-color: var(--bg-black-50);
    padding: 0 15px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    overflow-y: auto;
}
.nav-menu.open{
    visibility: visible;
    opacity: 1;
    z-index: 999;
    transition: all 0.3s ease-in;
}
.fade-out-effect{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-black-50);
    z-index: -1;
    visibility: hidden;
}
.fade-out-effect.active{
    visibility: visible;
    z-index: 1000;
    animation: fadeOut o.3s ease-out;
}
@keyframes fadeOut{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
.close-nav-menu{
    height: 60px;
    width: 60px;
    display: block;
    font-size: 35px;
    line-height: 55px;
    border-radius: 50%;
    position: absolute;
    right: 25px;
    top:25px;
    cursor: pointer;
    text-align: center;
    color: var(--text-black-600);
}
.close-nav-menu::after{
    border-radius: 50%;
}
.nav-menu-inner{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-menu ul{
    padding: 15px;
}
nav ul li{
    display: flex;
    margin-bottom: 30px;
    text-align: center;
}
nav ul li:last-child{
    margin-bottom: 0;
}
nav ul li a{
    font-family: 'Raleway', sans-serif;
    text-decoration: none;
    display: inline-block;
    font-size: 28px;
    font-weight: 500;
    color: var(--text-black-700);
    padding: 5px 30px;
    text-transform: capitalize;
    border-radius: 30px;
    transition: all 0.3s ease;
}
nav ul li a.active{
    color: var(--skin-color);  
}
nav ul li a::after{
    border-radius: 30px;
}
/*----- 
Home section
-------*/
.home-section{
    position: relative;
}
.home-section .full-screen{
    padding: 50px;
    min-height: 100vh;
}
.home-text p{
    color: var(--text-black-300);
    font-size: 18px;
    text-transform: capitalize;
    margin: 0;
}
.home-text h2{
    font-size: 55px;
    font-weight: 700;
    color: var(--text-black-900);
    margin: 0;
}
.home-text h1{
    font-size: 20px;
    font-weight: 500;
    color: var(--text-black-700);
    margin: 0;
    text-transform: capitalize;
}
.home-text, .home-img{
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 15px;
}

.img-box{
    max-width: 450px;
    display: block;
    margin: auto;
    border-radius: 50%;
    padding: 15px;
    animation: topBounce 3s ease-in-out infinite;
    
}
.img-box img{
    width: 100%;
    border-radius: 50%;
    border: 10px solid transparent;
}

/*------ 
SU di noi
--------*/
.about-section{
    padding: 80px 0 0;
    min-height: 100vh;
}
.section-title{
    padding: 0 15px;
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
    margin-bottom: 60px;
}
.chisiamo{
    display: inline-block;
    font-size: 30px;
    font-weight: 700;
    color: var(--text-black-900);
    text-transform: uppercase;
    margin: 0;
}
.chisiamo::before{
    content: attr(data-heading);
    display: block;
    font-weight: 500;
    font-size: 16px;
    color: var(--skin-color);
}
.about-img{
    flex: 0 0 40%;
    max-width: 40%;
}
.about-info{
    margin-top: 50px;
    flex: 0 0 60%;
    max-width: 60%;
    padding: 0 15px;
} 
.img-box img{
    width: 100%;
    border: 10px solid transparent;
}
#info{
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 15px;
    color: var(--text-black-600);
}
.cont{
    margin: 30px 20px 0 0; /*pulsante chiama e scrivi*/
}
.social-links{
    margin-top: 20px;
    text-align: center;
}
.social-links a{
    display: inline-block;
    height: 40px;
    width: 40px;
    font-size: 16px;
    text-align: center;
    line-height: 40px;
    color: var(--text-black-600);
    margin: 0 4px;
    border-radius: 50%;
    transition: all 0.3s ease;
}
.social-links a:hover{
    color: var(--skin-color);
}
.social-links a::after{
    border-radius: 50%;
}
.about-tabs{
    padding: 60px 15px 50px;
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
}
.tab-item{
    display: inline-block;
    margin: 0 5px 10px;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 30%;
    transition: all 0.3s ease;
    font-size: 16px;
    color: var(--text-black-600);
    font-weight: 500;
    text-transform: capitalize;
}
.tab-item:hover:not(.active){
    opacity: 0.6;
}
.tab-item.active{
    color: var(--skin-color);
}
.skills{
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0 0 40px;
}
 .skill-item{
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 15px;
    margin-bottom: 40px;
}
.skill-item p{
    font-size: 16px;
    color: var(--text-black-600);
    text-transform: capitalize;
    margin: 0 0 10px;
}
.progress{
    height: 20px;
    border-radius: 10px;
    position: relative;
}
.percentuale{
    position: absolute;
    right: 0;
    top: 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-black-600);
    margin-top: -40px;
}
.progress-bar{
    background-color: var(--text-black-600);
    height: 6px;
    left: 7px;
    top: 7px;
    position: absolute;
    border-radius: 10px;
    margin-bottom: 40px;
}
/*-----------
sezione servzi
-------------*/
.service-section{
    padding: 80px 0 80px;
    min-height: 100vh;
}
.service-item{
    flex: 0 0 33.33%;
    max-width: 33.33%;
    padding: 15px;
    transition: all 0.3s ease;
    display: flex;
    flex-wrap: wrap;
}
.service-item-inner{
    padding: 50px 15px;
    border-radius: 5px;
}
.service-item-inner:hover{
    box-shadow: var(--inner-shadow-0);
}
.service-item-inner:hover .icon::after{
    box-shadow: var(--outer-shadow);
}
.icon{
    height: 60px;
    width: 60px;
    text-align: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: block;
    margin:0 auto 30px ;
    position: relative;
    color: var(--text-black-600);
}
.icon::after{
    content:"";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transition: all 0.3s ease;
}
.icon i{
    font-size: 25px;
    line-height: 60px;
}
.service-item-inner h3{
    font-size: 20px;
    font-weight: 600;
    color: var(--text-black-900);
    margin: 0 0 10px;
    text-align: center;
}
.service-item-inner p{
    font-size: 16px;
    color: var(--text-black-600);
    margin: 0;
    line-height: 26px;
}
.service-item-inner:hover{
    color: var(--skin-color);
}
.portfolio-section{
    padding: 80px 0 80px;
    min-height: 100vh;
}
.portfolio-filter{
    padding: 0 15px;
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
    margin-bottom: 20px;
}
.portfolio-section .section-title{ 
    margin-bottom: 40ox;
}
.filter-item{
    display: inline-block;
    margin: 0 5px 10px;
    padding: 5px 10px;
    border-radius: 30px;
    cursor: pointer;
    font-weight: 500;
    color: var(--skin-color);
    text-transform: capitalize;
    font-size: 16px;
    transition: all 0.3s ease;
}
.filter-item:hover:not(.active){
    opacity: 0.6;
}
.filter-item.active{
    color: var(--skin-color);
}
.portfolio-item{
    flex: 0 0 33.33%;
    max-width: 33.33%;
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
}
.portfolio-item.hide{
    display: none;
}
.portfolio-item.show{
    display: block;
    animation: fadeInTop 0.5s ease;
}
.portfolio-item-inner{
    padding: 15px;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
}
.portfolio-item-img{
    border-radius: 5px;
    width: 100%;
   position: relative;
}
.view-project{
   text-transform: capitalize;
   font-size: 16px;
   font-weight: 500;
   color: var(--skin-color);
   transition: all 0.3s ease;
   padding-top: 5px;
   position: absolute;
   left: 0;
   bottom: -4px;
   transform: translateY(-5px);
   z-index: -1;
   opacity: 0;
}
.portfolio-item-inner p{
    font-size: 16px;
    margin: 10px 0 0;
    color: var(--text-black-600);
    text-transform: capitalize;
}
.portfolio-item-inner:hover .view-project{
    transform: translateY(0px);
    opacity: 1;
}
.portfolio-item-inner:hover .portfolio-item-img img{
    transform: translateY(-25px);
}

/*----------- 
portfolio popup 
-------------*/
.portfolio-popup{
    background-color: var(--bg-black-50);
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    overflow-y: scroll;
    opacity: 0;
    visibility: hidden;
}
.portfolio-popup.open{
    visibility: visible;
    opacity: 1;
}
.pp-loader{
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 1005;
    background-color: var(--bg-opacity);
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
}
.pp-loader.active{
    visibility: visible;
    opacity: 1;
}
.pp-loader div{
    height: 40px;
    width: 40px;
    border: 3px solid var(--skin-color);
    border-radius: 50%;
    border-right: 3px solid transparent;
    animation: spin 2s linear infinite;
}
.pp-img{
    max-width: 100%;
    width: auto;
    max-height: 600px;
    padding: 10px;
    border-radius: 5px;
}
.pp-main{
    min-height: 100vh;
    max-width: 1350px;
    width: 85%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pp-main-inner{
    padding: 70px 0 50px;
    position: relative;
}
.pp-close{
    position: absolute;
    right: 0;
    border-radius: 50%;
    top: 15px;
    height: 40px;
    width: 40px;
    text-align: center;
    line-height: 35px;
    font-size: 35px;
    color: var(--skin-color);
    cursor: pointer;
    transition: all 0.3s ease;
}
.pp-close::after{
    border-radius: 50%;
}
.pp-counter{
    position: absolute;
    right: 0;
    height: 40px;
    line-height: 40px;
    bottom:5px;
    font-size: 16px;
    color: var(--text-black-600);
}
.pp-prev, .pp-next{
    position: fixed;
    top: 50%;
    height: 40px;
    width: 40px;
    text-align: center;
    font-size: 20px;
    z-index: 1010;
    transition: all 0.3s ease;

}
.pp-prev i, .pp-next i{
    line-height:40px;
    color: var(--skin-color);
    cursor: pointer;
    opacity: 0.5;
}
.pp-prev i{
    transform: rotate(180deg);
}
.pp-prev{
    left: 15px;
}
.pp-next{
    right: 15px;
}
.pp-prev i:hover, .pp-next i:hover{
    opacity: 1;
    
}
/*-----
Contact section
----- */
.contact-section{
    padding: 80px 0 80px;
    min-height: 100vh;
}
.contact-item{
    flex: 0 0 33.33%;
    max-width: 33.33%;
    padding: 15px;
    display: flex;
}
.contact-item-inner{
    padding: 30px 15px;
    text-align: center;
    border-radius: 5px;
    width: 100%;
}
.contact-item-inner i{
    font-size: 25px;
    color: var(--skin-color);
}
.contact-item-inner span{
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-black-700);
    margin: 15px 0 10px;
    text-transform: capitalize;
}
.contact-item-inner a{
    font-size: 16px;
    text-decoration: none;
    color: var(--text-black-600);
    line-height: 26px;
    margin: 0;
}
.contact-form{
    flex: 0 0 100%;
    max-width: 100%;
    margin-top: 50px;
}
.w-50{
    padding: 0 15px;
    flex: 0 0 50%;
    max-width: 50%; 
}
.input-group{
    margin: 0 0 25px;
    transition: all 0.3s ease;
    border-radius: 30px;
}
.input-group::after{
    border-radius: 30px;
}
.input-control{
    height: 45px;
    display: block;
    width: 100%;
    border-radius: 30px;
    border: none;
    background-color: transparent;
    font-size: 16px;
    padding: 0 15px;
    color: var(--text-black-700);
}
.input-group textarea{
    height: 185px;
    padding-top: 15px;
    resize: none;
    font-family: 'Raleway', sans-serif;
}
.submit-btn{
    flex: 0 0 100%;
    max-width: 100%;
    text-align: right;
    padding: 0 15px;
}
.job-section{
    padding: 80px 0 80px;
    min-height: 100vh;
}
.job-item{
    flex: 0 0 50%;
    max-width: 50%;
    padding: 15px;
    transition: all 0.3s ease;
    display: flex;
    flex-wrap: wrap;
}
.caffe{
    max-width: 450px;
    display: block;
    margin: auto;
    padding: 15px;
    animation: topBounce 3s ease-in-out infinite;
    
}.caffe img{
    width: 250px;
}
.job-item-inner{
    padding: 100px 15px;
    border-radius: 5px;
}
.job-item-inner:hover{
    box-shadow: var(--inner-shadow-0);
}
.job-item-inner:hover .icon::after{
    box-shadow: var(--outer-shadow);
}
.job-img{
    flex: 0 0 30%;
    max-width: 30%;
}

.job-info{
    margin-top: 50px;
    flex: 0 0 70%;
    max-width: 70%;
    padding: 0 15px;
    padding-top: 30px;
} 
.job-section{
    width: 100%;
    padding: 80px 0 0;
    min-height: 100vh;
    margin-bottom: 50px;
}
.info-job{
    font-size: 20px;
    line-height: 45px;
    margin-bottom: 15px;
    color: var(--text-black-600);
    margin-top: 20px;
}

/*
navigation menu
*/
(()=>{
    const hamburgerBtn = document.querySelector(".hamburger-btn"),
    navMenu = document.querySelector(".nav-menu"),
    closeNavBtn = navMenu.querySelector(".close-nav-menu");

    hamburgerBtn.addEventListener("click", showNavMenu);
    closeNavBtn.addEventListener("click", hideNavMenu)


    function showNavMenu (){
        navMenu.classList.add("open");
        bodyScrollingToggle();
    }
    function hideNavMenu (){
        navMenu.classList.remove("open");
        fadeOutEffect();
        bodyScrollingToggle();

    }
    function fadeOutEffect(){
        document.querySelector(".fade-out-effect").classList.add("active");
        setTimeout(()=>{
            document.querySelector(".fade-out-effect").classList.remove("active");
        },400)
    }

    document.addEventListener("click", (event)=>{
        if(event.target.classList.contains("link-item")){
            if(event.target.hash !==""){
                event.preventDefault();
                const hash = event.target.hash;
                document.querySelector(".section.active").classList.add("hide");
                document.querySelector(".section.active").classList.remove("active");
                document.querySelector(hash).classList.add("active");
                document.querySelector(hash).classList.add("hide");
                navMenu.querySelector(".active").classList.add("outer-shadow", "hover-in-shadow");
                navMenu.querySelector(".active").classList.remove("active", "inner-shadow");

                if(navMenu.classList.contains("open")){
                event.target.classList.add("active", "inner-shadow");
                event.target.classList.remove("outer-shadow", "hover-in-shadow");

                hideNavMenu();
                }
                else{
                    let navItems = navMenu.querySelectorAll(".link-item");
                    navItems.forEach((item)=>{
                        if(hash === item.hash){
                            item.classList.add("active", "inner-shadow");
                            item.classList.remove("outer-shadow", "hover-in-shadow");
                        }
                    })
                    fadeOutEffect();
                }
                window.location.hash = hash;
            }
        }
    })
})();

function bodyScrollingToggle () {
    document.body.classList.toggle("stop-scrolling");
}
(() => {
    const filterContainer = document.querySelector(".portfolio-filter"),
    portfolioItemsContainer = document.querySelector(".portfolio-items"),
    portfolioItems = document.querySelectorAll(".portfolio-item"),
    popup = document.querySelector(".portfolio-popup"),
    prevBtn = popup.querySelector(".pp-prev"),
    nextBtn = popup.querySelector(".pp-next"),
    closeBtn = popup.querySelector(".pp-close");
    let itemIndex, slideIndex, screenshots;

    filterContainer.addEventListener("click", (event)=>{
        if(event.target.classList.contains("filter-item")&& 
        !event.target.classList.contains("active")){
            //deactivate existing active "filter-item"
            filterContainer.querySelector(".active").classList.remove("outer-shadow","active");

        // activate new "filter item"

        event.target.classList.add("active", "outer-shadow");
        const target = event.target.getAttribute ("data-target");
        portfolioItems.forEach((item)=>{
            if (target === item.getAttribute("data-category") || target === 'tutto' ){
                item.classList.remove("hide");
                item.classList.add("show");
            }
            else{
                item.classList.remove("show");
                item.classList.add("hide");
            }
        })
        }
    })
    portfolioItemsContainer.addEventListener("click", (event) =>{
        if(event.target.closest(".portfolio-item-inner")){
            const portfolioItem = event.target.closest(".portfolio-item-inner").parentElement;

            itemIndex=Array.from(portfolioItem.parentElement.children).indexOf(portfolioItem);
            screenshots = portfolioItems[itemIndex].querySelector(".portfolio-item-img img").getAttribute("data-screenshots");

            screenshots = screenshots.split(",");
            if (screenshots.lenght === 1){
                prevBtn.style.display="none";
                nextBtn.style.display="none";
            }
            else{
                prevBtn.style.display="block";
                nextBtn.style.display="block";
            }
            slideIndex =0;
            popupToggle();
            popupSlideShow();
        }
    })
    closeBtn.addEventListener("click", () =>{
        popupToggle();
    })

    function popupToggle(){
        popup.classList.toggle("open");
        bodyScrollingToggle();
    }
    function popupSlideShow(){
        const imgSrc = screenshots[slideIndex];
        const popupImg = popup.querySelector (".pp-img");

        popup.querySelector(".pp-loader").classList.add("active");
        popupImg.src = imgSrc;
        popupImg.onload = () => {
        popup.querySelector(".pp-loader").classList.remove("active");
        }
       
    }

    nextBtn.addEventListener("click", () => {
        if(slideIndex === screenshots.lenght-1){
            slideIndex =0;
        }
        else {
            slideIndex ++;
        }
        popupSlideShow();
    })

    prevBtn.addEventListener("click", ()=>{
        if(slideIndex === 0){
            slideIndex = screenshots.lenght-1;
        }
        else{
            slideIndex --;
        }
        popupSlideShow();
    })
})();

/*
hide all sections except active
*/

(()=>{

    const sections = document.querySelectorAll(".section");
    sections.forEach((section)=>{
        if(!section.classList.contains("active")){
            section.classList.add("hide");
        }
    })
})();