templates/index.html

{% extends 'base.html' %}

{% block content %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"  crossorigin="anonymous" />

<div class="container">
<h1 class="title" style="font-style: italic; color: dark purple;">NLP Models</h1><br>

  <div class="grid">
    <a href="classify" class="card">
      <div class="algorithm-box">
      <h2 class="title-above" style="font-size: 14px; color: #afaeaf; font-family: 'Roboto', sans-serif;">LSTM, BI-LSTM, GRU</h2>
      <div class="circle"> 
      <i class="fas fa-chart-line" style="color: white;"></i>
      </div>
      <h2 class="card-title" style="font-family: 'Oswald', sans-serif; font-weight: 700; color: #231e3b;">Text Classification</h2>
      <button class="btn" style=" background-color: #B2BAE4; font-family: 'Roboto', sans-serif; font-size: 12px;">Open</button>
      </div>
    </a>

    <a href="generate" class="card">
      <div class="algorithm-box">
      <h2 class="title-above" style="font-size: 14px; color: #afaeaf; font-family: 'Roboto', sans-serif;">LSTM, BI-LSTM, GRU</h2>
      <div class="circle"> 
      <i class="fas fa-chart-area" style="color: white;"></i>
      </div>
      <h2 class="card-title" style="font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 18px; color: #231e3b;">Text Generation</h2>
      <button class="btn" style=" background-color: #B2BAE4; font-family: 'Roboto', sans-serif; font-size: 12px;">Open</button>
      </div>
    </a>
  </div>
</div>

{% endblock %}