From 63c1d0a639f8b612502f93767016f09ee1c64de8 Mon Sep 17 00:00:00 2001
From: Abed Al Ghani Shaaban <abedshaaban600@gmail.com>
Date: Fri, 3 Nov 2023 12:21:48 +0200
Subject: [PATCH] [styles]: added background color to sections

---
 index.html |  6 +++---
 style.css  | 28 ++++++++++++++++++++++++++++
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 3b39f23..e5567a3 100644
--- a/index.html
+++ b/index.html
@@ -27,7 +27,7 @@ <h1>What makes a developer a good developer?</h1>
         </div>
       </section>
 
-      <section>
+      <section class="s-blue">
         <h2>What is Bad code?</h2>
 
         <div>
@@ -90,7 +90,7 @@ <h2>What makes bad code?</h2>
         </div>
       </section>
 
-      <section>
+      <section class="s-pink">
         <h2>What is clean code?</h2>
 
         <div>
@@ -132,7 +132,7 @@ <h2>Ethics of code</h2>
         </div>
       </section>
 
-      <section>
+      <section class="s-yellow">
         <h2>When to use Comments?</h2>
 
         <div>
diff --git a/style.css b/style.css
index 26f8ac8..3912639 100644
--- a/style.css
+++ b/style.css
@@ -21,6 +21,11 @@ h2 {
   font-size: 39px;
 }
 
+h1,
+h2 {
+  margin-bottom: 30px;
+}
+
 div {
   width: 100%;
   height: 100%;
@@ -44,8 +49,10 @@ img {
 }
 
 p {
+  text-align: justify;
   max-width: 450px;
   padding: 18px;
+  color: rgba(0, 0, 0, 0.6);
 }
 
 ul {
@@ -62,3 +69,24 @@ li {
     flex-direction: column;
   }
 }
+
+.s-blue {
+  background-color: #0802a3;
+  color: white;
+}
+
+.s-pink {
+  background-color: #ff4b91;
+  color: white;
+}
+
+.s-yellow,
+.s-yellow p {
+  background-color: #ffcd4b;
+  color: rgb(0, 0, 0) !important;
+}
+
+.s-blue p,
+.s-pink p {
+  color: rgba(255, 255, 255, 0.8);
+}