Sk. Imtiaz Ahmed -- Portfolio Zipline

index.jade

nav.navbar.navbar-fixed-top.navbar-dark.bg-primary
  a.navbar-brand(href="#index") Sk. Imtiaz Ahmed
  button(type="button" data-toggle="collapse" data-target="#collapseablenav").navbar-toggler.hidden-sm-up ☰
  div#collapseablenav.collapse.navbar-toggleable-xs.pull-sm-right
      div#navbar.nav.navbar-nav
        a.nav-item.nav-link(href="#index") Home
        a.nav-item.nav-link(href="#about") About
        a.nav-item.nav-link(href="#portus") Clients
        a.nav-item.nav-link(href="#contact") Contact Us

div#index.site-wrapper
  div.container
    div.row.text-xs-center
      div.display-4 Sk. Imtiaz Ahmed
      p.lead Eat Sleep Code Repeat
      hr.m-y-2
      div.btn-group.row
        a(href="https://twitter.com/excalliburbd/").btn.btn-primary.btn-lg Twitter
        a(href="https://github.com/excalliburbd/").btn.btn-primary.btn-lg Github
        a(href="https://bd.linkedin.com/in/excalliburbd/").btn.btn-primary.btn-lg LinkedIn
        a(href="http://www.freecodecamp.com/excalliburbd/").btn.btn-primary.btn-lg FreeCodeCamp

div#about.site-wrapper
  div.container  
    div.row
      div.display-4 About  
  div.container  
    div.row
      div.col-sm-6
        p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      div.col-sm-6
        img(src="https://pbs.twimg.com/profile_images/495639022559961088/BFQilJ9F_400x400.jpeg", alt="Sk. Imtiaz Ahmed").img-fluid.img-circle

div#portus
  div.container.site-wrapper
    div.row
      div.display-4 Portfolio
      div.lead Chek out some of my (upcoming) work!  
  br
  div.container
    div.row
      div.card.col-sm-4
        img.card-img-top(src='https://s3.amazonaws.com/freecodecamp/camper-image-placeholder.png', alt='portus item').img-fluid
        div.card-block
        h4.card-title Portfolio Item
        p.card-text This is where the next projects go
        a.btn.btn-primary(href='#') Check it out!
      div.card.col-sm-4
        img.card-img-top(src='https://s3.amazonaws.com/freecodecamp/camper-image-placeholder.png', alt='portus item').img-fluid
        div.card-block
        h4.card-title Portfolio Item
        p.card-text This is where the next projects go
        a.btn.btn-primary(href='#') Check it out!
      div.card.col-sm-4
        img.card-img-top(src='https://s3.amazonaws.com/freecodecamp/camper-image-placeholder.png', alt='portus item').img-fluid
        div.card-block
        h4.card-title Portfolio Item
        p.card-text This is where the next projects go
        a.btn.btn-primary(href='#') Check it out!
    div.row
      div.card.col-sm-4
        img.card-img-top(src='https://s3.amazonaws.com/freecodecamp/camper-image-placeholder.png', alt='portus item').img-fluid
        div.card-block
        h4.card-title Portfolio Item
        p.card-text This is where the next projects go
        a.btn.btn-primary(href='#') Check it out!
      div.card.col-sm-4
        img.card-img-top(src='https://s3.amazonaws.com/freecodecamp/camper-image-placeholder.png', alt='portus item').img-fluid
        div.card-block
        h4.card-title Portfolio Item
        p.card-text This is where the next projects go
        a.btn.btn-primary(href='#') Check it out!
      div.card.col-sm-4
        img.card-img-top(src='https://s3.amazonaws.com/freecodecamp/camper-image-placeholder.png', alt='portus item').img-fluid
        div.card-block
        h4.card-title Portfolio Item
        p.card-text This is where the next projects go
        a.btn.btn-primary(href='#') Check it out!

            
div#contact.site-wrapper
  div.container
    div.row    
      div.text-xs-center
          div.display-4 Drop me a line
          div.lead [email protected]
          br
          div.btn-group
            a(href="https://twitter.com/excalliburbd/").btn.btn-primary Twitter
            a(href="https://github.com/excalliburbd/").btn.btn-primary Github
            a(href="https://bd.linkedin.com/in/excalliburbd/").btn.btn-primary LinkedIn
            a(href="http://www.freecodecamp.com/excalliburbd/").btn.btn-primary FreeCodeCamp

footer#footer.footer.text-xs-center
  hr.m-x-3
  p Copyright Sk. Imtiaz Ahmed
  

scripts

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>

sk-imtiaz-ahmed-portfolio-zipline.markdown

Sk. Imtiaz Ahmed -- Portfolio Zipline

A Pen by Sk. Imtiaz Ahmed on CodePen.

License.

style.css

html,
body {
  height: 100%;
  background-color: rgb(207, 216, 220);
}

.site-wrapper {
  width: 100%;
  height: 100%;
  /* For at least Firefox */
  min-height: 100%;
  padding-top: 6em;
}

#contact {
  height: 85%;
  min-height: 85%;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />