Initial Release

LICENSE

@@ -0,0 +1,3 @@
+GNU General Public License
+
+About the license follow this link - https://www.gnu.org/licenses/gpl-3.0.html

README.md

@@ -0,0 +1,46 @@
+<h1>Roxo Hugo</h1>
+<img src="https://user-images.githubusercontent.com/16266381/76162082-10850b80-6164-11ea-8b20-f30b2611f92c.png" alt="screenshot" width="100%">
+
+Roxo is a digital agency HTML template for creative agencies,  freelancers, graphic designers, photographers. Can be used for any kind of corporate websites who provides digital services with many expertise such as  Design, Digital Products, Development, Campaign & Content, Employer Branding, Animation & Motion Graphics ,Packaging & Product Design, Retail & Spacial, Print & Editorial Design, Concept/Text, Information Design etc. 
+
+## Table of Contents
+
+- [Live Demo](#live-demo)
+- [Installation](#installation)
+- [Main Features](#features)
+- [Support](#support)
+- [Licensing](#licensing)
+- [Hire](#hire)
+
+## Live Demo
+
+Checkout the live demo [here](https://roxo-hugo.staticmania.com/)
+
+## Installation
+
+1. Add the repository into your Hugo Project repository as a submodule, `git submodule add git@github.com:StaticMania/roxo-hugo.git themes/roxo`.
+2. Copy the `data`, `content`, `static` & `config.toml` files from the `exampleSite` directory and paste it on you Hugo Project repository/directory
+3. Build your site with `hugo serve` and see the result at `http://localhost:1313/`.
+
+
+## Features
+
+* Responsive Ready.
+* Powered by Bootstrap 4.
+* Dedicated portfolio page.
+* Blog Support.
+* Well formatted code.
+* Easy Customization.
+* Crafted for Design Agency/ Portfolio
+
+## Support
+
+Have some question or facing any technical trouble feel free to [Contact Us](https://staticmania.com/contact/)
+
+## Licensing
+
+This Repository is licensed under the [GNU General Public License (GPL)](https://www.gnu.org/licenses/gpl-3.0.html)
+
+## Hire
+
+Need help to build HUGO websites with your custom requirements. Feel free to [contact](https://staticmania.com/contact/) with us. We provide custom development service for HUGO.

archetypes/default.md

@@ -0,0 +1,2 @@
++++
++++

assets/js/formhandler.js

@@ -0,0 +1,40 @@
+window.addEventListener("DOMContentLoaded", function() {    
+  var form = document.getElementById("contact-form");
+  var button = document.getElementById("contact-form-button");
+  var status = document.getElementById("contact-form-status");
+
+  function success() {
+    form.reset();
+    button.style = "display: none ";
+    status.innerHTML = "Thanks! Contact form is submitted successfully.";
+  }
+
+  function error() {
+    status.innerHTML = "Oops! There was a problem.";
+  }
+
+  // handle the form submission event
+
+  form.addEventListener("submit", function(ev) {
+    ev.preventDefault();
+    var data = new FormData(form);
+    ajax(form.method, form.action, data, success, error);
+  });
+});
+
+// helper function for sending an AJAX request
+
+function ajax(method, url, data, success, error) {
+  var xhr = new XMLHttpRequest();
+  xhr.open(method, url);
+  xhr.setRequestHeader("Accept", "application/json");
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState !== XMLHttpRequest.DONE) return;
+    if (xhr.status === 200) {
+      success(xhr.response, xhr.responseType);
+    } else {
+      error(xhr.status, xhr.response, xhr.responseType);
+    }
+  };
+  xhr.send(data);
+}

assets/js/script.js

@@ -0,0 +1,35 @@
+$(document).ready(function() {
+  "use strict";
+  // Scroll to top
+  $("a[href='#top']").click(function() {
+    $("html, body").animate({ scrollTop: 0 }, "slow");
+    return false;
+  });
+
+  // Smooth scroll
+  $('a.scroll-to').on('click', function (event) {
+    var $anchor = $(this);
+    $('html, body').stop().animate({
+        scrollTop: ($($anchor.attr('href')).offset().top - 50)
+    }, 700);
+    event.preventDefault();
+  });
+
+  $('.site-testimonial-item').on('mouseenter', function(){
+    $('.site-testimonial-item').addClass('inactive');
+    $(this).removeClass('inactive').addClass('active');
+  });
+  $('.site-testimonial-item').on('mouseleave', function(){
+    $('.site-testimonial-item').removeClass('inactive');
+    $('.site-testimonial-item').removeClass('active');
+  });
+});
+
+$(window).on('scroll', function () {
+  var windscroll = $(window).scrollTop();
+  if (windscroll >= 100) {
+    $('.site-navigation').addClass('nav-bg');
+  } else {
+    $('.site-navigation').removeClass('nav-bg');
+  }
+});

assets/scss/_buttons.scss

@@ -0,0 +1,77 @@
+.btn{
+  font-family: $secondary-font;
+  border: none;
+  color: $white !important;
+  padding: 20px 45px;
+  border-radius: 0;
+  &:focus{
+    box-shadow: none;
+  }
+  @include desktop{
+    padding: 17px 40px;
+  }
+  .btn-area{
+    display: block;
+    overflow: hidden;
+    span{
+      position: relative;
+      display: block;
+      padding: 2px 0;
+      transition: transform .9s cubic-bezier(.19,1,.22,1);
+      transform-origin: left center;
+      &::after{
+        content: attr(data-text);
+        position: absolute;
+        top: 150%;
+        left: 0;
+        transform: skewY(30deg);
+        transform-origin: left center;
+        transition: transform .9s cubic-bezier(.19,1,.22,1);
+      }
+    }
+  }
+  &:hover{
+    .btn-area{
+      span{
+        transform: translateY(-150%) skewY(7deg);
+        &::after{
+          transform: skewY(-7deg);
+        }
+      }
+    }
+  }
+  &:visited{
+    .btn-area{
+      span{
+        transform: translateY(-150%) skewY(7deg);
+        &::after{
+          transform: skewY(-7deg);
+        }
+      }
+    }
+  }
+}
+
+.btn-sm{
+  padding: 15px 40px !important;
+}
+
+.btn-sm-rounded{
+  border-radius: 40px;
+}
+
+.btn-primary{
+  background: $primary-color;
+  color: $white;
+  &:hover{
+    background: darken($color: $primary-color, $amount: 10);
+  }
+}
+
+.btn-secondary{
+  background: $secondary-color;
+  color: $white;
+  &:hover{
+    background: darken($color: $secondary-color, $amount: 10);
+  }
+}

assets/scss/_common.scss

@@ -0,0 +1,70 @@
+// html{
+//   scroll-behavior: smooth;
+// }
+
+body {
+  background: $body-color;
+}
+
+.section-title{
+  margin-bottom: 70px;
+  @include desktop{
+    text-align: center;
+  }
+  h2{
+    font-weight: 300;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    margin-bottom: 15px;
+    @include desktop{
+      font-size: 40px;
+    }
+  }
+  p{
+    font-size: 20px;
+    font-weight: 300;
+  }
+}
+
+.form-control{
+  background: transparent;
+  border-radius: 0;
+  margin-bottom: 30px;
+  padding: 0 0 10px 0;
+  border-width: 0 0 1px 0;
+  border-color: $primary-color;
+  font-weight: 300;
+  letter-spacing: 1px;
+  -webkit-appearance: none;
+  height: 42px;
+  &:focus{
+    box-shadow: none;
+    background: transparent;
+    border-color: $text-color;
+  }
+}
+
+select.form-control{
+  height: 42px !important;
+  position: relative;
+}
+
+.select-wrapper{
+  position: relative;
+  &::before{
+    content: '';
+    position: absolute;
+    width: 16px;
+    height: 10px;
+    background: url('../images/angle-down-select.svg');
+    background-size: contain;
+    background-repeat: no-repeat;
+    right: 15px;
+    top: 50%;
+    transform: translateY(-80%);
+  }
+}
+
+textarea.form-control{
+  height: auto;
+}

assets/scss/_mixins.scss

@@ -0,0 +1,42 @@
+@mixin mobile-xs{
+  @media(max-width:400px){
+    @content;
+  }
+}
+@mixin mobile{
+  @media(max-width:575px){
+    @content;
+  }
+}
+@mixin tablet{
+  @media(max-width:767px){
+    @content;
+  }
+}
+@mixin desktop{
+  @media(max-width:991px){
+    @content;
+  }
+}
+@mixin desktop-lg{
+  @media(max-width:1200px){
+    @content;
+  }
+}
+
+@mixin desktop-xl{
+  @media(max-width:1400px){
+    @content;
+  }
+}
+
+@mixin desktop-4k{
+  @media(min-width:2000px){
+    @content;
+  }
+}
+
+
+@mixin size($size){
+  width: $size; height: $size;
+}

assets/scss/_typography.scss

@@ -0,0 +1,43 @@
+@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,600,700|Montserrat:300,400,500,600,700&display=swap');
+
+body{
+  font-family: $primary-font;
+  font-size: 16px;
+  color: $text-color;
+}
+
+h1, h2, h3, h4, h5, h6{
+  font-family: $secondary-font;
+  font-weight: 600;
+  color: $text-color-dark;
+}
+
+p{
+  font-size: 16px;
+  color: $text-color;
+}
+
+h1{
+  font-size: 60px;
+}
+
+h2{
+  font-size: 50px;
+}
+
+h3{
+  font-size: 30px;
+}
+
+h4{
+  font-size: 25px;
+}
+
+h5{
+  font-size: 18px;
+}
+
+h6{
+  font-size: 15px;
+  font-weight: 300;
+}

assets/scss/_variables.scss

@@ -0,0 +1,17 @@
+//site color variables
+$body-color: #fff;
+$primary-color: #EAA4A4;
+$secondary-color: #ADD6D2;
+$text-color: #9D9EA5;
+$text-color-dark: #00113E;
+$site-ease: cubic-bezier(0.36, 0.03, 0, 0.91);
+$gray: #F7F9FF;
+$dark-gray: #646569;
+
+// solid colors
+$white: #fff;
+$black: #000;
+
+// Font Variables
+$primary-font: 'Josefin Sans', sans-serif;
+$secondary-font: 'Montserrat', sans-serif;

assets/scss/components/_about.scss

@@ -0,0 +1,45 @@
+.site-about{
+  &-header{
+    padding-top: 80px;
+    background-color: $gray;
+    @include mobile{
+      padding-top: 60px;
+      text-align: center;
+    }
+  }
+  &-wrapper{
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  &-company{
+    background: $primary-color;
+    width: 40%;
+    padding: 70px 38px;
+    @include desktop{
+      width: 100%;
+      margin-bottom: 20px;
+    }
+    h1{
+      color: $white;
+      font-weight: 400;
+      font-size: 25px;
+      line-height: 60px;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+    }
+  }
+  &-description{
+    width: 60%;
+    padding-left: 50px;
+    @include desktop{
+      width: 100%;
+      padding: 0 38px;
+    }
+    p{
+      font-size: 25px;
+      font-weight: 300;
+      margin-bottom: 0;
+    }
+  }
+}

assets/scss/components/_blog.scss

@@ -0,0 +1,89 @@
+.site{
+  &-blog{
+    @extend .site-project;
+    @include mobile{
+      padding: 70px 0;
+    }
+    &.details{
+      padding: 150px 0 80px;
+      @include tablet{
+        padding: 100px 0 60px;
+      }
+    }
+    &-header{
+      padding: 150px 0 0;
+      @include mobile{
+        padding: 100px 0 0;
+      }
+      h1{
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 10px;
+        margin-bottom: 20px;
+        @include mobile{
+          font-size: 35px;
+        }
+      }
+      p{
+        line-height: 28px;
+        margin-bottom: 0;
+      }
+    }
+    &-pagination{
+      @extend .site-project-pagination;
+    }
+    &-post{
+      @extend .site-project-item;
+      &-thumb{
+        @extend .site-project-item-thumb;
+      }
+      &-content{
+        @extend .site-project-item-content;
+        @include mobile{
+          padding: 15px 25px 40px;
+        }
+        span{
+          font-size: 14px;
+        }
+        h3{
+          margin-bottom: 15px;
+          @include mobile{
+            font-size: 20px;
+          }
+        }
+        a.read-more{
+          color: $primary-color;
+          letter-spacing: 2px;
+          @include mobile{
+            transform: translateY(22px);
+          }
+        }
+      }
+    }
+    &-details{
+      img{
+        max-width: 100%;
+        margin-bottom: 20px;
+      }
+      .blog-title{
+        font-size: 40px;
+      }
+      .feature-image{
+        margin: 20px 0 30px;
+      }
+      h2,h3,h4,h5,h6{
+        margin-bottom: 15px;
+      }
+      blockquote{
+        p{
+          color: $text-color-dark;
+          font-size: 18px;
+        }
+      }
+      cite{
+        margin-top: 10px;
+        display: block;
+      }
+    }
+  }
+}

assets/scss/components/_client.scss

@@ -0,0 +1,24 @@
+.site-client{
+  padding: 100px 0 50px;
+  .section-title{
+    margin-bottom: 100px;
+  }
+  &-wrapper{
+    display: flex;
+    flex-wrap: wrap;
+    @include desktop{
+      justify-content: center;
+    }
+  }
+  &-item{
+    text-align: center;
+    width: 20%;
+    margin-bottom: 50px;
+    @include desktop{
+      width: 33.33%;
+    }
+    @include mobile{
+      width: 50%;
+    }
+  }
+}

assets/scss/components/_contact.scss

@@ -0,0 +1,31 @@
+.site-contact{
+  padding: 150px 0 100px;
+  background: $gray;
+  @include mobile{
+    padding: 120px 0 100px;
+  }
+  &-title{
+    font-weight: 700;
+    @include tablet{
+      font-size: 40px;
+    }
+    span{
+      color: $primary-color;
+    }
+  }
+  &-form{
+    margin-top: 20px;
+    h4{
+      font-weight: 300;
+      text-transform: uppercase;
+      margin-bottom: 50px;
+      letter-spacing: 3px;
+      @include tablet{
+        font-size: 20px;
+      }
+      @include desktop{
+        margin-bottom: 70px;
+      }
+    }
+  }
+}

assets/scss/components/_counter.scss

@@ -0,0 +1,27 @@
+.site-counter{
+  padding: 85px 0;
+  color: $white;
+  background: $secondary-color;
+  .section-title{
+    margin-bottom: 40px;
+  }
+  @include mobile{
+    padding: 50px 0;
+  }
+  &-item{
+    @include desktop{
+      margin-bottom: 30px;
+      text-align: center;
+    }
+    &-title{
+      font-size: 20px;
+      font-weight: 300;
+    }
+    &-number{
+      color: $white;
+      font-size: 60px;
+      margin-bottom: 0;
+      font-weight: 700;
+    }
+  }
+}

assets/scss/components/_cta.scss

@@ -0,0 +1,49 @@
+.site-cta{
+  padding: 130px 0;
+  background-size: cover;
+  background-position: center center;
+  @include desktop{
+    padding: 100px 0;
+  }
+  &-title{
+    font-size: 70px;
+    font-weight: 700;
+    letter-spacing: 10px;
+    margin-bottom: 60px;
+    @include desktop{
+      letter-spacing: 5px;
+    }
+    @include desktop-lg{
+      font-size: 50px;
+      margin-bottom: 40px;
+    }
+    @include mobile{
+      font-size: 40px;
+      letter-spacing: 1;
+    }
+  }
+  &-buttons{
+    margin: 0;
+    padding: 0;
+    li{
+      display: inline-block;
+      @include mobile{
+        display: block;
+      }
+      &:not(:last-child){
+        margin-right: 40px;
+        @include mobile{
+          margin-right: 0;
+          margin-bottom: 20px;
+        }
+      }
+      .btn{
+        @include mobile{
+          display: block;
+          width: 90%;
+          margin: 0 auto;
+        }
+      }
+    }
+  }
+}

assets/scss/components/_expertise.scss

@@ -0,0 +1,21 @@
+.site-expertise{
+  padding: 100px 0;
+  background: $gray;
+  &-list{
+    padding: 0;
+    margin: 10px 0 0 20px;
+    @include mobile{
+      text-align: center;
+      margin: 0;
+    }
+    li{
+      list-style: none;
+      font-size: 25px;
+      font-weight: 300;
+      color: $text-color-dark;
+      &:not(:last-child){
+        margin-bottom: 10px;
+      }
+    }
+  }
+}

assets/scss/components/_footer.scss

@@ -0,0 +1,64 @@
+.site-footer{
+  background: $secondary-color;
+  padding: 100px 0;
+  &-logo{
+    margin-bottom: 50px;
+    @include mobile{
+      text-align: center;
+    }
+  }
+  &-widget{
+    @include desktop{
+      margin-bottom: 40px;
+    }
+    @include mobile{
+      text-align: center;
+    }
+    &-title{
+      color: $white;
+      margin-bottom: 30px;
+      @include desktop{
+        margin-bottom: 20px;
+      }
+    }
+    &-description{
+      color: $white;
+      line-height: 30px;
+      a{
+        color: $white;
+      }
+    }
+    &-links{
+      margin: 0;
+      padding: 0;
+      li{
+        list-style: none;
+        a{
+          color: $white;
+          transition: all 0.3s $site-ease;
+          display: block;
+        }
+        &:not(:last-child){
+          a{
+            padding-bottom: 9px;
+          }
+        }
+      }
+    }
+    &-top{
+      @include mobile{
+        text-align: center;
+        display: block;
+      }
+      img{
+        margin-bottom: 20px;
+      }
+      p{
+        color: $white;
+      }
+      &:hover{
+        text-decoration: none;
+      }
+    }
+  }
+}

assets/scss/components/_hero.scss

@@ -0,0 +1,58 @@
+.site-hero{
+  position: relative;
+  height: 100vh;
+  background-size: cover;
+  background-position: center center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  @include desktop{
+    height: auto;
+    padding: 200px 0;
+  }
+  @include mobile{
+    padding: 150px 0;
+  }
+  &-content{
+    h1{
+      margin-bottom: 75px;
+      @include desktop-lg{
+        font-size: 50px;
+        margin-bottom: 50px;
+      }
+      @include mobile{
+        font-size: 40px;
+      }
+    }
+    &-buttons{
+      margin: 0;
+      padding: 0;
+      li{
+        display: inline-block;
+        @include mobile{
+          display: block;
+        }
+        &:not(:last-child){
+          margin-right: 30px;
+          @include mobile{
+            margin-right: 0;
+            margin-bottom: 20px;
+          }
+        }
+        .btn{
+          font-weight: 600;
+          @include mobile{
+            width: 90%;
+            margin: 0 auto;
+            display: block;
+          }
+        }
+      }
+    }
+  }
+  &-scroll{
+    position: absolute;
+    left: 50%; bottom: 70px;
+    transform: translateX(-50%);
+  }
+}

assets/scss/components/_navigation.scss

@@ -0,0 +1,89 @@
+.site-navigation{
+  padding: 20px 0;
+  background: $white;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 1000;
+  transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
+  @include desktop{
+    background: $white;
+    margin: 10px;
+    border-radius: 5px;
+    top: 0;
+    width: calc(100% - 20px);
+    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.09);
+  }
+  @include mobile{
+    padding: 15px;
+  }
+  .navbar-brand{
+    padding: 0;
+    margin: 0;
+    img{
+      max-width: 78px;
+    }
+  }
+  .nav-item{
+    @include desktop{
+      text-align: center;
+    }
+    .nav-link{
+      font-family: $secondary-font;
+      color: $text-color-dark;
+      transition: all .3s ease;
+      padding: 15px 18px;
+      position: relative;
+    }
+    &:last-child{
+      margin-left: 15px;
+    }
+  }
+  .navbar-toggler{
+    outline: 0;
+    padding: 0;
+    .icon-bar {
+      height: 2px;
+      width: 25px;
+      transition: all 0.2s;
+      background: $primary-color;
+      display: block;
+      &:not(:last-child){
+        margin-bottom: 5px;
+      }
+      &:nth-child(1){
+        transform: rotate(45deg);
+        transform-origin: 10% 10%;
+      }
+      &:nth-child(2){
+        opacity: 0;
+	      filter: alpha(opacity=0);
+      }
+      &:nth-child(3){
+        transform: rotate(-45deg);
+        transform-origin: 10% 90%;
+      }
+    }
+    &.collapsed{
+      .icon-bar{
+        &:nth-child(1){
+          transform: rotate(0);
+        }
+        &:nth-child(2){
+          opacity: 1;
+          filter: alpha(opacity=1);
+        }
+        &:nth-child(3){
+          transform: rotate(0);
+        }
+      }
+    }
+  }
+  &.nav-bg{
+    padding: 12px 0;
+    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.09);
+    @include mobile{
+      padding: 15px;
+    }
+  }
+}

assets/scss/components/_project.scss

@@ -0,0 +1,257 @@
+.site-project{
+  padding: 120px 0;
+  overflow: hidden;
+  &-item{
+    position: relative;
+    margin-bottom: 30px;
+    transition: all 0.3s ease-in;
+    &-thumb{
+      img{
+        width: 100%;
+      }
+    }
+    &-content{
+      position: absolute;
+      background: $gray;
+      width: 100%;
+      padding: 45px 50px;
+      bottom: 0;
+      transition: all .3s $site-ease;
+      @include tablet{
+        padding: 30px;
+        padding-bottom: 75px;
+      }
+      span{
+        font-family: $secondary-font;
+        color: $primary-color;
+        display: block;
+        margin-bottom: 10px;
+      }
+      h3{
+        margin-bottom: 0;
+        a{
+          color: $text-color-dark;
+          transition: 0.3s ease;
+          &:hover{
+            text-decoration: none;
+            color: $primary-color;
+          }
+        }
+      }
+      a.read-more{
+        position: absolute;
+        bottom: 40px;
+        display: block;
+        width: 100%;
+        color: $text-color;
+        opacity: 0;
+        transform: translateY(20px);
+        transition: all 0.3s $site-ease;
+        @include tablet{
+          transform: translateY(0);
+          opacity: 1;
+        }
+      }
+    }
+    &:hover{
+      box-shadow: 
+      0px 30px 45px 0px rgba(0, 0, 0, 0.01),
+      0px 30px 45px 0px rgba(0, 0, 0, 0.02),
+      0px 30px 45px 0px rgba(0, 0, 0, 0.03),
+      0px 30px 45px 0px rgba(0, 0, 0, 0.04);
+      .site-project-item-content{
+        a{
+          transform: translateY(0);
+          opacity: 1;
+        }
+        padding-bottom: 75px;
+      }
+    }
+  }
+  &-cta{
+    margin-top: 30px;
+    display: inline-block;
+    position: relative;
+    font-family: $secondary-font;
+    font-size: 18px;
+    font-weight: 500;
+    color: $primary-color;
+    &::before{
+      content: '';
+      position: absolute;
+      height: 2px;
+      width: 100%;
+      background: $primary-color;
+      bottom: -2px;
+      transition: transform 0.3s $site-ease;
+      transform-origin: right;
+      transform: scaleX(0);
+    }
+    &:hover{
+      color: $primary-color;
+      text-decoration: none;
+      &::before{
+        transform: scaleX(1);
+        transform-origin: left;
+      }
+    }
+  }
+  &-header{
+    padding: 170px 0 100px;
+    background: $gray;
+    @include tablet{
+      padding: 120px 0 80px;
+    }
+    &-content{
+      h1{
+        font-size: 55px;
+        span{
+          color: $primary-color;
+        }
+        @include tablet{
+          font-size: 40px;
+        }
+      }
+      @include desktop{
+        text-align: center;
+        margin-bottom: 30px;
+      }
+    }
+    &-action{
+      display: block;
+      text-align: center;
+      span{
+        display: block;
+        font-size: 30px;
+        font-weight: 300;
+        color: $text-color-dark;
+        margin-bottom: 20px;
+        @include tablet{
+          font-size: 25px;
+        }
+      }
+      img{
+        width: 66px;
+        @include tablet{
+          width: 40px;
+        }
+      }
+      &:hover{
+        text-decoration: none;
+      }
+    }
+  }
+  &-pagination{
+    margin-top: 40px;
+    .pagination{
+      justify-content: center;
+      .page-item{
+        &:not(:last-child){
+          margin-right: 10px;
+        }
+        .page-link{
+          font-size: 24px;
+          border-radius: 0;
+          border: none;
+          padding: 12px 20px;
+          color: $text-color-dark;
+          font-weight: 300;
+          transition: all 0.3s ease;
+        }
+        &.active{
+          .page-link{
+            background-color: $primary-color;
+            color: $white;
+          }
+        }
+        &.disabled{
+          opacity: 0.3;
+          cursor: not-allowed;
+        }
+      }
+    }
+  }
+  &-single{
+    &-section{
+      padding: 250px 0 100px;
+      @include tablet{
+        padding: 100px 0;
+      }
+    }
+    h1{
+      font-size: 40px;
+      font-weight: 500;
+      margin-bottom: 40px;
+    }
+    &-image{
+      display: flex;
+      flex-wrap: wrap;
+      margin-bottom: 30px;
+      img{
+        width: 48%;
+        &:nth-child(2n){
+          margin-left: auto;
+        }
+        @include tablet{
+          width: 100%;
+        }
+      }
+    }
+    &-description{
+      margin-bottom: 50px;
+      p{
+        margin-bottom: 30px;
+      }
+    }
+    &-action{
+      a{
+        position: relative;
+        font-size: 24px;
+        font-weight: 300;
+        color: $text-color-dark;
+        display: flex;
+        margin-left: auto;
+        justify-content: flex-end;
+        @include mobile{
+          transform: translateX(-10px);
+        }
+        .link-area{
+          display: inline-block;
+          overflow: hidden;
+          span{
+            position: relative;
+            display: block;
+            padding: 2px 0;
+            transition: transform .9s cubic-bezier(.19,1,.22,1);
+            transform-origin: left center;
+            &::after{
+              content: attr(data-text);
+              position: absolute;
+              top: 150%;
+              left: 0;
+              transform: skewY(30deg);
+              transform-origin: left center;
+              transition: transform .9s cubic-bezier(.19,1,.22,1);
+            }
+          }
+        }
+        &:hover{
+          text-decoration: none;
+          .link-area{
+            span{
+              transform: translateY(-150%) skewY(7deg);
+              &::after{
+                transform: skewY(-7deg);
+              }
+            }
+          }
+        }
+      }
+      img{
+        filter: invert(1);
+        transform: rotate(90deg);
+        margin-left: 30px;
+      }
+    }
+  }
+}

assets/scss/components/_team.scss

@@ -0,0 +1,51 @@
+.site-team{
+  padding: 100px 0;
+  &-member{
+    background: $gray;
+    padding: 65px 30px 30px;
+    margin: 50px 0 30px;
+    position: relative;
+    @include tablet{
+      text-align: center;
+    }
+    &-image{
+      position: absolute;
+      width: 100px; height: 100px;
+      border-radius: 50%;
+      overflow: hidden;
+      left: 30px; top: 0;
+      transform: translateY(-50%);
+      @include tablet{
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+    }
+    &-content{
+      h3{
+        font-size: 20px;
+        color: $primary-color;
+        margin-bottom: 10px;
+        font-weight: 500;
+      }
+      p{
+        font-size: 18px;
+        color: $text-color-dark;
+        margin-bottom: 20px;
+        font-weight: 300;
+      }
+    }
+    &-social{
+      margin: 0;
+      padding: 0;
+      li{
+        display: inline-block;
+        a{
+          color: $text-color-dark;
+        }
+        &:not(:last-child){
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+}

assets/scss/components/_testimonial.scss

@@ -0,0 +1,42 @@
+.site-testimonial{
+  background: $gray;
+  padding: 100px 0;
+  overflow: hidden;
+  &-item{
+    background: $white;
+    padding: 30px;
+    margin-bottom: 30px;
+    transition: all 0.3s ease-in;
+    &.active{
+      box-shadow: 0px 30px 45px 0px rgba(0, 0, 0, 0.05);
+    }
+    &.inactive{
+      opacity: 0.4;
+    }
+    &-header{
+      display: flex;
+      align-items: center;
+      margin-bottom: 20px;
+      .thumb{
+        width: 80px;
+        img{
+          width: 100%;
+        }
+        margin-right: 15px;
+      }
+      .person{
+        h5{
+          margin-bottom: 5px;
+        }
+        p{
+          margin-bottom: 0;
+          color: $dark-gray;
+        }
+      }
+    }
+    &-body{
+      margin-bottom: 0;
+      font-weight: 300;
+    }
+  }
+}

assets/scss/style.scss

@@ -0,0 +1,36 @@
+@import "variables";
+
+@import "typography";
+
+@import "mixins";
+
+@import "buttons";
+
+@import "common";
+
+@import "components/navigation";
+
+@import "components/hero";
+
+@import "components/counter";
+
+@import "components/project";
+
+@import "components/blog";
+
+@import "components/testimonial";
+
+@import "components/cta";
+
+@import "components/about";
+
+@import "components/expertise";
+
+@import "components/client";
+
+@import "components/team";
+
+@import "components/contact";
+
+@import "components/footer";
+

exampleSite/config.toml

@@ -0,0 +1,109 @@
+baseURL       = "http://example.org/"
+languageCode  = "en-us"
+title         = "Roxo | Creative Design Agency"
+theme         = "roxo"
+summarylength = 25
+
+# Site Menus
+[menu]
+  # Navbar Menus
+  [[menu.nav]]
+    name    = "Home"
+    url     = "/"
+    weight  = 1
+  [[menu.nav]]
+    name    = "About"
+    url     = "about"
+    weight  = 2
+  [[menu.nav]]
+    name    = "Portfolio"
+    url     = "portfolio"
+    weight  = 3
+  [[menu.nav]]
+    name    = "Blog"
+    url     = "blog"
+    weight  = 4
+
+# Site Params
+[params]
+  logo = "images/logo.png"
+  dateFormat = "26 FEB 1994"
+  # Meta data
+  description = "Roxo Hugo themes | Design Agency Template by StaticMania"
+  author = "StaticMania"
+  # We're using formspree.io for form handling, paste your formspree url below
+  formspreeFormUrl  = "https://formspree.io/myykjpje"
+  
+  # Navbar Action Button
+  [params.navAction]
+    status  = true
+    name    = "Get in touch"
+    url     = "/contact"
+  
+
+  # Banner Section
+  [params.banner]
+    enable                = true
+    background_image      = "images/backgrounds/hero-background.jpg"
+    heading               = "We’re a Design Studio That Belies In the Great Ideas"
+    tagline               = "WE WORK HARD, WE PLAY HARD"
+    primary_button        = "See Our Works"
+    primary_button_url    = "/portfolio"
+    secondary_button      = "Connect with Us"
+    secondary_button_url  = "/contact"
+
+  [params.portfolio]
+    enable    = true
+    title     = "OUR RECENT WORKS"
+    subtitle  = "Crafting experiences and seeking to make the complex clear & beautiful."
+
+  [params.call_to_action]
+    enable              = true
+    background_image    = "images/backgrounds/cta-background.jpg"
+    title               = "LET’S WORK TOGETHER"
+    primary_button      = "Submit Query"
+    primary_button_url  = "/contact"
+    secondary_button    = "Not Convinced"
+    secondary_button_url = "/portfolio"
+
+  [params.footer]
+    # Footer Contact Info
+    [params.footer.contactInfo]
+      title   = "Contact Info"
+      address = "713 Elmwood St.<br>Prior Lake, MN 55372"
+      phone   = "409-896-1444"
+      email   = "info@roxo.co"
+      # Footer Sitemap
+      [params.footer.sitemap]
+        title   = "Sitemap"
+        [[params.footer.sitemap.link]]
+          name = "About Company"
+          url  = "/about"
+        [[params.footer.sitemap.link]]
+          name = "Projects"
+          url  = "/portfolio"
+        [[params.footer.sitemap.link]]
+          name = "Blog"
+          url  = "/blog"
+        [[params.footer.sitemap.link]]
+          name = "Contact"
+          url  = "/contact"
+      # Footer Social Media
+      [params.footer.social]
+        title   = "Social Media"
+        [[params.footer.social.link]]
+          name = "Medium"
+          url  = "#"
+        [[params.footer.social.link]]
+          name = "Behance"
+          url  = "#"
+        [[params.footer.social.link]]
+          name = "Dribbble"
+          url  = "#"
+        [[params.footer.social.link]]
+          name = "Instagram"
+          url  = "#"
+      # Footer Service
+      [params.footer.service]
+        title       = "We help brands:"
+        description = "develop design solutions<br>produce valuable cultural content<br>create fresh brand experience"

exampleSite/content/about/_index.md

@@ -0,0 +1,8 @@
+---
+title: "About Us"
+date: 2018-07-12T18:19:33+06:00
+heading : "WE ARE ROXO DESIGN. AN AWARD-WINNING CREATIVE STUDIO IN FLORIDA."
+description : "We are specialized in developing forward-thinking brand identities, websites, illustration and animation for all types of customers. And we do this by bringing our customers through each phase of the design process with us."
+expertise_title: "Expertise"
+expertise_sectors: ["Customer Experience Design", "Digital Products", "Development", "Campaign & Content", "Employer Branding", "Animation & Motion Graphics", "Packaging & Product Design", "Retail & Spacial", "Print & Editorial Design", "Concept/Text", "Information Design"]
+---

exampleSite/content/blog/Design-inspiration:-the-best-projects-from-December.md

@@ -0,0 +1,36 @@
+---
+title: "Design Inspiration: The Best Projects From December"
+date: 2019-12-24T13:45:06+06:00
+image: images/blog/blog-post-04.jpg
+feature_image: images/blog/blog-details-image.jpg
+author: Alexender Schoitiz
+---
+### Black Lines brand identity, by & Smith
+
+Black Lines wants it to be as easy to serve a Negroni as it is a pint of lager. The drinks company is seeking to revolutionise the bar experience by serving cocktails by draught with a changing menu of drinks (as well as same favourite stand-bys). A pink grapefruit spritz was served through the summer while a new pear and white tea fizz joins the line-up for winter.
+
+1. ROFL means Rolling on floor laughing.
+2. STFU means Shut the *freak* up.
+3. LMK means Let me know.
+4. ILY means I love you.
+5. YOLO means You only live once.
+6. SMH means Shaking my head.
+
+The company was previously known as Hingston + Co. but has been given a complete rebrand — including a new logo, tap badges, website and branded material — by London-based design studio & Smith. The new identity is based on the Kandinsky abstract painting, Black Lines, and true to its name, is mostly black and white with a few flashes of colour. According to & Smith, the identity brings together “art and science” and has been brought to life through collaborations with nine illustrators.
+
+1. ROFL means Rolling on floor laughing.
+2. STFU means Shut the *freak* up.
+3. LMK means Let me know.
+4. ILY means I love you.
+5. YOLO means You only live once.
+6. SMH means Shaking my head.
+
+![blog-details-image-02](https://user-images.githubusercontent.com/16266381/71399826-2009b380-264f-11ea-9bc3-59d7fa9a9994.jpg)
+
+Black Lines wants it to be as easy to serve a Negroni as it is a pint of lager. The drinks company is seeking to revolutionise the bar experience by serving cocktails by draught with a changing menu of drinks (as well as same favourite stand-bys). A pink grapefruit spritz was served through the summer while a new pear and white tea fizz joins the line-up for winter.
+
+> "The public is more familiar with bad design than good design. It is, in effect, conditioned to prefer bad design, because that is what it lives with. The new becomes threatening, the old reassuring."
+
+
+> Paul Rand, graphic designer
+

exampleSite/content/blog/Design-inspiration:-the-best-projects-from-November.md

@@ -0,0 +1,37 @@
+---
+title: "Design Inspiration: The Best Projects From November"
+date: 2019-12-24T13:36:06+06:00
+image: images/blog/blog-post-02.jpg
+feature_image: images/blog/blog-details-image.jpg
+author: Alexender Schoitiz
+---
+### Black Lines brand identity, by & Smith
+
+Black Lines wants it to be as easy to serve a Negroni as it is a pint of lager. The drinks company is seeking to revolutionise the bar experience by serving cocktails by draught with a changing menu of drinks (as well as same favourite stand-bys). A pink grapefruit spritz was served through the summer while a new pear and white tea fizz joins the line-up for winter.
+
+1. ROFL means Rolling on floor laughing.
+2. STFU means Shut the *freak* up.
+3. LMK means Let me know.
+4. ILY means I love you.
+5. YOLO means You only live once.
+6. SMH means Shaking my head.
+
+The company was previously known as Hingston + Co. but has been given a complete rebrand — including a new logo, tap badges, website and branded material — by London-based design studio & Smith. The new identity is based on the Kandinsky abstract painting, Black Lines, and true to its name, is mostly black and white with a few flashes of colour. According to & Smith, the identity brings together “art and science” and has been brought to life through collaborations with nine illustrators.
+
+1. ROFL means Rolling on floor laughing.
+2. STFU means Shut the *freak* up.
+3. LMK means Let me know.
+4. ILY means I love you.
+5. YOLO means You only live once.
+6. SMH means Shaking my head.
+
+![blog-details-image-02](https://user-images.githubusercontent.com/16266381/71399826-2009b380-264f-11ea-9bc3-59d7fa9a9994.jpg)
+
+Black Lines wants it to be as easy to serve a Negroni as it is a pint of lager. The drinks company is seeking to revolutionise the bar experience by serving cocktails by draught with a changing menu of drinks (as well as same favourite stand-bys). A pink grapefruit spritz was served through the summer while a new pear and white tea fizz joins the line-up for winter.
+
+> "The public is more familiar with bad design than good design. It is, in effect, conditioned to prefer bad design, because that is what it lives with. The new becomes threatening, the old reassuring."
+
+
+> Paul Rand, graphic designer
+
+

exampleSite/content/blog/Pt-chooses-Classic-Blue-for-its-colour-of-the-year-2020.md

@@ -0,0 +1,36 @@
+---
+title: "Pt Chooses Classic Blue for Its Colour of the Year 2020"
+date: 2019-12-24T13:32:54+06:00
+image: images/blog/blog-post-03.jpg
+feature_image: images/blog/blog-details-image.jpg
+author: Alexender Schoitiz
+---
+### Black Lines brand identity, by & Smith
+
+Black Lines wants it to be as easy to serve a Negroni as it is a pint of lager. The drinks company is seeking to revolutionise the bar experience by serving cocktails by draught with a changing menu of drinks (as well as same favourite stand-bys). A pink grapefruit spritz was served through the summer while a new pear and white tea fizz joins the line-up for winter.
+
+1. ROFL means Rolling on floor laughing.
+2. STFU means Shut the *freak* up.
+3. LMK means Let me know.
+4. ILY means I love you.
+5. YOLO means You only live once.
+6. SMH means Shaking my head.
+
+The company was previously known as Hingston + Co. but has been given a complete rebrand — including a new logo, tap badges, website and branded material — by London-based design studio & Smith. The new identity is based on the Kandinsky abstract painting, Black Lines, and true to its name, is mostly black and white with a few flashes of colour. According to & Smith, the identity brings together “art and science” and has been brought to life through collaborations with nine illustrators.
+
+1. ROFL means Rolling on floor laughing.
+2. STFU means Shut the *freak* up.
+3. LMK means Let me know.
+4. ILY means I love you.
+5. YOLO means You only live once.
+6. SMH means Shaking my head.
+
+![blog-details-image-02](https://user-images.githubusercontent.com/16266381/71399826-2009b380-264f-11ea-9bc3-59d7fa9a9994.jpg)
+
+Black Lines wants it to be as easy to serve a Negroni as it is a pint of lager. The drinks company is seeking to revolutionise the bar experience by serving cocktails by draught with a changing menu of drinks (as well as same favourite stand-bys). A pink grapefruit spritz was served through the summer while a new pear and white tea fizz joins the line-up for winter.
+
+> "The public is more familiar with bad design than good design. It is, in effect, conditioned to prefer bad design, because that is what it lives with. The new becomes threatening, the old reassuring."
+
+
+> Paul Rand, graphic designer
+

exampleSite/content/blog/The-10-biggest-rebrands-and-logo-designs-of-2019.md

@@ -0,0 +1,37 @@
+---
+title: "The 10 Biggest Rebrands and Logo Designs of 2019"
+date: 2019-12-24T13:40:00+06:00
+image: images/blog/blog-post-01.jpg
+feature_image: images/blog/blog-details-image.jpg
+author: Alexender Schoitiz
+---
+### Black Lines brand identity, by & Smith
+
+Black Lines wants it to be as easy to serve a Negroni as it is a pint of lager. The drinks company is seeking to revolutionise the bar experience by serving cocktails by draught with a changing menu of drinks (as well as same favourite stand-bys). A pink grapefruit spritz was served through the summer while a new pear and white tea fizz joins the line-up for winter.
+
+1. ROFL means Rolling on floor laughing.
+2. STFU means Shut the *freak* up.
+3. LMK means Let me know.
+4. ILY means I love you.
+5. YOLO means You only live once.
+6. SMH means Shaking my head.
+
+The company was previously known as Hingston + Co. but has been given a complete rebrand — including a new logo, tap badges, website and branded material — by London-based design studio & Smith. The new identity is based on the Kandinsky abstract painting, Black Lines, and true to its name, is mostly black and white with a few flashes of colour. According to & Smith, the identity brings together “art and science” and has been brought to life through collaborations with nine illustrators.
+
+1. ROFL means Rolling on floor laughing.
+2. STFU means Shut the *freak* up.
+3. LMK means Let me know.
+4. ILY means I love you.
+5. YOLO means You only live once.
+6. SMH means Shaking my head.
+
+![blog-details-image-02](https://user-images.githubusercontent.com/16266381/71399826-2009b380-264f-11ea-9bc3-59d7fa9a9994.jpg)
+
+Black Lines wants it to be as easy to serve a Negroni as it is a pint of lager. The drinks company is seeking to revolutionise the bar experience by serving cocktails by draught with a changing menu of drinks (as well as same favourite stand-bys). A pink grapefruit spritz was served through the summer while a new pear and white tea fizz joins the line-up for winter.
+
+> "The public is more familiar with bad design than good design. It is, in effect, conditioned to prefer bad design, because that is what it lives with. The new becomes threatening, the old reassuring."
+
+
+
+> Paul Rand, graphic designer
+

exampleSite/content/blog/_index.md

@@ -0,0 +1,6 @@
+---
+title       : "Roxo Blog"
+date        : 2019-12-23T20:17:01+06:00
+description : "By fusing strategy & design we help our partners build their brands, drive business, & stand out from the noise in saturated markets! Follow our blog for the latest case studies and projects."
+---
+

exampleSite/content/blog/the-10-biggest-product-stories-of-2019.md

@@ -0,0 +1,36 @@
+---
+title: "The 10 Biggest Product Stories of 2019"
+date: 2019-12-24T12:58:17+06:00
+image: images/blog/blog-post-04.jpg
+feature_image: images/blog/blog-details-image.jpg
+author: Alexender Schoitiz
+---
+### Black Lines brand identity, by & Smith
+
+Black Lines wants it to be as easy to serve a Negroni as it is a pint of lager. The drinks company is seeking to revolutionise the bar experience by serving cocktails by draught with a changing menu of drinks (as well as same favourite stand-bys). A pink grapefruit spritz was served through the summer while a new pear and white tea fizz joins the line-up for winter.
+
+1. ROFL means Rolling on floor laughing.
+2. STFU means Shut the *freak* up.
+3. LMK means Let me know.
+4. ILY means I love you.
+5. YOLO means You only live once.
+6. SMH means Shaking my head.
+
+The company was previously known as Hingston + Co. but has been given a complete rebrand — including a new logo, tap badges, website and branded material — by London-based design studio & Smith. The new identity is based on the Kandinsky abstract painting, Black Lines, and true to its name, is mostly black and white with a few flashes of colour. According to & Smith, the identity brings together “art and science” and has been brought to life through collaborations with nine illustrators.
+
+1. ROFL means Rolling on floor laughing.
+2. STFU means Shut the *freak* up.
+3. LMK means Let me know.
+4. ILY means I love you.
+5. YOLO means You only live once.
+6. SMH means Shaking my head.
+
+![blog-details-image-02](https://user-images.githubusercontent.com/16266381/71399826-2009b380-264f-11ea-9bc3-59d7fa9a9994.jpg)
+
+Black Lines wants it to be as easy to serve a Negroni as it is a pint of lager. The drinks company is seeking to revolutionise the bar experience by serving cocktails by draught with a changing menu of drinks (as well as same favourite stand-bys). A pink grapefruit spritz was served through the summer while a new pear and white tea fizz joins the line-up for winter.
+
+> "The public is more familiar with bad design than good design. It is, in effect, conditioned to prefer bad design, because that is what it lives with. The new becomes threatening, the old reassuring."
+
+
+> Paul Rand, graphic designer
+

exampleSite/content/contact/_index.md

@@ -0,0 +1,7 @@
+---
+title         : "Contact"
+date          : 2019-12-23T20:17:01+06:00
+heading       : "Don’t be shy. Say <span>Hello.</span>"
+form_heading  : "TELL US ABOUT YOUR PROJECT"
+---
+

exampleSite/content/portfolio/_index.md

@@ -0,0 +1,4 @@
+---
+title: "We build better <span>products</span> to help our clients build better <span>companies</span>"
+date: 2019-12-23T16:48:28+06:00
+---

exampleSite/content/portfolio/kio-tape-2.md

@@ -0,0 +1,29 @@
+---
+title: "KIO-TAPE BRAND"
+date: 2019-12-23T20:56:42+06:00
+type: portfolio
+image: "images/projects/project-thumb-four.jpg"
+category: ["PRODUCT LABEL"]
+project_images: ["images/projects/project-details-image-one.jpg", "images/projects/project-details-image-two.jpg"]
+---
+
+The “Seamless Watch” watch has all the features that users expect in a digital watch, and some unusual features.
+
+
+The watch has the following features:
+
+Time and date displayed on the screen. Current time is in large numbers, date is in small numbers above it.
+
+Light: Pressing the light button on the side of the watch activates a light while the button is pressed. Pressing and holding that button for 3 seconds turns on the light and keeps it on, until the button is held again for 3 seconds or up to 2 hours. After 2 hours, it will automatically turn off.
+
+Alarm. A daily alarm may be set for a given time. The alarm may be enabled or disabled. When the alarm is enabled and the alarm time is reached, the watch will beep fast for 5 seconds, then slowly for 30 seconds, then fast for another 5 seconds. Pressing any button stops the alarm sound (in addition to performing its normal function).
+
+Timer. Timer mode shows a count-up timer that starts at 00:00. When the timer is started, it counts up. Pressing the start/stop button will pause the timer, pressing it again continues counting up. Pressing and holding the button for 3 seconds resets the timer to 00:00 and stops counting.
+
+Mystery answer. After entering this mode, the screen initially displays “ask now”. The user may ask a yes-or-no question aloud and press the start/stop button, this will display a randomly selected answer that is one of the following: “yeah”, “yeah right”, “no”, “no doubt”, “keep trying”, “keep dreaming”. Whenever the display has more than one word, only one word is displayed for 2 seconds, then the other word is displayed for 2 seconds, alternately. The answer is displayed until the user leaves this mode, or he/she presses start/stop again for a new answer. 
+
+
+Note: these strings are for the English version of the watch, we will need to use completely different strings in other countries without reprogramming the logic of the watch.
+
+The user may cycle among all modes (date/time, timer, mystery answer) by pressing the mode button.
+

exampleSite/content/portfolio/kio-tape.md

@@ -0,0 +1,28 @@
+---
+title: "KIO TAPE"
+date: 2019-12-23T15:44:46+06:00
+type: portfolio
+image: "images/projects/project-thumb-four.jpg"
+category: ["PRODUCT LABEL"]
+project_images: ["images/projects/project-details-image-one.jpg", "images/projects/project-details-image-two.jpg"]
+---
+
+The “Seamless Watch” watch has all the features that users expect in a digital watch, and some unusual features.
+
+
+The watch has the following features:
+
+Time and date displayed on the screen. Current time is in large numbers, date is in small numbers above it.
+
+Light: Pressing the light button on the side of the watch activates a light while the button is pressed. Pressing and holding that button for 3 seconds turns on the light and keeps it on, until the button is held again for 3 seconds or up to 2 hours. After 2 hours, it will automatically turn off.
+
+Alarm. A daily alarm may be set for a given time. The alarm may be enabled or disabled. When the alarm is enabled and the alarm time is reached, the watch will beep fast for 5 seconds, then slowly for 30 seconds, then fast for another 5 seconds. Pressing any button stops the alarm sound (in addition to performing its normal function).
+
+Timer. Timer mode shows a count-up timer that starts at 00:00. When the timer is started, it counts up. Pressing the start/stop button will pause the timer, pressing it again continues counting up. Pressing and holding the button for 3 seconds resets the timer to 00:00 and stops counting.
+
+Mystery answer. After entering this mode, the screen initially displays “ask now”. The user may ask a yes-or-no question aloud and press the start/stop button, this will display a randomly selected answer that is one of the following: “yeah”, “yeah right”, “no”, “no doubt”, “keep trying”, “keep dreaming”. Whenever the display has more than one word, only one word is displayed for 2 seconds, then the other word is displayed for 2 seconds, alternately. The answer is displayed until the user leaves this mode, or he/she presses start/stop again for a new answer. 
+
+
+Note: these strings are for the English version of the watch, we will need to use completely different strings in other countries without reprogramming the logic of the watch.
+
+The user may cycle among all modes (date/time, timer, mystery answer) by pressing the mode button.

exampleSite/content/portfolio/osen-clock.md

@@ -0,0 +1,28 @@
+---
+title: "OSEN CLOCK"
+date: 2019-12-23T15:56:43+06:00
+type: portfolio
+image: "images/projects/project-thumb-two.jpg"
+category: ["PRODUCT DESIGN"]
+project_images: ["images/projects/project-details-image-one.jpg", "images/projects/project-details-image-two.jpg"]
+---
+
+The “Seamless Watch” watch has all the features that users expect in a digital watch, and some unusual features.
+
+
+The watch has the following features:
+
+Time and date displayed on the screen. Current time is in large numbers, date is in small numbers above it.
+
+Light: Pressing the light button on the side of the watch activates a light while the button is pressed. Pressing and holding that button for 3 seconds turns on the light and keeps it on, until the button is held again for 3 seconds or up to 2 hours. After 2 hours, it will automatically turn off.
+
+Alarm. A daily alarm may be set for a given time. The alarm may be enabled or disabled. When the alarm is enabled and the alarm time is reached, the watch will beep fast for 5 seconds, then slowly for 30 seconds, then fast for another 5 seconds. Pressing any button stops the alarm sound (in addition to performing its normal function).
+
+Timer. Timer mode shows a count-up timer that starts at 00:00. When the timer is started, it counts up. Pressing the start/stop button will pause the timer, pressing it again continues counting up. Pressing and holding the button for 3 seconds resets the timer to 00:00 and stops counting.
+
+Mystery answer. After entering this mode, the screen initially displays “ask now”. The user may ask a yes-or-no question aloud and press the start/stop button, this will display a randomly selected answer that is one of the following: “yeah”, “yeah right”, “no”, “no doubt”, “keep trying”, “keep dreaming”. Whenever the display has more than one word, only one word is displayed for 2 seconds, then the other word is displayed for 2 seconds, alternately. The answer is displayed until the user leaves this mode, or he/she presses start/stop again for a new answer. 
+
+
+Note: these strings are for the English version of the watch, we will need to use completely different strings in other countries without reprogramming the logic of the watch.
+
+The user may cycle among all modes (date/time, timer, mystery answer) by pressing the mode button.

exampleSite/content/portfolio/seamless-watch.md

@@ -0,0 +1,28 @@
+---
+title: "SEAMLESS WATCH"
+date: 2019-12-23T15:55:44+06:00
+type: portfolio
+image: "images/projects/project-thumb-three.jpg"
+category: ["REBRAND"]
+project_images: ["images/projects/project-details-image-one.jpg", "images/projects/project-details-image-two.jpg"]
+---
+
+The “Seamless Watch” watch has all the features that users expect in a digital watch, and some unusual features.
+
+
+The watch has the following features:
+
+Time and date displayed on the screen. Current time is in large numbers, date is in small numbers above it.
+
+Light: Pressing the light button on the side of the watch activates a light while the button is pressed. Pressing and holding that button for 3 seconds turns on the light and keeps it on, until the button is held again for 3 seconds or up to 2 hours. After 2 hours, it will automatically turn off.
+
+Alarm. A daily alarm may be set for a given time. The alarm may be enabled or disabled. When the alarm is enabled and the alarm time is reached, the watch will beep fast for 5 seconds, then slowly for 30 seconds, then fast for another 5 seconds. Pressing any button stops the alarm sound (in addition to performing its normal function).
+
+Timer. Timer mode shows a count-up timer that starts at 00:00. When the timer is started, it counts up. Pressing the start/stop button will pause the timer, pressing it again continues counting up. Pressing and holding the button for 3 seconds resets the timer to 00:00 and stops counting.
+
+Mystery answer. After entering this mode, the screen initially displays “ask now”. The user may ask a yes-or-no question aloud and press the start/stop button, this will display a randomly selected answer that is one of the following: “yeah”, “yeah right”, “no”, “no doubt”, “keep trying”, “keep dreaming”. Whenever the display has more than one word, only one word is displayed for 2 seconds, then the other word is displayed for 2 seconds, alternately. The answer is displayed until the user leaves this mode, or he/she presses start/stop again for a new answer. 
+
+
+Note: these strings are for the English version of the watch, we will need to use completely different strings in other countries without reprogramming the logic of the watch.
+
+The user may cycle among all modes (date/time, timer, mystery answer) by pressing the mode button.

exampleSite/content/portfolio/use-less-brand.md

@@ -0,0 +1,28 @@
+---
+title: "USE-LESS BRAND"
+date: 2019-12-23T15:58:10+06:00
+type: portfolio
+image: "images/projects/project-thumb-one.jpg"
+category: ["UI UX"]
+project_images: ["images/projects/project-details-image-one.jpg", "images/projects/project-details-image-two.jpg"]
+---
+
+The “Seamless Watch” watch has all the features that users expect in a digital watch, and some unusual features.
+
+
+The watch has the following features:
+
+Time and date displayed on the screen. Current time is in large numbers, date is in small numbers above it.
+
+Light: Pressing the light button on the side of the watch activates a light while the button is pressed. Pressing and holding that button for 3 seconds turns on the light and keeps it on, until the button is held again for 3 seconds or up to 2 hours. After 2 hours, it will automatically turn off.
+
+Alarm. A daily alarm may be set for a given time. The alarm may be enabled or disabled. When the alarm is enabled and the alarm time is reached, the watch will beep fast for 5 seconds, then slowly for 30 seconds, then fast for another 5 seconds. Pressing any button stops the alarm sound (in addition to performing its normal function).
+
+Timer. Timer mode shows a count-up timer that starts at 00:00. When the timer is started, it counts up. Pressing the start/stop button will pause the timer, pressing it again continues counting up. Pressing and holding the button for 3 seconds resets the timer to 00:00 and stops counting.
+
+Mystery answer. After entering this mode, the screen initially displays “ask now”. The user may ask a yes-or-no question aloud and press the start/stop button, this will display a randomly selected answer that is one of the following: “yeah”, “yeah right”, “no”, “no doubt”, “keep trying”, “keep dreaming”. Whenever the display has more than one word, only one word is displayed for 2 seconds, then the other word is displayed for 2 seconds, alternately. The answer is displayed until the user leaves this mode, or he/she presses start/stop again for a new answer. 
+
+
+Note: these strings are for the English version of the watch, we will need to use completely different strings in other countries without reprogramming the logic of the watch.
+
+The user may cycle among all modes (date/time, timer, mystery answer) by pressing the mode button.

exampleSite/data/clients.yml

@@ -0,0 +1,4 @@
+enable        : true
+title         : "Who trust our judgment"
+client_logos  : 
+  ["images/clients/client-logo-one.png", "images/clients/client-logo-two.png", "images/clients/client-logo-three.png", "images/clients/client-logo-four.png", "images/clients/client-logo-five.png", "images/clients/client-logo-six.png", "images/clients/client-logo-seven.png", "images/clients/client-logo-eight.png", "images/clients/client-logo-nine.png", "images/clients/client-logo-ten.png"]

exampleSite/data/contact.yml

@@ -0,0 +1,13 @@
+enable  : true
+contactFormTitle    : CONTACT WITH ME
+contactFormSubtitle : >
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, ea! consectetur adipisicing elit. Dolore, ea!
+mapTitle    : FIND US
+mapSubtitle : >
+  Si aute quis eu proident o cupidatat ne anim nescius, et est praesentibus, o quorum vidisse expetendis, nostrud eram quibusdam ad nam nostrud ubi.
+officeAddress1 : 125, Kings Street, Melbourne United Kingdom,600562
+officeAddress2 : 925, Lab Street, San Fransisco, United State 90278
+mail1 : support@timer.com
+mail2 : info@timer.com
+phone1: +07 052 245 022
+phone2: +07 052 245 025 

exampleSite/data/counter.yml

@@ -0,0 +1,14 @@
+enable : true
+heading : "THE PROOF IS IN THE PUDDING!"
+counter_item: 
+  - title: "Happy Clients"
+    number: "250"
+
+  - title: "Projects Completed"
+    number: "100"
+
+  - title: "Cups of coffee"
+    number: "350"
+
+  - title: "Telephone Talks"
+    number: "775"

exampleSite/data/feature.yml

@@ -0,0 +1,34 @@
+enable  : true
+title   : Offer From Me
+subtitle: >
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, <br> quasi dolores numquam dolor vero ex, tempora commodi      repellendus quod laborum.
+item    :
+  - icon  : ion-ios-flask-outline
+    title : Media heading
+    description : >
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, sint.
+
+  - icon  : ion-ios-lightbulb-outline
+    title : Well documented.
+    description : >
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, sint.
+
+  - icon  : ion-ios-americanfootball-outline
+    title : Free updates
+    description : >
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, sint.
+
+  - icon  : ion-ios-keypad-outline
+    title : Solid Support
+    description : >
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, sint.
+
+  - icon  : ion-ios-barcode-outline
+    title : Simple Installation
+    description : >
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, sint.
+  
+  - icon  : ion-ios-lightbulb-outline
+    title : Well documented.
+    description : >
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, sint.

exampleSite/data/gallery.yml

@@ -0,0 +1,8 @@
+enable  : true
+galleryImages :
+  - image : images/portfolio/item-1.jpg
+  - image : images/portfolio/item-2.jpg
+  - image : images/portfolio/item-3.jpg
+  - image : images/portfolio/item-4.jpg
+  - image : images/portfolio/item-5.jpg
+  - image : images/portfolio/item-6.jpg

exampleSite/data/service.yml

@@ -0,0 +1,24 @@
+enable  : true
+title   : WHAT WE LOVE TO DO
+subtitle: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis porro recusandae non quibusdam iure adipisci.
+image   : images/team.jpg
+serviceItem :
+  - icon  : ion-ios-paper-outline
+    title : BRANDING
+    description: >
+      Veritatis eligendi, dignissimos. Porta fermentum mus aute pulvinar earum minus platea massa feugiat rutrum urna facilisi ipsameum
+
+  - icon  : ion-ios-pint-outline
+    title : DESIGN
+    description: >
+      Veritatis eligendi, dignissimos. Porta fermentum mus aute pulvinar earum minus platea massa feugiat rutrum urna facilisi ipsameum
+
+  - icon  : ion-ios-paper-outline
+    title : DEVELOPMENT
+    description: >
+      Veritatis eligendi, dignissimos. Porta fermentum mus aute pulvinar earum minus platea massa feugiat rutrum urna facilisi ipsameum
+
+  - icon  : ion-ios-paper-outline
+    title : THEMEING
+    description: >
+      Veritatis eligendi, dignissimos. Porta fermentum mus aute pulvinar earum minus platea massa feugiat rutrum urna facilisi ipsameum

exampleSite/data/team.yml

@@ -0,0 +1,44 @@
+enable  : true
+title   : Team that makes the difference.
+members  :
+  - image       : images/team/team-member-one.jpg
+    name        : PABLO ESCOBAR
+    designation : Creative Director
+    medium      : https://www.medium.com/
+    linkedIn    : https://www.linkedin.com/
+    instagram   : https://www.instagram.com/
+
+  - image       : images/team/team-member-two.jpg
+    name        : MONTINO RIAU
+    designation : Product Manager
+    medium      : https://www.medium.com/
+    linkedIn    : https://www.linkedin.com/
+    instagram   : https://www.instagram.com/
+
+  - image       : images/team/team-member-three.jpg
+    name        : ALEX NAASRI
+    designation : Chief Design Officer
+    medium      : https://www.medium.com/
+    linkedIn    : https://www.linkedin.com/
+    instagram   : https://www.instagram.com/
+
+  - image       : images/team/team-member-four.jpg
+    name        : HONGMAN CHIOA
+    designation : UX Researcher
+    medium      : https://www.medium.com/
+    linkedIn    : https://www.linkedin.com/
+    instagram   : https://www.instagram.com/
+
+  - image       : images/team/team-member-five.jpg
+    name        : SANTIO ANDRESS
+    designation : Content Researcher
+    medium      : https://www.medium.com/
+    linkedIn    : https://www.linkedin.com/
+    instagram   : https://www.instagram.com/
+
+  - image       : images/team/team-member-six.jpg
+    name        : RAMESH PAUL
+    designation : Creative Designer
+    medium      : https://www.medium.com/
+    linkedIn    : https://www.linkedin.com/
+    instagram   : https://www.instagram.com/

exampleSite/data/testimonial.yml

@@ -0,0 +1,39 @@
+enable  : true
+title   : "OPINION FROM REAL PEOPLE"
+subtitle: "What clients says about our services."
+testimonial_item :
+  - thumb : "images/testimonial/user-thumb-one.jpg"
+    name  : "Simonns Hodge"
+    company_position: "CEO, Credito"
+    quote : > 
+            "Trust us we looked for a very long time and wasted thousands of dollars testing other teams, freelancers, and outsource companies." 
+
+  - thumb : "images/testimonial/user-thumb-two.jpg"
+    name  : "Rekon Montino"
+    company_position: "CDO, Bulmuci"
+    quote : > 
+            "Roxo products have allowed us to deliver better support to all our clients. The agility with which we can implement new features and workflows is a key element." 
+
+  - thumb : "images/testimonial/user-thumb-three.jpg"
+    name  : "Ryan Hillary"
+    company_position: "MD, Udilamo"
+    quote : > 
+            "We’re a really busy restaurant, and roxo gives our customers a easy way to order, pay, and pick up their food so they can beat the line and beat that lunch rush." 
+
+  - thumb : "images/testimonial/user-thumb-four.jpg"
+    name  : "Dockrel Kahn"
+    company_position: "PM, Walmet"
+    quote : > 
+            "Trust us we looked for a very long time and wasted thousands of dollars testing other teams, freelancers, and outsource companies." 
+
+  - thumb : "images/testimonial/user-thumb-five.jpg"
+    name  : "Orino Monteno"
+    company_position: "CEO, Axion"
+    quote : > 
+            "Roxo products have allowed us to deliver better support to all our clients. The agility with which we can implement new features and workflows is a key element." 
+
+  - thumb : "images/testimonial/user-thumb-six.jpg"
+    name  : "Welfo Roy"
+    company_position: "PDO, Komoyo"
+    quote : > 
+            "We’re a really busy restaurant, and roxo gives our customers a easy way to order, pay, and pick up their food so they can beat the line and beat that lunch rush." 

exampleSite/static/images/angle-down-select.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15.698" height="9.17" viewBox="0 0 15.698 9.17">
+  <g id="down-arrow" transform="translate(0 -127.244)">
+    <g id="_x31_0_34_" transform="translate(0 127.244)">
+      <g id="Group_20" data-name="Group 20">
+        <path id="Path_24" data-name="Path 24" d="M15.505,127.438a.655.655,0,0,0-.929,0l-6.727,7.382-6.728-7.382a.655.655,0,0,0-.929,0,.663.663,0,0,0,0,.934l7.159,7.855a.648.648,0,0,0,.5.187.647.647,0,0,0,.5-.187l7.16-7.856A.662.662,0,0,0,15.505,127.438Z" transform="translate(0 -127.244)" fill="#eaa4a4"/>
+      </g>
+    </g>
+  </g>
+</svg>

exampleSite/static/images/arrow-down.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26.07" height="32.634" viewBox="0 0 26.07 32.634">
+  <g id="download" transform="translate(-3.282)">
+    <path id="Path_1" data-name="Path 1" d="M16.317,32.634a.5.5,0,0,1-.5-.5V.5a.5.5,0,0,1,1,0V32.134A.5.5,0,0,1,16.317,32.634Z" fill="#00113e"/>
+    <path id="Path_2" data-name="Path 2" d="M16.315,32.634h0a.5.5,0,0,1-.354-.146L3.428,19.951a.5.5,0,0,1,.707-.707L16.314,31.427,28.5,19.244a.5.5,0,1,1,.707.707L16.668,32.487A.5.5,0,0,1,16.315,32.634Z" fill="#00113e"/>
+  </g>
+</svg>

exampleSite/static/images/to-top.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26.071" height="32.634" viewBox="0 0 26.071 32.634">
+  <g id="upload" transform="translate(-3.282)">
+    <path id="Path_3" data-name="Path 3" d="M16.317,32.634a.5.5,0,0,1-.5-.5V.5a.5.5,0,0,1,1,0V32.134A.5.5,0,0,1,16.317,32.634Z" fill="#fff"/>
+    <path id="Path_4" data-name="Path 4" d="M28.852,13.536a.5.5,0,0,1-.354-.146L16.319,1.207,4.135,13.39a.5.5,0,0,1-.707-.707L15.966.146A.5.5,0,0,1,16.319,0h0a.5.5,0,0,1,.354.146L29.206,12.682a.5.5,0,0,1-.354.854Z" fill="#fff"/>
+  </g>
+</svg>