Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!--NEXAL TEXT IS THE PROBLEM--> 
<!--NEXAL TEXT IS THE PROBLEM--> 
<!--NEXAL TEXT IS THE PROBLEM--> 
<!--NEXAL TEXT IS THE PROBLEM-->
<!--NEXAL TEXT IS THE PROBLEM--> 
<!--NEXAL TEXT IS THE PROBLEM--> 
<!--NEXAL TEXT IS THE PROBLEM--> 
<!--NEXAL TEXT IS THE PROBLEM--> 
<!--NEXAL TEXT IS THE PROBLEM--> 
<!--NEXAL TEXT IS THE PROBLEM--> 
<header>
          <nav class="navbar navbar-expand-lg navbar-light bg-transparent">
                  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#header" aria-controls="header" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                  </button>
                  <a class="navbar-brand" href="/nexal.it/index.html" style="margin-top:-10px">
                    <svg id="logo-animazione" version="1.1" x="0px" y="0px"
                    	 width="250px" height="40px" viewBox="400 80 150 50" xml:space="preserve">
                      <g>
                        <path class="path-logo" fill="#f7f7f7" d="M434.067,98.133c-2,0-4.667,1-8,2.933v23.867h-11v-36h6.8l1.867,4.867c2.067-1.4,4.267-2.533,6.733-3.4
                          c2.4-0.867,4.667-1.267,6.867-1.267c4.2,0,7.267,1.2,9.2,3.6c1.867,2.4,2.867,5.733,2.867,9.867v22.333h-11.133v-21.467
                          c0-1.667-0.333-2.933-1.067-3.867C436.533,98.6,435.467,98.133,434.067,98.133z"/>
                        <path  class="path-logo" fill="#f7f7f7" d="M472,89.2c3.467,0,6.4,0.8,8.8,2.4c2.4,1.6,4.2,3.733,5.4,6.4c1.2,2.667,1.8,5.667,1.8,9v3.333h-21.867
                          c1,4,4,6,9,6c3.2,0,6.467-0.867,9.6-2.667l3.067,7.667c-1.6,1.2-3.533,2.133-5.867,2.8c-2.333,0.733-4.867,1.067-7.6,1.067
                          c-6.2,0-11.133-1.6-14.733-4.733c-3.6-3.133-5.4-7.467-5.4-13.067c0-3.667,0.733-6.867,2.267-9.6
                          c1.467-2.733,3.6-4.867,6.267-6.333C465.467,89.933,468.533,89.2,472,89.2z M471.733,98.267c-1.533,0-2.867,0.533-3.867,1.6
                          c-1.067,1.067-1.667,2.467-1.867,4.2h11.533c-0.267-1.733-0.933-3.133-1.867-4.2C474.667,98.8,473.4,98.267,471.733,98.267z"/>
                        <path  class="path-logo" fill="#f7f7f7" d="M548.267,98.6c-1.333,0-2.933,0.2-4.667,0.6c-1.733,0.4-3.267,0.933-4.533,1.533l-2.933-8.4
                          c1.533-0.867,3.667-1.6,6.4-2.2c2.733-0.6,5.133-0.933,7.333-0.933c2.867,0,5.4,0.533,7.6,1.667s3.867,2.733,5.067,4.733
                          c1.2,2.067,1.8,4.4,1.8,7v22.333H558.2l-2.6-4.2c-2.533,2.933-5.333,4.333-8.333,4.333c-4.133,0-7.267-1-9.333-3.067
                          c-2.133-2.067-3.133-4.8-3.133-8.333c0-3.467,1.2-6.067,3.533-7.8c2.333-1.733,5.533-2.6,9.6-2.6h5.333
                          c-0.067-1.467-0.6-2.667-1.467-3.467C550.867,99,549.733,98.6,548.267,98.6z M547.933,109.933c-1.2,0-2.133,0.333-2.867,1.067
                          S544,112.6,544,113.667c0,0.867,0.333,1.6,0.933,2.2c0.6,0.6,1.4,0.933,2.4,0.933c2.067,0,4.067-0.867,6-2.667V110h-5.4V109.933z"
                          />
                        <path  class="path-logo" fill="#f7f7f7" d="M582.933,74.733v50.2H572V77.4L582.933,74.733z"/>
                        <path  class="path-logo" fill="#f7f7f7" d="M505.333,125.067L495,120.933l10.067-13.6l-10.067-14l10.333-4.133l11.333,18.133L505.333,125.067z"/>
                        <g>
                          <polygon  class="path-logo" fill="#f7f7f7" points="520.4,109.6 514.533,118.6 519.533,125.267 532.133,125.267 		"/>
                          <polygon  class="path-logo" fill="#f7f7f7" points="520.333,105.067 532.133,89.4 519.6,89.4 514.533,96.067 		"/>
                        </g>
                      </g>
                    </svg>
                  </a>
                  <div class="collapse navbar-collapse" id="header">
                   
                  <ul class="navbar-nav header" style="width: 100%">
                      <li class="nav-item num1" >
                        <a class="nav-link pre-underline" href="/nexal.it/progetti.html">Progetti<sup style="padding-left: 5px">00</sup></a>
                        <hr class="underline"/>  
                      </li>
                      <li class="nav-item num2" >
                              <a class="nav-link pre-underline" href="/nexal.it/agency.html">Agency</a>
                              <hr class="underline"/>  
                      </li>
                      <li class="nav-item num3">
                                  <a class="nav-link pre-underline" href="/nexal.it/servizi.html">Servizi</a>
                                  <hr class="underline"/>  
                      </li>
                       <li class="nav-item ml-auto num4" >
                        <a class="nav-link" style="display: inline-flex; color:#222;" href="/nexal.it/contatti.html">Contatti
                          <span style="margin-left: 5px">
                            <svg version="1.1" id="el_QZ9ETcUWM" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48" height="48" viewBox="-58 0 120 120" enable-background="new 608 328 64 64" xml:space="preserve"><style>@-webkit-keyframes kf_el_e2zsVfSx5-_an_cUPTZyzCA{0%{-webkit-transform: translate(612.4400024414062px, 333.2470397949219px) rotate(0deg) translate(-612.4400024414062px, -333.2470397949219px);transform: translate(612.4400024414062px, 333.2470397949219px) rotate(0deg) translate(-612.4400024414062px, -333.2470397949219px);}16.67%{-webkit-transform: translate(612.4400024414062px, 333.2470397949219px) rotate(15deg) translate(-612.4400024414062px, -333.2470397949219px);transform: translate(612.4400024414062px, 333.2470397949219px) rotate(15deg) translate(-612.4400024414062px, -333.2470397949219px);}33.33%{-webkit-transform: translate(612.4400024414062px, 333.2470397949219px) rotate(0deg) translate(-612.4400024414062px, -333.2470397949219px);transform: translate(612.4400024414062px, 333.2470397949219px) rotate(0deg) translate(-612.4400024414062px, -333.2470397949219px);}50%{-webkit-transform: translate(612.4400024414062px, 333.2470397949219px) rotate(-15deg) translate(-612.4400024414062px, -333.2470397949219px);transform: translate(612.4400024414062px, 333.2470397949219px) rotate(-15deg) translate(-612.4400024414062px, -333.2470397949219px);}66.67%{-webkit-transform: translate(612.4400024414062px, 333.2470397949219px) rotate(0deg) translate(-612.4400024414062px, -333.2470397949219px);transform: translate(612.4400024414062px, 333.2470397949219px) rotate(0deg) translate(-612.4400024414062px, -333.2470397949219px);}100%{-webkit-transform: translate(612.4400024414062px, 333.2470397949219px) rotate(0deg) translate(-612.4400024414062px, -333.2470397949219px);transform: translate(612.4400024414062px, 333.2470397949219px) rotate(0deg) translate(-612.4400024414062px, -333.2470397949219px);}}@keyframes kf_el_e2zsVfSx5-_an_cUPTZyzCA{0%{-webkit-transform: translate(612.4400024414062px, 333.2470397949219px) rotate(0deg) translate(-612.4400024414062px, -333.2470397949219px);transform: translate(612.4400024414062px, 333.2470397949219px) rotate(0deg) translate(-612.4400024414062px, -333.2470397949219px);}16.67%{-webkit-transform: translate(612.4400024414062px, 333.2470397949219px) rotate(15deg) translate(-612.4400024414062px, -333.2470397949219px);transform: translate(612.4400024414062px, 333.2470397949219px) rotate(15deg) translate(-612.4400024414062px, -333.2470397949219px);}33.33%{-webkit-transform: translate(612.4400024414062px, 333.2470397949219px) rotate(0deg) translate(-612.4400024414062px, -333.2470397949219px);transform: translate(612.4400024414062px, 333.2470397949219px) rotate(0deg) translate(-612.4400024414062px, -333.2470397949219px);}50%{-webkit-transform: translate(612.4400024414062px, 333.2470397949219px) rotate(-15deg) translate(-612.4400024414062px, -333.2470397949219px);transform: translate(612.4400024414062px, 333.2470397949219px) rotate(-15deg) translate(-612.4400024414062px, -333.2470397949219px);}66.67%{-webkit-transform: translate(612.4400024414062px, 333.2470397949219px) rotate(0deg) translate(-612.4400024414062px, -333.2470397949219px);transform: translate(612.4400024414062px, 333.2470397949219px) rotate(0deg) translate(-612.4400024414062px, -333.2470397949219px);}100%{-webkit-transform: translate(612.4400024414062px, 333.2470397949219px) rotate(0deg) translate(-612.4400024414062px, -333.2470397949219px);transform: translate(612.4400024414062px, 333.2470397949219px) rotate(0deg) translate(-612.4400024414062px, -333.2470397949219px);}}@-webkit-keyframes kf_el_e2zsVfSx5-_an_BWZyC1Kz0{0%{-webkit-transform: translate(612.4400024414062px, 333.2470397949219px) translate(-612.4400024414062px, -333.2470397949219px) translate(0px, 0px);transform: translate(612.4400024414062px, 333.2470397949219px) translate(-612.4400024414062px, -333.2470397949219px) translate(0px, 0px);}16.67%{-webkit-transform: translate(612.4400024414062px, 333.2470397949219px) translate(-612.4400024414062px, -333.2470397949219px) translate(-25px, 0px);transform: translate(612.4400024414062px, 333.2470397949219px) translate(-612.4400024414062px, -333.2470397949219px) translate(-25px, 0px);}33.33%{-webkit-transform: translate(612.4400024414062px, 333.2470397949219px) translate(-612.4400024414062px, -333.2470397949219px) translate(0px, 0px);transform: translate(612.4400024414062px, 333.2470397949219px) translate(-612.4400024414062px, -333.2470397949219px) translate(0px, 0px);}50%{-webkit-transform: translate(612.4400024414062px, 333.2470397949219px) translate(-612.4400024414062px, -333.2470397949219px) translate(-25px, 0px);transform: translate(612.4400024414062px, 333.2470397949219px) translate(-612.4400024414062px, -333.2470397949219px) translate(-25px, 0px);}66.67%{-webkit-transform: translate(612.4400024414062px, 333.2470397949219px) translate(-612.4400024414062px, -333.2470397949219px) translate(0px, 0px);transform: translate(612.4400024414062px, 333.2470397949219px) translate(-612.4400024414062px, -333.2470397949219px) translate(0px, 0px);}100%{-webkit-transform: translate(612.4400024414062px, 333.2470397949219px) translate(-612.4400024414062px, -333.2470397949219px) translate(0px, 0px);transform: translate(612.4400024414062px, 333.2470397949219px) translate(-612.4400024414062px, -333.2470397949219px) translate(0px, 0px);}}@keyframes kf_el_e2zsVfSx5-_an_BWZyC1Kz0{0%{-webkit-transform: translate(612.4400024414062px, 333.2470397949219px) translate(-612.4400024414062px, -333.2470397949219px) translate(0px, 0px);transform: translate(612.4400024414062px, 333.2470397949219px) translate(-612.4400024414062px, -333.2470397949219px) translate(0px, 0px);}16.67%{-webkit-transform: translate(612.4400024414062px, 333.2470397949219px) translate(-612.4400024414062px, -333.2470397949219px) translate(-25px, 0px);transform: translate(612.4400024414062px, 333.2470397949219px) translate(-612.4400024414062px, -333.2470397949219px) translate(-25px, 0px);}33.33%{-webkit-transform: translate(612.4400024414062px, 333.2470397949219px) translate(-612.4400024414062px, -333.2470397949219px) translate(0px, 0px);transform: translate(612.4400024414062px, 333.2470397949219px) translate(-612.4400024414062px, -333.2470397949219px) translate(0px, 0px);}50%{-webkit-transform: translate(612.4400024414062px, 333.2470397949219px) translate(-612.4400024414062px, -333.2470397949219px) translate(-25px, 0px);transform: translate(612.4400024414062px, 333.2470397949219px) translate(-612.4400024414062px, -333.2470397949219px) translate(-25px, 0px);}66.67%{-webkit-transform: translate(612.4400024414062px, 333.2470397949219px) translate(-612.4400024414062px, -333.2470397949219px) translate(0px, 0px);transform: translate(612.4400024414062px, 333.2470397949219px) translate(-612.4400024414062px, -333.2470397949219px) translate(0px, 0px);}100%{-webkit-transform: translate(612.4400024414062px, 333.2470397949219px) translate(-612.4400024414062px, -333.2470397949219px) translate(0px, 0px);transform: translate(612.4400024414062px, 333.2470397949219px) translate(-612.4400024414062px, -333.2470397949219px) translate(0px, 0px);}}@-webkit-keyframes kf_el_9453HmmUwa_an_WhpGYRBFm{0%{-webkit-transform: translate(612.4400024414062px, 333.2470397949219px) translate(-612.4400024414062px, -333.2470397949219px) translate(-609px, -330px);transform: translate(612.4400024414062px, 333.2470397949219px) translate(-612.4400024414062px, -333.2470397949219px) translate(-609px, -330px);}100%{-webkit-transform: translate(612.4400024414062px, 333.2470397949219px) translate(-612.4400024414062px, -333.2470397949219px) translate(-609px, -330px);transform: translate(612.4400024414062px, 333.2470397949219px) translate(-612.4400024414062px, -333.2470397949219px) translate(-609px, -330px);}}@keyframes kf_el_9453HmmUwa_an_WhpGYRBFm{0%{-webkit-transform: translate(612.4400024414062px, 333.2470397949219px) translate(-612.4400024414062px, -333.2470397949219px) translate(-609px, -330px);transform: translate(612.4400024414062px, 333.2470397949219px) translate(-612.4400024414062px, -333.2470397949219px) translate(-609px, -330px);}100%{-webkit-transform: translate(612.4400024414062px, 333.2470397949219px) translate(-612.4400024414062px, -333.2470397949219px) translate(-609px, -330px);transform: translate(612.4400024414062px, 333.2470397949219px) translate(-612.4400024414062px, -333.2470397949219px) translate(-609px, -330px);}}#el_QZ9ETcUWM *{-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;-webkit-animation-play-state: running;animation-play-state: running;-webkit-animation-timing-function: cubic-bezier(0, 0, 1, 1);animation-timing-function: cubic-bezier(0, 0, 1, 1);}#el_e2zsVfSx5-{fill: #1A1818;}#el_hG7sOYjU2l{fill: #1A1818;}#el_M3yQgUa1gS{fill: #1A1818;}#el_9453HmmUwa_an_WhpGYRBFm{-webkit-animation-fill-mode: backwards;animation-fill-mode: backwards;-webkit-transform: translate(612.4400024414062px, 333.2470397949219px) translate(-612.4400024414062px, -333.2470397949219px) translate(-609px, -330px);transform: translate(612.4400024414062px, 333.2470397949219px) translate(-612.4400024414062px, -333.2470397949219px) translate(-609px, -330px);-webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);animation-timing-function: cubic-bezier(0.42, 0, 1, 1);}#el_QZ9ETcUWM:hover #el_9453HmmUwa_an_WhpGYRBFm{-webkit-animation-name: kf_el_9453HmmUwa_an_WhpGYRBFm;animation-name: kf_el_9453HmmUwa_an_WhpGYRBFm;}#el_e2zsVfSx5-_an_BWZyC1Kz0{-webkit-animation-fill-mode: backwards;animation-fill-mode: backwards;-webkit-transform: translate(612.4400024414062px, 333.2470397949219px) translate(-612.4400024414062px, -333.2470397949219px) translate(0px, 0px);transform: translate(612.4400024414062px, 333.2470397949219px) translate(-612.4400024414062px, -333.2470397949219px) translate(0px, 0px);-webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);}#el_QZ9ETcUWM:hover #el_e2zsVfSx5-_an_BWZyC1Kz0{-webkit-animation-name: kf_el_e2zsVfSx5-_an_BWZyC1Kz0;animation-name: kf_el_e2zsVfSx5-_an_BWZyC1Kz0;}#el_e2zsVfSx5-_an_cUPTZyzCA{-webkit-animation-fill-mode: backwards;animation-fill-mode: backwards;-webkit-transform: translate(612.4400024414062px, 333.2470397949219px) rotate(0deg) translate(-612.4400024414062px, -333.2470397949219px);transform: translate(612.4400024414062px, 333.2470397949219px) rotate(0deg) translate(-612.4400024414062px, -333.2470397949219px);-webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);}#el_QZ9ETcUWM:hover #el_e2zsVfSx5-_an_cUPTZyzCA{-webkit-animation-name: kf_el_e2zsVfSx5-_an_cUPTZyzCA;animation-name: kf_el_e2zsVfSx5-_an_cUPTZyzCA;}</style>
  <g id="el_9453HmmUwa_an_WhpGYRBFm" data-animator-group="true" data-animator-type="0"><g id="el_9453HmmUwa">
      <g id="el_e2zsVfSx5-_an_BWZyC1Kz0" data-animator-group="true" data-animator-type="0"><g id="el_e2zsVfSx5-_an_cUPTZyzCA" data-animator-group="true" data-animator-type="1"><path d="M627.797,386.453l-15.32-6.158l14.982-20.163l-15.019-20.727l15.32-6.158l16.822,26.922L627.797,386.453z" id="el_e2zsVfSx5-"/></g></g>
      <g id="el_XadaPMwQyL">
          <polygon points="650.1,363.473 641.389,376.84 648.824,386.753 667.56,386.753 &#9;&#9;" id="el_hG7sOYjU2l"/>
          <polygon points="650.025,356.79 667.56,333.51 648.936,333.51 641.427,343.423 &#9;&#9;" id="el_M3yQgUa1gS"/></g></g></g></svg>
                          </span>
                        </a>
                       </li>
                    
                  </ul>
                  </div>
                </nav> 
      </header>
 
      <main class="main">
        <div class="container-fluid">
         <div class="row home">
           <div class="col-md-auto" id="verticale">
             <span id="indirizzo" data-aos="zoom-in-left">Via Achille Grandi 2, Firenze</span>  
        </div>  
          <div class="col-md-11 payoff"  style="width:100wv;">             
           <svg id="secondafrase" width="100%" height="180" viewBox="0 0 1062 240" data-aos="fade-zoom-in" data-aos-duration="2000" fill="none">
            <path class="secondafrase" data-aos="zoom-in-left" data-aos-duration="500" d="M217.076 17.04L197.636 102H164.516L154.676 53.76L144.836 102H111.716L92.2758 17.04H120.956L128.636 70.56L140.156 17.04H169.196L180.716 70.56L188.396 17.04H217.076ZM253.269 38.28V48.72H279.669V68.76H253.269V80.76H283.269V102H226.629V17.04H283.269V38.28H253.269ZM368.179 89.16H339.859L335.659 102H307.699L338.779 17.04H369.499L400.459 102H372.379L368.179 89.16ZM361.699 69.12L354.019 45.48L346.339 69.12H361.699ZM449.232 102L433.272 71.52H433.152V102H406.512V17.04H446.112C452.992 17.04 458.872 18.28 463.752 20.76C468.632 23.16 472.272 26.48 474.672 30.72C477.152 34.88 478.392 39.6 478.392 44.88C478.392 50.56 476.792 55.6 473.592 60C470.472 64.4 465.952 67.56 460.032 69.48L478.512 102H449.232ZM433.152 53.76H443.712C446.272 53.76 448.192 53.2 449.472 52.08C450.752 50.88 451.392 49.04 451.392 46.56C451.392 44.32 450.712 42.56 449.352 41.28C448.072 40 446.192 39.36 443.712 39.36H433.152V53.76ZM513.542 38.28V48.72H539.942V68.76H513.542V80.76H543.542V102H486.902V17.04H543.542V38.28H513.542ZM655.453 102H628.813L600.613 59.28V102H573.973V17.04H600.613L628.813 60.48V17.04H655.453V102ZM694.128 38.28V48.72H720.528V68.76H694.128V80.76H724.128V102H667.488V17.04H724.128V38.28H694.128ZM788.288 102L772.688 79.92L759.728 102H729.368L757.328 58.2L728.168 17.04H759.728L774.728 38.28L787.208 17.04H817.568L790.088 60L819.848 102H788.288ZM880.289 89.16H851.969L847.769 102H819.809L850.889 17.04H881.609L912.569 102H884.489L880.289 89.16ZM873.809 69.12L866.129 45.48L858.449 69.12H873.809ZM945.261 81.84H970.941V102H918.621V17.04H945.261V81.84ZM73.095 137.04V158.16H50.535V222H23.895V158.16H1.575V137.04H73.095ZM158.92 137.04V222H132.28V188.88H106.96V222H80.3203V137.04H106.96V167.64H132.28V137.04H158.92ZM197.546 158.28V168.72H223.946V188.76H197.546V200.76H227.546V222H170.906V137.04H227.546V158.28H197.546ZM335.247 178.44C340.367 179.64 344.327 182.12 347.127 185.88C350.007 189.56 351.447 193.84 351.447 198.72C351.447 206.16 348.967 211.92 344.007 216C339.127 220 332.087 222 322.887 222H278.367V137.04H321.687C330.327 137.04 337.127 138.92 342.087 142.68C347.047 146.44 349.527 151.92 349.527 159.12C349.527 164.08 348.207 168.28 345.567 171.72C343.007 175.08 339.567 177.32 335.247 178.44ZM305.007 170.16H315.327C317.727 170.16 319.487 169.68 320.607 168.72C321.807 167.76 322.407 166.28 322.407 164.28C322.407 162.2 321.807 160.68 320.607 159.72C319.487 158.68 317.727 158.16 315.327 158.16H305.007V170.16ZM317.127 200.64C319.527 200.64 321.287 200.2 322.407 199.32C323.607 198.36 324.207 196.84 324.207 194.76C324.207 190.68 321.847 188.64 317.127 188.64H305.007V200.64H317.127ZM387.038 158.28V168.72H413.438V188.76H387.038V200.76H417.038V222H360.398V137.04H417.038V158.28H387.038ZM460.318 222.84C450.158 222.84 441.758 220.48 435.118 215.76C428.558 210.96 424.998 203.96 424.438 194.76H452.758C453.158 199.64 455.318 202.08 459.238 202.08C460.678 202.08 461.878 201.76 462.838 201.12C463.878 200.4 464.398 199.32 464.398 197.88C464.398 195.88 463.318 194.28 461.158 193.08C458.998 191.8 455.638 190.36 451.078 188.76C445.638 186.84 441.118 184.96 437.518 183.12C433.998 181.28 430.958 178.6 428.398 175.08C425.838 171.56 424.598 167.04 424.678 161.52C424.678 156 426.078 151.32 428.878 147.48C431.758 143.56 435.638 140.6 440.518 138.6C445.478 136.6 451.038 135.6 457.198 135.6C467.598 135.6 475.838 138 481.918 142.8C488.078 147.6 491.318 154.36 491.638 163.08H462.958C462.878 160.68 462.278 158.96 461.158 157.92C460.038 156.88 458.678 156.36 457.078 156.36C455.958 156.36 455.038 156.76 454.318 157.56C453.598 158.28 453.238 159.32 453.238 160.68C453.238 162.6 454.278 164.2 456.358 165.48C458.518 166.68 461.918 168.16 466.558 169.92C471.918 171.92 476.318 173.84 479.758 175.68C483.278 177.52 486.318 180.08 488.878 183.36C491.438 186.64 492.718 190.76 492.718 195.72C492.718 200.92 491.438 205.6 488.878 209.76C486.318 213.84 482.598 217.04 477.718 219.36C472.838 221.68 467.038 222.84 460.318 222.84ZM568.798 137.04V158.16H546.238V222H519.598V158.16H497.278V137.04H568.798ZM594.014 179.4C594.014 171 595.694 163.52 599.054 156.96C602.494 150.4 607.374 145.32 613.694 141.72C620.014 138.04 627.454 136.2 636.014 136.2C643.374 136.2 649.934 137.6 655.694 140.4C661.534 143.12 666.254 147 669.854 152.04C673.534 157.08 675.974 162.96 677.174 169.68H649.094C647.814 166.88 645.974 164.72 643.574 163.2C641.254 161.6 638.574 160.8 635.534 160.8C631.054 160.8 627.494 162.48 624.854 165.84C622.294 169.2 621.014 173.72 621.014 179.4C621.014 185.08 622.294 189.6 624.854 192.96C627.494 196.32 631.054 198 635.534 198C638.574 198 641.254 197.24 643.574 195.72C645.974 194.12 647.814 191.92 649.094 189.12H677.174C675.974 195.84 673.534 201.72 669.854 206.76C666.254 211.8 661.534 215.72 655.694 218.52C649.934 221.24 643.374 222.6 636.014 222.6C627.454 222.6 620.014 220.8 613.694 217.2C607.374 213.52 602.494 208.4 599.054 201.84C595.694 195.28 594.014 187.8 594.014 179.4ZM765.366 137.04V222H738.726V188.88H713.406V222H686.766V137.04H713.406V167.64H738.726V137.04H765.366ZM818.752 222.84C810.752 222.84 803.392 220.96 796.672 217.2C790.032 213.44 784.752 208.24 780.832 201.6C776.912 194.96 774.952 187.48 774.952 179.16C774.952 170.84 776.912 163.36 780.832 156.72C784.752 150.08 790.032 144.92 796.672 141.24C803.392 137.48 810.752 135.6 818.752 135.6C826.752 135.6 834.072 137.48 840.712 141.24C847.352 144.92 852.592 150.08 856.432 156.72C860.352 163.36 862.312 170.84 862.312 179.16C862.312 187.48 860.352 194.96 856.432 201.6C852.592 208.24 847.312 213.44 840.592 217.2C833.952 220.96 826.672 222.84 818.752 222.84ZM818.752 198C824.032 198 828.112 196.32 830.992 192.96C833.872 189.52 835.312 184.92 835.312 179.16C835.312 173.32 833.872 168.72 830.992 165.36C828.112 161.92 824.032 160.2 818.752 160.2C813.392 160.2 809.272 161.92 806.392 165.36C803.512 168.72 802.072 173.32 802.072 179.16C802.072 184.92 803.512 189.52 806.392 192.96C809.272 196.32 813.392 198 818.752 198ZM898.562 137.04V222H871.922V137.04H898.562ZM908.194 179.4C908.194 171 909.874 163.52 913.234 156.96C916.674 150.4 921.554 145.32 927.874 141.72C934.194 138.04 941.634 136.2 950.194 136.2C957.554 136.2 964.114 137.6 969.874 140.4C975.714 143.12 980.434 147 984.034 152.04C987.714 157.08 990.154 162.96 991.354 169.68H963.274C961.994 166.88 960.154 164.72 957.754 163.2C955.434 161.6 952.754 160.8 949.714 160.8C945.234 160.8 941.674 162.48 939.034 165.84C936.474 169.2 935.194 173.72 935.194 179.4C935.194 185.08 936.474 189.6 939.034 192.96C941.674 196.32 945.234 198 949.714 198C952.754 198 955.434 197.24 957.754 195.72C960.154 194.12 961.994 191.92 963.274 189.12H991.354C990.154 195.84 987.714 201.72 984.034 206.76C980.434 211.8 975.714 215.72 969.874 218.52C964.114 221.24 957.554 222.6 950.194 222.6C941.634 222.6 934.194 220.8 927.874 217.2C921.554 213.52 916.674 208.4 913.234 201.84C909.874 195.28 908.194 187.8 908.194 179.4ZM1027.59 158.28V168.72H1053.99V188.76H1027.59V200.76H1057.59V222H1000.95V137.04H1057.59V158.28H1027.59Z" fill="#121212"/>
           </svg>
           <svg id="terzafrase" width="100%" height="240" viewBox="0 0 1094 240" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path class="terzafrase" d="M32.7845 81.84H58.4645V102H6.14453V17.04H32.7845V81.84ZM108.248 102.84C100.248 102.84 92.8877 100.96 86.1677 97.2C79.5277 93.44 74.2477 88.24 70.3277 81.6C66.4077 74.96 64.4477 67.48 64.4477 59.16C64.4477 50.84 66.4077 43.36 70.3277 36.72C74.2477 30.08 79.5277 24.92 86.1677 21.24C92.8877 17.48 100.248 15.6 108.248 15.6C116.248 15.6 123.568 17.48 130.208 21.24C136.848 24.92 142.088 30.08 145.928 36.72C149.848 43.36 151.808 50.84 151.808 59.16C151.808 67.48 149.848 74.96 145.928 81.6C142.088 88.24 136.808 93.44 130.088 97.2C123.448 100.96 116.168 102.84 108.248 102.84ZM108.248 78C113.528 78 117.608 76.32 120.488 72.96C123.368 69.52 124.808 64.92 124.808 59.16C124.808 53.32 123.368 48.72 120.488 45.36C117.608 41.92 113.528 40.2 108.248 40.2C102.888 40.2 98.7677 41.92 95.8877 45.36C93.0077 48.72 91.5677 53.32 91.5677 59.16C91.5677 64.92 93.0077 69.52 95.8877 72.96C98.7677 76.32 102.888 78 108.248 78ZM204.138 102L188.178 71.52H188.058V102H161.418V17.04H201.018C207.898 17.04 213.778 18.28 218.658 20.76C223.538 23.16 227.178 26.48 229.578 30.72C232.058 34.88 233.298 39.6 233.298 44.88C233.298 50.56 231.698 55.6 228.498 60C225.378 64.4 220.858 67.56 214.938 69.48L233.418 102H204.138ZM188.058 53.76H198.618C201.178 53.76 203.098 53.2 204.378 52.08C205.658 50.88 206.298 49.04 206.298 46.56C206.298 44.32 205.618 42.56 204.258 41.28C202.978 40 201.098 39.36 198.618 39.36H188.058V53.76ZM268.449 38.28V48.72H294.849V68.76H268.449V80.76H298.449V102H241.809V17.04H298.449V38.28H268.449ZM410.608 17.04V102H384.088V59.64L371.008 102H348.208L335.128 59.64V102H308.488V17.04H341.128L359.848 68.04L378.088 17.04H410.608ZM469.66 17.04V102H443.02V17.04H469.66ZM551.171 46.2C551.171 51.56 549.931 56.44 547.451 60.84C544.971 65.16 541.291 68.6 536.411 71.16C531.611 73.72 525.771 75 518.891 75H508.331V102H481.691V17.04H518.891C529.291 17.04 537.251 19.68 542.771 24.96C548.371 30.24 551.171 37.32 551.171 46.2ZM515.891 54C521.411 54 524.171 51.4 524.171 46.2C524.171 41 521.411 38.4 515.891 38.4H508.331V54H515.891ZM592.861 102.84C582.701 102.84 574.301 100.48 567.661 95.76C561.101 90.96 557.541 83.96 556.981 74.76H585.301C585.701 79.64 587.861 82.08 591.781 82.08C593.221 82.08 594.421 81.76 595.381 81.12C596.421 80.4 596.941 79.32 596.941 77.88C596.941 75.88 595.861 74.28 593.701 73.08C591.541 71.8 588.181 70.36 583.621 68.76C578.181 66.84 573.661 64.96 570.061 63.12C566.541 61.28 563.501 58.6 560.941 55.08C558.381 51.56 557.141 47.04 557.221 41.52C557.221 36 558.621 31.32 561.421 27.48C564.301 23.56 568.181 20.6 573.061 18.6C578.021 16.6 583.581 15.6 589.741 15.6C600.141 15.6 608.381 18 614.461 22.8C620.621 27.6 623.861 34.36 624.181 43.08H595.501C595.421 40.68 594.821 38.96 593.701 37.92C592.581 36.88 591.221 36.36 589.621 36.36C588.501 36.36 587.581 36.76 586.861 37.56C586.141 38.28 585.781 39.32 585.781 40.68C585.781 42.6 586.821 44.2 588.901 45.48C591.061 46.68 594.461 48.16 599.101 49.92C604.461 51.92 608.861 53.84 612.301 55.68C615.821 57.52 618.861 60.08 621.421 63.36C623.981 66.64 625.261 70.76 625.261 75.72C625.261 80.92 623.981 85.6 621.421 89.76C618.861 93.84 615.141 97.04 610.261 99.36C605.381 101.68 599.581 102.84 592.861 102.84ZM660.661 17.04V64.92C660.661 68.84 661.501 71.96 663.181 74.28C664.941 76.52 667.741 77.64 671.581 77.64C675.421 77.64 678.261 76.52 680.101 74.28C681.941 71.96 682.861 68.84 682.861 64.92V17.04H709.381V64.92C709.381 73 707.701 79.92 704.341 85.68C700.981 91.36 696.381 95.64 690.541 98.52C684.701 101.4 678.181 102.84 670.981 102.84C663.781 102.84 657.381 101.4 651.781 98.52C646.261 95.64 641.941 91.36 638.821 85.68C635.701 80 634.141 73.08 634.141 64.92V17.04H660.661ZM822.991 17.04V102H796.471V59.64L783.391 102H760.591L747.511 59.64V102H720.871V17.04H753.511L772.231 68.04L790.471 17.04H822.991ZM890.802 17.04C899.682 17.04 907.442 18.84 914.082 22.44C920.802 26.04 925.962 31.04 929.562 37.44C933.162 43.84 934.962 51.12 934.962 59.28C934.962 67.36 933.162 74.64 929.562 81.12C925.962 87.6 920.802 92.72 914.082 96.48C907.442 100.16 899.682 102 890.802 102H855.402V17.04H890.802ZM888.402 78.24C894.402 78.24 899.162 76.6 902.682 73.32C906.202 70.04 907.962 65.36 907.962 59.28C907.962 53.2 906.202 48.52 902.682 45.24C899.162 41.96 894.402 40.32 888.402 40.32H882.042V78.24H888.402ZM985.982 102.84C977.982 102.84 970.622 100.96 963.902 97.2C957.262 93.44 951.982 88.24 948.062 81.6C944.142 74.96 942.182 67.48 942.182 59.16C942.182 50.84 944.142 43.36 948.062 36.72C951.982 30.08 957.262 24.92 963.902 21.24C970.622 17.48 977.982 15.6 985.982 15.6C993.982 15.6 1001.3 17.48 1007.94 21.24C1014.58 24.92 1019.82 30.08 1023.66 36.72C1027.58 43.36 1029.54 50.84 1029.54 59.16C1029.54 67.48 1027.58 74.96 1023.66 81.6C1019.82 88.24 1014.54 93.44 1007.82 97.2C1001.18 100.96 993.902 102.84 985.982 102.84ZM985.982 78C991.262 78 995.342 76.32 998.222 72.96C1001.1 69.52 1002.54 64.92 1002.54 59.16C1002.54 53.32 1001.1 48.72 998.222 45.36C995.342 41.92 991.262 40.2 985.982 40.2C980.622 40.2 976.502 41.92 973.622 45.36C970.742 48.72 969.302 53.32 969.302 59.16C969.302 64.92 970.742 69.52 973.622 72.96C976.502 76.32 980.622 78 985.982 78ZM1065.79 81.84H1091.47V102H1039.15V17.04H1065.79V81.84ZM308.447 222.84C298.287 222.84 289.887 220.48 283.247 215.76C276.687 210.96 273.127 203.96 272.567 194.76H300.887C301.287 199.64 303.447 202.08 307.367 202.08C308.807 202.08 310.007 201.76 310.967 201.12C312.007 200.4 312.527 199.32 312.527 197.88C312.527 195.88 311.447 194.28 309.287 193.08C307.127 191.8 303.767 190.36 299.207 188.76C293.767 186.84 289.247 184.96 285.647 183.12C282.127 181.28 279.087 178.6 276.527 175.08C273.967 171.56 272.727 167.04 272.807 161.52C272.807 156 274.207 151.32 277.007 147.48C279.887 143.56 283.767 140.6 288.647 138.6C293.607 136.6 299.167 135.6 305.327 135.6C315.727 135.6 323.967 138 330.047 142.8C336.207 147.6 339.447 154.36 339.767 163.08H311.087C311.007 160.68 310.407 158.96 309.287 157.92C308.167 156.88 306.807 156.36 305.207 156.36C304.087 156.36 303.167 156.76 302.447 157.56C301.727 158.28 301.367 159.32 301.367 160.68C301.367 162.6 302.407 164.2 304.487 165.48C306.647 166.68 310.047 168.16 314.687 169.92C320.047 171.92 324.447 173.84 327.887 175.68C331.407 177.52 334.447 180.08 337.007 183.36C339.567 186.64 340.847 190.76 340.847 195.72C340.847 200.92 339.567 205.6 337.007 209.76C334.447 213.84 330.727 217.04 325.847 219.36C320.967 221.68 315.167 222.84 308.447 222.84ZM376.847 137.04V222H350.207V137.04H376.847ZM455.599 137.04V158.16H433.039V222H406.399V158.16H384.079V137.04H455.599ZM537.695 209.16H509.375L505.175 222H477.215L508.295 137.04H539.015L569.975 222H541.895L537.695 209.16ZM531.215 189.12L523.535 165.48L515.855 189.12H531.215ZM678.147 137.04V222H651.627V179.64L638.547 222H615.747L602.667 179.64V222H576.027V137.04H608.667L627.387 188.04L645.627 137.04H678.147ZM716.808 158.28V168.72H743.208V188.76H716.808V200.76H746.808V222H690.168V137.04H746.808V158.28H716.808ZM823.568 137.04V158.16H801.008V222H774.368V158.16H752.048V137.04H823.568Z" fill="black"/>
            </svg>
            

         </div>
        </div>
         <div class="row justify-content-center" style="height: 10%">
          <div class="col-auto">
              <img id="facebook-icon"  class="social-img"  style="margin-right: 10px" src="img/facebook.svg" width="24" height="24">
              <img id="instagram-icon" class="social-img"  style="margin-left: 10px" src="img/instagram.svg" width="24" height="24">
          </div>
         </div>
        </div>          
      </main>
              
            
!

CSS

              
                path,polygon,g{
  fill:black!important;
}




              
            
!

JS

              
                   
TweenMax.to(".header",3, {
 onComplete : function(){
  TweenMax.to(".header",3,{
   autoAlpha:1
  })
 }
});

TweenMax.to(".main",3,{
  onComplete : function(){
  TweenMax.to(".main",3,{
   autoAlpha:1
  })
 }
});

/* PASSO 2:
    - logo spostato nel centro 
    - logo torna in posizione e cambia colore
*/
TweenMax.to("#logo-animazione",3,{
  onStart  : function(){
   TweenMax.to("#logo-animazione",1,{
     scale:3,
     ease: Back.easeOut.config(1.7),
     y:"60vh",
     x:"10vw", 
       })
  },
  onComplete  : function(){
   TweenMax.to("#logo-animazione",0.5,{
     scale:1,
     y:"0px",
     x:"0px",
    onStart: function(){
      TweenMax.to(".path-logo",0,{
        fill:"#121212"
      })
    },
   })
  }
});

/* PASSO 3:
    - sfondo passa da blu a bianco
*/

TweenMax.to("#barba-wrapper",3,{
  onComplete  : function(){
   TweenMax.to("#barba-wrapper",0.5,{
    backgroundColor:"#fff"
   })
  }
});

/* PASSO 4:
    - morphing testo
*/

TweenMax.to(".col-md-11.payoff",0,{
  y:"100vh",
  autoAlpha:0
});

TweenMax.to(".col-md-11.payoff",1.5,{
  y:"0px",
  ease: Power4.easeOut,
  autoAlpha:1,
  delay:3.5
});

var tl = new TimelineLite;
tl.to(".secondafrase",1.5, {
  morphSVG:".terzafrase",
  repeat:10,
  repeatDelay:3.5,
  yoyo:true 
  },"+=6.5");

 

var tlnav = new TimelineLite();



tlnav.from(".num1",0.4,{
  y:"-10vh",
  delay:3.2,
  ease: Back.easeOut.config(1.7)
})
.from(".num2",0.4,{
  y:"-10vh",
  ease: Back.easeOut.config(1.7)
},"-=0.2")
.from(".num3",0.4,{
  y:"-10vh",
  ease: Back.easeOut.config(1.7)
},"-=0.2")
.from(".num4",0.4,{
  y:"-10vh",
  ease: Back.easeOut.config(1.7)
},"-=0.2")


              
            
!
999px

Console