<!DOCTYPE html> <html lang=“en”>

{% include head.html %}
<body id="page-top">
  <!-- Navigation -->
  <a class="menu-toggle rounded" href="#">
    <i class="fa fa-bars"></i>
  </a>
  <nav id="sidebar-wrapper">
    <ul class="sidebar-nav">
      <li class="sidebar-brand">
        <a class="js-scroll-trigger" href="#page-top">Start</a>
      </li>
      <li class="sidebar-nav-item">
        <a class="js-scroll-trigger" href="#page-top">Home</a>
      </li>
      <li class="sidebar-nav-item">
        <a class="js-scroll-trigger" href="#about">About</a>
      </li>
      <li class="sidebar-nav-item">
        <a class="js-scroll-trigger" href="#services">Services</a>
      </li>
      <li class="sidebar-nav-item">
        <a class="js-scroll-trigger" href="#portfolio">Portfolio</a>
      </li>
      <li class="sidebar-nav-item">
        <a class="js-scroll-trigger" href="#contact">Contact</a>
      </li>
    </ul>
  </nav>
  <!-- Header -->
  <header class="masthead d-flex">
    <div class="container text-center my-auto">
      <h1 class="mb-1">Bootstrap</h1>
      <h3 class="mb-5">
        <em>A Bootstrap Theme for Jekyll</em>
      </h3>
      <a id="cta-button" class="btn btn-primary btn-xl js-scroll-trigger btn-no-bold" href="#about">Find Out More</a>
    </div>
    <div class="overlay"></div>
  </header>
  <!-- About -->
  <section class="content-section bg-light" id="about">
    <div class="container text-center">
      <div class="row">
        <div class="col-lg-10 mx-auto">
          <h2>Jekyll-theme-onepage is the perfect theme for your next project!</h2>
        </div>
        <div class="col-lg-6">
          <img style="height:300px; overflow: hidden;" src="assets/img/advanced-feature-2.jpg" title="About" />
        </div>
        <div class="col-lg-6">
          <p class="mb-5 desc-font">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis velit nulla, iaculis nec efficitur sed, fermentum sed odio. Nunc commodo enim eget elit egestas, ac finibus nisl tempus. Integer elementum sapien ut tortor pulvinar fringilla fringilla ac felis.</p>
        </div>
      </div>
    </div>
  </section>
  <!-- Services -->
  <section class="content-section bg-primary text-white text-center" id="services">
    <div class="container">
      <div class="content-section-heading">
        <h3 class="text-secondary mb-0">Services</h3>
        <h2 class="mb-5">What We Offer</h2>
      </div>
      <div class="row">
        <div class="col-lg-3 col-md-6 mb-5 mb-lg-0">
          <span class="service-icon rounded-circle mx-auto mb-3">
            <i class="icon-screen-smartphone"></i>
          </span>
          <h4>
            <strong>Responsive</strong>
          </h4>
          <p class="text-faded mb-0">Looks great on any screen size!</p>
        </div>
        <div class="col-lg-3 col-md-6 mb-5 mb-lg-0">
          <span class="service-icon rounded-circle mx-auto mb-3">
            <i class="icon-pencil"></i>
          </span>
          <h4>
            <strong>Redesigned</strong>
          </h4>
          <p class="text-faded mb-0">Freshly redesigned for Bootstrap 4.</p>
        </div>
        <div class="col-lg-3 col-md-6 mb-5 mb-md-0">
          <span class="service-icon rounded-circle mx-auto mb-3">
            <i class="icon-like"></i>
          </span>
          <h4>
            <strong>Favorited</strong>
          </h4>
          <p class="text-faded mb-0">Millions of users
            <i class="fa fa-heart"></i>
            Start Bootstrap!</p>
        </div>
        <div class="col-lg-3 col-md-6">
          <span class="service-icon rounded-circle mx-auto mb-3">
            <i class="icon-mustache"></i>
          </span>
          <h4>
            <strong>Question</strong>
          </h4>
          <p class="text-faded mb-0">I mustache you a question...</p>
        </div>
      </div>
    </div>
  </section>
  <!-- Portfolio -->
  <section class="content-section" id="portfolio">
    <div class="container">
      <div class="content-section-heading text-center">
        <h3 class="text-secondary mb-0">Portfolio</h3>
        <h2 class="mb-5">Recent Projects</h2>
      </div>
      <div class="row no-gutters">
        {% assign mid = site.posts | sort: 'date' %}
        {% assign posts = mid | reverse %}
        {% for post in posts limit:4 %}          
          <div class="col-lg-6">
            <a class="portfolio-item" href="{{ post.url | relative_url }}">
              <span class="caption">
                <span class="caption-content">
                  <h2>{{ post.title | escape }}</h2>
                  <p class="mb-0">{{ post.subtitle | escape }}</p>
                </span>
              </span>
              <img class="img-fluid" src="assets/img/{{ post.poster | relative_url }}" alt="">
            </a>
          </div>
        {% endfor %}
      </div>
    </div>
  </section>
  <!-- Map -->
  <section id="contact" class="map">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d86684.44774751233!2d-1.630095528999009!3d47.23831721314243!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4805ee81f0a8aead%3A0x40d37521e0ded30!2sNantes!5e0!3m2!1sfr!2sfr!4v1518272910918" width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
    <br/>
  </section>
  {% include footer.html %}
  <!-- Scroll to Top Button-->
  <a class="scroll-to-top rounded js-scroll-trigger" href="#page-top">
    <i class="fa fa-angle-up"></i>
  </a>
  <!-- Bootstrap core JavaScript -->
  <script src="{{ "/assets/js/vendor/jquery.min.js" | relative_url }}"></script>
  <script src="{{ "/assets/js/vendor/bootstrap.bundle.min.js" | relative_url }}"></script>
  <!-- Plugin JavaScript -->
  <script src="{{ "/assets/js/vendor/jquery.easing.min.js" | relative_url }}"></script>
  <!-- Custom scripts for this template -->
  <script src="{{ "/assets/js/main.js" | relative_url }}"></script>
</body>

</html>