@extends('frontend.layouts.app')

@section('title')
Meseum | Philippine Green Building Initiative (PGBI)
@endsection

@section('seo')
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Meseum | Philippine Green Building Initiative (PGBI)" />
<meta property="og:url" content="{{ url('meseum') }}" />
<meta property="og:site_name" content="Meseum | Philippine Green Building Initiative (PGBI)" />
<meta property="og:image" content="{{ asset('images/meta-thumbnail.jpg') }}" />
<meta property="og:thumbnail" content="{{ asset('images/meta-thumbnail.jpg') }}" />
@endsection

@section('content')
{{-- BANNER --}}
<div class="container-fluid px-0 mb-5 bg-bannner" style="background-image: url('{{ asset('images/banner-other.jpg') }}');">
</div>

<div class="container overflow-hidden mb-5">
  <h2 class="fw-bold mb-5" data-aos="fade-up" data-aos-duration="1000">GREEEN Buildings</h2>

  <h2 class="color-light-green fw-semibold mb-5" data-aos="fade-up" data-aos-duration="2000">NATIONAL MESEUM OF NATURAL HISTORY</h2>

  <div class="row gy-5 mb-5">
    <div class="col-12 col-md-7">

      <div class="mb-5 overflow-hidden" data-aos="fade-right" data-aos-duration="1000">
        <iframe width="740" height="440" src="https://www.youtube.com/embed/hoTxiRWrvp8?si=lpyq7F0yUDAOenb1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
      </div>

      <div class="d-md-block d-none" style="margin-bottom: 38rem"></div>

      <div class="row">
        <div class="col-6 col-md-5">
          <a href="{{ url('climate-change') }}">
            <button class="text-white text-decoration-none py-3 w-100 bg-light-green border-0">PREVIOUS</button>
          </a>
        </div>
      </div>
    </div>
    <div class="col-12 col-md">
      <div class="img-effect mb-3" data-aos="fade-left" data-aos-duration="1000" style="background-image: url('{{ asset('images/greeen-4.jpg') }}');">
        <div class="align-self-end p-4">
          <span class="text-white">Lorem Ipsum viverra mauris</span>
        </div>
      </div>
      <div class="img-effect mb-3" data-aos="fade-left" data-aos-duration="2000" style="background-image: url('{{ asset('images/greeen-5.jpg') }}');">
        <div class="align-self-end p-4">
          <span class="text-white">Lorem Ipsum viverra mauris</span>
        </div>
      </div>
      <div class="img-effect mb-3" data-aos="fade-left" data-aos-duration="3000" style="background-image: url('{{ asset('images/greeen-6.jpg') }}');">
        <div class="align-self-end p-4">
          <span class="text-white">Lorem Ipsum viverra mauris</span>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection