{% extends "layout.jinja2" %}

{% block content %}

<div class="row mb-3">
    <p class="text-center"><b>Hội văn hoá Trịnh Công Sơn</b>, hội tụ bạn bè của nhạc sĩ Trịnh Công Sơn từ khắp nơi trên thế giới,<br>
    xây dựng trạm web này với mong muốn trở thành một thư viện toàn diện và nghiêm túc về Trịnh Công Sơn.
    </p>
</div>

<div class="row">
  <!-- Container (BIO Section) -->
    <div class="col-lg-4">
      <div class="card overflow-hidden hover-img">
        <div class="position-relative">
          <img src="{{request.static_url('tcs_site:static/img/home/home_bio.jpg')}}" class="card-img-top">
        </div>
        <!-- COL 1 Biography -->
        <div class="card-body text-center p-3">
            <h5><a href="/topic/tieu-su">Đời và nhạc</a></h5>
            <h5><a href="/topic/life-music">Life and music</a></h5>
            <h5><a href="/topic/vie-musique">Vie et musique</a></h5>

        </div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="card overflow-hidden hover-img">
        <div class="position-relative">
          <img src="{{request.static_url('tcs_site:static/img/home/home_songs.jpg')}}" class="card-img-top border border-dark" alt="matdash-img">
        </div>
        <!-- COL 2 Music  -->
        <div class="card-body text-center p-3">
            <h5><a href="/blog/934/bai-hat">Bài hát</a></h5>
            <h5><a href="/section/english/songs-en">Songs</a></h5>
            <h5><a href="/section/francais/songs-fr">Chansons</a></h5>
        </div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="card overflow-hidden hover-img">
        <div class="position-relative">
          <img src="{{request.static_url('tcs_site:static/img/home/home_art.jpg')}}" class="card-img-top" alt="matdash-img">
          </div>
        <!-- COL 3 ART -->
        <div class="card-body text-center p-3">
            <h5>Tranh vẽ</h5>

        </div>
      </div>
    </div>
</div>

<div class="row">
  <!-- Container (ALBUMS Section) -->
    <div class="col-lg-4">
      <div class="card overflow-hidden hover-img">
        <div class="position-relative">
          <img src="{{request.static_url('tcs_site:static/img/home/home_albums.jpg')}}" class="card-img-top">
        </div>
        <!-- COL 1 Biography -->
        <div class="card-body text-center p-3">
            <h5><a href="/blog/211/tap-nhac">Tập nhạc</a></h5>
            <h5><a href="/blog/211/tap-nhac">Albums</a></h5>
            <h5><a href="/blog/211/tap-nhac">Recueils</a></h5>
        </div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="card overflow-hidden hover-img">
        <div class="position-relative">
          <img src="https://media.tcs-home.org/songs/TCSVTH-01.jpg" class="card-img-top border border-dark" alt="matdash-img">
        </div>
        <!-- COL 2 Music  -->
        <div class="card-body text-center p-3">
            <h5><a href="/blog/232/nhac-soan-cho-ghita">Nhạc soạn cho ghita</a></h5>
            <h5><a href="/blog/232/nhac-soan-cho-ghita">Guitar arrangements</a></h5>
            <h5><a href="/blog/232/nhac-soan-cho-ghita">Arrangements pour guitare</a></h5>
        </div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="card overflow-hidden hover-img">
        <div class="position-relative">
          <img src="{{request.static_url('tcs_site:static/img/home/home_art.jpg')}}" class="card-img-top" alt="matdash-img">
          </div>
        <!-- COL 3 ART -->
        <div class="card-body text-center p-3">
            <h5>Tranh vẽ</h5>

        </div>
      </div>
    </div>
</div>

<div class="row">  
  <div class="col-lg-6">
      <div class="card overflow-hidden hover-img">
        <div class="position-relative">
          <img src="{{request.static_url('tcs_site:static/img/home/home_friends.jpg')}}" class="card-img-top" alt="matdash-img">
        </div>
        <!-- Activites - colonne 3 -->
        <div class="card-body text-center p-3">
            <h5>4e dimanche du mois</h5>

        </div>
      </div>
  </div>
  <div class="col-lg-6">
      <div class="card overflow-hidden hover-img">
        <div class="position-relative">
          <img src="{{request.static_url('tcs_site:static/img/home/home_hoi.jpg')}}" class="card-img-top" alt="matdash-img">
        </div>
        <!-- Activites - colonne 3 -->
        <div class="card-body text-center p-3">
            <h5>4e dimanche du mois</h5>

        </div>
      </div>
  </div>
</div>

</div>
    
{% endblock %}
