diff --git a/index.css b/index.css
index 399b7e8..1e926ab 100644
--- a/index.css
+++ b/index.css
@@ -17,7 +17,9 @@
 h1, h2, h3, h4, h5, h6 {
   font-family: "Playfair Display", Georgia, "Times New Roman", serif;
 }
-
+p{
+  font-size: 1.2rem;
+}
 .display-4 {
   font-size: 2.5rem;
 }
@@ -128,3 +130,15 @@ h1, h2, h3, h4, h5, h6 {
 .blog-footer p:last-child {
   margin-bottom: 0;
 }
+
+.bg-custom {
+  background-color: #06ad6c
+}
+
+.bg-custom1{
+  background-color: #e85838
+}
+
+.bg-custom2{
+  background-color: #f895cc
+}
diff --git a/index.html b/index.html
index bd2757b..dfbc81c 100644
--- a/index.html
+++ b/index.html
@@ -37,7 +37,7 @@
       </nav>
     </div>
 
-    <div class="jumbotron p-3 p-md-5 text-white rounded bg-dark">
+    <div class="jumbotron p-3 p-md-5 text-white rounded bg-custom">
       <div class="col-md-6 px-0">
         <h1 class="display-4 font-italic">Title of a longer featured blog post</h1>
         <p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what's most interesting in this post's contents.</p>
@@ -45,13 +45,13 @@ <h1 class="display-4 font-italic">Title of a longer featured blog post</h1>
       </div>
     </div>
 
-    <div class="row mb-2">
-      <div class="col-md-6">
-        <div class="card flex-md-row mb-4 box-shadow h-md-250">
+    <div class="row mb-2 ">
+      <div class="col-md-6 ">
+        <div class="card flex-md-row mb-4 box-shadow h-md-250 bg-custom1 text-white">
           <div class="card-body d-flex flex-column align-items-start">
             <strong class="d-inline-block mb-2 text-primary">World</strong>
-            <h3 class="mb-0">
-              <a class="text-dark" href="#">Featured post</a>
+            <h3 class="mb-0 ">
+              <a class="text-white" href="#">Featured post</a>
             </h3>
             <div class="mb-1 text-muted">Nov 12</div>
             <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
@@ -61,11 +61,11 @@ <h3 class="mb-0">
         </div>
       </div>
       <div class="col-md-6">
-        <div class="card flex-md-row mb-4 box-shadow h-md-250">
+        <div class="card flex-md-row mb-4 box-shadow h-md-250 bg-custom2 text-white">
           <div class="card-body d-flex flex-column align-items-start">
             <strong class="d-inline-block mb-2 text-success">Design</strong>
             <h3 class="mb-0">
-              <a class="text-dark" href="#">Post title</a>
+              <a class="text-white" href="#">Post title</a>
             </h3>
             <div class="mb-1 text-muted">Nov 11</div>
             <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>