[styles]: added background color to sections

abedshaaban · Nov 3, 2023 · 63c1d0a · 63c1d0a
1 parent c8eaaa7
commit 63c1d0a
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 3 deletions.
diff --git 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
@@ -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);
+}