A Pen by Andras Takacs

Tutorials of (A pen by andras takacs) by Andras takacs

<!DOCTYPE html>
<html >
<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/ */
.pad-top {
  padding-top: 80px;
}

.pad-light {
  padding: 20px;
}

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

td {
  padding: 10px;
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( A Pen by Andras Takacs ) is write by Andras Takacs, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Andras Takacs