Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!--fonts-->

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lobster" />
  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Josefin+Slab" />
    <link href='https://fonts.googleapis.com/css?family=Allan:bold' rel='stylesheet' type='text/css'>
      <link href='https://fonts.googleapis.com/css?family=Cardo' rel='stylesheet' type='text/css'>

  <!-- body -->

 <!-- COMPARSA -->
<body id="page" name="#top">
  
  <img id="navbut" src="http://i557.photobucket.com/albums/ss17/Gentarozzo/navbutton_zpsrsmad1q3.png" border="0" alt="navbutt"/>
    <div id="nav"  class="container-fluid">
         <img id = "closex" src="http://i557.photobucket.com/albums/ss17/Gentarozzo/XClose_zpsbx2xtxff.gif" alt="close">
          <img id="logo" class="img-responsive center-block" src = "https://res.cloudinary.com/dts0bdwqj/image/upload/v1487069413/logofinale_kmuosm.png"alt="logo">
        <div id="navigate"class = "center-block">
            <a class="topb btn btn-lg btn-block text-danger navbtn">TOP
            </a>
            <a class="portb btn btn-lg btn-block text-danger navbtn">PORTFOLIO
            </a>
            <a class="contb btn btn-lg btn-block text-danger navbtn">CONTACT
            </a>
        </div>
   </div>

  <!-- DOC -->

<div id="docu">

  <div id = "header" class="corpo">
    <p class = "headertxt">Fabio&nbsp;Russo<br><strong><em></p>
      <img id = "viso" class="center-block img-responsive" src="https://res.cloudinary.com/dts0bdwqj/image/upload/v1487069413/logofinale_kmuosm.png">
     <!-- <p class ="sottoheader">Portfolio</em></strong> -->
      </p>  
  </div>

    
 <!--ancora portfolio-->  
    
    <p>&nbsp</p> 
      <div id ="ancoraport">
      </div>
    <p>&nbsp</p>
   
<!--gestione portfolio scheda uno-->

   <div class="contportfolio">
     
            <div class="portfolio-item">
                    <img class="imglavori"  src="https://res.cloudinary.com/dts0bdwqj/image/upload/v1487026489/Portlink_fyszug.png" alt="">
                </a>
                <h3>
                    <a class = "textlink" href="https://s.codepen.io/Gentarozzo/debug/OWZvEE/dGkXWXnVJoXA" target = "_blank"  >My Portfolio</a>
                </h3>
            </div>
            <div class="portfolio-item">
                    <img class="imglavori" src="https://res.cloudinary.com/dts0bdwqj/image/upload/v1487019069/MeteoSound_fkynma.png" alt="">
                </a>
                <h3>
                    <a class = "textlink" href="https://codepen.io/Gentarozzo/full/YNdGZz/" target = "_blank">MeteoSound</a>
                </h3>
            </div>
            <div class="portfolio-item">
                    <img class="imglavori" src="https://res.cloudinary.com/dts0bdwqj/image/upload/v1487325819/lwslogoport_nsbd8d.png" alt="" >
                </a>
                <h3>
                    <a class = "textlink" href="https://codepen.io/Gentarozzo/full/QdYRqr/" target = "_blank">LWS</a>
                </h3>
            </div>
            <div class="portfolio-item">
                    <img class="imglavori" src="https://res.cloudinary.com/dts0bdwqj/image/upload/v1487781948/vignetta_twitch_dhquo2.png" alt="" >
                </a>
                <h3>
                    <a class = "textlink" href="https://s.codepen.io/Gentarozzo/debug/WRBgXV/vPMKKVPZGpOM" target = "_blank">Twitch</a>
                </h3>
           </div>
           <div class="portfolio-item">
                    <img class="imglavori" src="https://res.cloudinary.com/dts0bdwqj/image/upload/v1487026081/VignettaQuotes_gq54vn.png"  alt="">
                </a>
                <h3>
                    <a class = "textlink" href="https://codepen.io/Gentarozzo/full/XpyoMy/" target = "_blank">Quotes Ninja</a>
                </h3>
           </div>
     
                <div class="portfolio-item noSmart">
                    <img class="imglavori" src="https://s19.postimg.cc/rpfusyvc3/pomodoroclock.png"  alt="">
                </a>
                <h3>
                    <a class = "textlink" href="https://codepen.io/Gentarozzo/full/GQGmRL/" target = "_blank">Pomodoro Clock</a>
                </h3>
           </div> 
     
                     <div class="portfolio-item">
                    <img class="imglavori" src="https://s19.postimg.cc/c3wdic0c3/Wo_WTic_Tac_Toe.png"  alt="">
                </a>
                <h3>
                    <a class = "textlink" href="https://codepen.io/Gentarozzo/full/PQBOxj/" target = "_blank">World Of TicTacToe</a>
                </h3>
           </div>
                     <div class="portfolio-item">
                    <img class="imglavori" src="https://s19.postimg.cc/nodaexiir/Simon_Icon.png"  alt="">
                </a>
                <h3>
                    <a class = "textlink" href="https://codepen.io/Gentarozzo/full/pLJWwO/" target = "_blank">SimonGameMobile</a>
                </h3>
           </div> 
     
        </div>
  
<!-- Gestione descrizione sito -->
  <div id = "descrizione">
    <div id = "contienidesc">
    <div id = "closetab">
      X
    </div>
    <p id = "titolodesc">
      TITOLO DESCRIZIONE
    </p>
    <p id = "contenutodesc">
      Descrizione del sito
    </p>
    <a id = "linksito" href="" target ="_blank">CHECK IT OUT!</a>
    </div>
  </div>
    
<!-- Gestione pulsanti portfolio -->  
<!--       
    <div id = "prevnext">
      <div id = "prev" >
        <img class = "btndiv" src =  "https://res.cloudinary.com/dts0bdwqj/image/upload/v1487757838/prevdiv_qztjiv.png" />
           </div>
      <div id = "next" >
                <img class = "btndiv" src =  "https://res.cloudinary.com/dts0bdwqj/image/upload/v1487757838/nextdiv_imdy0l.png" />
      </div>
    </div>
--> 
<!-- Gestione area abilità -->    
    
    <div id = "ninja" class = "corpo">
       <div class = "text-center">
          <div>
        <img  class ="center-block img-responsive"src= "https://s19.postimg.cc/vfq8lboxv/dangerousbigger.png">
        <img  class ="center-block img-responsive logojs"src= "https://s19.postimg.cc/ekfozt0sz/javapiuombra.png">
            <div class = "desctools">
             HTML5, CSS3, SASS, JQuery, React, Redux, Node,js, Express.js, Firebase, Photoshop, Adobe XD, GIT, NPM, Quadient Suite, FIS Designer.
            </div>
        </div> 
      </div>
    </div>
    
<!-- Gestione clienti -->    
    
      <div class = "row-clienti">
        <div class = "col-md-2">
          <img class = "img-responsive img-cli" src = "https://res.cloudinary.com/dts0bdwqj/image/upload/v1487080544/enelpost_uic9dr.png" />
        </div>
        <div class = "col-md-2">
          <img class = "img-responsive img-cli" src = "https://res.cloudinary.com/dts0bdwqj/image/upload/v1487080544/aceapost_ydadap.png" />
        </div>
        <div class = "col-md-2">
          <img class = "img-responsive img-cli" src = "https://res.cloudinary.com/dts0bdwqj/image/upload/v1487080544/cornerpost_hdpgeq.png" />
        </div>
        <div class = "col-md-2">
          <img class = "img-responsive img-cli" src = "https://res.cloudinary.com/dts0bdwqj/image/upload/v1487080544/popolarepost_vdgtfp.png" />
        </div>
        <div class = "col-md-2">
          <img class = "img-responsive img-cli" src = "https://res.cloudinary.com/dts0bdwqj/image/upload/v1487082262/qcpost_zevrsj.png" />
        </div>
      </div>

    
<!-- Gestione contatti -->    
      
    <div name ="contgo" id = "contact" class = "sottoheader corpo">
     <p > Contact me on <a href="mailto:russo.fabio7@gmail.com"><span id ="gmail">GMail</span></a> <br> Or find me around the web!</p>
       <a href="https://www.facebook.com/fabio.russo.397" target="_blank"> <img class ="social img-responsive "src = "http://i557.photobucket.com/albums/ss17/Gentarozzo/falogo_zpsosf9lqvw.png"></a> 
      <a href="https://plus.google.com/u/0/104419753949560462674" target="_blank"> <img class ="social img-responsive "src = "http://i557.photobucket.com/albums/ss17/Gentarozzo/g_zpso3wzpzlv.png"></a>
    </div>

  </div>
</body>
            
          
!
            
              /*Stile navigatore laterale*/

#nav {z-index: 999;
      display:flex;
      flex-direction:column;
      justify-content:center;
      position:fixed;
      background-color:white;
      width:100%; 
      height:100%;
      overflow:auto;
      white-space: nowrap;
      opacity:0.98;}

#closex { z-index:999;
        position:fixed;
        margin-top:10px;
        top: 0;
        left: 0;
        margin-left:10px;
        width:30px;}

#navbut{z-index:999;
        position:fixed;
        margin-top:10px;
        top: 0;
        left: 0;
        margin-left:10px;
        width:30px;
        }

.navbtn{color:black;
        font-size:3em;}

.navbtn:hover{color:green !important;
              font-size:3em;}

.navbtn:hover:after{content: " />"}

.navbtn:hover:before{content: "< "}

/*Stile conteitori*/

body {background-color: #e6f0ff;}

.corpo {width:95%;
        border-color:black;
        -webkit-box-shadow: -1px 10px 15px -6px rgba(0,0,0,0.75);
        -moz-box-shadow: -1px 10px 15px -6px rgba(0,0,0,0.75);
        box-shadow: -1px 10px 15px -6px rgba(0,0,0,0.75);
        padding:20px;
        margin-right: 10px;
        margin-left: 10px;}

#docu {
      display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center}


/*Stile intestazione*/

#logo {margin-top:40px;
       margin-bottom:10px;}

#header {margin-top: 20px;
         border-radius:4px;
         background-color: #00b300;}

.headertxt {cursor: pointer;
            text-align:center;
            font-family:Josefin Slab,Helvetica, Arial, sans-serif;
            font-size:6em;
            color:white;
            text-shadow: 2px 6px 4px black;}

.headertxt span {
  
  display:inline-block;
  transition: transform 0.2s;
  
}

.headertxt span :hover{
  
  transform: translateY(-20px) rotate(10deg) scale(2);
  
}

#viso{cursor: pointer;}

.underheader {text-align:center;
              font-family:Josefin Slab,Helvetica, Arial, sans-serif;
              font-size:20px;
              color:white;}

.sottoheader {border:solid;
              text-align:center;
              font-family:Lobster,Helvetica, Arial, sans-serif;
              margin-top:20px;
              font-size:25px;
              color:white;}

/*Stile Portfolio*/

.contportfolio {display:flex;
                flex-wrap:wrap;
                justify-content:space-around;}

.portfolio-item {margin: 20px;
                 font-family: lobster; 
                 text-align:center;}

.imglavori {-webkit-box-shadow: -1px 10px 15px -6px rgba(0,0,0,0.75);
         -moz-box-shadow: -1px 10px 15px -6px rgba(0,0,0,0.75);
         box-shadow: -1px 10px 15px -6px rgba(0,0,0,0.75);
         padding:10px;
         width:100%;
         height:auto;}

@media (max-width: 710px) {
.imglavori {-webkit-box-shadow: -1px 10px 15px -6px rgba(0,0,0,0.75);
         -moz-box-shadow: -1px 10px 15px -6px rgba(0,0,0,0.75);
         box-shadow: -1px 10px 15px -6px rgba(0,0,0,0.75);
         padding:10px;
         width:80%;
         height:auto;}}
}

/*Stile bottoni Portfolio*/

#prevnext {display:flex;
          justify-content: space-around;
          margin-top:-20px;
          margin-bottom:20px;}

.btndiv {width:30%;  
         height:auto;
         margin-left:40px;}

@media (min-width: 710px) {
.btndiv {width:100%;  
         height:auto;
         margin-left:0px;}
}

/*Stile descrizione sito*/

@media only screen and (min-width: 800px) {
#descrizione{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background-color: rgba(0, 0, 0, 0.8);
  width:100%;
  height:100vh;
  margin:0;
  padding:0;
  border:0;
  left: 0em; 
  top: 0em; 
  position:fixed;
}

#contienidesc {
  border-radius:10px;
  background-color:white;
  width:70%;
  height:auto;
  padding:30px;
}

#titolodesc {
  font-size:1.5em;
  color:green;
  white-space: -moz-pre-wrap !important;  
    white-space: -pre-wrap; 
    white-space: -o-pre-wrap;
    white-space: pre-wrap;
    word-wrap: break-word;
    white-space: -webkit-pre-wrap;
    white-space: normal;
}

#contenutodesc {
  font-size:1em;
  color:black;  
}

#closetab {
  display:flex;
  justify-content:flex-end;
  font-family:Arial, sans-serif;
  font-style: normal;
  cursor:pointer;
  font-size:1.5em;
  color:grey;
}
}

/*Stile descrizione sito smartphone*/

@media only screen and (max-width: 800px) {
#descrizione{
  background:white;
  display:flex;
  flex-direction:column;
  left: 0em; 
  top: 0em; 
  width:100%;
  height:100vh;
  position:fixed;
}

#contienidesc {
  background-color:white;
  padding:30px;
}

#titolodesc {
  font-size:1.5em;
  color:green;
  white-space: -moz-pre-wrap !important;  
    white-space: -pre-wrap; 
    white-space: -o-pre-wrap;
    white-space: pre-wrap;
    word-wrap: break-word;
    white-space: -webkit-pre-wrap;
    white-space: normal;
}

#contenutodesc {
  font-size:1em;
  color:black;  
}

#closetab {
  display:flex;
  justify-content:flex-end;
  font-family:Arial, sans-serif;
  font-style: normal;
  cursor:pointer;
  font-size:1.5em;
  color:grey;
}


}

@media only screen and (max-width: 700px) {
  
    .logojs.toolsm{width:50px;
          height:50px}
  
  
}

/*Stile abilità*/

#ninja {width:auto;
        border-radius:4px;
        background-color:#3385ff; 
        margin-bottom:20px;}

#testoninja { font-family:Josefin Slab,Helvetica, Arial, sans-serif;
              font-size:1.5em; 
              text-align:justify;
              color:white;
            text-shadow: 2px 5px 4px black;}

#contienetools {display:flex;
                justify-content:center;}

.toolsm{width:80px;
        height:101px}


.desctools{ margin:20px 0px 20px 0px;
            font-family:Josefin Slab,Helvetica, Arial, sans-serif;
              font-size:1.5em;
        text-align:justify-center;
           color:white;
              text-shadow: 2px 5px 4px black;}

/*Stile Clienti*/

.row-clienti{width:auto;
             display:flex;
             justify-content:space-around;
             margin-top:auto;
             margin-bottom:auto;}

.img-cli {align-self:center;}

/*Stile Contatti*/

#contact {width:auto;
          background-color:#707070;
          border:none;
          padding:20px;
}


#gmail {color:red;}

.social {heigth:30px;
         width:30px; 
         display:inline-block;
         margin:auto;}

#desktopAdv {text-align:center;
            font-family: lobster,Helvetica, Arial, sans-serif;
            font-size:1em;
            color:black;
            margin-bottom:30px;}

.dancingcat{width:70%}

/*gestione animazione nome*/

.headertxt span {
  
  display:inline-block;
  transition: transform 0.2s;
  
}

.headertxt span:hover{
  
  transform: translateY(-20px) rotate(10deg) scale(2);
  
}

.logojs{width:auto
        height:100%;}
            
          
!
            
              $("#descrizione").hide();

//descrizione siti

let portfolio = `<p>This is one of my first projects... still growing and changing every week.
Most of the work here, is all about design and colours!
</p>

Used tools:
JavaScript, HTML, CSS, BootStrap, Jquery, Photoshop.
`;

let meteoSound = `<p>This web app is all about API, AJAX and geolocalization.
The app helps you find the best music for your city current weather!.</p>

<p>
The design is really simple, because It's all about code studio.
</p>

Used tools:
JavaScript, Ajax, External API, HTML, CSS, Jquery, Photoshop.
`;

let LWS = `<p>Here we have a "Wikipedia search engine" were you can also look for some random culture!.</p>

<p>
The design is inspired by the '89 movie "Look who's talking"... so It's all about colours and animations.
The code uses some API (Wikipedia) and Photoshop editing to make it fun and colorful!.
</p>

Used tools:
JavaScript, Ajax, External API, HTML, CSS, Jquery, Photoshop.
`;

let twitch = `<p>This app is a simple Twitch "favourite list".</p>

<p>
Most of the work is about Ajax and API... the design is pretty animated and the colours reflect the original Twitch website.
Been fun to work on It, because you can look at viewers and Online status... in real time!
</p>

Used tools:
JavaScript, Ajax, External API, HTML, CSS, Jquery, Photoshop.
`;

let quotesNinja = `<p>A fast and nice quote machine... from Japan!</p>

<p>
A simple design, working as intended!. Most of the work is about API and connection with Social Network... you can share the quote from here to your Twitter page, and the hashtag is already there!
</p>

Used tools:
JavaScript, Ajax, External API, HTML, CSS, Jquery, Photoshop.
`;

let pomodoroClock = `<p>A Javascript Pomodoro Clock</p>

<p>
The Pomodoro Clock... is a timer developed by Francesco Cirillo. The technique uses a timer to break down work into intervals, traditionally 25 minutes in length, separated by short breaks (Wikipedia).
</p>

<p>
This is a pure studio Javascript app.
</p>

Used tools:
JavaScript, HTML, CSS,Photoshop.
`;

let worldTic = `<p>A TicTacToe game, with two different levels of difficulty.</p>

<p>
Inspired by the popular MMORPG videogame "World Of Warcraft", this TicTacToe game is pure javascript code!. Been really fun to work on It, and It's of course more complex than it seems.
</p>

<p>
The design is simple but cool, focused on the game.
</p>

<p>
The work here is mostly about creating an AI, that you can play with.
The "HARD" difficulty is... unbeatable... try It!.
</p>

Used tools:
JavaScript, HTML, CSS, BootStrap, Jquery, Photoshop.
`;

let simonGame = `<p>This is a simulated portable version of the Simon Game!.</p>

<p>
The design is responsive and the Desktop version will simulate a smartphone in HTML and CSS.
</p>

<p>
The work here is mostly about Javascript and Css. The biggest complication is to manage the asynchronous execution of each event and allow the user to act on each button without overlapping any action.
</p>

Used tools:
JavaScript, HTML, CSS, Photoshop.
`;

let noDesc = `<p>Your browser won't load the app description... but you can still enjoy this dancing cat</p>

<img class = "dancingcat" src ="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.tenor.co%2Fimages%2F727342ff65e2f9f887f978492c4defa9%2Fraw&f=1">

<p>Click down here to check the website you were looking for!</p>`
;

//navigation bar
if ($(window).width() > 710) {
$("#navbut").click(function() {
  $("#navbut").hide();
    $( "#nav" ).toggle( "slide", 1000 );
  });
$("#nav").hide();
$( "#closex" ).click(function() {
  $( "#nav" ).toggle( "slide", 1000, function(){ $("#navbut").show();});
  });
$('.btn').on('click touch',function(){
  $(".topb").attr('href', '#top');
  $(".portb").attr('href', '#ancoraport');
  $(".contb").attr('href', '#contact')
    $( "#nav" ).toggle( "slide", 1000, function(){ $("#navbut").show();});
});
}
else $("#nav,#navbut").hide();

var flip = "animated tada";
var bounce = "animated bounce";
var noAnim = "webkitAnimationEnd animationed onanimationed MSAnimationEnd mozAnimationEnd";

//descrizione sito
$("#closetab").on('click',function(){
  $("#descrizione").fadeOut("slow");
   $(".row-clienti").fadeIn();
});


var classname = document.getElementsByClassName("portfolio-item");

 Array.from(classname).forEach(function(element) {
      element.addEventListener('click', descrizioneSito);
    });

function descrizioneSito(){
    let descrizione;
    switch(this.innerText){
        case "My Portfolio":  descrizione = portfolio;
        break;
        case "MeteoSound":  descrizione = meteoSound;
        break;
        case "LWS":  descrizione = LWS;
        break;  
        case "Twitch":  descrizione = twitch;
        break;
        case "Quotes Ninja":  descrizione = quotesNinja;
        break;
        case "Pomodoro Clock":  descrizione = pomodoroClock;
        break;
        case "World Of TicTacToe":  descrizione = worldTic;
        break;
        case "SimonGameMobile" : descrizione = simonGame;
        break;
        default : descrizione = noDesc;
    }
    $("#descrizione").fadeIn();
    $(".row-clienti").hide();
    document.getElementById("titolodesc").innerText = this.innerText;
    document.getElementById("contenutodesc").innerHTML = descrizione;
    document.getElementById("linksito").href = $(this).find('a').attr('href');
}


//gestione viso e animazione
$("#viso").on('click mouseover',function(){
  $(this).attr("src","https://s19.postimg.cc/6f94i1m0z/logosaluto.png");
  $(this).addClass(flip).on(noAnim,function(){
     $(this).removeClass(flip);
      $(this).attr("src","https://res.cloudinary.com/dts0bdwqj/image/upload/v1487069413/logofinale_kmuosm.png");
   })
});


//gestione bounce portfolio
if ($(window).width() > 710) {
  $(".portfolio-item").on('mouseover',function(){
    $(this).addClass(bounce).on(noAnim,function(){
       $(this).removeClass(bounce);
     })
  });
};

//spread nome Fabio Russo

const nome = document.querySelector(".headertxt");
nome.innerHTML = spread(nome.textContent);

function spread(valNome){
  return [...valNome].map(charac => `<span>${charac}</span>`).join('');
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console