<link href="https://fonts.googleapis.com/css?family=Noto+Sans|Roboto" rel="stylesheet">


<body>

    <!-- Fixed navbar -->
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
                <div class="small-logo-container">
                    <a class="small-logo" href="#profilo">Alberto's Protfolio</a>
                </div>
            </div>
            <div class="navbar-collapse collapse">

                <ul class="nav navbar-nav navbar-right">
                    <li><a style="font-weight:bold;font-style: normal;font-size:20px" href="#">↥</a></li>
                    <li><a href="#about">About Me</a></li>
                    <li><a href="#projects">Projects</a></li>
                    <li><a href="#technologies">Technologies</a></li>
                    <li><a href="#contact">Contact Me</a></li>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </div>

    <div class="container-fluid big-logo-row">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 big-logo-container">
                    <h1 class="big-logo">Alberto's<br> Protfolio</h1>
                </div>
                <!--/.col-xs-12 -->
            </div>
            <!--/.row -->
        </div>
        <!--/.container -->
    </div>
    <!--/.container-fluid -->




    <!--effetto parallax-->
    <div class="bordo">
        <div class="parallax-window par1" data-parallax="scroll" data-bleed="20" data-iosFix="true" data-androidFix="true">
            <div class="container-fluid centrato" id="profilo"><img src="https://imgur.com/ncx77PV.png" alt="boohh" class=" profilo"></img>
            </div>
        </div>
    </div>
    <!--secondo sfondo parallax-->
    <div class="bordo">
        <div class="parallax-window par2" data-parallax="scroll" data-bleed="20" data-iosFix="true" data-androidFix="true">
            <div class="row">
                <!--descrizione-->
                <div class="col-md-10 col-md-push-2">
                    <div class="panel1" id="about">
                        <div>
                            <h1 class="text-accent">About Me</h1>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ex urna, vehicula a metus at, luctus auctor risus. Nam purus mi, commodo ut rutrum id, lacinia in tellus. Nunc laoreet a felis fermentum suscipit. Nunc malesuada,
                                nisi malesuada ullamcorper mattis, velit ligula congue enim, ut venenatis augue lorem a mauris. Maecenas id placerat purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque
                                vitae bibendum lorem, in convallis velit. Praesent ornare venenatis magna id porttitor. Sed vitae nunc malesuada, congue ipsum non, tristique justo. Sed ornare sodales sem ut semper. Cras quis varius ex.</p>
                            <p>Nulla porta tellus ut metus dignissim feugiat. Nunc iaculis urna at vestibulum posuere. Fusce magna est, fringilla ut fringilla eu, placerat sit amet sem. Nullam consequat nisi at augue aliquet ullamcorper. Sed luctus neque
                                sit amet massa volutpat, non rhoncus sem pretium. Ut ac sollicitudin orci. Suspendisse quis erat faucibus, consequat tortor malesuada, volutpat magna. Proin dignissim justo id dapibus suscipit. Integer et mattis tortor.</p>
                            <p>Maecenas luctus accumsan justo a rutrum. Aliquam tristique ante tortor, ac egestas ipsum tempus sed. In mollis enim at orci venenatis pharetra. Sed et tortor malesuada, ullamcorper dolor ut, posuere tortor. Etiam at neque ac
                                ex tempus finibus at a nibh. Proin fermentum nulla tempor nisi pretium elementum. Aenean dolor mauris, interdum sit amet posuere non, feugiat quis arcu. Nulla id eros bibendum, rutrum leo at, lacinia augue. Ut convallis
                                mi vitae lorem aliquam, quis consequat quam consectetur.</p>
                            <p>Aliquam eget semper lorem, ut sollicitudin ante. Aenean est purus, ultrices nec aliquet nec, condimentum eget turpis. Phasellus dictum dolor enim, sed congue orci feugiat blandit. Maecenas tempus tortor mi, ut mollis leo semper
                                vel. Quisque malesuada malesuada dapibus. Nulla sollicitudin arcu arcu, at luctus ex egestas nec. Nam eu aliquet purus. In aliquet orci vitae facilisis pharetra.</p>
                            <p>Nunc ipsum ipsum, fringilla a odio a, gravida ornare velit. Vivamus eu eros est. Nulla porttitor nibh vel ipsum gravida, vel hendrerit velit faucibus. Fusce eu magna consequat, viverra libero ac, interdum augue. Ut elit tortor,
                                cursus ut ipsum eget, finibus pharetra justo. Fusce in libero ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum quis est eros. Curabitur a turpis a libero ultricies
                                imperdiet. Cras in eleifend ex, sed pulvinar turpis. Nulla tincidunt a lorem ac viverra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi vel risus ut nunc lacinia iaculis vitae
                                sed nisl.</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ex urna, vehicula a metus at, luctus auctor risus. Nam purus mi, commodo ut rutrum id, lacinia in tellus. Nunc laoreet a felis fermentum suscipit. Nunc malesuada,
                                nisi malesuada ullamcorper mattis, velit ligula congue enim, ut venenatis augue lorem a mauris. Maecenas id placerat purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque
                                vitae bibendum lorem, in convallis velit. Praesent ornare venenatis magna id porttitor. Sed vitae nunc malesuada, congue ipsum non, tristique justo. Sed ornare sodales sem ut semper. Cras quis varius ex.</p>
                        </div>
                    </div>
                </div>
                <!--link social-->
                <div class="col-md-2 col-md-pull-10">
                    <div class="row">
                        <div class="circle col-md-12 col-xs-4 fb">
                            <a href="#" target="_blank" class="fa fa-facebook fa-3x"></a>
                        </div>
                        <div class="circle col-md-12 col-xs-4 github">
                            <a href="#" target="_blank" class="fa fa-github fa-3x"></a>
                        </div>
                        <div class="circle col-md-12 col-xs-4 linkedin">
                            <a href="#" target="_blank" class="fa fa-linkedin fa-3x"></a>
                        </div>
                        <div class="circle col-md-12 col-xs-4 twitter">
                            <a href="#" target="_blank" class="fa fa-twitter fa-3x"></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--progetti-->

    <div class="bordo">
        <div class="parallax-window par3" data-parallax="scroll" data-bleed="20" data-iosFix="true" data-androidFix="true">
            <div class="container centrato">
                <div class="panel2" id="projects">
                    <h1 class="text-accent">My Projects</h1><br>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="centrato col-xs-12 col-sm-6 col-md-4">
                        <div class="panel1">
                            <div class="crop">
                                <img src="https://imgur.com/ncx77PV.png" alt="progetto1"></img>
                            </div>
                            <p class="text-center">testo qui</p>
                        </div>
                    </div>
                    <div class="centrato col-xs-12 col-sm-6 col-md-4">
                        <div class="panel1">
                            <div class="crop">
                                <img src="https://imgur.com/ncx77PV.png" alt="progetto1"></img>
                            </div>
                            <p class="text-center">testo qui</p>
                        </div>
                    </div>
                    <div class="centrato col-xs-12 col-sm-6 col-md-4">
                        <div class="panel1">
                            <div class="crop">
                                <img src="https://imgur.com/ncx77PV.png" alt="progetto1"></img>
                            </div>
                            <p class="text-center">testo qui</p>
                        </div>
                    </div>
                    <div class="centrato col-xs-12 col-sm-6 col-md-4">
                        <div class="panel1">
                            <div class="crop">
                                <img src="https://imgur.com/ncx77PV.png" alt="progetto1"></img>
                            </div>
                            <p class="text-center">testo qui</p>
                        </div>
                    </div>
                    <div class="centrato col-xs-12 col-sm-6 col-md-4">
                        <div class="panel1">
                            <div class="crop">
                                <img src="https://imgur.com/ncx77PV.png" alt="progetto1"></img>
                            </div>
                            <p class="text-center">testo qui</p>
                        </div>
                    </div>
                    <div class="centrato col-xs-12 col-sm-6 col-md-4">
                        <div class="panel1">
                            <div class="crop">
                                <img src="https://imgur.com/ncx77PV.png" alt="progetto1"></img>
                            </div>
                            <p class="text-center">testo qui</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--tecnologie-->
    <div class="bordo">
        <div class="parallax-window par4" data-parallax="scroll" data-bleed="20" data-iosFix="true" data-androidFix="true">
            <div class="container centrato">
                <div class="panel2" id="technologies">
                    <h1 class="text-accent">Technologies</h1><br>
                    <h3>that i am using or learning right now</h3>
                </div>
            </div>
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-4 col-md-2">
                        <div class="panel1">gnaaaaa</div>
                    </div>
                    <div class="col-sm-4 col-md-2">
                        <div class="panel1">gnaaaaa</div>
                    </div>
                    <div class="col-sm-4 col-md-2">
                        <div class="panel1">gnaaaaa</div>
                    </div>
                    <div class="col-sm-4 col-md-2">
                        <div class="panel1">gnaaaaa</div>
                    </div>
                    <div class="col-sm-4 col-md-2">
                        <div class="panel1">gnaaaaa</div>
                    </div>
                    <div class="col-sm-4 col-md-2">
                        <div class="panel1">gnaaaaa</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--mail-->
    <div class="bordo">
        <div class="parallax-window par5" data-parallax="scroll" data-bleed="20" data-iosFix="true" data-androidFix="true">
            <div class="container">
                <form class="panel2 centrato form-horizontal" id="contact">

                    <!-- Form Name -->
                    <legend>
                        <h1 class="text-accent"> Contact Me!</h1>
                    </legend>

                    <!-- Text input-->

                    <div class="form-group">
                        <label class="col-md-4 control-label">Nome</label>
                        <div class="col-md-4 inputGroupContainer">
                            <div class="input-group">
                                <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                                <input name="first_name" placeholder="First Name" class="form-control" type="text">
                            </div>
                        </div>
                    </div>

                    <!-- Text input-->

                    <div class="form-group">
                        <label class="col-md-4 control-label">Cognome</label>
                        <div class="col-md-4 inputGroupContainer">
                            <div class="input-group">
                                <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                                <input name="last_name" placeholder="Last Name" class="form-control" type="text">
                            </div>
                        </div>
                    </div>

                    <!-- Text input-->
                    <div class="form-group">
                        <label class="col-md-4 control-label">E-Mail</label>
                        <div class="col-md-4 inputGroupContainer">
                            <div class="input-group">
                                <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
                                <input name="email" placeholder="Indirizzo E-Mail" class="form-control" type="text">
                            </div>
                        </div>
                    </div>


                    <!-- Text input-->

                    <div class="form-group">
                        <label class="col-md-4 control-label">Numero di telefono</label>
                        <div class="col-md-4 inputGroupContainer">
                            <div class="input-group">
                                <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
                                <input name="phone" placeholder="(0386)-486-928" class="form-control" type="text">
                            </div>
                        </div>
                    </div>
                    <!-- Text area -->
                    <div class="form-group">
                        <label class="col-md-4 control-label">teso mail</label>
                        <div class="col-md-4 inputGroupContainer">
                            <div class="input-group">
                                <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
                                <textarea class="form-control" name="comment" placeholder="Testo Mail"></textarea>
                            </div>
                        </div>
                    </div>
                    <!-- Button -->
                    <div class="form-group">
                        <label class="col-md-4 control-label"></label>
                        <div class="col-md-4">
                            <button class="btn btn-warning">Invia! <span class="glyphicon glyphicon-send"></span></button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!--footer-->

        <footer class="footer page-footer">
            <div class="container-fluid centrato">
                <p>Credits: Coded by Raialbe (freecodecamp.com homework)</p>
            </div>
        </footer>
</body>
.text-primary {
  color: #fff;
  text-align: center;
  font-family: "Roboto", "Noto Sans", monospace;
  margin-top: 5%;
  font-size: 40px
}

.text-accent {
  color: #FF5252;
  text-align: center;
  font-family: "Roboto", "Noto Sans", monospace;
  margin-top: 5px;
  margin-bottom: 10px;
  font-size: 40px
}

html,
body {
  margin: 0px;
  padding: 0px;
  border: 0px;
  height: 100%
}

a:hover {
  text-decoration: none
}

body {
  background-color: #0D47A1
}

.centrato {
  text-align: center;
  margin: 0 auto
}

.profilo {
  border: 2px solid black;
  border-radius: 50%;
  width: 300px;
  height: 300px;
  margin: 40px 30px 30px 30px;
  overflow-y: hidden
}

.crop {
  width: 200px;
  height: 150px;
  overflow: hidden;
  border-bottom: 2px solid #BDBDBD
}

.crop img {
  width: 200px;
  height: auto;
  margin: -5px 0 0 0px
}

.circle {
  border-radius: 5px;
  border-radius: 50%;
  border-color: #BDBDBD;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-transition: border-radius 1s;
  transition: border-radius 1s;
  margin: 20px 20px 20px 20px
}

.navbar {
  top: 0px;
  margin-top: 0;
  position: fixed;
  z-index: 1;
  border-radius: 0;
  width: 100%;
  margin-bottom: 0;
  background-color: #fff
}

div>.circle {
  background-color: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.23);
  left: 0;
  margin-left: 20%;
  transition: all 1s cubic-bezier(0.25, 0.8, 0.25, 1);
  -webkit-transition: all 1s cubic-bezier(0.25, 0.8, 0.25, 1);
  -moz-transition: all 1s cubic-bezier(0.25, 0.8, 0.25, 1)
}

.par1,
.par2,
.par3,
.par4,
.par5 {
  min-height: 60%
}

div>.circle:hover,
div>.circle:focus {
  left: 15%
}

.glyphicon {
  color: #FF5252
}

.btn-warning {
  background-color: #2196F3
}

.btn-warning:hover,
.btn-warning:active,
.btn-warning:focus {
  background-color: #1976D2;
  border-color: #FF5252
}

.fb>a {
  color: #3b5998
}

.github>a {
  color: #333
}

.linkedin>a {
  color: #0077b5
}

.twitter>a {
  color: #1da1f2
}

.panel1 {
  background: #fff;
  display: inline-block;
  margin: 40px 12% 40px 40px;
  padding: 30px;
  position: relative;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.23);
  font-family: "Roboto", "Noto Sans", monospace;
  font-size: 16px
}

.panel2 {
  background: #fff;
  display: inline-block;
  margin: 40px 60px 40px 60px;
  padding: 20px;
  position: relative;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.23);
  font-family: "Roboto", "Noto Sans", monospace;
  font-size: 16px
}

.bordo {
  border-bottom: 15px solid rgba(227, 242, 253, 0);
  -webkit-box-shadow: 0px 5px 0px 0px rgba(227, 242, 253, 0.5);
  -moz-box-shadow: 0px 5px 0px 0px rgba(227, 242, 253, 0.5);
  box-shadow: 0px 5px 0px 0px rgba(227, 242, 253, 0.5)
}

.footer {
  position: fixed;
  bottom: 0;
  margin-bottom: 0px;
  background: #BBDEFB;
  width: 100%;
  z-index: 1
}

.footer p {
  left: 100%
}

.navbar-inverse {
  background: rgba(62, 195, 246, 0);
  border-bottom: none
}

.navbar-inverse .navbar-toggle {
  border: 1px solid #333;
  border-color: rgba(255, 255, 255, 0.7)
}

.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
  border-color: transparent
}

@media (max-width: 767px) {
  .navbar-inverse .navbar-collapse,
  .navbar-inverse .navbar-form {
    background: rgba(255, 255, 255, 0.75)
  }
}

.navbar-inverse .navbar-nav>li>a {
  color: #000
}

.small-logo-container {
  padding-top: 50px;
  height: 50px;
  overflow: hidden;
  position: absolute
}

.small-logo {
  color: #fff;
  font-size: 2.5em;
  padding-bottom: 2px
}

.big-logo-row {
  background: #2196F3
}

.big-logo-row .big-logo-container {
  padding-top: 50px
}

.big-logo-row h1 {
  font-size: 4em;
  margin: 0;
  padding: 0 0 15px 0
}

@media (min-width: 400px) {
  .big-logo-row h1 {
    font-size: 3.5em
  }
}

@media (min-width: 440px) {
  .big-logo-row h1 {
    font-size: 4.5em
  }
}

@media (min-width: 500px) {
  .big-logo-row h1 {
    font-size: 5.5em
  }
}

@media (min-width: 630px) {
  .big-logo-row h1 {
    font-size: 6.5em
  }
}

@media (min-width: 768px) {
  .big-logo-row h1 {
    font-size: 7.5em;
    padding-bottom: 30px
  }
}

@media (min-width: 1200px) {
  .big-logo-row h1 {
    font-size: 9em
  }
}
$(document).ready(function() {
    // ogni icona di fontawesome pulsa e gira se si passa sopra    
    // $('.fa').hover(
    //     function() { $(this).addClass('animated pulse spin') },
    //     function() { $(this).delay(10000).removeClass('animated pulse spin') }
    // )
    
        // $('.circle').hover(
        //     function() { $(this).addClass('animated rollOut') },
        //     function() { $(this).removeClass('animated rollOut') }
        // )

    $('.par1').parallax({ imageSrc: 'https://imgur.com/WcsmF5J.jpg' });
    $('.par2').parallax({ imageSrc: 'https://imgur.com/1rmNhLk.jpg' });
    $('.par3').parallax({ imageSrc: 'https://i.imgur.com/nzw3Sa1.jpg' });
    $('.par4').parallax({ imageSrc: 'https://imgur.com/ByCOS78.jpg' });
    $('.par5').parallax({ imageSrc: 'https://imgur.com/1zWvMD0.jpg' });


    var navbarHeight = $('.navbar').height();

    $(window).scroll(function() {
        var navbarColor = "25,118,210"; //color attr for rgba
        var smallLogoHeight = $('.small-logo').height();
        var bigLogoHeight = $('.big-logo').height();


        var smallLogoEndPos = 0;
        var smallSpeed = (smallLogoHeight / bigLogoHeight);

        var ySmall = ($(window).scrollTop() * smallSpeed);

        var smallPadding = navbarHeight - ySmall;
        if (smallPadding > navbarHeight) { smallPadding = navbarHeight; }
        if (smallPadding < smallLogoEndPos) { smallPadding = smallLogoEndPos; }
        if (smallPadding < 0) { smallPadding = 0; }

        $('.small-logo-container ').css({ "padding-top": smallPadding });

        var navOpacity = ySmall / smallLogoHeight;
        if (navOpacity > 1) { navOpacity = 1; }
        if (navOpacity < 0) { navOpacity = 0; }
        var navBackColor = 'rgba(' + navbarColor + ',' + navOpacity + ')';
        $('.navbar').css({ "background-color": navBackColor });

        var shadowOpacity = navOpacity * 0.4;
        if (ySmall > 1) {
            $('.navbar').css({ "box-shadow": "0 2px 3px rgba(0,0,0," + shadowOpacity + ")" });
        } else {
            $('.navbar').css({ "box-shadow": "none" });
        }



    });

});

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
  2. https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

External JavaScript

  1. https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js
  2. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.min.js