A Pen by Andras Takacs

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Andras Takacs</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>

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

  
</head>

<body>

  <nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Andras Takacs</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#about">About</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>
<div class="container">
  <div class="row pad-top">
    <div class="col-sm-4 col-sm-offset-2 text-right">
      <h1 id="about" class="pad-top">Andras Takacs</h1>
      <h3>.NET Developer</h3>
    </div>
    <div class="col-sm-4">
      <img class="img-responsive img-circle thumb" src="https://openclipart.org/image/2400px/svg_to_png/177482/ProfilePlaceholderSuit.png" />
    </div>
  </div>
</div>
 <div class="container pad-top">
    <div class="row">
      <div class="col-sm-8 col-sm-offset-2">
        <h1 class="text-center" id="portfolio">PORTFOLIO</h1>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-10 col-sm-offset-1">
        <table>
          <tr>
            <td><img class="img-responsive thumb" src="http://landingjazz.com/frontend/images/scr_placeholder.jpg" /></td>
            <td><img class="img-responsive thumb" src="http://landingjazz.com/frontend/images/scr_placeholder.jpg" /></td>
          </tr>
          <tr>
            <td><img class="img-responsive thumb" src="http://landingjazz.com/frontend/images/scr_placeholder.jpg" /></td>
            <td><img class="img-responsive thumb" src="http://landingjazz.com/frontend/images/scr_placeholder.jpg" /></td>
          </tr>
          <tr>
            <td><img class="img-responsive thumb" src="http://landingjazz.com/frontend/images/scr_placeholder.jpg" /></td>
            <td><img class="img-responsive thumb" src="http://landingjazz.com/frontend/images/scr_placeholder.jpg" /></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>
<div class="container pad-top">
  <div class="row">
    <div class="col-sm-8 col-sm-offset-2">    
      <h1 class="text-center" id="contact">CONTACT</h1>
    </div>
  </div>
  <div class="row text-center pad-light">
    <a class="btn btn-default" href="https://github.com/atakacs91" targer="_blank"><i class="fa fa-github"></i></a>
    <a class="btn btn-default" href="https://www.linkedin.com" target="_blank"><i class="fa fa-linkedin"></i></a>
    <a class="btn btn-default" href="https://www.twitter.com" target="_blank"><i class="fa fa-twitter"></i></a>
    <a class="btn btn-default" href="https://www.facebook.com" target="_blank"><i class="fa fa-facebook"></i></a>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/atakacs91/a-pen-by-andras-takacs-aBBegy */
.pad-top {
  padding-top: 80px;
}

.pad-light {
  padding: 20px;
}

.thumb {
  max-width: 400px;
  max-height: 300px;
}

td {
  padding: 10px;
}

Comments