Aggiunto CSS Cocktail

cocktail_list/templates/cocktail.html

@@ -1,22 +1,10 @@
 {% extends "base.html" %}
 {% load static %}
 {% 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/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 %}
 
 
@@ -25,9 +13,42 @@ COCKTAIL  | {{ cocktail.nome_cocktail }}
 {% endblock title %}
 
 {% 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="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>
+</div> -->
 {% endblock content %}

static-storage/css/cocktail.css

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

static-storage/css/style.css

@@ -41,16 +41,7 @@ a:hover{
     left: 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{
     font-family: 'Faster One', cursive;
     font-size: 1.5em;