Aggiunto CSS Cocktail

master
Michael Vignotto 2020-06-03 16:57:09 +02:00
parent 603d315a4c
commit 4b6ebdc3fa
10 changed files with 45 additions and 27 deletions

View File

@ -1,22 +1,10 @@
{% extends "base.html" %} {% extends "base.html" %}
{% load static %} {% load static %}
{% block css %} {% block css %}
<style>
.widgetcocktail {
border: 2px solid black;
border-radius: 20px;
text-transform: uppercase;
font-family: 'Faster One', cursive;
color: black;
margin: auto;
}
img {
border-radius: 50px;
max-width: 100%;
}
</style>
<link rel="stylesheet" href="{% static 'css/navbar_style.css' %}"> <link rel="stylesheet" href="{% static 'css/navbar_style.css' %}">
<link href="https://fonts.googleapis.com/css2?family=Faster+One&display=swap" rel="stylesheet"> <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 %} {% endblock css %}
@ -25,9 +13,42 @@ COCKTAIL | {{ cocktail.nome_cocktail }}
{% endblock title %} {% endblock title %}
{% block content %} {% block content %}
<div class="widgetcocktail"> <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="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> <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> <p class="text-center">{{ cocktail.ingredienti.all|join:"," }}</p>
</div> </div> -->
{% endblock content %} {% endblock content %}

View File

@ -0,0 +1,6 @@
.text-on-body{
color: black;
font-family: 'Pacifico', cursive;
font-size: 20px;
}

View File

@ -41,16 +41,7 @@ a:hover{
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.text-carousel{
font-family: 'Faster One', cursive;
}
.carousel-item{
max-width: 100%;
height: 500px;
}
.carousel-item img{
height: 100%!important;
}
#color-for-glass{ #color-for-glass{
font-family: 'Faster One', cursive; font-family: 'Faster One', cursive;
font-size: 1.5em; font-size: 1.5em;