Untitled

<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">


    <title>Bare - Start Bootstrap Template</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://i.icomoon.io/public/temp/29b71d4c10/UntitledProject/style.css">

    <!-- Custom styles for this template -->
    <style>


      .map-responsive{
        overflow:hidden;
        padding-bottom:50%;
        position:relative;
        height:0;
      }
      .map-responsive iframe{
        left:0;
        top:0;
        height:100%;
        width:100%;
        position:absolute;


      .col-sm-4{

      margin: 10px;
      padding: 10px;

    }

      .blabla{

        margin-top: 20px;
        margin-bottom: 20px;
      }

      .glyphicon {
        font-size: 50px;
      }

      .gi-5x{font-size: 5em;}


      img{

        margin: 0px;

      }

      .container{

      padding: 0px;
        margin: 0px;
      }


    </style>

  </head>

  <body class="container-fluid">

  <header>
    <div class="row">
      <div class="col-lg-12">
        <img class="img-fluid" src="img/bg.jpg">
        <div class="text-center " style="position:absolute;top: 50%;left: 50%;transform: translate(-50%, -50%)">
          <h3 class="font-weight-bold" style="font-size: 50px">Awesome title</h3>
          <div class="text-center " style="position:absolute;top: 130%;left: 50%;transform: translate(-50%, -50%)">
            <button class="btn bg-dark" style="color: white ">Find out more</button>
          </div>
        </div>
      </div>
    </div>
    </div>
  </header>


  <!-- Page Content -->


  <div class="row" style="background-color: #2f96b4">
      <div class="col-lg-12">

    <div class="text-center">

      <h3 style="color:whitesmoke">Our Services</h3>
      <hr>
    </div>

    </div>

  </div>


  <div class="row" style="background-color: #2f96b4">
      <div class="col-sm-2"></div>
      <div class="col-sm-2">

        <span class="glyphicon glyphicon-floppy-disk gi-5x"></span>
        <h2 style="color: whitesmoke ">Service Name</h2>
        <p style="color: whitesmoke">
          Lorem Ipsum Bla bla
          Lorem Ipsum Bla bla
          Lorem Ipsum Bla bla
        </p>
        <button class="btn">Learn More </button>
      </div>
    <div class="col-sm-2">

      <span class="glyphicon glyphicon-floppy-disk gi-5x"></span>
      <h2 style="color: whitesmoke ">Service Name</h2>
      <p style="color: whitesmoke">Lorem Ipsum Bla bla
        Lorem Ipsum Bla bla
        Lorem Ipsum Bla bla
      </p>
      <button class="btn">Learn More </button>
    </div> <div class="col-sm-2">

    <span class="glyphicon glyphicon-floppy-disk gi-5x"></span>
    <h2 style="color: whitesmoke ">Service Name</h2>
    <p style="color: whitesmoke">Lorem Ipsum Bla bla
      Lorem Ipsum Bla bla
      Lorem Ipsum Bla bla
    </p>
    <button class="btn">Learn More </button>
  </div> <div class="col-sm-2">

    <span class="glyphicon glyphicon-floppy-disk gi-5x"></span>
    <h2 style="color: whitesmoke ">Service Name</h2>
    <p style="color: whitesmoke">Lorem Ipsum Bla bla
      Lorem Ipsum Bla bla
      Lorem Ipsum Bla bla
    </p>
    <button class="btn">Learn More </button>
  </div>
    <div class="col-sm-2"></div>
    </div>

    <div class="row">
    <div class="col-sm-12">

      <img src="callout.jpg" class="img-fluid">
      <div class="text-center " style="position:absolute;top: 50%;left: 50%;transform: translate(-50%, -50%)">
        <h3 class="font-weight-bold" style="font-size: 50px;color: whitesmoke">Vertically Centered Text</h3>

    </div>
    </div>
    </div>

    <div class="row">
      <div class="col-sm-12">

        <h2 class="text-center"> Our Work </h2>
        <hr>

      </div>

    </div>

    <div class="row">

      <div class="col-sm-2"></div>
      <div class="col-sm-4">
        <img src="portfolio-1.jpg">
      </div>

      <div class="col-sm-4">
        <img src="portfolio-2.jpg">
      </div>

      <div class="col-sm-2"></div>

    </div>

  <div class="row">

    <div class="col-sm-2"></div>
    <div class="col-sm-4">
      <img src="portfolio-3.jpg">
    </div>

    <div class="col-sm-4">
      <img src="portfolio-4.jpg">
    </div>

    <div class="col-sm-2"></div>

  </div>

  <div class="row blabla">

    <div class="col-sm-12">

      <div class="text-center " style="position:absolute;top: 130%;left: 50%;transform: translate(-50%, -50%)">
        <button class="btn bg-dark" style="color: white ">View More Items</button>
      </div>

    </div>

  </div>

  <br>
  <br>
  <br>
  <br>

  <div class="row text-center" style="background-color: #1c94c4"><

    <div class="col-lg-12 text-center"> Some Call to Action Buttons Here</div>
<
  </div>


  <div class="row text-center" style="background-color: #2f96b4">

    <div class="col-lg-4"></div>

    <div class="col-lg-2">

      <button class="btn"> Click Me !</button>

    </div>

    <div class="col-lg-2">

      <button class="btn"> Look at Me ! </button>

    </div>


    <div class="col-lg-4"></div>

  </div>
    <div class="row" style="background-color: #1c94c4"><

      <div class="col-lg-12"></div>

      </div>


  <div class="row">

    <div class="col-lg-12">

    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <!------ Include the above in your HEAD tag ---------->

    <div class="map-responsive">
      <iframe src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d6030.418742494061!2d-111.34563870463673!3d26.01036670629853!3m2!1i1024!2i768!4f13.1!5e0!3m2!1ses-419!2smx!4v1471908546569" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
    </div>
  </div>

  </div>

  <hr>

  <div class="row">

    <div class="col-md-12 text-center">

      <p style="font-weight: bold">

        Faculty of Computer Science and Engineering
      </p>

      <p class="text-center">

        "Rugjer Boshkovikj" 16

      </p>

      <p>

        1000 Skopje, Republic of Macedonia

      </p>


      <p>(389) 123-4567</p>
      <p> <a style="color: #2a6496"> sample@finki.ukim.mk </a></p>

    </div>
  </div>

  <div class="row">

    <div class="col-sm-5 text-center "></div>

    <div class="col-sm-1">
      <span class="icon-facebook2"></span>
    </div>
    <div class="col-sm-1">
    <span class="icon-instagram"></span>
    </div>
    <div class="col-sm-1">
      <i class="glyphicon glyphicon-knight"></i>
    </div>
    <div class="col-sm-4"></div>

  </div>

  <hr>

  <div class="text-center"> Copyright © FINKI 2015 </div>


    <!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

  </body>

</html>