Aggiunto CSS Pagina Relativa Cocktails

cocktail_list/templates/cocktail.html

@@ -14,15 +14,16 @@ COCKTAIL  | {{ cocktail.nome_cocktail }}
 {% endblock title %}
 
 {% block content %}
-<div class="card mt-3">
+<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-5">
-        <img src="{{ cocktail.immagine_cocktail.url }}" class="card-img h-100" alt="{{ cocktail.nome_cocktail }}">
-      </div>
-      <div class="col-md-7">
+      <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>

static-storage/css/cocktail.css

@@ -10,3 +10,13 @@
     font-family: 'Indie Flower', cursive;
     font-size: 25px;
 }
+.text_on_image{
+    color:white;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-transform: uppercase;
+    font-size: 2.5em;
+    font-family: 'Faster One', cursive;
+}

static-storage/css/style.css

@@ -47,4 +47,14 @@ a:hover{
     font-size: 1.5em;
     text-transform: uppercase;
     color: black;
+}
+
+.img-fluid {
+    width: 100%;
+}
+
+@media screen and (max-width:600px){
+    h1 {
+        font-size: 1.5rem!important;
+    }
 }