[proj. Lounge] Add classes to lounge.html

Adding/entering classes, styling by them.

LP from Books

Author: matowdev

.vscode/settings.json

@@ -1,7 +1,10 @@
 {
     "cSpell.ignoreWords": [
+        "BYOWS",
         "Baena",
         "Simino",
-        "Starbuzz"
+        "Starbuzz",
+        "Webville",
+        "rosehips"
     ]
 }

Learning_HTML_CSS_Freeman_E/Lounge/beverages/elixir.html

@@ -12,28 +12,28 @@
   <h1>Our Elixirs</h1>
 
   <h2>Green Tea Cooler</h2>
-  <p>
+  <p class="green-tea">
     <img src="../img/green.jpg" alt="Image: Green Tea Cooler">
     Chock full of vitamins and minerals, this elixir combines the healthful benefits of green tea with a twist of
     chamomile blossoms and ginger root.
   </p>
 
   <h2>Raspberry Ice Concentration</h2>
-  <p>
+  <p class="raspberry-ice">
     <img src="../img/lightblue.jpg" alt="Image: Raspberry Ice Concentration">
     Combining raspberry juice with lemon grass, citrus peel and rosehips, this icy drink will make your mind feel and
     crisp.
   </p>
 
   <h2>Blueberry Bliss Elixir</h2>
-  <p>
+  <p class="blueberry-bliss">
     <img src="../img/blue.jpg" alt="Image: Blueberry Bliss Elixir">
     Blueberries and cherry essence mixed into a base of elderflower herb tea will put you in a relaxed state of bliss in
     no time.
   </p>
 
   <h2>Cranberry Antioxidant Blast</h2>
-  <p>
+  <p class="cranberry-antioxidant">
     <img src="../img/red.jpg" alt="Image: Cranberry Antioxidant Blast">
     Wake up to the flavors of cranberry and hibiscus in this vitamin C rich elixir.
   </p>

Learning_HTML_CSS_Freeman_E/Lounge/css/style.css

@@ -14,3 +14,23 @@ h2 {
 p {
   color: maroon;
 }
+
+em {
+  font-family: serif;
+}
+
+.green-tea {
+  color: lightgreen;
+}
+
+.raspberry-ice {
+  color: lightskyblue;
+}
+
+.blueberry-bliss {
+  color: violet;
+}
+
+.cranberry-antioxidant {
+  color: lightcoral;
+}