custom.css

/* index main*/
.index-main {
    background-color: rgba(0,0,0,.25);
    background: url("/assets/img/slider-img-1.jpeg");
    background-size: cover;
    margin: 0 auto;
    background-position: scroll;
    max-width:1350px;
    height: 700px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-direction: column;
    text-align: center;
    color: white;
    margin-bottom: 50px;
}

.index-main h1 {
    font-size: 3em;
}

.index-main p {
    font-size: 1.5em;
}

index.html

---
layout: default
title: Početna
---
{% include index_main.html %}
{% include top_prod.html %}
{% include brands.html %}

index_main.html

    <div class="index-main">
        <h1 class="">
            {{site.data.site.name}}
        </h1>

        <p class="">
            {{site.data.site.description}}
        </p>
    </div>

site.yml

name: Flak-Hobby
description: 'Flak-Hobby je specijalizovana prodavnica hobisticke proizvode, prvenstveno razne vrste plasticnih maketa i hemije.'

top_prod.html

<div class="products">
        {% for product in site.products limit:20 %}
        <div class="product simpleCart_shelfItem">
            <h4 class="product-name item_name card-header-title">{{product.title}}</h4>
            <img class="product-img image" src="{{product.img_path}}" alt="">
            <div class="product-data">
                <p class="product-description"> {{product.desc}}</p>
                <strong class="product-price is-main-txt item_price">{{product.price}} <small>RSD</small></strong>
                <p class="product-category item_category">{{ product.category }}</p>
            </div>
            <div class="product-widgets">
                <input type="number" value="1" class="item_Quantity input">
                <a class="item_add button is-main-bg buy_button is-large" href="javascript:;">Kupi</a>
            </div>
        </div>
        {% endfor %}
    </div>