styling single meal displau

Author: mitchellr92

MealFinder/main.js

@@ -71,7 +71,7 @@ function addMealToDOM(meal) {
   }
 
   single_mealEl.innerHTML = `
-  <div class="single-Meal">
+  <div class="single-meal">
     <h1>${meal.strMeal}</h1>
     <img src="${meal.strMealThumb}" alt="${meal.strMeal}"/>
     <div class="single-meal-info">

MealFinder/style.css

@@ -88,10 +88,52 @@ input[type="text"] {
   opacity: 0;
 }
 
-.meal:hover .meal-info{
+.meal:hover .meal-info {
   opacity: 1;
 }
 
+.single-meal {
+  margin: 30px auto;
+  width: 70%;
+}
+
+.single-meal img {
+  width: 300px;
+  margin: 15px;
+  border: 4px solid #fff;
+  border-radius: 2px;
+}
+
+.single-meal-info {
+  margin: 20px;
+  padding: 10px;
+  border: 2px dashed #e09850;
+  border-radius: 5px;
+}
+
+.single-meal p {
+  margin: 0;
+  letter-spacing: 0.5px;
+  line-height: 1.5;
+}
+
+.single-meal ul {
+  padding-left: 0;
+  list-style-type: none;
+}
+
+.single-meal ul li {
+  border: 1px solid #ededed;
+  border-radius: 5px;
+  background-color: #fff;
+  display: inline-block;
+  color: #2d2013;
+  font-size: 12px;
+  font-weight: bold;
+  padding: 5px;
+  margin: 0 5px 5px 0;
+}
+
 @media (max-width: 800px) {
 }
 @media (max-width: 700px) {