Portfolio

In this example below you will see how to do a Portfolio with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by yasserhussain1110, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright yasserhussain1110 ©
  • HTML
  • CSS
  • JavaScript
    <body data-spy="scroll" data-target="#my-navbar">
    <!-- Navbar -->
    <nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">Yasser App</a>
            </div><!-- Navbar Header -->
            <div class="collapse navbar-collapse" id="navbar-collapse">
                <a href="" class="btn btn-warning navbar-btn navbar-right">Download Now</a>
                <ul class="nav navbar-nav">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#portfolio">Portfolio</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div>
        </div><!-- End Container -->
    </nav><!-- End navbar -->
    <!-- jumbotron -->
    



<!-- Intro -->
    <a id="home"></a>
        <div class="container text-center" id="intro-header">
            <div class="row">
                <div class="col-lg-12">
                    <div>
                        <h1>Yasser Hussain</h1>
                        <h3> Programmer.</h3>
                    </div>
                    <hr class="intro-divider">
                    <ul class="list-inline intro-social-buttons">
                            <li>
                                <a href="https://twitter.com/yasserhussain11" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
                            </li>
                            <li>
                                <a href="https://github.com/yasserhussain1110" target="_blank" class="btn btn-default btn-lg "><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a>
                            </li>
                            <li>
                                <a href="https://in.linkedin.com/in/yasser-hussain-41001b45" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a>
                            </li>
                        </ul>
                </div>
            </div>
        </div><!-- end container -->





<!-- Page Content -->

    <a  id="about"></a>
    <div class="container" id="about-me">
        <div class="row">
            <div class="col-lg-5 col-sm-6">
                <div class="clearfix"></div>
                <h2 class="section-heading">Yasser Hussain.</h2><br>
                <p class="lead">
                     
                    I am a backend developer proficient in Python, Java, Lisp etc.
                    Trying to learn UI development. 

                </p>
            </div>
            <div class="col-lg-5 col-lg-offset-2 col-sm-6 collapse navbar-collapse">
                <img class="img-circle img-responsive" id = "my-picture" src="https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/7/005/011/20a/3fb31a3.jpg" alt="">
            </div>
        </div>
    </div>

<!-- Portfolio Grid Section -->
    <a  id="portfolio"></a>
    <section id="work-done" class="bg-light-gray bounds">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2 class="section-heading">Awesomeness Portfolio.</h2>
                    <h3 id="below-section" class="section-subheading text-muted">Below you'll find some of my recent work.</h3>
                </div>
            </div>
          <!-- Portfolio img1 -->
            <div class="row">
                <div class="col-md-4 col-sm-6 portfolio-item">
                    <a href="https://codepen.io/yasserhussain1110/full/jqbBGL/" target="_blank" class="portfolio-link" data-toggle="modal">
                        <div class="portfolio-hover">
                            <div class="portfolio-hover-content">
                                <i class="fa fa-fire fa-3x"></i>
                            </div>
                        </div>
                        <img src="http://pushkinpress.com/wp-content/uploads/getimage94-653x1024.aspx" class="img-responsive" alt="">
                    </a>
                    <div class="portfolio-caption">
                        <h4>Twitch.tv API project</h4>
                        <p id="small-text" class="text-muted">Bootstrap and Angularjs</p>
                    </div>
                </div>
              <!-- End of Portfolio img1 -->
              

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




<!-- Contact me -->
<a  name="contact"></a>
    <div class="banner">
      <div id = "contact-me" class="bg-overlay4">
        <div class="container">         
            <div class="row">
                <div class="col-lg-6">
                  <h2 class="connect">Connect with Yasser Hussain: yasserhussain1110@gmail.com</h2>
                </div>
              <br>
      
                <div class="col-lg-6">
                    <ul class="list-inline banner-social-buttons">
                        <li>
                                <a href="https://twitter.com/yasserhussain11" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
                            </li>
                            <li>
                                <a href="https://github.com/yasserhussain1110" target="_blank" class="btn btn-default btn-lg "><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a>
                            </li>
                            <li>
                                <a href="https://in.linkedin.com/in/yasser-hussain-41001b45" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a>
                            </li>
                     
                    </ul>
                </div>
        </div>
        <!-- /.container -->
    </div>
</div>
</div>


 <!-- Footer -->
    <footer>
    
        <div class="well container">
            <div class="row">
                <div class="col-lg-12">
                    <ul class="list-inline">
                        <li>
                            <a href="#">Home</a>
                        </li>
                        <li class="footer-menu-divider">&sdot;</li>
                        <li>
                            <a href="#about">About</a>
                        </li>
                        <li class="footer-menu-divider">&sdot;</li>
                        <li>
                            <a href="#portfolio">Portfolio</a>
                        </li>
                        <li class="footer-menu-divider">&sdot;</li>
                        <li>
                            <a href="#contact">Contact</a>
                        </li>
                    </ul>
                    <p class="copyright text-muted small">Copyright &copy; Yasser Hussain 2015. All Rights Reserved</p>
                </div>
            </div>
        </div>
    </footer>
</body>

/*Downloaded from https://www.codeseek.co/yasserhussain1110/portfolio-QNpwGr */
    

/*https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/7/005/011/20a/3fb31a3.jpg*/

body {
        padding-top: 40px;
}

body, h1, h2, h3, h4, h5, h6 {
    font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 700;
}

#intro-header {
    background: url('https://40.media.tumblr.com/1b916597d3e174399cb7adadddb66ede/tumblr_nt5uk4psl31ud7rr3o1_1280.jpg') no-repeat center center fixed;
    background-size: cover;
    height: 855px;
    padding-top: 50px;
    padding-bottom: 50px;
}

#about-me {
    background: url('https://41.media.tumblr.com/eb2382a5a4c996cfdab27bc0d1eb51ff/tumblr_nt5umxS1FY1ud7rr3o1_1280.jpg') no-repeat center center fixed;
    background-size: cover;
    height: 855px;
    padding-top: 50px;
    padding-bottom: 50px;
    margin-top: 100px;
    font-size: 3em;
    color: rgba(0, 0, 0, 0.9);
}

#work-done {
    color: black;
    background: url('https://41.media.tumblr.com/92e61775d4c3edcc5145936e3703d125/tumblr_nt5uo9fH9y1ud7rr3o1_1280.jpg') no-repeat center center fixed;
    background-size: cover;
}

#contact-me {
    padding: 100px 0;
    background: url('https://41.media.tumblr.com/ac46aa24b44b5036e9200abb71f810d9/tumblr_nt5vzxV6Us1ud7rr3o1_1280.jpg') no-repeat center center fixed;
    background-size: cover;

}

#my-picture {
    height: 240;
    width: 240px;
}


/*Downloaded from https://www.codeseek.co/yasserhussain1110/portfolio-QNpwGr */
    

Comments