index.html

---
layout: default
heroText: 
heroImageUrl: images/
featuresImageUrl: images/
featuresImageAlt: Features
featuresText: Curabitur rutrum tellus in nibh elementum, eget varius tellus scelerisque. Maecenas semper ultricies.
previewText: Vestibulum vulputate, erat et aliquet eleifend, lorem ex auctor lacus, vel tincidunt tortor mi quis diam
previewVideoUrl: https://www.youtube.com/embed/nqkx_qERhOY
contactText: Don't hesitate to give us a call or just use the contact form below
contactPhone: 
contactMail: info@ronnerstedt.com
contactAddress: Ronnderstedt DEV | Gothenburg | Sweden
---

<!-- Hero -->
<section id="home" style=" background:linear-gradient(180deg, rgba(85, 86, 92, 0.9), rgba(85, 86, 92, 0.5)), url(images/macbook.jpg);
background-size:cover; background-position: bottom;" class="pt-32 sm:pt-48">
  <div class="px-2 lg:px-0 flex w-full container mx-auto pb-32">
    <div class="w-full text-white md:flex items-center justify-center text-center md:text-left">
      <div class="md:w-1/2 w-full md:ml-12">
        <h1 class="leading-none font-bold text-4xl md:text-5xl lg:6x1 uppercase">Creating web pages and services</h1>
        <p class="mt-12 mb-12">{{ page.heroText }}</p>
        <a href="#contact"
          class="px-16 rounded-full bg-blue-600 text-white font-bold p-4 uppercase border-blue-600 border">Contact
          us!</a>
      </div>
      <div class="mt-12 lg:mx-2 md:mt-0 md:w-1/2 justify-center flex">
        <!-- <img src={{ page.heroImageUrl }} style="max-height: 528px;" alt="Mobile Phone" /> -->
      </div>
    </div>
  </div>
</section>

<!-- Features -->
<section id="features" class="bg-white px-4 py-12">
  <div class="container mx-auto">
    <h2 class="text-4xl font-bold uppercase text-center text-gray-700">specialities</h2>
    <!-- <div class="flex justify-center">
      <p class="md:w-1/2 text-center text-gray-300">{{ page.featuresText }}</p>
    </div> -->

    <div class="py-16 md:flex items-center text-gray-700">
      <!-- <div class="md:w-1/3 flex justify-center mb-8 md:mr-8 md:mb-0 md:block">
        <img style="max-height: 600px;" src={{ page.featuresImageUrl }} alt={{ page.featuresImageAlt }} />
      </div> -->
      <div class="grid gap-8 grid-cols-1 md:grid-cols-2 md:w-full">
        {% for feature in site.features %}
        <div>
          <!-- <div class="h-16 w-16 mb-2 p-2 rounded-full bg-blue-600 inline-block text-white icon-background flex justify-center align-middle" >
            <img class="h-auto" src="{{feature.icon}}" />
          </div> -->
          <h3 class="text-2xl font-bold mb-3">{{ feature.title }}</h3>
          <p>{{ feature.description }}</p>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
</section>

<!-- Preview -->
<!--
<section id="preview" class="bg-blue-800 py-24 px-4">
  <div class="container mx-auto">
    <h2 class="text-5xl font-bold uppercase text-center text-gray-300">Preview</h2>
    <div class="flex justify-center">
      <p class="md:w-1/2 text-center text-gray-300">{{ page.previewText }}</p>
    </div>

    <div class="flex justify-center my-16 mx-2 md:mx-16 shadow-sm">
      <iframe class="rounded-lg" style="width: 100%; height: 50vh;" src={{ page.previewVideoUrl }} frameborder="0"
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
  </div>
</section>
-->

<style>
  .mySlides {
    display: none
  }

  img {
    vertical-align: middle;
  }

  .slide-container {
    position: relative;
    margin: auto;
  }

  .prev,
  .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
  }

  .dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }

  .active,
  .dot:hover {
    background-color: #717171;
  }

  /* Position the "next button" to the right */
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }

  /* On hover, add a black background color with a little bit see-through */

  .fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
  }

  @-webkit-keyframes fade {
    from {
      opacity: .4
    }

    to {
      opacity: 1
    }
  }

  @keyframes fade {
    from {
      opacity: .4
    }

    to {
      opacity: 1
    }
  }

  /* On smaller screens, decrease text size */
  @media only screen and (max-width: 300px) {

    .prev,
    .next,
    .text {
      font-size: 11px
    }
  }
</style>

<section id="preview" class="bg-gray-600 py-12 px-4 slide-container">
  <h3 class="text-white text-4xl text-center font-bold uppercase" >Projects</h3>
  <div class="container mx-auto text-white ">
    {% for app in site.apps %}
    <div class="mySlides fade">
      <div class="mb-16 md:mb-4 items-center md:flex {% cycle 'flex-row', 'flex-row-reverse' %}">
        <div class="mx-4 flex-2 p-8 md:p-8">
          <img class="m-auto" style="max-height: 500px;" src={{ app.imageUrl }} alt={{ app.imageAlt }} />
        </div>
        <div class="flex-2 mx-4">
          <h3 class="text-2xl uppercase font-bold mb-3">{{ app.title }}</h3>
          <p class="mb-10">{{ app.description }}</p>
          <!-- <a target="_blank" href="{{ app.demoUrl }}" OBS OBS: href to contact until we have a working demo.-->
        </div>
      </div>
    </div>
    {% endfor %}

  </div>
  <!-- <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a> -->

  <!-- <div style="text-align:center">
    {% for app in site.apps %}
    <span class="dot" onclick="currentSlide({{ forloop.index + 1 }})"></span>
    {% endfor %}
  </div> -->
</section>

<script>
  var slideIndex = 1;
  showSlides(slideIndex);

  // var interval = setInterval(function () {
  //   plusSlides(1)
  // }, 5000)

  function plusSlides(n) {
    showSlides(slideIndex += n);
  }

  function currentSlide(n) {
    showSlides(slideIndex = n);
  }

  function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    if (n > slides.length) { slideIndex = 1 }
    if (n < 1) { slideIndex = slides.length }
    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex - 1].style.display = "block";
    dots[slideIndex - 1].className += " active";
  }
</script>

<section id='contact' class="bg-white py-12 px-4">
  <div class="container mx-auto text-gray-800">
    <h2 class="text-5xl font-bold uppercase text-center text-gray-800">Contact</h2>
    <div class="flex justify-center">
      <p class="md:w-1/2 text-center text-gray-800">{{ page.contactText }}</p>
    </div>
    <div class="mt-6 md:flex justify-center">
      <p class="my-4 mx-4 flex items-center"><i class="material-icons mr-2">location_on</i> {{ page.contactAddress }}
      </p>
      <!-- <p class="my-4 mx-4 flex items-center"><i class="material-icons mr-2">phone</i> {{ page.contactPhone }}</p> -->
      <a href="mailto:{{ page.contactMail }}" class="my-4 mx-4 flex items-center"><i
          class="material-icons mr-2">email</i> {{ page.contactMail }}</a>
    </div>

    <form class="mt-16 max-w-md m-auto" action='https://formspree.io/mqkyrgzv' method='POST' acceptCharset='UTF-8'>
      <div class="mb-6">
        <label class="block text-sm font-bold mb-2" for="email">
          Email
        </label>
        <input required class=" border border-gray-600 rounded w-full py-2 px-3" id="email" type="email"
          name="email">
      </div>

      <div class="mb-6">
        <label class="block text-sm font-bold mb-2" for="message">
          Message
        </label>
        <textarea required class="h-32  border border-gray-600 rounded w-full py-2 px-3" id="message"
          name="message"></textarea>
      </div>

      <button type="submit"
        class="px-16 rounded-full w-full bg-blue-600 text-white font-bold p-4 uppercase border-blue-600 border">Submit
        message</button>
    </form>
  </div>
</section>