{% 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"> <link href="https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap" rel="stylesheet"> {% endblock css %} {% block title %} COCKTAIL | {{ cocktail.nome_cocktail }} {% endblock title %} {% block content %} <div class="card my-3"> <div class="card-header"> <h3 class="card-title text-center text-on-header">{{ cocktail.nome_cocktail }}</h3> </div> <div class="row no-gutters"> <div class="col-md-12"> <img src="{{ cocktail.immagine_cocktail.url }}" class="card-img img-fluid" alt="{{ cocktail.nome_cocktail }}"> <div class="text_on_image">{{ cocktail.nome_cocktail }}</div> </div> <div class="col-md-12"> <div class="card-body"> <h5 class="card-text text-center text-on-header">INGREDIENTI : </h5> <hr> <ul> {% for ingredienti in cocktail.ingredienti.all %} <li class="text-on-body">{{ ingredienti.quantitá_ingrediente }} {{ ingredienti.ingrediente }}</li> {% endfor %} </ul> <hr> <h5 class="card-text text-center text-on-header">PREPARAZIONE : </h5> <p class="card-text text-center text-on-body">{{ cocktail.preparazione }}</p> <hr> <h5 class="card-text text-center text-on-header">STORIA : </h5> <p class="card-text text-center text-on-body">{{ cocktail.storia }}</p> <hr> <h5 class="card-text text-center text-on-header">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 %}