From 5a0df21347a6603ac4d276932e427e2dfd9faeed Mon Sep 17 00:00:00 2001
From: Pratik Gadhiya <28287478+cTxplorer@users.noreply.github.com>
Date: Fri, 30 Oct 2020 15:44:39 +0000
Subject: [PATCH 1/3] fix: multiple backdrop images are shown on first load

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index a64b42c..c3faece 100644
--- a/index.html
+++ b/index.html
@@ -204,7 +204,7 @@
       <main>
         <div class="height-100vh"></div>
         <div class="front-cover">
-          <img id="backdrop" style="transition: background 0.5s ease-in; background: url(media/activities/024-mask-distribution/05.jpg)"/>
+          <img id="backdrop" />
           <div class="backdrop-text">
             First Human Rights Foundation
             <br />

From e1d0a12407a019814ace48a795f03c04954886aa Mon Sep 17 00:00:00 2001
From: Pratik Gadhiya <28287478+cTxplorer@users.noreply.github.com>
Date: Fri, 30 Oct 2020 17:00:03 +0000
Subject: [PATCH 2/3] fix: backdrop styling

---
 index.html        | 14 ++++----------
 styles/config.css | 13 ++++++-------
 2 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/index.html b/index.html
index c3faece..77fa22a 100644
--- a/index.html
+++ b/index.html
@@ -202,20 +202,15 @@
       </div>
 
       <main>
-        <div class="height-100vh"></div>
+        <!-- <div class="height-100vh"></div> -->
         <div class="front-cover">
           <img id="backdrop" />
           <div class="backdrop-text">
             First Human Rights Foundation
             <br />
             <br />
-            <span style="font-size: 18px"
-              >Everyone's right is our mission!</span
-            >
-            <br />
-            <br />
-            <br />
-            <span style="font-size: 14px">Registered With Central Government of India (Reg-No.166151/16)</span>
+            <span style="font-size: 18px">Everyone's right is our mission!</span>
+            <span style="font-size: 14px;position: absolute;bottom: 24px;">Registered With Central Government of India (Reg-No.166151/16)</span>
           </div>
         </div>
 
@@ -367,8 +362,7 @@ <h3 class="heading">Be a member</h3>
       let currImg = 0;
       setInterval(
         () => {
-          backdropEle.style.background =
-            `url(${backdropImgs[currImg++]}) center center no-repeat`;
+          backdropEle.style['background-image'] = `url(${backdropImgs[currImg++]})`;
           if (currImg === backdropImgs.length)
             currImg = 0;
         },
diff --git a/styles/config.css b/styles/config.css
index b893376..154f240 100644
--- a/styles/config.css
+++ b/styles/config.css
@@ -24,19 +24,18 @@ body {
 }
 
 .front-cover {
-  position: absolute;
-  top: 0;
-  border: 0;
-  left: 0;
-  right: 0;
+  position: relative;
+  margin-left: -32px;
+  margin-right: -32px;
   height: 100vh;
-  object-fit: cover;
 }
 
 .front-cover img {
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
 }
 
 .front-cover .backdrop-text {

From 8c128d38e8c4391f852d6e92f638997dde5dc461 Mon Sep 17 00:00:00 2001
From: Pratik Gadhiya <28287478+cTxplorer@users.noreply.github.com>
Date: Fri, 30 Oct 2020 17:03:37 +0000
Subject: [PATCH 3/3] mend

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 77fa22a..9795f84 100644
--- a/index.html
+++ b/index.html
@@ -204,7 +204,7 @@
       <main>
         <!-- <div class="height-100vh"></div> -->
         <div class="front-cover">
-          <img id="backdrop" />
+          <img id="backdrop" style="transition: background 0.5s ease-in-out; background-image: url(media/activities/024-mask-distribution/05.jpg);" />
           <div class="backdrop-text">
             First Human Rights Foundation
             <br />