cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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.

Quick-add: + add another resource

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.

Quick-add: + add another resource

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.

            
              <?php
    
    $title = "Adrian's Portofolio";

?>

<!DOCTYPE html>
<html lang="en">   
    
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title><?php echo $title; ?></title>
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://bootswatch.com/flatly/bootstrap.min.css">
    
    <!-- Bootstrap-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!--cecava-->
    
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans'>
    
    <!--My personal CSS-->
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/word.Slide.css">
    <link rel="stylesheet" href="css/photo3d.css">
    <link rel="stylesheet" href="css/imageHover.css">
    <link rel="stylesheet" href="css/scrolling-nav.css">
    <link rel="stylesheet" href="css/satelite.css">
    
    <!--End of personal CSS-->
    
    <!--FONT AWESOME , Fonturi pentru si cu -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <!--End of FONT AWESOME-->
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    
<!--cecava-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js"></script>
    
    
    
    <script src="js/index.js"></script>
    <script src="js/photo3d.js"></script>
    <script src="js/scrolling-nav.js"></script>
    
    <script src="js/satelite.js"></script>
    
</head>
    
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
    
<nav class="navbar-inverse navbar navbar-fixed-top">
  <div class="container-fluid">
      
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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" href="#">Adrian Gheorghe</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        
<!--   SEARCH ENGINE
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
-->
        
      <ul class="nav navbar-nav navbar-right">
          
        <li><a class="page-scroll" href="#home">Home</a></li>
        <li><a class="page-scroll" href="#about">About</a></li>
        <li><a class="page-scroll" href="#portofolio">Portofolio</a></li>
        <li><a class="page-scroll" href="#skills">Skills</a></li>
        <li><a class="page-scroll" href="#contact">Contact</a></li>
        
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
    
<div class='sector-home' id="home">
    <div class='container-fluid'>   
        
        <div class="row" style="margin-top:50px; margin-bottom:100px;">
            
            <div class="col-md-offset-2 col-md-8 col-xs-offset-0 col-xs-12" id="header">
                <h1>Adrian Gheorghe</h1>
                <h3>WEB Developer</h3>
            </div>
            
        </div>
        
        <div class="row" style="margin-top:100px; margin-bottom:100px;">
            <div class="col-md-offset-0 col-md-12 col-xs-offset-0 col-xs-12">

                <a id="proj-btn" type="button" class="button" onClick="window.open('https://github.com/queky18');"><i class="fa fa-github"></i> Github</a>
                
                <a id="proj-btn" type="button" class="button" onClick="window.open('https://www.facebook.com');"><i class="fa fa-facebook"></i> Facebook</a>
                
                <a id="proj-btn" type="button" class="button" onClick="window.open('https://www.codecademy.com/queky');"><i class="fa fa-coffee"></i>  CodeCademy</a>

                <a id="proj-btn" type="button" class="button" onClick="window.open('http://stackoverflow.com/users/5841700/adrian-gheorghe?tab=profile');"><i class="fa fa-stack-overflow" aria-hidden="true"></i> StackOverflow</a>
                
                <a id="proj-btn" type="button" class="button" onClick="window.open('https://www.freecodecamp.com/queky18');"><i class="fa fa-fire"></i> FreeCodeCamp</a>

            </div>
        </div>
        
        <!--<br><br>
        <hr style="width:100%;">-->
    
    
    <!-- Game of Words-->
        <div class="row" style="margin-top:150px; margin-bottom:50px;">
            <div class="col-md-12 col-md-offset-0 col-xs-10 col-xs-offset-1">
                <div class='content'>
                  <div class='visible'>
                    <p style="color:black; display:inline; float:left; margin:0; font-size:35px;">
                      I
                    </p>
                    <ul style="margin-top:0; padding-left:14px; text-align:left; list-style:none; -webkit-animation: 16s linear 0s normal none infinite change; animation:16s linear 0s normal none infinite change;">
                      <li style="line-height:40px; margin: 0;">ntelligent</li>
                      <li style="line-height:40px; margin: 0;">nductive</li>
                      <li style="line-height:40px; margin: 0;">mmersive</li>
                      <li style="line-height:40px; margin: 0;">nformative</li>
                      <li style="line-height:40px; margin: 0;">nnate</li>
                      <li style="line-height:40px; margin: 0;">ndomitable</li>
                      <li style="line-height:40px; margin: 0;">ncredible</li>
                      <li style="line-height:40px; margin: 0;">ntuitive</li>
                      <li style="line-height:40px; margin: 0;">nteractive</li>
                      <li style="line-height:40px; margin: 0;">nspirational</li>
                      <li style="line-height:40px; margin: 0;">ngeniously</li>
                      <li style="line-height:40px; margin: 0;">ncontestable</li>
                    </ul>
                  </div>
                </div>
            </div>
        </div>
    <!--End of Game of Words-->
    
    <!--Poza 3D-->
        <div class="row" style="margin-bottom:0px;">
        
            <div class='col-md-12 col-md-offset-0 col-xs-12 col-xs-offset-0' id="padd">   <!--DE REPARAT--> 

                <div class="div-body">  
                    <div class="above-fold">

                        <div class="hero-section" id="hero-section-a">
                            <img src="https://s31.postimg.org/igkee87cb/desite.jpg"  alt="Adrian Gheorghe"/>
                        </div>
                        <div class="hero-section" id="hero-section-b">
                            <img src="https://s31.postimg.org/igkee87cb/desite.jpg"  alt="Adrian Gheorghe"/>
                        </div>
                        <div class="hero-section" id="hero-section-c">
                            <img src="https://s31.postimg.org/igkee87cb/desite.jpg"  alt="Adrian Gheorghe"/>
                        </div>

                    </div>
                </div>  

            </div> 
        
        </div>
    <!--End of 3d Picture-->
    
    </div><!--End of container-->
    
</div> <!--End of Home section-->
    
<div class='sector-about' id="about">
    <div class='container-fluid'>    
        <div class='row'>
            <div class='col-md-offset-1 col-md-10 col-xs-9 col-xs-offset-1'>  
                <h2 style="font-size:40px !important">Adrian Gheorghe</h2>
                <p>Hi ! My name is Adrian Gheorghe , I'm 23 years old and I am living in Romania in a small town called Targu-Jiu.I'm an self taught PHP-JavaScript programmer , and day by day I'm trying to learn more things to perform this obsession called "passion".</p>
            </div>
        </div>
    </div>
</div>
       
<div class='sector-portofolio' id="portofolio">
    <div class='container-fluid'>    
        <div class='row'>
            <div class='col-md-offset-1 col-md-10 col-xs-9 col-xs-offset-1'>  
                <h2 style="font-size:40px !important">Adrian Gheore</h2>
                <p>Hi ! My name is Adrian Gheorghe , I'm 23 years old and I am living in Romania in a small town called Targu-Jiu.I'm an self taught PHP-JavaScrip programmer , and day by day I'm trying to learn more things to perform this obsession called "passion".</p>
                
            </div><!--End of col-m-->
        </div>
    </div>
</div>
      
<div class='sector-skills' id="skills">
    <div class='container'>    
        <h1>Adrian Portofolio</h1>
        <h3>Below you'll find some of my languages known</h3>

        <div class='row'>  <!--Second row of languages which i Know-->

            <div class='col-md-3 col-md-offset-0 col-xs-10 col-xs-offset-1' style="margin-bottom:50px;">
                <div class='a'>
                    <figure class="snip1523">
                        
                        <img src='http://www.technokrats.in/images/Javascript.png' class="imagine"/>
                        
                        <figcaption>
                            <div class='b'>
                                <h2>JavaScript</h2>
                                <h3>awdawd</h3>
                                <p>I'm learning real skills that I can apply throughout the rest of my life ... Procrastinating and rationalizing.</p>
                            </div>
                        </figcaption>
                        
                        <a href="#"></a>
                        
                    </figure>    
                </div>
            </div>
            
            <div class='col-md-3 col-md-offset-1 col-xs-10 col-xs-offset-1' style="margin-bottom:50px;">
                <div class='a'>
                    <figure class="snip1523">
                    
                        <img src='https://pixabay.com/static/uploads/photo/2015/09/05/20/02/coding-924920_960_720.jpg' class="imagine"/>
                        
                        <figcaption>
                            <div class='b'>
                                <h2>JavaScript</h2>
                                <h3>awdawd</h3>
                                <p>I'm learning real skills that I can apply throughout the rest of my life ... Procrastinating and rationalizing.</p>
                            </div>
                        </figcaption>
                        
                        <a href="#"></a>
                        
                    </figure>       
                </div>
            </div>   
            
            <div class='col-md-3 col-md-offset-1 col-xs-10 col-xs-offset-1' style="margin-bottom:50px;">
                <div class='a'>
                    
                    <figure class="snip1523">
                        <img src='http://www.rjdesign.ch/img/aboutme/icons/mysql.png' class="imagine"/>
                        <figcaption>
                            <div class='b'>
                                <h2>JavaScript</h2>
                                <h3>awdawd</h3>
                                <p>I'm learning real skills that I can apply throughout the rest of my life ... Procrastinating and rationalizing.</p>
                            </div>
                        </figcaption>
                        <a href="#"></a>
                    </figure>
                </div>
            </div>

        </div> <!--End of second row of the Languages-->
        <br><br>
        <br><br>
        <br><br>
        <div class='row'>  <!--Second row of languages which i Know-->

            <div class='col-md-3 col-md-offset-0 col-xs-10 col-xs-offset-1' style="margin-bottom:50px;">
                <div class='a'>
                    <figure class="snip1523">
                        
                        <img src='http://www.technokrats.in/images/Javascript.png' class="imagine"/>
                        
                        <figcaption>
                            <div class='b'>
                                <h2>JavaScript</h2>
                                <h3>awdawd</h3>
                                <p>I'm learning real skills that I can apply throughout the rest of my life ... Procrastinating and rationalizing.</p>
                            </div>
                        </figcaption>
                        
                        <a href="#"></a>
                        
                    </figure>    
                </div>
            </div>
            
            <div class='col-md-3 col-md-offset-1 col-xs-10 col-xs-offset-1' style="margin-bottom:50px;">
                <div class='a'>
                    <figure class="snip1523">
                    
                        <img src='https://pixabay.com/static/uploads/photo/2015/09/05/20/02/coding-924920_960_720.jpg' class="imagine"/>
                        
                        <figcaption>
                            <div class='b'>
                                <h2>JavaScript</h2>
                                <h3>awdawd</h3>
                                <p>I'm learning real skills that I can apply throughout the rest of my life ... Procrastinating and rationalizing.</p>
                            </div>
                        </figcaption>
                        
                        <a href="#"></a>
                        
                    </figure>       
                </div>
            </div>   
            
            <div class='col-md-3 col-md-offset-1 col-xs-10 col-xs-offset-1' style="margin-bottom:150px;">
                <div class='a'>
                    
                    <figure class="snip1523">
                        <img src='http://www.rjdesign.ch/img/aboutme/icons/mysql.png' class="imagine"/>
                        <figcaption>
                            <div class='b'>
                                <h2>JavaScript</h2>
                                <h3>awdawd</h3>
                                <p>I'm learning real skills that I can apply throughout the rest of my life ... Procrastinating and rationalizing.</p>
                            </div>
                        </figcaption>
                        <a href="#"></a>
                    </figure>
                </div>
            </div>

        </div> <!--End of second row of the Languages-->

    </div>
</div> <!--End sector-skills-->

<div class='sector-contact' id="contact">
    <div class='container-fluid'>    
        <!--De facut exact metodele de contact cu tot cu iconite -->
        <!--contact address email-->
        <div class='row'>

            <div class='col-md-offset-2 col-md-8 col-xs-12 col-xs-offset-0 '>    <!--DE SEPARAT adresasa-->
                <h1>Connect with Adrian Web Design Studio</h1>
            </div>
            <div class='col-md-offset-2 col-md-8 col-xs-12 col-xs-offset-0 '>    <!--DE SEPARAT adresasa-->
                <p style="font-size:21px;">E-mail: example<br>@gmail.com</p>
            </div>

        </div> <!--END ROW-->
        <!--End of contact-->
        
        <!--My work-->
        <div class="row">
            <div class='col-md-8 col-md-offset-2 col-xs-offset-0 col-xs-12' id="botoes" style="padding-top:0px">


                <a id="proj-btn" type="button" class="button" onClick="window.open('https://github.com/queky18');"><i class="fa fa-github"></i> Github</a>

                <a id="proj-btn" type="button" class="button" onClick="window.open('https://www.facebook.com');"><i class="fa fa-facebook"></i> Facebook</a>

                <a id="proj-btn" type="button" class="button" onClick="window.open('https://www.codecademy.com/queky');"><i class="fa fa-facebook"></i> CodeCademy</a>

                <a id="proj-btn" type="button" class="button" onClick="window.open('http://stackoverflow.com/users/5841700/adrian-gheorghe?tab=profile');"><i class="fa fa-stack-overflow" aria-hidden="true"></i> StackOverflow</a>

                <a id="proj-btn" type="button" class="button" onClick="window.open('https://www.freecodecamp.com/queky18');"><i class="fa fa-fire"></i> FreeCodeCamp</a>

            </div> <!--<div class='col-md-6' id="botoes">   END-->  
        </div>
        <!--End of "my work-->
        
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

        <div class="row">
            <div class="col-md-12 col-md-offset-0 col-xs-12 col-xs-offset-0" id="footer">
                <h3>Created By : Adrian Gheorghe</h3>
            </div>
        </div>
    </div> <!--END Container-->
</div><!--END <div class='sector-contact' id="contact">-->

</body>
</html>
            
          
!
            
              @import url(https://fonts.googleapis.com/css?family=Slabo+24px);
@import url(https://fonts.googleapis.com/css?family=Lato);

.snip1523{
    font-family: 'Lato', sans-serif;
    position: relative;
    overflow:hidden;
    /*Am sters max min si width*/
    
    width:100%;
    max-width:300px;
    min-width:100px;
    
    color:#f5f5f5;
    text-align:left;
    font-size:16px;
    background:rgba(57, 57, 57, 0.42);
}

.snip1523 * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.45s ease;
    transition: all 0.45s ease;
}

.snip1523 img {
    vertical-align: top;
    backface-visibility: hidden;
}

.snip1523 figcaption {
    
    width:100%;
    max-width:300px;
    min-width:100px;

    
    position:absolute;
    top:0px;
    bottom:0;
    left:0;
    right:0;
    z-index:1;
    padding:5px;
    background-color: rgba(39, 46, 60, 0.5);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
}

.snip1523 h2,
.snip1523 h3,
.snip1523 p {
    margin:0px;
}

.snip1523 h2,
.snip1523 h3 {
    font-family: 'Slabo 27px', serif;
    line-height:0.1em;
}

.snip1523 h2{
    font-size: 1.7em;
    color:#35ADF9;
}

.snip1523 h3{
    color: #EBEBEB;
    font-size: 1.1em;
    font-weight: normal;
    letter-spacing: 1px;
    margin-top:25px;
}

.snip1523 p{
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-size:0.9em;
    margin-top:12px;
    padding:12px 0 15px;
    line-height:1.5em;
}

.snip1523 a {
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:1;
}

.snip1523:hover > img,
.snip1523.hover > img {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}

.snip1523:hover figcaption,
.snip1523.hover figcaption {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
}



body {
    font-family: 'Open Sans', sans-serif;
    
    /*No selectable text*/
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently
                                  not supported by any browser */
    /*End of No selectable text*/
}
img {
  max-width:100%;
  max-height:100%;
}

/*-------------------------------------------Button */
.button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: rgba(24, 36, 25, 0.83);
  border: none;
  border-radius: 15px;
  box-shadow: 6px 9px #120b0b;
     
}
.button:hover {
    background-color: rgba(203, 203, 203, 0.3);
    color:black;
    text-decoration:none;
}
.button:active {
  background-color: rgba(177, 177, 177, 0.33);
  box-shadow: 3px 5px #2c0707;
  transform: translateY(4px);
}

#proj-btn{
    margin-right:15px;
    margin-bottom:15px;
}
/*Butoanele cu munca , de la final*/
#botoes {
  margin-top: 200px;
  }
#botoes a {
  margin-top: 10px;
  }
/*End*/
/*Sfarsit Button*/

/*-------------------------------------------Home*/
.sector-home {
  text-align: center;
  background:url('https://s32.postimg.org/bgw8krs85/SW_Dominik_Martin.jpg') center center fixed;
  background-size: cover;
  height: 100%;
  min-height:1200px;
  max-height:2500px;
  color: #060800;
  margin:-50px 0 -50px 0;
}
.sector-home h1 {
    text-align: center;
    color: #000000;
    font-size: 50px;
    margin-top:250px;
    font-weight: bold;
    text-shadow: rgba(44, 44, 44, 0.79) 5px 5px 5px;
}
.sector-home p {
  text-align: center;
  color: #ffffff;
  font-size: 20px;
  padding-top: 3px;
 }

@media only screen and (max-width: 500px) {
    #header h1{
        margin-left:-20px
    }
}
/*End home*/

/*-------------------------------------------About*/

.sector-about {   
    text-align: center;
    background: url('https://intothefrayradio.com/wp-content/uploads/scary-dark-forest-desktop.jpg') center center fixed;
    background-size: cover;
    height: 100%;
    min-height:1200px;
    max-height:2500px;
    color: #fff;
    margin:-50px 0 -50px 0;
}
.sector-about h1,
.sector-about h2{
    margin-top:250px;  
}
.sector-about p {
    margin-top:100px
}

#about p{
    text-align: left;
    padding-top:25px;
    font-size:26px;
}
#about h1{
    font-size:50px;
}

/*end about*/


/*
       START SECTOR Portofolio
*/


.sector-portofolio {   
  text-align: center;
  background: url('https://s32.postimg.org/xyu5a48p1/SW_Zak_Suhar.jpg') center center fixed;
  background-size: cover;
  height: 100%;
  min-height:1200px;
  max-height:2500px;
  color: #fff;
  margin:-50px 0 -50px 0;
}
.sector-portofolio h1,
.sector-portofolio h2{
    margin-top:250px;  
}
.sector-portofolio p {
    margin-top:100px
}

#portofolio p{
  text-align: left;
  padding-top:25px;
  font-size:26px;
}
#portofolio h1{
  font-size:50px;
}

/*
        End of SECTOR Portofolio
*/


/*-------------------------------------------SEC SKILLS*/
.sector-skills {
  text-align: center;
  background: url('https://s32.postimg.org/g7fpo7z51/code_wallpaper_3.jpg') center center fixed;
  background-size: cover;
  height: 100%;
  min-height:1200px;
  max-height:3000px;
  color: #fff;
  margin:50px 0 50px 0;
    /* De eliminat marginile */
}


.sector-skills h1{
  margin-top:150px;
  font-size: 50px;
}
.sector-skills h3{
    margin-bottom:50px;
}
.a {
  height:80%;
  position: relative;
  z-index:1;
  text-decoration:none;
  outline:none;
 }
.b {   /*Continut Imagini Hover*/
  position: relative;
  padding: 15px;
  font-size:20px;
}


.imagine{
    width:100%;
    min-width:100px;
    max-width:300px;
    height:200px;
}


/*End SEC PORT*/

/*-------------------------------------------SEC CONTACT*/
.sector-contact {
  text-align: center;
  background: url('https://s32.postimg.org/nosi34e9h/Saa_W_Caleb_Morris1.jpg') center center fixed;
  background-size: cover;
  height: 100%;
  min-height:1100px;
  max-height:2000px;
  color: #fff;
  margin:-50px 0 -50px 0;
  
}
.sector-contact h1{  
    text-shadow:#300 3px 4px;
    margin-top:250px;
}
@media only screen and (max-width: 500px) {
    .sector-contact p{
        margin-left:-13px
    }
}

.sector-contact p{
    text-shadow:#000000 2px 3px;
    margin-top:100px;
}
/*End sec-contact*/

/*-------------------------------------------Footer */
#footer{
    width:100%;
    background-color:rgba(0, 0, 0, 0.56);
}
#footer h3{
        padding-bottom:10px;
        font-style:italic;
}
/*End of footer*/


.div-body {
    background-image: radial-gradient(circle farthest-side at center bottom, none, #003087 130%);
    overflow: hidden;
}

#padd{
    padding-top:28px;
    width:100%;
    overflow:hidden;
    box-sizing:border-box;
    display:block;
    height:50%;
}
#padd img{
    width:330px;
    height:300px;
}

.above-fold {
	position: relative;   /*From relative*/
	height: 300px;
	overflow: hidden;
    width: 100%;
}
.hero-section {	
	filter: grayscale(50%);
	-webkit-filter: grayscale(0%);
	z-index: -1;
}
.hero-section img {
  position: absolute;
  opacity: 0.7;  /*Opacity To change*/
  margin: auto;
  width: 120%;
	top: -30%; 
  right: -30%; 
  bottom: -25%; 
  left: -30%;
}


/*Navbar ajunstarile mele */

nav{
    background-color:rgba(11, 11, 11, 0.31) !important;
    text-decoration:none !important;
    border:none !important; 
}
.navbar-brand, .navbar-nav li a{
    color:white !important;
}
.navbar-nav li a:hover{
    color:transparent !important;
}

.page-scroll > .active > a {
    color:red !important;
    background-color:red !important;
}


.navbar-inverse .navbar-nav > .active{
    color: #e6e6e6 !important;
   background: rgba(39, 108, 45, 0.53) !important;
 }
 .navbar-inverse .navbar-nav > .active > a, 
 .navbar-inverse .navbar-nav > .active > a:hover, 
 .navbar-inverse .navbar-nav > .active > a:focus {
      background:rgba(235, 235, 235, 0) !important;
 }



/*li > a, li > a:hover, li > a {
    
    background-image: -moz-linear-gradient(top,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0));
    background-image: -ms-linear-gradient(top,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0));
    background-image: -webkit-gradient(linear,100% 0%,0 100%,from(rgba(0, 0, 0, 0)),to(rgba(0, 0, 0, 0)));
    background-image: -webkit-linear-gradient(top,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(top,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0));
    background-image: linear-gradient(top,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0));
    
}*/

/*END of  Navbar ajunstarile mele */




.content {
  position: absolute;
  top: 80%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 35px;
  line-height: 35px;
  font-family: 'Muli';
  color: rgb(0, 0, 0);
  height: 150px;
  overflow: hidden;
}

.visible {
  font-weight: 800;
  overflow: hidden;
  height: 40px;
  padding:0 40px;;
}
@media only screen and (max-width: 500px) {
    .visible{
        padding:0 20px;
    }
}

.visible:before {
    content: '[';
  left: 0;
  line-height: 40px;
}
.visible:after {
    content: ']';
  position: absolute;
  right: 0;
  line-height: 40px;
}
.visible:after, .visible:before {
  position: absolute;
  top: 0;
  color: rgb(255, 255, 255);
  font-size: 44px;
  -webkit-animation: 2s linear 0s normal none infinite opacity;
          animation: 2s linear 0s normal none infinite opacity;
}


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

@keyframes opacity {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@-webkit-keyframes change {
  0%, 12%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  17%,29% {
    -webkit-transform: translateY(-25%);
            transform: translateY(-25%);
  }
  34%,46% {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  51%,63% {
    -webkit-transform: translateY(-75%);
            transform: translateY(-75%);
  }
  68%,80% {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  85%,97% {
    -webkit-transform: translateY(-25%);
            transform: translateY(-25%);
  }
}
@keyframes change {
  0%, 12%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  17%,29% {
    -webkit-transform: translateY(-25%);
            transform: translateY(-25%);
  }
  34%,46% {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  51%,63% {
    -webkit-transform: translateY(-75%);
            transform: translateY(-75%);
  }
  68%,80% {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  85%,97% {
    -webkit-transform: translateY(-25%);
            transform: translateY(-25%);
  }
}





            
          
!
            
              /* Demo purposes only */
$(".hover").mouseleave(
  function () {
    $(this).removeClass("hover");
  }
);
jQuery(function( $ ){
  
  	var $body=$(".div-body"),
	$heroA=$("#hero-section-a img"),
	$heroB=$("#hero-section-b img"),
	$heroC=$("#hero-section-c img");
	
	TweenMax.set( $heroA, { transformStyle: 'preserve-3d' });
	TweenMax.set( $heroB, { transformStyle: 'preserve-3d' });
	TweenMax.set( $heroC, { transformStyle: 'preserve-3d' });
	
	$body.mousemove(function(e) {
		
		var sxPos =  e.pageX / $body.width()  * 100 - 50;
		var syPos =  e.pageY / $body.height() * 100 - 50;
		console.log("x:" + sxPos + ", y:" + syPos);
        
		TweenMax.to( $heroA, 1, { rotationY: 0.05 * sxPos, rotationX: -0.02 * syPos, rotationZ: -0.5, transformPerspective:300, transformOrigin:'center center' });
		TweenMax.to( $heroB, 1, { rotationY: 0.15 * sxPos, rotationX: 0.00 * syPos, rotationZ: -0.5, transformPerspective:300, transformOrigin:'center center' });
		TweenMax.to( $heroC, 1, { rotationY: 0.30 * sxPos, rotationX: 0.02 * syPos, rotationZ: -0.5, transformPerspective:300, transformOrigin:'center center' });

	});


});



// Using jQuery to collapse the navbar on scroll
$(window).scroll(function() {
   if($(".navbar").offset().top > 50) {
       $(".navbar-fixed-top").addClass("top-nav-collapse");
   } else {
       $(".navbar-fixed-top").removeClass("top-nav-collapse");
   }
});

// Using jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});

            
          
!
999px
Loading ..................

Console