123

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.

            
              <head>
<!-- ==== Sources =========================-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>

<title>Robert Uivarosi - Portfolio</title>
</head>


<!-- Building the navbar -->    
 <nav class="navbar navbar-default">
    <div class="container-fluid container0">
      <div class="navbar-header">
        <button type="button" id="nav-button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <h3>Robert Uivarosi</h3>
      </div>

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li><div class ="btn-group"><button id="home"><a href="#homeANC">Home</a></button></div></li>
          <li><div class ="btn-group"><button id="portfolio"><a href="#landingFolio">Portfolio</a></button></div></li>
          <li><div class ="btn-group"><button id="about"><a href="#landingAboutMeAnk">About Me</a></button></div></li>
          <li><div class ="btn-group"><button id="contact"><a href="#landingContactAnk">Contact</a></button></div></li>
        </ul>
      </div>
  </nav>
   </div> <!-- end of first container | end of navbar-->

<!-- Adding the 7 separate sections of the page --> 


<!-- Section 1  Home --> 
<a name="homeANC"></a>
  <div class="container1 container">
    <div class="wrapper">
           <div class="content">
            <div class="visible">
               <ul class="effectClassUL">
                <li id="name" class="centeredIntro">Robert Uivarosi</li>
                <li id="welcome" class="centeredIntro">Welcome to my personal page !</li>
                <li id="enjoy_stay" class="centeredIntro">Enjoy your stay !</li>
              </ul>
          </div>
        </div>
    </div> <!-- end of wrapper -->
</div> <!-- end of container1 | end of homepage -->


<!-- Section 2 A few words -->
<div class="container-fluid container2">
  <div class="about_left_side">
      <p id='about_me' class="about_me_intro">A few words...</p>
    
      <p class="about_me_text">Hi! My name is Robert Uivarosi and I'm a <span class="txtHighlight">self–taught</span>, FCC <span class="txtHighlight">certified Front End Web Developer</span> working on constantly improving my skills as a software engineer. I do vastly enjoy writing code regardless when working on the Backend or Frontend of a project. An ideal challenge for me would include a mix of both. I am also a <span class="txtHighlight">Network Engineer graduate (2012)</span> but I have switched to web development because of my passion for coding and problem solving. I do believe life is about contribution, so if you need help with bringing your business to life on the web don't hesitate to get in touch. Some of my first front-end projects can be found below.</p>
    
      <p class="about_me_text">Top programming skills:<span class="txtHighlight"> HTML, CSS, JavaScript, PHP, MySQL.</span></p>
    
      <p class="about_me_text" id="about_last_line">Other relevant experience with: <span class="txtHighlight">PHPUnit, jQuery, jQuery UI, React.js, Node.js, Saas, Bootstrap, APIs, Git, GitHub.</span></p>
    
      <p class="about_me_text" id="bonus_linkenid">For a more complete list of my skill set, please check my <a href="https://www.linkedin.com/pub/robert-uivarosi/83/6a2/301" style="color:green;text-decoration:none" target="_blank" >Linked<i class="fa fa-linkedin"></i></a> account.</p>
    
</div><!-- end of left side | text intro-->
  
    <div class="about_right_side">
      <img class="img-responsive" id="me" src="https://avatars.githubusercontent.com/u/15540231?v=3"> 
    </div> <!-- end of right side -->
</div> <!-- end of container 2 -->


<!-- Section 3 Portfolio -->
<span class="anchor" id="landingFolio"></span>
<div class="container-fluid container3 recent_Work">
  <h3 id=section3_RecentWork>Recent work</h3>
        <!--  <div class ="btn-group"><button id="frontEnd">Front End Projects</button></div>
          <div class ="btn-group"><button id="dataVis">Data Visualization Projects </button></div>
          <div class ="btn-group"><button id="backEnd">Back End Projects</button></div>
          <div class ="btn-group"><button id="nonprofit">Nonprofit Projects</button></div>
  
          <br><br>
  
          <div class="thumbnails">
            <div class="row"> These navigation buttons are not necessary yet-->
              
              <!-- 1 2 3 -->
            <div class="prjWrap">
            <div class="col-xs-4 col-lg-4 projects"><a href="https://codepen.io/URobert/full/Boqvoj/" target="_blank"><img class="img-responsive prjImgClass" src = "http://res.cloudinary.com/dd8nodub6/image/upload/c_scale,h_202,w_364/v1523967259/JSTimer_hutj4h.png" alt="Image missing"><p class="projNames">Pomodoro Timer</p></a></div>
            </div>  
  
            <div class="prjWrap">
            <div class="col-xs-4 col-lg-4 projects"><a href="https://codepen.io/URobert/full/WQgqve/" target="_blank"><img class="img-responsive prjImgClass" src = "http://res.cloudinary.com/dd8nodub6/image/upload/c_scale,h_202,w_364/v1523967631/GameOfThrones_vvgq5i.png" alt="Image missing"><p class="projNames">Quote Machine</p></a></div>
            </div>  

            <div class="prjWrap">
            <div class="col-xs-4 col-lg-4 projects"><a href="https://codepen.io/URobert/full/rxwLwE/" target="_blank"><img class="img-responsive prjImgClass" src = "http://res.cloudinary.com/dd8nodub6/image/upload/c_fill,h_202,w_364/v1523970300/SimonGame_tks1xn.png" alt="Image missing"><p class="projNames">Simon Game</p></a></div> 
            </div>

             <!-- 4 5 6 -->    
            <div class="prjWrap">
            <div class="col-xs-4 col-lg-4 projects"><a href="https://codepen.io/URobert/full/LpKOOa/" target="_blank"><img class="img-responsive prjImgClass" src = "https://res.cloudinary.com/dd8nodub6/image/upload/v1455824156/Calc_nj45wr.png"><p class="projNames">JS Calculator</p></a></div>
            </div>  
  
            <div class="prjWrap">
            <div class="col-xs-4 col-lg-4 projects"><a href="https://codepen.io/URobert/full/adJYpZ/" target="_blank"><img class="img-responsive prjImgClass" src = "https://res.cloudinary.com/dd8nodub6/image/upload/v1455824157/TicTacToe2_rgtndd.jpg"><p class="projNames">Tic Tac Toe Game</p></a></div>
            </div>  

            <div class="prjWrap">
            <div class="col-xs-4 col-lg-4 projects"><a href="https://codepen.io/URobert/full/GogJRZ/" target="_blank"><img class="img-responsive prjImgClass" src = "https://res.cloudinary.com/dd8nodub6/image/upload/v1455824157/TwitchApp_h47drs.jpg" alt="Image missing"><p class="projNames">TwitchTv Status Check</p></a></div>   
            </div>

             <!-- 7 8 9 -->   
            <div class="prjWrap">
            <div class="col-xs-4 col-lg-4 projects"><a href="https://codepen.io/URobert/full/pgJXqX/" target="_blank"><img class="img-responsive prjImgClass" src = "https://res.cloudinary.com/dd8nodub6/image/upload/v1455824156/FCCNews_r2hkxz.png" alt="Image missing"><p class="projNames">FCC News Page</p></a></div>
            </div>  
  
            <div class="prjWrap">
            <div class="col-xs-4 col-lg-4 projects"><a href="https://codepen.io/URobert/full/rxeXJB/" target="_blank"><img class="img-responsive prjImgClass" src = "https://res.cloudinary.com/dd8nodub6/image/upload/v1455824158/WikiViewer_zzslrx.png" alt="Image missing"><p class="projNames">Wikipedia Viewer</p></a></div>
            </div> 

            <div class="prjWrap">
            <div class="col-xs-4 col-lg-4 projects"><a href="https://codepen.io/URobert/full/qOePda/" target="_blank"><img class="img-responsive prjImgClass" src ="https://res.cloudinary.com/dd8nodub6/image/upload/v1455824157/WeatherApp_mncdcq.jpg" alt="Image missing"><p class="projNames">Local Weather App</p></a></div>    
            </div>

</div> <!-- end of container3 -->


<span class="anchor" id="landingAboutMeAnk"></span>
<!-- Section 4 More About Me -->

<div class="moreMe">
  <div class="container container4">
  <h3 id="section4_moreMe">More About Me </h3>
    <div class="flexslider">
      <div class="row">
        <ul class="slides">
          
          <li><img class="slidingIMGs" src="https://res.cloudinary.com/dd8nodub6/image/upload/v1455824156/coder2_rqgbst.jpg" alt=""> <!-- end of col -->
         <p class="slidingText"><strong>Code addict</strong><br>
          I first discovered my passion for code writing while I was working on my second project on FCC, the Pomodoro Timer. It was challenging for a beginner and I just couldn't stop working at it. Later on I realized that I was working late nights, going to bed and waking up with coding challenges in mind. There are certain moments when I feel completely “wired”, in the zone. It is an incredible sense of flow… a feeling that I’m constantly craving for. My competitive nature also pushes me to constantly improve.</p>
         <p class="slidingText">Some stats:<br>
           <span class="txtHighlight moreMeStats">10+ Front End Web Dev projects completed</span><br>
           <span class="txtHighlight moreMeStats">Worked on projects as backend developer</span><br>
           <span class="txtHighlight moreMeStats">Longest coding streak: 204 days straight</span><br>
           <span class="txtHighlight moreMeStats">250+ FCC community members helped to debug their code</span>
         </p>
         </li>     <!-- Code addict -->

          <li><img class="slidingIMGs" src="https://res.cloudinary.com/dd8nodub6/image/upload/v1455824156/G2_nfayiq.jpg" alt="">
          <p class="slidingText"><strong>College Graduate</strong></p>
          <p class="slidingText">Although our education does not describe us, it does have some weight on the way society perceives us. College was exciting, fun and offered some exclusive benefits (Work & Travel) and at times it was quite challenging! Apart of the actual things you learn, going through college makes you cope with high stress and extremely high workloads in a short period of time.</p>
          <p class="slidingText"><span class="txtHighlight moreMeStats">Graduated as a: Network Engineer (Class of 2012)</p></span>
          <p class="slidingText"><span class="txtHighlight moreMeStats">Bachelor's degree: Built the design for a wireless network that could offer coverage for the center of the campus and its three major buildings</p></span>
          </li> <!-- Colledge Graduate-->
          
         <li><img class="slidingIMGs" src="https://res.cloudinary.com/dd8nodub6/image/upload/v1455824157/Traveler_c69sgl.jpg" alt="">
         <p class="slidingText"><strong>Traveler</strong></p>
         <p class="slidingText">"Traveling is the only thing you buy that makes you richer". Along the past several years I’ve always assigned a few weeks to go somewhere new. In my opinion everyone should take some time off every now and then to simply discover this beautiful world we live in. Books are great, and they can teach you many things but there is no better teacher than the road. Some of the best days of my life happened when I was abroad. When you travel you can get completely sucked out of the mundane life and the uniqueness of some places can forge memories that will last forever. </p>  
         </li> <!-- Traveler --> 
          
          
          <li><img class="slidingIMGs" src="https://res.cloudinary.com/dd8nodub6/image/upload/v1455824157/SealFit_Trainee2_jwsmrc.jpg" alt="">
          <p class="slidingText"><strong>SealFit Trainee</strong></p>  
          <p class="slidingText">Seal Fit is a training program developed by retired Navy Seal Commander Mark Divine. The training itself is very demanding and keeps you pushing yourself to the very limit each and every workout. It is a combination between CrossFit and military training and its aim is not only to strengthen your body but also your mind. When you keep pushing yourself and you overcome physical “limits” continuously, your view on what is possible and what’s not starts shifting. Finishing every workout feels very rewarding and empowering. </p>
          </li> <!-- SealFit Trainee -->
          
         <li><img class="slidingIMGs" src="https://res.cloudinary.com/dd8nodub6/image/upload/v1455824156/Lover2_ydqtau.jpg" alt="">
         <p class="slidingText"><strong>Lover</strong></p>  
         <p class="slidingText">With the risk of being cheesy I have to say that nothing reveals more of who we are but the people we choose to love. I can hardly make a presentation of who I am without including my significant other. We are often so consumed with everyday demands that we might not spend enough time with those who matter the most.</p>
          </li>
          <!-- Lover -->
          

          <li><img class="slidingIMGs" src="https://res.cloudinary.com/dd8nodub6/image/upload/v1455824157/sc2_njk3md.jpg" alt="">
          <p class="slidingText"><strong>Starcraft 2 enthusiast</strong></p>  
          <p class="slidingText">I have been playing Starcraft 2 recreationally for a few years now with some breaks in between. <em>Legacy of the Void</em> brought me back to the game and fired up the competitor in me once again, so I started laddering again both 1v1 and 2v2. I also watch some games from the GSL whenever I've got the time. My favorite players are Maru, Innovation and Zest. Currently I’m playing only on weekends; if you want to play some good games leave me a message.</p>
            <p class="slidingText"><span class="txtHighlight moreMeStats">Best Ranking:</p></span>
          <p class="slidingText"><span class="txtHighlight moreMeStats">Top Diamond 1v1 – playing Random US (WOL) |
            Top Diamond 2v2 – playing Random EU (LotV)</p></span>
          </li> <!-- SC2 -->
          </ul>
        </div> <!-- end of row -->
    </div> <!-- end of flexslider -->
</div> <!-- end of container -->
</div> <!--end of more me -->


<!-- Section 5 Contact intro -->
<span class="anchor" id="landingContactAnk"></span>
<div class="Contact_Me">
  <h3 class="moreMeTextIntro">Get in touch </h3>
  <p class="moreMeText">Do you like anything from above? Do you have a new business idea that you would like to bring to the web or would you like to upgrade your company's image on the www? Get in touch, so we can start talking about what you need, and then get it done. </p>
 </div> 


<!-- Section 6 Contact Form -->
<div class="container-fluid container6">
  <div class="row">
  <div class="col-md-6">
    
  <h3 id="letsTalk">Leave me a message</h3> 
    <div class="Contact_FORM">
      <form id="myForm" on.click="mailto:robert.cristian.uivarosi@gmail.com">
        <input type="text" name="firstname" id= "fname" class="inputFields" placeholder="First name*">
        <input type="text" name="lastname" id="lname" class="inputFields" placeholder="Last Name"><br><br>
        <input type="text" name="emailAddress" id="emailA" class="inputFields"  placeholder="Email Address*"> 
        <input type="text" name="Website" id="website" class="inputFields" placeholder="Website"><br><br>

        <input type="text" name="Message" class="inputFields" placeholder="Message*" id="formMessage"><br><br>
        <button id="sendEmailB">Send Email</button>
      </form>

    </div> <!-- end of contact_form -->
  </div> <!--end of col-xs-6 -->
  
<!-- Section 7 Additional Info -->
<div class="col-md-6">

  <div class="moreContactInfo"> 
   <h3 id="Connect">Connect</h3>
    <p id="bottomNote">Additional contact information can be found below. I will reply to all emails and requests as soon as possible. Thanks for visiting and have a great day!</p>
    <div class="row">
            <div class ="col-xs-8 col-xs-offset-4"><a href="https://twitter.com/RobertAxius" style="color:black" text-decoration:"none" target="_blank" ><button class="btn btn-default endbuttons"><i class="fa fa-twitter fa-fw"></i>Twitter</button></a></div>
            <div class ="col-xs-8 col-xs-offset-4"><a href="https://github.com/URobert" style="color:black" text-decoration:"none" target="_blank" ><button class="btn btn-default endbuttons"><i class="fa fa-github"></i>Github</button></a></div>
            <div class ="col-xs-8 col-xs-offset-4"><a href="https://www.linkedin.com/pub/robert-uivarosi/83/6a2/301" style="color:black" text-decoration:"none" target="_blank" ><button class="btn btn-default endbuttons"><i class="fa fa-linkedin"></i>Linkedin</button></a></div>
            <div class ="col-xs-8 col-xs-offset-4"><a href="https://www.freecodecamp.com/urobert" style="color:black" text-decoration:"none" target="_blank" ><button class="btn btn-default endbuttons"><i class="fa fa-fire fa-fw"></i>freeCodeCamp</button></a></div>
    </div><!--end of row-->
    <p id="emailAddress"><strong>Email :</strong> robert.cristian.uivarosi@gmail.com</p>
          </div> <!-- end of col-md-6-->
        </div> <!-- end of moreContactInfo -->
    </div><!--end of "master" ROW for entire section -->
</div> <!--end of container6 -->

</div>

<!-- Footer -->

     <div id="footer" class ="container-fluid"> 
        <ul>
          <div class="row rowcenter">
          <div class="col-xs-3"><li><a href="#homeANC"><p>Home</p></a></li></div>
          <div class="col-xs-3"><li><a href="#landingFolio"><p>Portfolio</p></a></li></div>
          <div class="col-xs-3"><li><a href="#landingAboutMeAnk"><p>AboutMe</p></a></li></div>
          <div class="col-xs-3"><li><a href="#landingContactAnk"><p>Contact</p></a></li></div>
          </div> <!-- end of row -->
        </ul>  
     </div>
            
          
!
            
              html{
  height:100%;
}

body {
    height:100%;
    width:100%;
    padding:0;
    margin:0;
    overflow-x: hidden;
}

.projects{
  padding:20px;
}

.container0{
  background: #090f0f;
  position:fixed;
  width:100%;
  z-index:1;
  margin-left:-1px;
  min-width:270px;
}

h3{
  color:#cccccc;
  font: 400 30px/1.3 'Bree Serif', Georgia, serif;
}

#section3_RecentWork{
  color:#3f3f3f;
}

.txtHighlight{
  color:green;
  font-weight:bold;
}

.btn-group{
  maring-right:1px;
}

button{
  margin-top:22px;
  background:transparent;
  border: none;
  font: 400 14px/1.6 'Open Sans', Verdana, Helvetica, sans-serif;
  color:#808080;
}

button:hover{
  color:white;
}

#frontEnd:hover, #dataVis:hover, #backEnd:hover, #nonprofit:hover {
  color:black;
  font-weight: bold;
}
 
p {
  font: 400 15px/1.6 'Open Sans', Verdana, Helvetica, sans-serif;
}

.container1{
 width:100%;
 height:100%;
 padding:0px;
 margin-top:20px; 
 background-image:url("https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.hdwallpapers.in%2Fdownload%2Ffedora_29_stock_4k-HD.jpg&f=1");
 background-size: cover;
}


.wrapper{
  position:relative;
  top: 35%;
  /*width:100%;*/
  width:auto;
  height:120px;
  color:white;
  background:rgba(0,0,0,0.8);
  font: 22px 'Open Sans', Verdana, Helvetica, sans-serif;
  /*padding:10px;*/
  z-index:0;
}

.centeredIntro{
 }

#IntroText{
  font: 20px 'Open Sans', Verdana, Helvetica, sans-serif;
}

#IntroText2{
  font: 22px 'Open Sans', Verdana, Helvetica, sans-serif;
}

#nav-button{
  margin-top:24px;
}

/* ====== Section 2 ====== */

.container2{
    overflow: hidden;
    width: 100%;
    padding:0px;
    clear:both;
    background:url("https://res.cloudinary.com/dd8nodub6/image/upload/v1455824656/congruent_outline_ionl3c.png");
}

.about_left_side{
  width:60%;
  float:left;
  padding-bottom: 500em;
  margin-bottom: -500em;
  height:auto;
}

.about_me_intro{
  margin-top:10%;
  margin-left:20%;
  color:white;
  font: 400 30px/1.3 'Bree Serif', Georgia, serif;
}

.about_me_text{
  margin-top:3%;
  margin-left:20%;
  color:white;
  font: 16px 'Open Sans', Verdana, Helvetica, sans-serif;
}

#about_last_line{
  margin-bottom:5%;
  margin-top:-1%;
}

#me{  
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  padding: 15% 15% 15% 15%;
  min-height: 150px;
  min-width: 150px;

}

.about_right_side{
  background:#c0c0c0;
  width:40%;
  float: left;
  margin-right: -1px; /* Thank you IE */
  padding-bottom: 500em;
  margin-bottom: -500em;
  //background-color:#9975B9;
    background:url("https://res.cloudinary.com/dd8nodub6/image/upload/v1455824656/congruent_outline_ionl3c.png");
 /* background:white;*/
}

/*=========SECTION 3 ===========*/

.prjWrap{
  text-align:center;
}

.projNames{
  color:#3f3f3f;
  font: 400 15px/1.3 'Bree Serif', Georgia, serif;
  max-height:10px;

}

.recent_Work{
  margin-left:10%;
  overflow:hidden;
  width:80%;
}

#section3_RecentWork{
  color:#3f3f3f;
  margin-left:18px;
}

.prjImgClass{
   width: 100%;
   border:solid;
    border-width: 3px;
   border-color:green;
}

/* Zoom effect on projects */

/* Gray Scale */

.projects:hover img {
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
}
.projects img {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

/* Blur 
.projects img {
	-webkit-filter: blur(3px);
	filter: blur(3px);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.projects:hover img {
	-webkit-filter: blur(0);
	filter: blur(0);*/
}

/*=======SECTION 4 ===========*/
.moreMe{
  background-color:#c0c0c0;
}

#section4_moreMe{
  color:#3f3f3f;
  text-align:center;
}

}
/*Slider */
.container4{
  width:50%;
  height:50%;
  /*    background-image: linear-gradient(#8b9da9, #fff6e4);
  box-shadow: inset 0 0 100px hsla(0,0%,0%,.3);*/
}
 /*
 * jQuery FlexSlider v2.0
 * https://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 */

 
/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;} 

/* FlexSlider Necessary Styles
*********************************/ 
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 50%;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
html[xmlns] .slides {display: block;} 
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
/*.no-js .slides > li:first-child {display: block;}*/


/* FlexSlider Default Theme
*********************************/
.flexslider {margin: 0 0 60px; background: #fff; border: 4px solid white; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1;}
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides {zoom: 1;}

.carousel li {margin-right: 5px}


/* Direction Nav */
.flex-direction-nav {*height: 0;}
.flex-direction-nav a {width: 30px; height: 30px; margin: -20px -40px 0; display: block; background: url(https://flexslider.woothemes.com/images/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;}
.flex-direction-nav .flex-next {background-position: 100% 0; right: -36px; }
.flex-direction-nav .flex-prev {left: -36px;}
.flexslider:hover .flex-next {opacity: 0.8; right: 5px;}
.flexslider:hover .flex-prev {opacity: 0.8; left: 5px;}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
.flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}

/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center; reverse:true}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}

@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev {opacity: 1; left: 0;}
  .flex-direction-nav .flex-next {opacity: 1; right: 0;}
}

.slidingIMGs{
float:left;
margin: 0px 15px 0px 0px;
}

.moreMeStats{
font-weight:bold;
}

/* SECTION 5 CONTACT ME */

.Contact_Me{ /*get in touch */
  background:url("https://res.cloudinary.com/dd8nodub6/image/upload/v1455824656/congruent_outline_ionl3c.png");
  height:auto;
  height-min:300px;
}

.moreMeTextIntro {
    margin-top:-0px;
    color:white;
    margin-left:6%;
    padding:40px;
}
.moreMeText{
  color:white;
  margin-top:-50px;
  padding:40px;
  margin-left:6%;
  max-width:800px;
  font: 16px 'Open Sans', Verdana, Helvetica, sans-serif;
}

/* SECTION 6 CONTACT FORM */
#myForm{
  margin-left:10%;
  padding:40px;
}

.Contact_FORM{
  height:auto;
}

#letsTalk{ /*leave me a message */
   margin-top:-0px;
    color:black;
    margin-left:10%;
    padding:40px;
}

input:focus {
    outline-width: 0;
}

.inputFields{
    border:hidden;
    border-bottom: 2px solid #d3d3d3;    
    margin-right: 39px; 
    width-min: 200px;
    width:auto;
    -webkit-transition: 0.5s ease;
            transition: 0.5s ease;
  
  
}

.inputFields:hover{
    -webkit-transition: 0.5s ease;
            transition: 0.5s ease;
    border-bottom: 2px solid black;
    width-min: 200px;
    width:auto;
    margin-right: 39px;
}

#formMessage{
  height:150px;
  width:75%;
}

#sendEmailB{
  color:gray;
  border:solid;
  border-width:thin;
  padding:10px;
}

#sendEmailB:hover{
  color:black;
}

.container6{
  margin-top:-10px;
}

/* ============= Container 7 / More Contact info ============== */
.moreContactInfo{
  margin-left:-15px;
  margin-bottom:-10px;
  margin-right:-15px;
   /*min-width:350px;
    float:right;
    height:100%;
    min-height:685px;
    background-color:#d3d3d3;*/
  background:url("https://res.cloudinary.com/dd8nodub6/image/upload/v1455824657/green_cup_nj5ifb.png");
  
}
.container7{
  /*border:solid;*/
  /*border-color:red;*/
}

#Connect,#bottomNote,#emailAddress{ 
    margin-top:-0px;f
    margin-left:10%;
    color:black;
    padding:40px;
}

#bottomNote{
  margin-bottom:-2%;
}

/* Buzz Out  effect*/
@-webkit-keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }

  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}

@keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }

  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}

.endbuttons, #sendEmailB {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}
.endbuttons:hover, #sendEmailB:hover, .endbuttons:focus, #sendEmailB:focus, .endbuttons:active, #sendEmailB:hover {
  -webkit-animation-name: hvr-buzz-out;
  animation-name: hvr-buzz-out;
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  //background:#9975B9;
  background:green;
}

/* Footer */

#footer{
  clear:both;
  background: #090f0f;
  width:100%;
  margin-bottom:0px;
  padding-top:15px;
}

ul
{
    list-style-type: none;
}

a{
  background:transparent;
  border: none;
  font: 400 14px/1.6 'Open Sans', Verdana, Helvetica, sans-serif;
  color:#808080;
}

a:hover{
  color:white;
  text-decoration: none;
}

/*Sticky Footer */
.end{
  background: #090f0f;
  font-size:0px;
  color: #090f0f;
}


/* TEXT INTRO EFFECT  Build by: By Yoann HELIN : http://yoannhelin.fr */ 

.content {
  font-size:36px;
  line-height:40px;
  font-family:'Muli';
  color:#ecf0f1;
  height:40px;
  position:absolute;
  top:50%;
  left:42%;
  margin-top:-15px;
  margin-left:-118px;
  
  &:before {
    content:'[';
    position:absolute;
    left:-30px;
    line-height:40px;
  }
  &:after {
    content:']';
    position:absolute;
    right:-30px;
    line-height:40px;
  }
  &:after, &:before {
    color:#16a085;
    font-size:42px;
    animation:2s linear 0s normal none infinite opacity;
    -webkit-animation:2s ease-out 0s normal none infinite opacity;
    -moz-animation:2s ease-out 0s normal none infinite opacity;
    -o-animation:2s ease-out 0s normal none infinite opacity;
  }
}

.visible {
  float:left;
  font-weight:600;
  overflow:hidden;
  height:40px;   
}

#welcome{
}

.effectClass {
  display:inline;
  float:left;
  margin:0;
}

.effectClassUL {
  margin-top:0;
  padding-left:20%;
  text-align:left;
  list-style:none;
  animation:6s linear 0s normal none infinite change;
  -webkit-animation:6s linear 0s normal none infinite change;
  -moz-animation:6s linear 0s normal none infinite change;
  -o-animation:6s linear 0s normal none infinite change;
}

.effectClassUL li {
  line-height:38px;
  margin:0;
}

@-webkit-keyframes opacity {
  0%   {opacity:0;}
  50%  {opacity:1;}
  100% {opacity:0;}
}
@keyframes opacity {
  0%   {opacity:0;}
  50%  {opacity:1;}
  100% {opacity:0;}
}

@-webkit-keyframes change {
  0%   {margin-top:0;}
  15%  {margin-top:0;}
  25%  {margin-top:-40px;}
  40%  {margin-top:-40px;}
  50%  {margin-top:-80px;}
  65%  {margin-top:-80px;}
  75%  {margin-top:-40px;}
  85%  {margin-top:-40px;}
  100% {margin-top:0;}
}
@keyframes change {
  0%   {margin-top:0;}
  15%  {margin-top:0;}
  25%  {margin-top:-40px;}
  40%  {margin-top:-40px;}
  50%  {margin-top:-80px;}
  65%  {margin-top:-80px;}
  75%  {margin-top:-40px;}
  85%  {margin-top:-40px;}
  100% {margin-top:0;}
}

#welcome{
  margin-left:-25%;
}

.rowcenter{
  text-align:center;
}

.anchor{
   display:block;
   height:63px; /*  height of the header */
   margin-top:-63px; /*negative value of the height of the header */
   visibility:hidden;
}

#me {
    transition-duration: 2s;
    transition-property: transform;
}

#me:hover{
    -ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Safari */
    transform: rotate(360deg);
}


.flex-direction-nav li a{
  height:50px; 
  text-indent:0px;
}

/* More animation */
    #about_me span {
      display: inline-block;
      transition: transform 0.2s;
      cursor:url('http://csscursor.info/source/santahand.png'), default;
    }
    #about_me span:hover {
      transform: translateY(-20px) rotate(10deg) scale(2);
    }

#me{
  cursor: url('http://csscursor.info/source/santahand.png'), default;
}
            
          
!
            
              $( document ).ready(function(){ 
  
/*Slider*/                    
$('.flexslider').flexslider({
    animation: "slide",
    mousewheel: false,
    touch:true,
    slideshow: true,
    controlNav: true,
    directionNav: true,
    prevText: "PREV",
    nextText: "",
    pauseOnAction:true,
    pauseOnHover:true,
    video: true,
    before: function(){ 
  $('.slides > li > video').each( function(i) {
        $(this).get(0).pause();
    });
  } 
});
});

 /*Getting the form to send me emails -with gmail */

$("#sendEmailB").click(sendEmail);
function sendEmail(){
  
var subject = document.getElementById("fname").value + " " + document.getElementById("lname").value+ " | " + 
document.getElementById("emailA").value;
  
var websiteLink = document.getElementById("website").value;  
  
var message = document.getElementById("formMessage").value +" "+document.getElementById("website").value;
  
var finalUrl  = "https://mail.google.com/mail/?view=cm&fs=1&to=robert.cristian.uivarosi@gmail.com&body="+message+"&su="+subject;  
  
window.open(finalUrl,"_blank","toolbar=yes, scrollbars=yes, resizable=yes, top=500, left=500, width=400, height=400");

}

//Some more animation. Thanks WesbBos

const allLetters = document.querySelector('#about_me');
allLetters.innerHTML = spanWrap(allLetters.textContent);

function spanWrap (word){
  return [...word].map(letter => {
    if (letter == ' '){
      return  `<span style='margin-right:0.2em; display:inline-block;'>${letter}</span>`;
    }else{
      return `<span>${letter}</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