Cocktail-DB/cocktail_list/templates/cocktail.html

{% extends "base.html" %}
{% load static %}
{% block css %}
  <link rel="stylesheet" href="{% static 'css/navbar_style.css' %}">
  <link rel="stylesheet" href="{% static 'css/cocktail.css' %}">
  <link href="https://fonts.googleapis.com/css2?family=Faster+One&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet"> 
{% endblock css %}


{% block title %}
COCKTAIL  | {{ cocktail.nome_cocktail }}
{% endblock title %}

{% block content %}
<div class="card mt-3">
    <div class="card-header">
        <h3 class="card-title text-center">{{ cocktail.nome_cocktail }}</h3>
      </div>
    <div class="row no-gutters">
      <div class="col-md-5">
        <img src="{{ cocktail.immagine_cocktail.url }}" class="card-img h-100" alt="{{ cocktail.nome_cocktail }}">
      </div>
      <div class="col-md-7">
        <div class="card-body">  
            <h5 class="card-text text-center">INGREDIENTI : </h5>
            <hr>
            <ul>
                {% for ingredienti in cocktail.ingredienti.all %}
                <li class="text-on-body">{{ ingredienti.ingrediente }}</li>
                {% endfor %}
            </ul>
            <hr>
        
            <h5 class="card-text text-center">PREPARAZIONE : </h5>
            <p class="card-text text-center text-on-body">{{ cocktail.preparazione }}</p>
            <hr>
            <h5 class="card-text text-center">STORIA : </h5>
            <p class="card-text text-center text-on-body">{{ cocktail.storia }}</p>
            <hr>
            <h5 class="card-text text-center">CURIOSITÁ : </h5>
            <p class="card-text text-center text-on-body">{{ cocktail.curiositá }}</p>
        </div>
      </div>
    </div>
    <div class="card-footer"></div>
  </div>

<!-- <div class="widgetcocktail">
    <div class="text-center"><h3>{{ cocktail.nome_cocktail }}</h3></div>
    <div class="row"><img src="{{ cocktail.immagine_cocktail.url }}" class="img-fluid mx-auto" alt="{{ cocktail.nome_cocktail }}"></div>
    <p class="text-center">{{ cocktail.ingredienti.all|join:"," }}</p>
</div> -->
{% endblock content %}