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

              
                <head>
  <title>Linda Kovacs - Portfolio Webpage</title>
</head>

<body data-spy="scroll" data-target="#navbar-collapse">

  <!-- Navbar -->
 
 <header> 
  <nav class="navbar navbar-blue navbar-fixed-top" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" style="margin-top: 15px;" href="#home">Linda Kovacs - Portfolio Webpage</a>
      </div>
      <div class="collapse navbar-collapse" id="navbar-collapse" style="margin-left: 200px; margin-top: 15px;">
        <ul class="nav navbar-nav pull-right" role="navigation">
          <li><a href="#home"><span class="glyphicon glyphicon-home"></span>  Home</a></li>
          <li><a href="#about"><span class="glyphicon glyphicon-file"></span> About</a></li>
          <li><a href="#portfolio"><span class="glyphicon glyphicon-th-large"></span> Portfolio</a></li>
          <li><a href="#video"> <span class="glyphicon glyphicon-facetime-video"></span> Video</a></li>
          <li><a href="#contact"><span class="glyphicon glyphicon-envelope"></span> Contact</a></li>
          <!-- <li><a href="#social"> <span class="glyphicon glyphicon-user"></span> Social</a></li> -->
        </ul>
    </div> <!-- end container -->
  </nav> <!-- End navbar -->
    <div class="clearfix"> </div>
   </div>
</header> 
  
</br></br></br></br>
  <div class="anchor" id="home"></div>
 <!-- begin carousel -->

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img class="img-responsive" src="https://donnystudio.com/wp-content/uploads/2016/09/web-development.jpg" alt="full-stack" style="height: 750px">
        <div class="carousel-caption">
        <div class="text-center welcome">
           <h2 class="introduction" style="color: black; margin-top: -678px;"> <strong> Linda Kovacs </strong> </h2>
             <p class="intro" style="color: black;"> Front-End Developer and UX/UI designer, with practical experience in project management, branding strategy, and creative direction;  devoted to functional programming and information architecture.</p>
        </div>
        <!--<span class="soclogo">
        <img src="img/fb.png" style="height: 60px; width: 50px;">
        <img src="img/twitter.png" style="height: 60px; width: 50px;">
        <img src="img/github.png" style="height: 60px; width: 50px;">
        <img src="img/insta.png" style="height: 60px; width: 50px;">
        <img src="img/linkin.png" style="height: 60px; width: 50px;">
      </span>-->
          
        </div>      
      </div>

      <div class="item">
        <img class="img-responsive" src="http://blog.debugme.eu/wp-content/uploads/2016/01/Cover-Image.png" alt="scherm" style="height: 750px">
        <div class="carousel-caption">
        <div class="text-center welcome">
          <h2 class="introduction" style="color: black; margin-top: -678px;"> <strong> Linda Kovacs </strong> </h2>
        <p class="intro" style="color: black;">A Front End Developer - Web Developer - User Experience Designer - Graphic Artist <br> Scroll down to see some of my work</p>
          </div>
        <!--<span class="soclogo">
             <img src="img/fb.png" style="height: 60px; width: 50px;">
          <img src="img/twitter.png" style="height: 60px; width: 50px;">
          <img src="img/github.png" style="height: 60px; width: 50px;">
          <img src="img/insta.png" style="height: 60px; width: 50px;">
          <img src="img/linkin.png" style="height: 60px; width: 50px;">
        </span>-->

  
        </div>      
      </div>
    </div>
  
          <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
          
</div>



 <div class="anchor" id="about"></div>
      
 <!-- blog --> 
<div class="jumbotron" id="about" style="background-color: white ">

     <div class="container text-center">   
		<div class="row col-md-12 about">
				 <h3><strong>About me</strong></h3>
      <p>Linda Kovacs (Baranciuc) </br>
       Web Developer, Web Designer and Graphic Designer at Keymark Corporation, Kasson and Keller Inc. and F&F Transport Inc.</p>

  <p><strong>Summary</strong></p>
<p> • Over 15 years as an innovative and creative Web Developer, Web and Graphic Designer.</br>
• Over 10 years experience in Journalism: Radio, TV & Magazine.</br>
• Experienced IT Consultant. 20 years’ experience installing and troubleshooting hardware and software, computer technical support for PC Networking and Remote Desktop </br>
• 10 years’ experience as Translator/Interpreter: English, Italian & Romanian </br>
• Multilingual (English, Italian, French & Romanian) with excellent written and verbal communication. </br>
• Wide-ranging knowledge on Software Packages: Microsoft Office Suite and Adobe Creative Suite. </br>
</p>
<p><strong>Professional Path</strong></p>
    <table class="table table-responsive table-striped text-left">
  <thead>
    <tr>
      <th>Year</th>
      <th>Company</th>
      <th>Position</th>
      <th>Address</th>
      <th>Website</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">February 2016 - Present</th>
      <td>Keymark Corporation NY and FL, Kasson and Keller, F&F Transport</td>
      <td> Web Developer, Web Designer and Graphic Designer</td>
      <td>New York and Florida</td>
      <td><a href="http://www.keymarkcorp.com/">Keymark Corporation</a> </br>
      <a href="http://www.ecoshieldwindows.com/">Kasson & Keller Corp.</a> </br>
      <a href="http://www.fandftransport.com/">F&F Transport, Inc.</a> </td>
      
    </tr>
    <tr>
      <th scope="row">September 2014 - January 2016 </th>
      <td>Keymark Corporation, Kasson and Keller Inc., F&F Transport Inc.</td>
      <td>Computer Technician Specialist </td>
      <td>New York and Florida</td>
      <td><a href="http://www.keymarkcorp.com/">Keymark Corporation</a> </br>
      <a href="http://www.ecoshieldwindows.com/">Kasson & Keller Corp.</a> </br>
      <a href="http://www.fandftransport.com/">F&F Transport, Inc.</a> </td>
    </tr>
    <tr>   
      <th scope="row">February 2014 - September 2014</th>
      <td>The Mohawk Valley Resource Center for Refugees (MVRCR)</td>
      <td>Volunteer - IT consultant</td>
      <td>Utica, NY</td>
      <td>
      <a href="http://www.mvrcr.org/">MVRCR</a>
        </td>
    </tr>
    
     <tr>
      <th scope="row">March 2014 - Present</th>
      <td>Compass Interpreters</td>
      <td>Volunteer Interpreter/Translator</td>
      <td>Utica, NY</td>
       <td><a href="http://www.mvrcr.org/compass-interpreters/">Compass Interpreters</a> </td>
       
    </tr>
    
     <tr>
      <th scope="row"> March 2013 - Present</th>
      <td>Metal Sculptures Land of Alex Kovacs</td>
      <td>Web Developer, Web & Graphic Designer</td>
      <td>NY</td>
       <td><a href="http://www.alex-kovacs-metal-wall-sculptures.com/">Metal Sculptures Land of Alex Kovacs</a> <br>
        <a href="http://www.alex-kovacs-metal-sculptures.com/">Metal Sculptures Land of Alex Kovacs</a>    
           </td>
    </tr>
    
     <tr>
      <th scope="row">May 2006 - March 2013</th>
      <td>UN.I.O.N. - Unione Italiana Organismi Notificati</td>
      <td>Web Developer, Web & Graphic Designer</td>
      <td>Rome, Italy</td>
       <td>
         <a href="http://www.uni-on.it/">UN.I.O.N.</a> 
          | <a href="http://www.uni-on.it/newsliftletter/index.html">Newsliftletter</a><br> Ex web-sites http://www.union-associazione.net/ | http://www.newsliftletter.it/</td>
    </tr>
    
     <tr>
      <th scope="row">April 2008 - February 2013</th>
      <td>One Pubblicita e Editoria Srl - Profili Italia (Italian Publishing Company)</td>
      <td>Jurnalist</td>
      <td>Italy</td>
       <td> <a href="http://www.profiliest.com">Profili Italia section</a>  <br>
         <a href="http://www.edizioniprofili.com/index.php?option=com_content&view=article&id=49&Itemid=37">Edizioni Profili</a></td>
    </tr>

    <tr>
      <th scope="row">October 2002 - October 2006</th>
      <td>Civil and Criminal Court</td>
      <td>Translator and Interpreter</td>
      <td>Salerno, Italy</td>
       <td> </td>
    </tr>
    
    <tr>
      <th scope="row">1995 - 2000</th>
      <td>Radio Unison & TV Vaslui</td>
      <td>Jurnalist</td>
      <td>Vaslui, Romania</td>
       <td><a href="http://www.unison.vaslui.net/">Radio Unison & TV Vaslui</a><br> 
         <a href=" http://unison.vaslui.net/">Radio Unison & TV Vaslui</a><br> 
         <a href="http://unison.vaslui.net/tvv.htm">Radio Unison & TV Vaslui</a>
         
            </td>
    </tr>
    
  </tbody>
</table>

<p><strong>Educational Path</strong></p>
<table class="table table-responsive table-striped text-left">
  <thead>
    <tr>
      <th>Year</th>
      <th>Certification</th>
      <th>Authority</th>
      <th>Address</th>
    </tr>
  </thead>
  <tbody>
  <tr>
     <th scope="row">2015 - 2018</th>
      <td>Full Stack Web Development Certification - Computer Software Engineering </td>
      <td>Free Code Camp | Codecademy | <br> Lynda.com | Udemy Accademy | edX </td>
      <td>Albany, NY <br> <a href="https://www.freecodecamp.com"> FreeCodeCamp</a> <br>
        <a href="https://www.codecademy.com"> Codecademy</a>
        <a href="https://www.lynda.com"> Lynda.com</a><br>
        <a href="https://www.udemy.com"> Udemy</a> <br>
        <a href="https://www.edx.org"> edX</a>
        </td>
    </tr>
 <tr>  
      <th scope="row">2013 - 2015</th>
      <td>Web Mastering & Design | Graphic Designer | 3D Modeling & Animation </td>
      <td>CPU Academy</td>
      <td>Rome, Italy <br>
        <a href="http://www.cpuacademy.it/">CPU Academy</a></td>
    </tr>
    <tr>
      <th scope="row">October 2015</th>
      <td>WERCing Woman of Achievement Award (Carrier Accomplishments & Outstanding efforts to support women in our Community)</td>
      <td>Women's Employment & Resource Center</td>
      <td>Utica, NY <br>
<a href="https://www.facebook.com/lindakovacsart/videos/10208046788794010/?l=9081029513980772242"> WERCing Woman of Achievement Award</a>        </td>
    </tr>
    <tr>
      <th scope="row">October 2015</th>
      <td>WERCing Woman of Achievement Award (Carrier Accomplishments & Outstanding efforts to support women in our Community)</td>
      <td>New York State Assembly </td>
      <td>Utica, NY</td>
    </tr>

    <tr>
      <th scope="row">October 2015</th>
      <td>WERCing Woman of Achievement Award (Carrier Accomplishments & Outstanding efforts to support women in our Community)</td>
      <td>Senator Joseph A. Griffo</td>
      <td>Utica, NY</td>
    </tr>
       <tr>
      <th scope="row">October 2014</th>
      <td>WERCing Woman of Achievement Award (Carrier Accomplishments & Outstanding efforts to support women in our Community)</td>
      <td>Congress of the United States</td>
      <td>Utica, NY</td>
    </tr>
<tr> 
      <th scope="row">2014</th>
      <td>Joomla Certificate</td>
      <td>Master Academy</td>
      <td>Rome, Italy <br> 
        <a href="www.master-academy.it">Master Academy</a> </td>
    </tr>

    <tr>   
      <th scope="row">2012</th>
      <td>English as a Second Language - Upper Intermediate level 7 (B2 European level CEFR)</td>
      <td>UPTER Roma - Università Popolare</td>
      <td>Rome, Italy</td>
    </tr>
   
    <tr>
      <th scope="row">December 2011</th>
      <td>CILS - Certification of Italian as a Foreign Language - Fourth level (C2) (Certificazione di Italiano come Lingua Straniera)</td>
      <td>Università di Siena</td>
      <td>Rome, Italy</td>
    </tr>
    <tr>
     
      <th scope="row">April 2008</th>
      <td>Certification for studies on U.S. domestic politics and relations between Italy and the United States</td>
      <td>The Student Movement for International Organization (MSOI) & The Embassy of the United States of America in Rome</td>
      <td>Rome, Italy</td>
    </tr>
    <tr>
       
      <th scope="row">August 2008</th>
      <td>Certificate for international United Nations simulation conference - U.N. Office on Drugs and Crime</td>
      <td>VIMUN - Vienna International Model United Nations</td>
      <td>Vienna, Austria<br>
       <a href="http://afa.at/vimun/gallery2008VIMUN/afagal2008vimun.htm"> Vienna International Model United Nations (VIMUN) 2008</a></td>
    </tr>
      
      <th scope="row">April 2007</th>
      <td>Certificate as an interpreter linguistic-cultural mediator in healthcare and justice field</td>
      <td>European Union Program for Lazio Region (ERFAP Lazio, European Union & Departement of Labour and Welfare Rome, Italy)</td>
      <td>Rome, Italy</td>
    </tr>
    <tr>
       
      <th scope="row">February 2004</th>
      <td>Certificate for translations/interpretations in criminal investigations</td>
      <td>Civil and Criminal Court (Procura della Repubblica c/o Tribunale di Salerno) </td>
      <td>Salerno, Italy</td>
    </tr>
    
    <tr>
      <th scope="row">1999 - 2001</th>
      <td>Coursework in Computer Science</td>
      <td>Gheorghe Asachi University</td>
      <td>Iasi, Romania</td>
     </tr> 
  </tbody>
</table>

		</div>
	</div>
     
      
<div id="allfont">
<!-- FreeCodeCamp -->
<div class="jumbotron" id="About" style= "background-color: white"> 
<div class="container col-sm-12 text-center">
<div class="row offer">
  		<h3><strong>The Fullstack Experience as an Immersive Coding Bootcamp</strong></h3>
  
   <div class="container">
            <div class="row">
                <div class="col-lg-12">
                  <p><a href="https://www.freecodecamp.com"> FreeCodeCamp</a> & <a href="https://www.codecademy.com"> Codecademy</a> </p>    
                    
                  </div>
               </div>
     </div>
  
  <p>Being a great software engineers means not only being fluent with the latest frameworks and languages, but also having an evolved intuition for writing efficient and beautiful code. Before mastering the higher level technologies in software development for the web.</p>
  		</div>
  		</div>

<div class="container text-center offertext"> 
  					<div class="row">
  		  <div class="col-sm-3 wow fadeInUp animated" data-wow-delay="0.4s">
  		  <span class="glyphicon glyphicon-heart logo-small"></span>
      <p><strong>Front-end Development</strong></p><br>
     <p>User expectations of Web and Mobile Applications have significantly increased in the last 10 years and the level of sophistication of front-end development has increased to match it. Studing HTML/HTML5, CSS/CSS3, Javascript, JQuery, AJAX, JSON and going beyond with modern frameworks like Angular and React. </p>   
		</div>


    <div class="col-sm-3 wow fadeInUp animated" data-wow-delay="0.6s" >
     <span class="glyphicon glyphicon-cog logo-small"></span>
      <p><strong>Back-end Developmentk</strong></p><br>
      <p>Takeing JavaScript skills to the backend with Node.js and the amazing ecosystem of libraries that have made JavaScript the leader in next-generation backend web engineering. Master the use of Angular, PHP, Ruby on Rails and APIs to connect to vast amounts of user data.</p>      
 </div> 

    <div class="col-sm-3 wow fadeInUp animated" data-wow-delay="0.8s">
		<span class="glyphicon glyphicon-list-alt logo-small"></span>
      <p><strong>Databases</strong></p><br>
      <p>Master data persistence by building your own SQL database engine, learning about new NoSQL databases like Mongo and how to integrate these into your applications.</p>      
 </div>

<div class="col-sm-3 wow fadeInUp animated" data-wow-delay="0.10s" >
    <span class="glyphicon glyphicon-wrench logo-small"></span>
      <p><strong>Tools & best practices</strong></p><br>
      <p>Git, text editors, Test-Driven Development, virtual machines... know the state of the art tools that developers are using to increase the productivity of their work.</p>      
 </div>

 </div>
 </div>
 </div> <!-- end about --> 



<div class="anchor" id="portolio"></div>
  
<div class="jumbotron" id="Work" style="background-color: #F1F1F1"> <!-- portfilio -->

<div class="container text-center col-sm-12">
<div class="row">
  <h3><strong>Some of my Work</strong></h3><br>
  		</div>
  		</div>   
  
 <div class="container-fluid text-center">
  <a data-pin-do="embedBoard" data-pin-board-width="1500" data-pin-scale-height="500" data-pin-scale-width="80" href="https://www.pinterest.com/lindakovacsart/graphic-design-portfolio/"></a>

   </br></br></br>
  
  <a data-pin-do="embedBoard" data-pin-board-width="1500" data-pin-scale-height="500" data-pin-scale-width="80" href="https://www.pinterest.com/lindakovacsart/web-development-portfolio/"></a>
  
  </br></br></br>

<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Flindakovacsart%2Fvideos%2Fvb.1427792533%2F10208046788794010%2F%3Ftype%3D3&show_text=0&width=400" width="400" height="750" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>

  </div>


 <!-- 
<div class="container sm-3 text-center">    
  <div class="row">
    <div class="col-sm-4 wow fadeInUp animated" data-wow-delay="0.3s">
      <img src="img/blok1_opt.jpg" class="img-responsive thumbnail" style="width:100%" alt="blok1">
    </div>
    <div class="col-sm-4 wow fadeInUp animated" data-wow-delay="0.6s">
      <img src="img/blok1_opt.jpg" class="img-responsive thumbnail" style="width:100%" alt="blok2">
    </div>
    <div class="col-sm-4 wow fadeInUp animated" data-wow-delay="0.9s"> 
      <img src="img/blok1_opt.jpg" class="img-responsive thumbnail" style="width:100%" alt="blok3">
    </div>
  </div>
</div><br>

<div class="container sm-3 text-center">    
  <div class="row">
    <div class="col-sm-4 wow fadeInUp animated" data-wow-delay="0.12s">
      <img src="img/blok4_opt.jpg" class="img-responsive thumbnail" style="width:100%" alt="blok4">
    </div>
    <div class="col-sm-4 wow fadeInUp animated" data-wow-delay="0.15s"> 
      <img src="img/blok5_opt.jpg" class="img-responsive thumbnail" style="width:100%" alt="blok5">
    </div>
    <div class="col-sm-4 wow fadeInUp animated" data-wow-delay="0.18s"> 
      <img src="img/blok4_opt.jpg" class="img-responsive thumbnail" style="width:100%" alt="blok6">
    </div>
  </div>
</div>

</div> <!-- end portofolio--> 



<!-- about-->
<div class="jumbotron" style= "background-color: #FFFFFF">
<div class="container-fluid  wow fadeInUp animated" data-wow-delay="0.8s">
<div class="row">
		<div class="col-sm-4 designer text-center">
     <h3 ><strong>Part Designer</strong></h3>
     	<ul class="list-group" style="font-size: 20px">	
      						<strong>Web Design</strong><br>
                  UI - User Experience Design<br>
                  UX - User Interface Design<br>
                  <strong>Graphic Design</strong><br>
                  Adobe Creative Suite:<br>
                  Adobe Photoshop<br>
                  Adobe InDesign<br>
                  Adobe Illustrator<br>
				      		Adobe Flash Player<br>
                  Adobe Dreamweaver<br>
                  Gimp<br>
                  Inkscape<br>
                  Scribus<br>
				      		
		</ul>
</div>
	<div class="col-sm-4 grafiek">
	 <img src="https://s-media-cache-ak0.pinimg.com/originals/f7/3a/a0/f73aa0bdfb35f967606484feb0d21ff4.jpg" alt="graphic" class="img-responsive" >
</div>

     <div class="col-sm-4 coder text-center">
     <h3><strong>Part Coder</strong></h3>
     	<ul class="list-group" style="font-size: 20px">	
      						<strong>Front End Developer</strong><br>
				      		HTML, HTML5<br>
				      		CSS, CSS3<br>
				      		Javascript, JQuery<br>
				      		AJAX, JSON<br>
        
                  <strong>Back End Developer</strong><br>
                  PHP<br>
                  MySQL, SQL<br>
                  Server: Linux, Cloud<br>
                  Web servers: Apache, LAMP, MAMP, XAMP<br>
                  Version control: Git, SVN<br>
                  Virtualization: Vagrant<br>
                  Frameworks: Laravel<br>
		</ul>

     </div>
      </div>
</div>
</div>



<!-- hire me -->
<div class="jumbotron" style= "background-color: #F1F1F1">
<div class="container-fluid text-center  wow fadeInUp animated" data-wow-delay="0.8s">
    <p> I am available for freelance projects. </p>

		<h3> <strong>	LET'S BUILD YOUR WEBSITE TOGETHER! </strong></h3>
			<button type"button" class="btn btn-blue btn-md"> Hire Me</button>

</div>
</div>



<!-- blog --> 
<div class="jumbotron" id="Blog" style="background-color: white ">

     <div class="container text-center">   
		<div class="row col-md-12 blogt">
				 <h3><strong>Full Stack Developer</strong></h3>
      <p>Full-stack developers are comfortable working with both back-end and front-end technologies.</p>
		</div>
	</div>

   <div class="container"> 
  <div class="row">
    <div class="col-sm-4 wow fadeInUp animated" data-wow-delay="0.4s">
      <p><strong>Front-end technologies</strong></p><br> 
     <!-- <h6 class="text-muted">Date:07 oct 16</h6> -->
      <p>  o	HTML - the structure of web pages<br>
        o	CSS - the visual style of web pages <br>
        o	Bootstrap - a "responsive design" tool that helps your websites look great on tablets and phones <br>
        o	jQuery - an easy tool for controlling content in the browser <br>
        o	JavaScript - the one programming language that all web browsers use </br></br>  
      <a href="#" class="read-more">Read more</a> 
      </div> 

 
    <div class="col-sm-4 wow fadeInUp animated" data-wow-delay="0.6s">
       <p><strong>Back-end   technologies</strong></p><br> 
     <!-- <h6 class="text-muted">Date:07 oct 16</h6> -->
      <p>  
        o PHP - a server-side scripting language designed primarily for web development <br>
        o	SQL - a popular language for pulling data out of spreadsheet-like relational databases <br>
        o	Agile - a set of software development principles that focus the design and production of a project on the needs of its users <br>
        o	MongoDB - a popular non-relational database <br>
        o	AngularJS - a tool for making exciting web interfaces <br>
        o	ExpressJS - a powerful web development framework <br>
        o	NodeJS - a runtime that handles files and network activity. </br></br>   
      <a href="#" class="read-more">Read more</a>     
 </div>
 


    <div class="col-sm-4 wow fadeInUp animated" data-wow-delay="0.6s">
     <p><strong>Developer Tools</strong></p><br> 
     <!-- <h6 class="text-muted">Date:07 oct 16</h6> -->
      <p>  
        o	Chrome DevTools - a tool for understanding and debugging websites, right in your browser <br>
        o	Git - a version control system for saving and sharing your projects <br>
        o	Algorithms - step-by-step recipes for getting things done </br></br>       
      <a href="#" class="read-more">Read more</a>      
 </div>
 </div>
 </div>
 </div>  <!-- end project 2 --> 

<!--new project--> 

<div class="jumbotron" style= "background-color: #3861EC">
<div class="container text-center  wow fadeInUp animated" data-wow-delay="0.8s">
    <div class="row" style="font-size: 18px; color: white;">
    <div class="col-sm-3">
     <span style="font-size: 40px;">15</span><br>
    	Website Projects Done 
    	 </div>
   <div class="col-sm-3">
    <span style="font-size: 40px">35</span><br>
    	Website Daily Maintenance Done 
    	 </div>
    <div class="col-sm-3">
     <span style="font-size: 40px;">95</span><br>
    	Logos 
    	
    	 </div>
    	<div class="col-sm-3">
    	 <span style="font-size: 40px">350</span><br>
    	Graphic Design Projects Done 
    	
    	 </div>
    	 	

    </div>
</div>
</div>


<div class="anchor" id="contact"></div>
<div class="jumbotron" id="Contact" style="background-color: #FFFFFF">
<div class="container" > <!--contact form -->

<div class="row">
   <div class="col-md-12 text-center">
   <div class="section-title  wow fadeInUp animated" data-wow-delay="0.2s">
      <h3><strong>Contact</strong></h3>
      <p>Lets get in touch. Send me a message:</p>
      </div>
      </div> 
      </div>
      

		<div class="row">
		<div class="col-md-12">
		<div class="form-group col-md-6  wow fadeInUp animated" data-wow-delay="0.4s">

			<input type="text" class="form-control" id="Name" name="name" placeholder= "Name" required> 
		</div>
			<div class="col-md-6 form-group  wow fadeInUp animated" data-wow-delay="0.6s">
				<input class="form-control" id="email"  type="email" name="email" placeholder="Email"  required>
			</div>
</div>
</div> 

<div class="col-md-12 form-group  wow fadeInUp animated" data-wow-delay="0.8s">
  <input type="text" class="form-control" id="subject" name="subject" placeholder= "Subject" required> 
</div> 
  
<div class="col-md-12 form-group  wow fadeInUp animated" data-wow-delay="0.8s">
<textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea><br>
      <div class="row text-center">
        <div class="col-md-12 form-group">
          <button type"button" class="btn btn-blue btn-md"> <span class="glyphicon glyphicon-send"></span> Send Messege</button>  
			</div>
		</div>
</div>
</div> 
</div> 

  <!-- social -->
 <div class="anchor" id="social"></div>
  <div class="container-fluid text-center content content-social">
    <h2>Social
    <br><small>Connect With Me Via Social Media</small>
      </h2>
    <div class="row">
        <a href="https://www.facebook.com/lindakovacsart" class="btn btn-default btn-blue btn-social btn-facebook-f" target="_blank"><span class="fa fa-facebook-f"></span> Facebook</a>
        <a href="https://twitter.com/lindakovacsart" class="btn btn-default btn-blue btn-social btn-twitter" target="_blank"><span class="fa fa-twitter"></span> Twitter</a>
        <a href="https://plus.google.com/u/1/112468176480762133222" class="btn btn-default btn-blue btn-social btn-google-plus" target="_blank"><span class="fa fa-google-plus"></span> Google+</a>
    <a href="https://www.linkedin.com/in/lindakovacsart" class="btn btn-default btn-blue btn-social btn-linkedin" target="_blank"><span class="fa fa-linkedin"></span> LinkedIn</a> 
      
      <a href="https://github.com/lindakovacs" class="btn btn-default btn-blue btn-social btn-github" target="_blank"><span class="fa fa-github"></span> GitHub</a>

      </div>
    </div>
  </div>
 </div>
<div class="clearfix"> </div>
 </div> 
 </div> 

<!---- back-to-top ----->
		<a id="back-to-top" href="#" class="btn btn-default btn-lg back-to-top" role="button" data-toggle="tooltip" data-placement="right"><span class="glyphicon glyphicon-chevron-up"></span></a> <!--title="Top"-->
<div class="clearfix"> </div>

 <!-- Footer -->
    <footer>
     <nav class="navbar navbar-blue navbar-bottom text-center">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <ul class="list-inline">
                        <li>
                            <a href="#"><span class="glyphicon glyphicon-home"></span> Home</a>
                        </li>
                        <li class="footer-menu-divider">&sdot;</li>
                        <li>
                            <a href="#about"><span class="glyphicon glyphicon-file"></span> About</a>
                        </li>
                        <li class="footer-menu-divider">&sdot;</li>
                        <li>
                            <a href="#portfolio"> <span class="glyphicon glyphicon-th-large"></span> Portfolio</a>
                        </li>
                      <li class="footer-menu-divider">&sdot;</li>
                       <li>
                            <a href="#video"><span class="glyphicon glyphicon-facetime-video"></span> Video</a>
                        </li>
                        <li class="footer-menu-divider">&sdot;</li>
                        <li>
                            <a href="#contact"> <span class="glyphicon glyphicon-envelope"></span> Contact</a>
                        </li>
                      <!-- <li class="footer-menu-divider">&sdot;</li>
                       <li>
                            <a href="#social"> <span class="glyphicon glyphicon-user"></span> Social</a>
                        </li> -->
                    </ul>          

		<!--<p id=footer class="navbar-text "> -->
     <p class="copyright text-muted small">Copyright &copy; Linda Kovacs | 2016-2017. All Rights Reserved</p>
                  <!--<?php
echo "<p>Copyright &copy; 2006 -" . date("Y") . " Linda Kovacs. All Rights Reserved</p>";
?> -->
                </div>
            </div>
        </div>
    </footer>

<script async defer src="//assets.pinterest.com/js/pinit.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<!-- <script src="js/wow.min.js"></script> 
              <script>
              new WOW().init();
              </script> -->

</body> 

              
            
!

CSS

              
                .navbar-brand {
color: #000; 
width: 450px
font-size: 10px;
}
/* navbar Default */
.navbar-default {
background-color: #FFF;
border-color: #FFF;
}
.navbar {
border-radius: 0px;
margin-bottom: 15px;
}
/* navbar blue */
.navbar-blue {
background-color: #3861EC;
color: #000; 
border: none;
}
/* change logo text color and hover color */ 
.navbar-blue .navbar-brand {
color: #fff
}
.navbar-blue .navbar-brand:hover, .navbar-blue .navbar-brand:focus {
color: #8226b7
}
/* Change nav links color */
.navbar-blue .navbar-nav > li > a {
color: #fff
}
.navbar-blue .navbar-nav > li > a:hover {
color: #8226b7
}
/* change visited color */
.navbar-blue .navbar-nav > li > a:focus {
color: #fff
}
/* form */
.navbar-blue .form-control {
border-radius: 4;
border: none
}
.navbar-blue .form-control {
border: 1px solid #4c3272
}
.navbar-blue .btn {
border: 1px solid #4c3272
}
/* open drop down background color */
.navbar-blue .navbar-nav .open .dropdown-menu {
background: #fff
}
/* mobile toggle nav icon */
.navbar-blue .navbar-toggle {
border-color: #e7e7e7
}
.navbar-blue .navbar-toggle .icon-bar {
background-color: #e7e7e7
}
.navbar-blue .navbar-toggle:focus, .navbar-blue .navbar-toggle:hover {
background-color: #FFF
}
.navbar-blue .navbar-toggle:focus .icon-bar, .navbar-blue .navbar-toggle:hover .icon-bar {
background-color: #3b5998
}

.navbar-bottom {
  border-radius: 0px;
  margin-top: 15px;
  margin-bottom: 15px;
  padding: 5px;
  color: #fff;
}

.btn-blue {
background-color: #3861EC;
color: #fff;
border: none;
}

.back-to-top {
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #3861EC;
    width: 50px;
    height: 50px;
    border: 1px solid #e7e7e7;
    color: #FFF;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    font-size: 19px;
    margin: 0;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}



.nav { font-family: 'Raleway', sans-serif;
		font-size: 15px;
		margin-bottom: 0;
    background-color: 3861EC;
    border: 0;
    letter-spacing: 1px;
    opacity:0.9; 
    
}



.container { font-family: 'Raleway', sans-serif;
	
}



#allfont { font-family: 'Raleway', sans-serif;
	
}

#footer { font-family: 'Raleway', sans-serif;
			font-size: 14px;
			background-color: white; 
			padding: 20px 0px; 
			
}

.navbar {
	
    margin-bottom: 0px; border-radius: 0px;
    background-color: #3861EC;
    border: 0;
    font-size: 14px !important;
    letter-spacing: 3px;
    color: #000;

}



.carousel-inner img {
    -webkit-filter: grayscale(90%);
    filter: grayscale(85%); /* make all photos black and white */ 
    width: 100%; /* Set width to 100% */
    height: auto;
    margin: auto;
    opacity: 0.6;
}


.crop {
	height: 900px;
    /*width: 400px;*/
    overflow: hidden;
  } 




@media (max-width: 600px) {
    .carousel-caption {
        display: none; /* Hide the carousel text when the screen is less than 600 pixels wide */
  	
}
}

.logo-small {  
		font-size: 33px; 
		color: black; 
	


}

.offer {
			margin-top: -15px;
			margin-bottom: 30px;


}

.offertext {
	margin-bottom: 20px


}

.blogt {
				margin-bottom: 15px; 
				margin-top: -25px;


}

a.read-more {
	    background: #3861EC; 
			color:white;	
			border: 1px solid #3861EC;
			font-size: 15px; 
			padding: 10px 16px; 
			margin-top: 20px;  
			letter-spacing: 5px;
			font-weight: 500; 

}

a.read-more:hover 
{ 
  
color:#3b5998;
border: 1px solid #3b5998;
background: none; 
text-decoration: none; 



}


.soclogo {

	
		text-align: center; 
		margin-right: -58px;
		margin-left: 460px;
		

	
}



.introduction {

    font-family: 'Raleway', sans-serif;
		font-size: 40px;
		text-align: center; 
		margin-top: -790px;
		margin-right: -58px;
		margin-left: 460px;
		

		
	

}

.intro {
	font-family: 'Raleway', sans-serif;
		font-size: 27px;
		text-align: center; 
		margin-right: -58px;
		margin-left: 460px;
		



}

.list-inline a {
    color: #FFF;
}

.copyright {
    color: #000;
}
              
            
!

JS

              
                $(document).ready(function(){
     $(window).scroll(function () {
            if ($(this).scrollTop() > 50) {
                $('#back-to-top').fadeIn();
            } else {
                $('#back-to-top').fadeOut();
            }
        });
        // scroll body to 0px on click
        $('#back-to-top').click(function () {
            $('#back-to-top').tooltip('hide');
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
        
        $('#back-to-top').tooltip('show');

});

//new WOW().init();

wow = new WOW(
{
boxClass:     'wow',
animateClass: 'animated',
offset:       100
}
);
wow.init();

              
            
!
999px

Console