<link href="//cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="navbar-fixed"> <nav> <div class="nav-wrapper blue" style="padding-left: 28px;"> <a href="index.php" class="brand-logo center">CORPORATE PVT. LTD.</a> <ul id="nav-mobile" class="left hide-on-med-and-down"> <li><a class="waves-effect waves-light" href="#">About</a></li> <li><a class="waves-effect waves-light" href="#">Features</a></li> <li><a class="waves-effect waves-light" href="">Contact</a></li> </ul> <ul id="nav-mobile" class="right hide-on-med-and-down"> <li><a href="#">You Can Add more Links here</a></li> <a class="btn-floating btn-large waves-effect waves-light indigo "><i class="large material-icons">account_circle</i></a> </ul> </div> </nav> </div> <div class="parallax-container text-center hide-on-small-only valign-wrapper"> <div class="parallax"> <img class="responsive-img" src="https://images.pexels.com/photos/220444/pexels-photo-220444.jpeg" /> </div> <div class="row"> <div class="col l12 m12 s12 x12"> <h2 class="white-text" style="text-shadow: 2px 2px 4px rgba(0,0,0,0.7);"> Driven by a mission to heal humanity. </h2> </div> </div> </div> <!-- Parallax Close --> <div class="container"> <div class="row"> <div class="col l4"> <div class="card hoverable"> <div class="card-image waves-effect waves-block waves-light"> <img class="activator" height="222" src="https://images.pexels.com/photos/97815/pexels-photo-97815.jpeg"> </div> <div class="card-content"> <span class="card-title activator blue-text text-darken-2">Blueprint <i class="material-icons blue-text right medium">add_circle</i></span> </div> <div class="card-reveal blue"> <span class="card-title white-text">Blueprint <i class="material-icons right white-text">close</i></span> <p class="white-text">Manage your health effectively with our web application </p> </div> </div> </div> <div class="col l4"> <div class="card hoverable"> <div class="card-image waves-effect waves-block waves-light"> <img class="activator" height="222" src="https://images.pexels.com/photos/840326/pexels-photo-840326.jpeg"> </div> <div class="card-content"> <span class="card-title activator red-text text-darken-2">Profiles <i class="material-icons red-text right medium">add_circle</i></span> </div> <div class="card-reveal red"> <span class="card-title white-text">Profiles <i class="material-icons right white-text">close</i></span> <p class="white-text">Create and manage your Profile effectively and achieve a peace of mind.</p> </div> </div> </div> <div class="col l4"> <div class="card hoverable"> <div class="card-image waves-effect waves-block waves-dark"> <img class="activator" height="222" src="https://images.pexels.com/photos/847393/pexels-photo-847393.jpeg"> </div> <div class="card-content"> <span class="card-title activator green-text text-darken-2">But Why? <i class="material-icons green-text right medium">add_circle</i></span> </div> <div class="card-reveal green"> <span class="card-title white-text text-lighten-4">Why? <i class="material-icons right white-text">close</i></span> <p class="white-text">Because its a free world of his almighty we live in bro. If you want much more creative and animated snippets. Contact me at itsme@zahidshaikh.com :D</p> </div> </div> </div> </div><!-- Row --> </div> <div class="row" style="margin:0; padding:0;"> <div class="col l4 center-align green lighten-1 white-text" style="padding-top: 20px;"> <i class="material-icons medium">wc</i> <h5>Oneness Society</h5> </div> <div class="col l4 center-align indigo lighten-1 white-text" style="padding-top: 20px;"> <i class="material-icons medium">autorenew</i> <h5 class="white-text">Rebirth</h5> </div> <div class="col l4 center-align red accent-2 lighten-2 white-text" style="padding-top: 20px;"> <i class="material-icons medium">local_pharmacy</i> <h5>Reki Healer</h5> </div> </div> <footer class="page-footer indigo darken-2"> <div class="row"> <div class="col l6 s12"> <h5 class="white-text">We are Corporate Pvt. Ltd.</h5> <h5 class="grey-text text-lighten-4">Add a Description here</h5> </div> <div class="col l4 offset-l2 s12"> <h5 class="white-text">Links</h5> <ul> <li><a class="grey-text text-lighten-3" href="#!">About</a></li> <li><a class="grey-text text-lighten-3" href="#!">Features</a></li> <li><a class="grey-text text-lighten-3" href="#!">Manage</a></li> <li><a class="grey-text text-lighten-3" href="#!">Contact</a></li> </ul> </div> </div> <div class="footer-copyright"> © 2018 Copyright Corporate IT Solutions Pvt. Ltd. </div> </footer>

@import 'https://fonts.googleapis.com/icon?family=Material+Icons'; .large{ font-size: 6rem; } .parallax-container { height: 750px; }

$(document).ready(function(){ $('.parallax').parallax(); });