search.html

---
layout: page
title: Search
---

{% include head.html %}

<style>

.input-search{
  height: 50px;
  width: 300px;
  border-radius: 0px;
  border-style: none;
  padding: 10px;
  font-size: 18px;
  letter-spacing: 2px;
  outline: none;
  border-radius: 25px;
  transition: all 500ms cubic-bezier(0, 0.110, 0.35, 2);
  background-color: transparent;
  padding-right: 40px;
  color:#fff;
}

.btn-search{
  width: 50px;
  height: 50px;
  border-style: none;
  font-size: 20px;
  font-weight: bold;
  outline: none;
  cursor: pointer;
  border-radius: 50%;
  position: absolute;
  right: 0px;
  color:#ffffff ;
  background-color:transparent;
  pointer-events: painted;  
}

</style>

<!-- Html Elements for Search -->
<div id="search-container">
  <button class="btn-search"><i class="fas fa-search"></i></button>
  <input type="text" class="input-search" id="search-input" placeholder="Type to Search...">
  <ul id="results-container"></ul>
</div>

<!-- Script pointing to search-script.js -->
<script src="/assets/js/simple-jekyll-search.min.js" type="text/javascript"></script>

<!-- Configuration -->
<script>
SimpleJekyllSearch({
  searchInput: document.getElementById('search-input'),
  resultsContainer: document.getElementById('results-container'),
  json: '/search.json'
})
</script>