Muhammad Mamun Hossain- a mean stack Developer

In this example below you will see how to do a Muhammad Mamun Hossain- a mean stack Developer with some HTML / CSS and Javascript

The portfolio of Muhammad Mamun Hossain, a mean stack Web Developer based in Dhaka, Bangladesh.

Thumbnail
This awesome code was written by mamun2015, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mamun2015 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Muhammad Mamun Hossain- a mean stack Developer</title>
  
  
  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  	<head>
		  <title>Muhammad Mamun Hossain- a mean stack Developer</title>
  <meta name="description" content="The portfolio of Muhammad Mamun Hossain, a mean stack Web Developer based in Dhaka, Bangladesh.">
  <meta name="keywords" content="Muhammad mamun hossain, mamun, hossain, web design, web developer, websites, freelance, developer, javascript, mean, mean stack, MongoDB, Express, AngularJS, NodeJS" />
		<meta charset="utf-8">
    <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed|Lobster+Two' rel='stylesheet' type='text/css'>
	</head>
<body data-spy="scroll" data-target="#mhNav">
  <!-- start mhJumbo -->
    
	<header class="container text-center mhJumbo" id="home">
   		<div class="mhUp">
			<div class="icon-mh">
				<img src="https://i.imgur.com/SO5bJJY.png" alt="mamun" class="img-circle">
				</div>
					<h4>Hi, My name is Mamun and I am </h4>
						<h1 class="mhBig">Full Stack Web Developer</h1>
							<p>creating modern and responsive Web Application</p>
							   <ul class="social-links">
								  <li><a href="https://github.com/mamun2015" rel="tooltip" title="github" target="_blank" <i class="icon-git"></i></a>
								  <li><a href="https://www.freecodecamp.com/mamun2015" rel="tooltip" title="freeCodeCamp" target="_blank" <i class="icon-fcc"></i></a>
								  <li><a href="https://twitter.com/mamun_coder" rel="tooltip" title="twitter" target="_blank"<i class="icon-twt"></i></a>
								  <li><a href="https://www.linkedin.com/in/mamun2014" <i class="icon-link" rel="tooltip" title="linkedin"></i></a>
								  <li><a href="https://www.facebook.com/bin.arzen" target="_blank" <i class="icon-fb" rel="tooltip" title="facebook"></i></a>
								</ul>
							</div> <!-- end mhUp </!-->		
						</header><!--End mhJumbo-->

<!-- start navbar -->
<div id="mhStatic" class="affix" data-spy="affix" data-offset-top="700">
	<nav class="navbar navbar-inverse navbar-static" id="mhNav" role="navigation">
       <div class="container">
       <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mhCollapse" >      
          <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">mamun's</a>
   </div> <!-- end navbar-header -->
      <div class="collapse navbar-collapse" id="mhCollapse">
        <ul class="nav navbar-nav">
          <li><a href="#home">Home</a>
            <li><a href="#about">About</a>
              <li><a href="#works">Works</a>
            <li><a href="#contact">Contact</a>
         </ul>
<div class="socialIcons btn navbar-btn navbar-right">
			<ul class="social-links">
								  <li><a href="https://github.com/mamun2015" target="_blank" <i class="icon-git"></i></a>
								  <li><a href="https://www.freecodecamp.com/mamun2015" target="_blank" <i class="icon-fcc"></i></a>
								  <li><a href="https://twitter.com/mamun_coder" target="_blank"<i class="icon-twt"></i></a>
								  <li><a href="https://www.linkedin.com/in/mamun2014" <i class="icon-link"></i></a>
								  <li><a href="https://www.facebook.com/bin.arzen" target="_blank" <i class="icon-fb"></i></a>
								</ul>
		 </div>
       </div>
     </div><!--end container -->
	</nav> <!-- end navbar -->
	</div>
   
	<!--start about section -->
		<section id="about">
		  <div class="container text-center mhBlock">
	     <div class="col-sm-6 col-sm-offset-3">
				        <div>
          					<img src="https://i.imgur.com/azD0bQv.png">
				        </div>
					      <h1 class="mhBig">What I can do.</h2>
				    <div class="mhSubtitle">I'm a mean stack Web Developer based in Dhaka, Bangladesh.I have a passion for web design and love to create for web and mobile devices. I'm currently part of a small web development team in a upcoming start-up.
				    </div>
			</div>
			</div>
     <div class="mhBlockLine"></div>
<div class="container">
   <div class="row mhRow1">
			    <div class="col-sm-2 col-sm-offset-3">
     					<img src="https://i.imgur.com/Uq7SaHH.png" class="img-responsive mhSm" alt="image">
  				      </div>
			          <div class="col-sm-4">
				        <h2>Design what you want.</h2>
  					    <p>I like to keep it simple. My goals are to focus on typography, content and conveying the message that you want to send.</p>
   		</div>		
</div><!-- End abouts 1st row -->

		<div class="row"><!--start abouts 1st row-->
			    <div class="col-sm-4 col-sm-offset-3">
				      <h2>Develop what you need.</h2>
        					<p>I'm a developer, so I know how to create your website to run across devices using the latest technologies available.</p>
  				        </div>
            					<div class="col-sm-4">
          					<img src="https://i.imgur.com/GO4Lega.png" class="img-responsive mhSm" alt="image">
 				      </div>
    </div><!-- End abouts 2nd row -->
  </div>
		</section><!--End About Section -->

<!--start works section-->
		<section class="mhBlock">
		  <div class="container text-center" id="works">
	   <div class="col-sm-6 col-sm-offset-3">
    				<div>	<img src="https://i.imgur.com/fhHOePo.png"></div>
					         <h1 class="mhBig">Works...</h1>
				            <div class="mhSubtitle">I'm working with Javascript, HTML5, CSS3, jQuery, Bootstrap3,  MongoDB, Express, AngularJS, NodeJS, Meteor.js and also open-source content management system (CMS) Joomla. As well as Im using also Git and Agile Methodologies.
                <h2 class="mh-top">Here is my some recient works...</h2>
              <div class="mhBlockLine"></div>
          				</div>
    </div>
			</div>
		</section><!--end works intro & start portfolio... -->

<div class="container">
   <div class="row">
<div class="col-md-3 col-sm-3 col-xs-6">            
             <div class="mhThumb">
                   <a href="https://codepen.io/mamun129/full/NGWvbJ/" target="_blank"> <img class="mhGray img-responsive" src="https://i.imgur.com/idk0U9E.jpg" alt="greenbarta.com"> </a>
                       <div class="mhCap">
                    <h4>Random value generator from an array.</h4>
                    <p>javascript, html5, css3</p>
                             </div>
                </div>
      </div>
        <div class="col-md-3 col-sm-3 col-xs-6">            
             <div class="mhThumb">
                   <a href="http://www.greenbarta.com/" target="_blank"> <img class="mhGray img-responsive" src="https://i.imgur.com/UTUyYDS.jpg" alt="greenbarta.com"> </a>
                       <div class="mhCap">
                    <h4>Environmental Online News Site</h4>
                    <p>Joomla3, Bootstrap3</p>
                             </div>
                </div>
      </div>
       <div class="col-md-3 col-sm-3 col-xs-6">            
            <div class="mhThumb">
              <a href="http://www.sonamati.com/" target="_blank"><img class="mhGray img-responsive" src="https://i.imgur.com/lexO5FX.jpg" alt="sonamati"> </a>

                <div class="mhCap">
                    <h4>Agriculture Online News Site</h4>
                    <p>Joomla3, Bootstrap3</p>
                   </div>
            </div>
      </div>
<div class="col-md-3 col-sm-3 col-xs-6">            
            <div class="mhThumb">
             <a href="http://www.banglabiznews.com/" target="_blank"><img class="mhGray img-responsive" src="https://i.imgur.com/vx1Yfto.jpg" alt="BanglabizNews"> </a>
                <div class="mhCap">
                    <h4>Business Online News site</h4>
                    <p>Bootstrap3, Joomla3</p>
              </div>
                </div>
          </div>
          </div>  
 </div><!-- end works container -->


  <!--start contuct area -->
  <div class="container text-center mhBlock" id="contact">
	     <div class="col-sm-6 col-sm-offset-3">
				         <h2>I’m currently available for freelance work.</h2>
         <div class="mhBlockLine"></div>
         <div class="mhSubtitle">If you have a project that you want to get started, think you need my help with something or just fancy saying hey, then get in touch.</div>
         
         <p>
<a href="mailto:mamun@kerkit.com">			<button type="submit" class="btn btn-success btn-hldr btn-lg mh-top"><span class="glyphicon glyphicon-envelope"></span> message me</button>			</a>			</p>
    </div>
  </div>
  <!--end contact area -->
  
  
	
    <div class="mhBlock"></div>
<footer id="footer" class=" container text-center col-lg-12">
  <div class="row">
        <p class="small">&copy; 2015 <a href="https://codepen.io/mamun129/full/KpjYMg">Mamun Hossain</a>. All rights reserved.</p>
  </div>
      </footer>
  </body>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/mamun2015/muhammad-mamun-hossain-a-mean-stack-developer-KpjYMg */
body {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1.5em;
}

#mhStatic.affix {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}

.mhBlockLine {
    background: rgba(135, 135, 135, 0.5);
    width: 100px;
    height: 1px;
    margin: 30px auto;
}
.mhSubtitle {
  font-size: 1.5em;
}

header {
  height: 700px;
  background-color: #555;
}

.mhJumbo {
  background-image: url('https://i.imgur.com/V11eIRf.jpg');
  background-size: cover;
  width: 100%;
  background-position: center center;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.mhUp {
  margin: 30% 0 0 33%;
  width: 50%;
  color: #fff;
  font-size: 1.3em;
}

h1,
h2 {
  font-family: 'Lobster Two', cursive;
}

.mhSm {
  width: 150px;
  height: 150px;
}

.icon-mh {
  border: 2px solid #fff;
  border-radius: 55%;
  width: 115px;
  margin-left: 40%;
  padding: 0;
}

.navbar-brand {
  font-weight: 700;
  font-size: 22px;
  font-family: 'Lobster Two', cursive;
}
.socialIcons {
margin: 0 auto -25px;
padding:0;
}
.mhBig {
  font-weight: 700;
  font-size: 48px;
  font-family: 'Lobster Two', cursive;
}

.icon-git {
  background-image: url('https://i.imgur.com/SeBzXgR.png')
}

a.icon-git:hover {
  background-image: url('https://i.imgur.com/SeBzXgR.png');
  background-position: 0 32px;
}

.icon-fcc {
  background-image: url('https://i.imgur.com/SeBzXgR.png');
  background-position: -37px 0;
}

a.icon-fcc:hover {
  background-image: url('https://i.imgur.com/SeBzXgR.png');
  background-position: -37px 32px;
}

.icon-twt {
  background-image: url('https://i.imgur.com/SeBzXgR.png');
  background-position: -78px 0;
}

a.icon-twt:hover {
  background-image: url('https://i.imgur.com/SeBzXgR.png');
  background-position: -78px 32px;
}

.icon-link {
  background-image: url('https://i.imgur.com/SeBzXgR.png');
  background-position: -116px 0;
}

a.icon-link:hover {
  background-image: url('https://i.imgur.com/SeBzXgR.png');
  background-position: -116px 32px;
}

.icon-fb {
  background-image: url('https://i.imgur.com/SeBzXgR.png');
  background-position: 32px 0;
}

a.icon-fb:hover {
  background-image: url('https://i.imgur.com/SeBzXgR.png');
  background-position: 32px 32px;
}

.social-links {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.social-links li {
  display: inline-block;
  margin: 5px;
}

.social-links a {
  width: 36px;
  height: 36px;
  display: block;
}

.social-links a:hover {
  border: 1px solid rgba(255, 255, 255, .5);
  color: rgba(255, 255, 255, .8);
}

.mhBlock {
  margin: 120px auto 0;
}

@media screen and (max-width: 768px) {
  .mhUp h1 {
    font-size: 25px;
  }
}

@media screen and (max-width: 768px) {
  .icon-mh {
    margin-left: 15%;
  }
}
/*for gallery */

.mhThumb {
  position: relative;
  overflow: hidden;
}

.mhCap {
  position: absolute;
  bottom: 0;
  right: 0;
  background: rgba(4, 4, 4, 0.6);
  width: 100%;
  height: 35%;
  padding: 2%;
  display: none;
  text-align: center;
  color: #fff !important;
  z-index: 9;
}

img.mhGray{ 
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);  
    filter: gray;  
    -webkit-transition: all .6s ease;  
}

img.mhGray:hover{ 
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    filter: none;
}
/*end gallery */
.mh-top {
    margin-top: 20%;
}
.glyphicon {
  top: 4px;
  padding-right: 5px;
}

#footer {
  padding: 15px 0;
  background-color: #222;
   position: absolute;
    left: 0;
    right: 0;
    width: 100%;
 }
#footer p, #footer a {
  color: #666;
}


/*Downloaded from https://www.codeseek.co/mamun2015/muhammad-mamun-hossain-a-mean-stack-developer-KpjYMg */
$('.affix').affix({
  offset: {
    top: 700,
    bottom: 0
  }
})

$('.mhThumb').hover(
        function(){
            $(this).find('.mhCap').fadeIn(900);
        },
        function(){
            $(this).find('.mhCap').fadeOut(400);
        }
    );


$(document).scroll(function() {
  var i = $(this).scrollTop();
  if (i > 800) {
    $('.socialIcons').fadeIn();
  } else {
    $('.socialIcons').fadeOut();
  }
});

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

Comments