Untitled

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"> </script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title> Ricky's Portfolio </title>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-6"><img src="http://placehold.it/100x100" class="img-responsive" alt="placehold">
      </div>
      <div class="col-md-6">
        <article>
          <header>
            <h1>Ricky Arora</h1>
            <h3>Front-end Developer</h3>
          </header>
        </article>
      </div>
      <hr>
    </div>
    <div class="row">
      <div class="col-md-12">
        <img class="img-responsive" src="http://placehold.it/1140x350" alt="placehold">
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <article>
          <header>
            <h2>Featured Work</h2>
          </header>
        </article>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <img src="http://placehold.it/555x300" class="img-responsive" alt="placehold" data-toggle="modal" data-target="#project1">
        <article>
          <header>
            <h3> Appify</h3>
            <p>
              <a href="http://github.com">Link to project</a>
              </p>
            </header>
          </article>
        </div>
        <div class="col-md-6">
          <img src="http://placehold.it/555x300" class="img-responsive" alt="placehold" data-toggle="modal" data-target="#project2">
          <article>
            <header>
              <h3>Appify</h3>
              <p>
                <a href="http://github.com">Link to project</a>
              </p>
            </header>
          </article>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <img src="http://placehold.it/555x300" class="img-responsive" alt="placehold" data-toggle="modal" data-target="#project3">
          <article>
            <header>
              <h3>Appify</h3>
              <p> <a href="http://github.com">Link to project</a></p>
            </header>
          </article>
        </div>
        <div class="col-md-6">
          <img src="http://placehold.it/555x300" class="img-responsive" alt="placehold" data-toggle="modal" data-target="#project4">
          <article>
            <header>
              <h3>Appify</h3>
              <p><a href="http://github.com">Link to project</a></p>
            </header>
          </article>
        </div>
        <div class="row">
          <div class="col-md-12">

          </div>
        </div>
        <!-- Modal -->

        <div class="modal fade" id="project1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel1">
                  Favorite App Page</h4>
                </div>
                <div class="modal-body">
                  <img class="img-responsive" alt="placehold" src="images/placehold.jpg">
                  This is my first project. Once it is done I will display it here.
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
              </div>
            </div>
          </div>

          <!-- m2 -->

          <div class="modal fade" id="project2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <h4 class="modal-title" id="myModalLabel2">Favorite App Page</h4>
                </div>
                <div class="modal-body">
                  <img class="img-responsive" alt="placehold" src="images/placehold.jpg">
                  This is my second project, once I am done you may view it.
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- m3 -->


        <div class="modal fade" id="project3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel3">Favorite App Page</h4>
              </div>
              <div class="modal-body">
                <img class="img-responsive" alt="placehold" src="images/placehold.jpg">
                This is my third project, still working on it.
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>
        <!-- m4 -->


        <div class="modal fade" id="project4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel4" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel4">Favorite App Page</h4>
              </div>
              <div class="modal-body">
                <img class="img-responsive" alt="placehold" src="images/placehold.jpg">
                My fourth project is not yet done. When it is this page shall be updated.
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </body>
    </html>