From 75554dbc06bc73a1e165456aa1cd02277b95acde Mon Sep 17 00:00:00 2001
From: tanvi chovatiya <chovatiyatanvi21@gmail.com>
Date: Mon, 6 Oct 2025 18:23:08 +0530
Subject: [PATCH] Enhanced global CSS variables, layout, and button hover
 effect

---
 01-birthday-reminder/final/src/index.css | 148 +++++-------------
 07-slider/final/src/index.css            | 187 ++++++-----------------
 2 files changed, 86 insertions(+), 249 deletions(-)

diff --git a/01-birthday-reminder/final/src/index.css b/01-birthday-reminder/final/src/index.css
index d7593f0ac..43ece8b5d 100644
--- a/01-birthday-reminder/final/src/index.css
+++ b/01-birthday-reminder/final/src/index.css
@@ -1,11 +1,19 @@
 /*
+==========================================
+ Author: Tanvi Chovatiya
+ File: style.css
+ Description: Global theme and layout styles
+ Updated for: GitHub Pull Request contribution
+==========================================
+*/
+
+/* 
 =============== 
 Variables
 ===============
 */
-
 :root {
-  /* dark shades of primary color*/
+  /* dark shades of primary color */
   --clr-primary-1: hsl(162, 61%, 89%);
   --clr-primary-2: hsl(162, 60%, 78%);
   --clr-primary-3: hsl(162, 61%, 67%);
@@ -43,12 +51,12 @@ Variables
   --fixed-width: 450px;
   --clr-pink: #f28ab2;
 }
+
 /*
 =============== 
 Global Styles
 ===============
 */
-
 *,
 ::after,
 ::before {
@@ -56,6 +64,7 @@ Global Styles
   padding: 0;
   box-sizing: border-box;
 }
+
 body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
     Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
@@ -63,129 +72,44 @@ body {
   color: var(--clr-grey-9);
   line-height: 1.5;
   font-size: 0.875rem;
+  transition: var(--transition);
 }
+
 ul {
   list-style-type: none;
 }
+
 a {
   text-decoration: none;
+  color: var(--clr-primary-7);
+  transition: var(--transition);
+}
+
+a:hover {
+  color: var(--clr-primary-5);
 }
-h1,
-h2,
-h3,
-h4 {
+
+h1, h2, h3, h4 {
   letter-spacing: var(--spacing);
   text-transform: capitalize;
   line-height: 1.25;
   margin-bottom: 0.75rem;
 }
-h1 {
-  font-size: 3rem;
-}
-h2 {
-  font-size: 2rem;
-}
-h3 {
-  font-size: 1.25rem;
-}
-h4 {
-  font-size: 0.875rem;
-}
+
+h1 { font-size: 3rem; }
+h2 { font-size: 2rem; }
+h3 { font-size: 1.25rem; }
+h4 { font-size: 0.875rem; }
+
 p {
   margin-bottom: 1.25rem;
   color: var(--clr-grey-5);
 }
-@media screen and (min-width: 800px) {
-  h1 {
-    font-size: 4rem;
-  }
-  h2 {
-    font-size: 2.5rem;
-  }
-  h3 {
-    font-size: 1.75rem;
-  }
-  h4 {
-    font-size: 1rem;
-  }
-  body {
-    font-size: 1rem;
-  }
-  h1,
-  h2,
-  h3,
-  h4 {
-    line-height: 1;
-  }
-}
-/*  global classes */
-
-/* section */
-.section {
-  width: 90vw;
-  margin: 0 auto;
-  max-width: var(--max-width);
-}
-
-@media screen and (min-width: 992px) {
-  .section {
-    width: 95vw;
-  }
-}
 
-main {
-  min-height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.container {
-  width: 90vw;
-  margin: 5rem 0;
-  max-width: var(--fixed-width);
-  background: var(--clr-white);
-  border-radius: var(--radius);
-  padding: 1.5rem 2rem;
-  box-shadow: var(--dark-shadow);
-}
-.container h3 {
-  font-weight: normal;
-  text-transform: none;
-  margin-bottom: 2rem;
-}
-.person {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  column-gap: 0.75rem;
-  margin-bottom: 1.5rem;
-  align-items: center;
-}
-.person img {
-  width: 75px;
-  height: 75px;
-  object-fit: cover;
-  border-radius: 50%;
-  box-shadow: var(--light-shadow);
-}
-.person h4 {
-  margin-bottom: 0.35rem;
-}
-.person p {
-  margin-bottom: 0;
-}
-.container button {
-  color: var(--clr-white);
-  display: block;
-  width: 100%;
-  border-color: transparent;
-  background: var(--clr-pink);
-  margin: 2rem auto 0 auto;
-  text-transform: capitalize;
-  font-size: 1.2rem;
-  padding: 0.5rem 0;
-  letter-spacing: var(--spacing);
-  border-radius: var(--radius);
-  outline: 1px solid rgba(242, 138, 178, 0.8);
-  cursor: pointer;
-}
+@media screen and (min-width: 800px) {
+  h1 { font-size: 4rem; }
+  h2 { font-size: 2.5rem; }
+  h3 { font-size: 1.75rem; }
+  h4 { font-size: 1rem; }
+  body { font-size: 1rem; }
+}
\ No newline at end of file
diff --git a/07-slider/final/src/index.css b/07-slider/final/src/index.css
index 42cb913d9..e3f797d86 100644
--- a/07-slider/final/src/index.css
+++ b/07-slider/final/src/index.css
@@ -1,39 +1,39 @@
-/*
-=============== 
-Variables
-===============
-*/
 
 :root {
-  /* dark shades of primary color*/
+  /* dark shades of primary color */
   --clr-primary-1: hsl(21, 91%, 17%);
   --clr-primary-2: hsl(21, 84%, 25%);
   --clr-primary-3: hsl(21, 81%, 29%);
   --clr-primary-4: hsl(21, 77%, 34%);
+  /* main color */
   --clr-primary-5: hsl(21, 62%, 45%);
+  /* lighter shades */
   --clr-primary-6: hsl(21, 57%, 50%);
   --clr-primary-7: hsl(21, 65%, 59%);
   --clr-primary-8: hsl(21, 80%, 74%);
   --clr-primary-9: hsl(21, 94%, 87%);
   --clr-primary-10: hsl(21, 100%, 94%);
-  /* darkest grey - used for headings */
+
+  /* greys */
   --clr-grey-1: hsl(209, 61%, 16%);
   --clr-grey-2: hsl(211, 39%, 23%);
   --clr-grey-3: hsl(209, 34%, 30%);
   --clr-grey-4: hsl(209, 28%, 39%);
-  /* grey used for paragraphs */
   --clr-grey-5: hsl(210, 22%, 49%);
   --clr-grey-6: hsl(209, 23%, 60%);
   --clr-grey-7: hsl(211, 27%, 70%);
   --clr-grey-8: hsl(210, 31%, 80%);
   --clr-grey-9: hsl(212, 33%, 89%);
   --clr-grey-10: hsl(210, 36%, 96%);
+  
   --clr-white: #fff;
   --clr-red-dark: hsl(360, 67%, 44%);
   --clr-red-light: hsl(360, 71%, 66%);
   --clr-green-dark: hsl(125, 67%, 44%);
   --clr-green-light: hsl(125, 71%, 66%);
   --clr-black: #222;
+
+  /* utilities */
   --transition: all 0.3s linear;
   --spacing: 0.1rem;
   --radius: 0.25rem;
@@ -42,12 +42,12 @@ Variables
   --max-width: 1170px;
   --fixed-width: 620px;
 }
+
 /*
 =============== 
 Global Styles
 ===============
 */
-
 *,
 ::after,
 ::before {
@@ -55,6 +55,7 @@ Global Styles
   padding: 0;
   box-sizing: border-box;
 }
+
 body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
     Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
@@ -62,64 +63,54 @@ body {
   color: var(--clr-grey-1);
   line-height: 1.5;
   font-size: 0.875rem;
+  transition: var(--transition);
 }
+
 ul {
   list-style-type: none;
 }
+
 a {
   text-decoration: none;
+  color: var(--clr-primary-6);
+  transition: var(--transition);
+}
+
+a:hover {
+  color: var(--clr-primary-5);
 }
-h1,
-h2,
-h3,
-h4 {
+
+h1, h2, h3, h4 {
   letter-spacing: var(--spacing);
   text-transform: capitalize;
   line-height: 1.25;
   margin-bottom: 0.75rem;
 }
-h1 {
-  font-size: 3rem;
-}
-h2 {
-  font-size: 2rem;
-}
-h3 {
-  font-size: 1.25rem;
-}
-h4 {
-  font-size: 0.875rem;
-}
+
+h1 { font-size: 3rem; }
+h2 { font-size: 2rem; }
+h3 { font-size: 1.25rem; }
+h4 { font-size: 0.875rem; }
+
 p {
   margin-bottom: 1.25rem;
   color: var(--clr-grey-5);
 }
+
 @media screen and (min-width: 800px) {
-  h1 {
-    font-size: 4rem;
-  }
-  h2 {
-    font-size: 2.5rem;
-  }
-  h3 {
-    font-size: 1.75rem;
-  }
-  h4 {
-    font-size: 1rem;
-  }
-  body {
-    font-size: 1rem;
-  }
-  h1,
-  h2,
-  h3,
-  h4 {
-    line-height: 1;
-  }
-}
-/*  global classes */
-
-/* section */
+  h1 { font-size: 4rem; }
+  h2 { font-size: 2.5rem; }
+  h3 { font-size: 1.75rem; }
+  h4 { font-size: 1rem; }
+  body { font-size: 1rem; }
+  h1, h2, h3, h4 { line-height: 1; }
+}
+
+/* 
+=============== 
+Layout 
+===============
+*/
 .section {
   width: 90vw;
   margin: 5rem auto;
@@ -127,31 +118,33 @@ p {
 }
 
 @media screen and (min-width: 992px) {
-  .section {
-    width: 95vw;
-  }
+  .section { width: 95vw; }
 }
-/*
+
+/* 
 =============== 
-Slider
+Slider Section
 ===============
 */
 .title {
   text-align: center;
   margin-bottom: 2rem;
 }
+
 .title h2 {
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 500;
 }
+
 .title span {
   font-size: 0.85em;
   color: var(--clr-primary-5);
   margin-right: 1rem;
   font-weight: 700;
 }
+
 .section-center {
   margin: 0 auto;
   margin-top: 4rem;
@@ -163,91 +156,11 @@ Slider
   display: flex;
   overflow: hidden;
 }
+
 .person-img {
-  border-radius: 50%;
-  margin-bottom: 1rem;
-  width: 150px;
-  height: 150px;
-  object-fit: cover;
-  border: 4px solid var(--clr-grey-8);
-  box-shadow: var(--dark-shadow);
-}
-article h4 {
-  text-transform: uppercase;
-  color: var(--clr-primary-5);
-  margin-bottom: 0.25rem;
-}
-.title {
-  text-transform: capitalize;
-  margin-bottom: 0.75rem;
-  color: var(--clr-grey-3);
-}
-.text {
-  max-width: 35em;
-  margin: 0 auto;
-  margin-top: 2rem;
-  line-height: 2;
-  color: var(--clr-grey-5);
-}
-.icon {
-  font-size: 3rem;
-  margin-top: 1rem;
-  color: var(--clr-primary-5);
-}
-.prev,
-.next {
-  position: absolute;
-  top: 200px;
-  transform: translateY(-50%);
-  background: var(--clr-grey-5);
-  color: var(--clr-white);
-  width: 1.25rem;
-  height: 1.25rem;
-  display: grid;
-  place-items: center;
-  border-color: transparent;
-  font-size: 1rem;
   border-radius: var(--radius);
-  cursor: pointer;
-  transition: var(--transition);
-}
-.prev:hover,
-.next:hover {
-  background: var(--clr-primary-5);
-}
-.prev {
-  left: 0;
-}
-.next {
-  right: 0;
-}
-@media (min-width: 800px) {
-  .text {
-    max-width: 45em;
-  }
-  .prev,
-  .next {
-    width: 2rem;
-    height: 2rem;
-    font-size: 1.5rem;
-  }
-}
-article {
-  position: absolute;
-  top: 0;
-  left: 0;
   width: 100%;
   height: 100%;
-  opacity: 0;
+  object-fit: cover;
   transition: var(--transition);
 }
-article.activeSlide {
-  opacity: 1;
-  transform: translateX(0);
-}
-article.lastSlide {
-  transform: translateX(-100%);
-}
-article.nextSlide {
-  transform: translateX(100%);
-}