@extends('layouts.app')
@section('metades')
    <meta name="description" content="{{ $data['metaDescription'] }}" />
    <meta name="author" content="Kultikri Teacher Training Institute of Higher Studies (KTTIHS)" />
    <meta name="keywords" content="Kultikri Teacher Training Institute of Higher Studies (KTTIHS)" />
@endsection
@section('title')
    <title>{{ $data['metaTitle'] }}</title>
@endsection
@section('content')
  
			
            <div class="banner-line">
                <div class="fontpage-text text-center pt-3">
                    <h2>FRONTPAGE</h2>
                </div>
            
    @foreach ($data['moduleItems'] as $item)
        <div class="container main-gallery">
            <div class="w-100 mt-3 text-md-center title-bx1">
                <h3 class="one8">{{ $item['title'] }}</h3>
				
            </div>
            <div class="row mb-5">
                @if (count($item['dynamicSections']) > 0)
                    @foreach ($item['dynamicSections'] as $dynamicSection)
                        <div class="col-md-3">
                            <a class="gal-inr" href="{{ $dynamicSection['image'] }}" data-lightbox="Gallery 1"><img
                                    src="{{ $dynamicSection['image'] }}" alt="main-gallery2"/></a>
                        </div>
                    @endforeach
                @endif
            </div>
        </div>
    @endforeach
@endsection   
    <style>
          .use-banner{
                background-image: url(./assets/image/cover.jpg);
                background-attachment: fixed;
            }
            .use-banner h1{
                font-size: 45px;
                padding-top: 13px;
            }
            .use-banner a{
                padding-top: 10px;
                color: black;
            }
            .use-banner a:hover{
                color: green;
            }
            .use-banner-text{
                color: #777;
            }
            .banner-line{
                border-top:1px solid #fff;
                margin-top: 15px;
            }
            .fontpage-image{
                width: 500px;
                height: 700px;
                display: block;
                margin: auto;
            }
            .fontpage-text h2{
                color: #222484;
            }
            .online-section{
                width: 300px;
                height: 500px;
                background-color: #000;
            }
            .fontpage-image1{
                width: 300px;
                height: 169px;
                display: block;
                margin: auto;
            }
    </style>