From 986c5744ffd141e1308d10203c4adc13c62ec22e Mon Sep 17 00:00:00 2001
From: ShamikG17 <shamikghadge.17@gmail.com>
Date: Mon, 26 Jul 2021 15:56:12 +0530
Subject: [PATCH 1/2] Update Homepage cards

---
 css/style.css |  63 ++++++++++++++++++++++++++++
 index.html    | 112 ++++++++++++++++++++++++++++++++++++++------------
 2 files changed, 149 insertions(+), 26 deletions(-)

diff --git a/css/style.css b/css/style.css
index 03c0ed0..144108f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -914,6 +914,69 @@ body.mobile-nav-active #mobile-nav-toggle {
   padding: 0 20px 20px 20px;
 }
 
+/* Homepage cards */
+
+.flip-card {
+  background-color: transparent;
+  cursor: pointer;
+  height: 330px;  
+  perspective: 1000px;
+}
+
+.flip-card img {
+  height: 220px;
+  width: 220px;
+  border-radius: 120px;
+}
+
+.flip-card .ach-name {
+  font-size: 20px;
+  padding-top: 10px;
+  padding-bottom: 0px;
+}
+
+.flip-card .blue-text {
+  color: #00aeda;
+}
+
+.flip-card .ach-pos {
+  color: #000;
+  font-size: 14px;
+}
+
+.flip-card-inner {
+  position: relative;
+  padding: 10px 0;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.8s;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+  transform-style: preserve-3d;
+}
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg);
+}
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+}
+
+.flip-card-back {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  transform: rotateY(180deg);
+}
+.flip-card-back p {
+  margin: 0 10px;
+}
+
+/* End Homepage cards */
 /*--------------------------------*/
 
 
diff --git a/index.html b/index.html
index 52e07b1..e1c3f21 100644
--- a/index.html
+++ b/index.html
@@ -257,49 +257,73 @@ <h3 class="section-title">About The Cells</h3>
             <div class="row">
 
                 <div class="col-lg-3 col-md-6 wow fadeInUp">
-                    <div class="img-wrap">
-                        <div class="per-wrap">
-                            <img src="images/art.jpg">
-                            <div>
-                                <h3 class="blue-text ach-name">Art Circle</h3>
-                                <p class="ach-pos">Unleash your artistic side</p>
-                            </div>
-                        </div>
+                  <div class="flip-card">
+                    <div class="flip-card-inner">
+                      <div class="flip-card-front">
+                        <img src="images/art.jpg">
+                        <div>
+                          <h3 class="blue-text ach-name">Art Circle</h3>
+                          <p class="ach-pos">Unleash your artistic side</p>
+                      </div>
+                      </div>
+                      <div class="flip-card-back">
+                        <h1 class="blue-text">Art Circle</h1>
+                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis ipsum voluptatum natus perspiciatis est autem soluta, facere excepturi reprehenderit ratione nulla vero saepe dolorem quidem quae nemo amet atque odio!</p>
+                      </div>
                     </div>
+                  </div>
                 </div>
 
                 <div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
-                    <div class="img-wrap">
-                        <div class="per-wrap">
+                  <div class="flip-card">
+                    <div class="flip-card-inner">
+                      <div class="flip-card-front">
                             <img src="images/cpdc.jpg">
                             <div>
                                 <h3 class="blue-text ach-name">CPDC Cell</h3>
                                 <p class="ach-pos">Develop your personality</p>
                             </div>
+                          </div>
+                          <div class="flip-card-back">
+                            <h1 class="blue-text">CPDC Cell</h1>
+                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis ipsum voluptatum natus perspiciatis est autem soluta, facere excepturi reprehenderit ratione nulla vero saepe dolorem quidem quae nemo amet atque odio!</p>
+                          </div>
                         </div>
                     </div>
                 </div>
 
                 <div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
-                    <div class="img-wrap">
-                        <div class="per-wrap">
+                  <div class="flip-card">
+                    <div class="flip-card-inner">
+                      <div class="flip-card-front">
                             <img src="images/pdc.jpg">
                             <div>
                                 <h3 class="blue-text ach-name">PDC Cell</h3>
                                 <p class="ach-pos">Improve your professional skills</p>
                             </div>
+                            </div>
+                            <div class="flip-card-back">
+                              <h1 class="blue-text">PDC Cell</h1>
+                              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis ipsum voluptatum natus perspiciatis est autem soluta, facere excepturi reprehenderit ratione nulla vero saepe dolorem quidem quae nemo amet atque odio!</p>
+                            </div>
                         </div>
                     </div>
                 </div>
 
                 <div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
-                    <div class="img-wrap">
-                        <div class="per-wrap">
+                  <div class="flip-card">
+                    <div class="flip-card-inner">
+                      <div class="flip-card-front">
                             <img src="images/nss.jpg">
                             <div>
                                 <h3 class="blue-text ach-name">NSS Cell</h3>
                                 <p class="ach-pos">Work towards better society</p>
                             </div>
+                            </div>
+                            <div class="flip-card-back">
+                              <h1 class="blue-text">NSS Cell</h1>
+                              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis ipsum voluptatum natus perspiciatis est autem soluta, facere excepturi reprehenderit ratione nulla vero saepe dolorem quidem quae nemo amet atque odio!</p>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -309,49 +333,73 @@ <h3 class="blue-text ach-name">NSS Cell</h3>
             <div class="row" style="padding-top: 20px;">
 
                 <div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
-                    <div class="img-wrap">
-                        <div class="per-wrap">
+                  <div class="flip-card">
+                    <div class="flip-card-inner">
+                      <div class="flip-card-front">
                             <img src="images/isr.jpg">
                             <div>
                                 <h3 class="blue-text ach-name">ISR Cell</h3>
                                 <p class="ach-pos">Institution as a social paradise</p>
                             </div>
+                            </div>
+                            <div class="flip-card-back">
+                              <h1 class="blue-text">ISR Cell</h1>
+                              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis ipsum voluptatum natus perspiciatis est autem soluta, facere excepturi reprehenderit ratione nulla vero saepe dolorem quidem quae nemo amet atque odio!</p>
+                            </div>
                         </div>
                     </div>
                 </div>
 
                 <div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
-                    <div class="img-wrap">
-                        <div class="per-wrap">
+                  <div class="flip-card">
+                    <div class="flip-card-inner">
+                      <div class="flip-card-front">
                             <img src="images/higher.jpg">
                             <div>
                                 <h3 class="blue-text ach-name">Higher Studies Cell</h3>
                                 <p class="ach-pos">Learning never stops</p>
                             </div>
+                            </div>
+                            <div class="flip-card-back">
+                              <h1 class="blue-text">Higher Studies Cell</h1>
+                              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis ipsum voluptatum natus perspiciatis est autem soluta, facere excepturi reprehenderit ratione nulla vero saepe dolorem quidem quae nemo amet atque odio!</p>
+                            </div>
                         </div>
                     </div>
                 </div>
 
                 <div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
-                    <div class="img-wrap">
-                        <div class="per-wrap">
+                  <div class="flip-card">
+                    <div class="flip-card-inner">
+                      <div class="flip-card-front">
                             <img src="images/sports.jpg">
                             <div>
                                 <h3 class="blue-text ach-name">Sports Cell</h3>
                                 <p class="ach-pos">Enjoy a good game</p>
                             </div>
+                            </div>
+                            <div class="flip-card-back">
+                              <h1 class="blue-text">Sports Cell</h1>
+                              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis ipsum voluptatum natus perspiciatis est autem soluta, facere excepturi reprehenderit ratione nulla vero saepe dolorem quidem quae nemo amet atque odio!</p>
+                            </div>
                         </div>
                     </div>
                 </div>
 
                 <div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
-                    <div class="img-wrap">
-                        <div class="per-wrap">
+                  <div class="flip-card">
+                    <div class="flip-card-inner">
+                      <div class="flip-card-front">
                             <img src="images/grievance.jpg">
                             <div>
                                 <h3 class="blue-text ach-name">Grievance Cell</h3>
                                 <p class="ach-pos">Sharing is caring</p>
                             </div>
+                            </div>
+                            <div class="flip-card-back">
+                              <h1 class="blue-text">Grievance Cell</h1>
+                              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis ipsum voluptatum natus perspiciatis est autem soluta, facere excepturi reprehenderit ratione nulla vero saepe dolorem quidem quae nemo amet atque odio!</p>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -365,25 +413,37 @@ <h3 class="blue-text ach-name">Grievance Cell</h3>
                 </div>
 
                 <div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
-                    <div class="img-wrap">
-                        <div class="per-wrap">
+                  <div class="flip-card">
+                    <div class="flip-card-inner">
+                      <div class="flip-card-front">
                             <img src="images/photography.jpg">
                             <div>
                                 <h3 class="blue-text ach-name">Photography Cell</h3>
                                 <p class="ach-pos">Change your lens, Change you story</p>
                             </div>
+                            </div>
+                            <div class="flip-card-back">
+                              <h1 class="blue-text">Photography Cell</h1>
+                              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis ipsum voluptatum natus perspiciatis est autem soluta, facere excepturi reprehenderit ratione nulla vero saepe dolorem quidem quae nemo amet atque odio!</p>
+                            </div>
                         </div>
                     </div>
                 </div>
 
                 <div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
-                    <div class="img-wrap">
-                        <div class="per-wrap">
+                  <div class="flip-card">
+                    <div class="flip-card-inner">
+                      <div class="flip-card-front">
                             <img src="images/CCC.jpg">
                             <div>
                                 <h3 class="blue-text ach-name">Competitive Coding Cell</h3>
                                 <p class="ach-pos">Coding is Essential</p>
                             </div>
+                            </div>
+                            <div class="flip-card-back">
+                              <h1 class="blue-text">Competitive Coding Cell</h1>
+                              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis ipsum voluptatum natus perspiciatis est autem soluta, facere excepturi reprehenderit ratione nulla vero saepe dolorem quidem quae nemo amet atque odio!</p>
+                            </div>
                         </div>
                     </div>
                 </div>

From f208f05da3b57aadcd4998becd2556c22ffcee26 Mon Sep 17 00:00:00 2001
From: ShamikG17 <shamikghadge.17@gmail.com>
Date: Sun, 31 Oct 2021 14:04:56 +0530
Subject: [PATCH 2/2] Revert "Update Homepage cards"

This reverts commit 986c5744ffd141e1308d10203c4adc13c62ec22e.
---
 css/style.css |  63 ----------------------------
 index.html    | 112 ++++++++++++--------------------------------------
 2 files changed, 26 insertions(+), 149 deletions(-)

diff --git a/css/style.css b/css/style.css
index 144108f..03c0ed0 100644
--- a/css/style.css
+++ b/css/style.css
@@ -914,69 +914,6 @@ body.mobile-nav-active #mobile-nav-toggle {
   padding: 0 20px 20px 20px;
 }
 
-/* Homepage cards */
-
-.flip-card {
-  background-color: transparent;
-  cursor: pointer;
-  height: 330px;  
-  perspective: 1000px;
-}
-
-.flip-card img {
-  height: 220px;
-  width: 220px;
-  border-radius: 120px;
-}
-
-.flip-card .ach-name {
-  font-size: 20px;
-  padding-top: 10px;
-  padding-bottom: 0px;
-}
-
-.flip-card .blue-text {
-  color: #00aeda;
-}
-
-.flip-card .ach-pos {
-  color: #000;
-  font-size: 14px;
-}
-
-.flip-card-inner {
-  position: relative;
-  padding: 10px 0;
-  width: 100%;
-  height: 100%;
-  text-align: center;
-  transition: transform 0.8s;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
-  transform-style: preserve-3d;
-}
-
-.flip-card:hover .flip-card-inner {
-  transform: rotateY(180deg);
-}
-
-.flip-card-front, .flip-card-back {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  backface-visibility: hidden;
-}
-
-.flip-card-back {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  transform: rotateY(180deg);
-}
-.flip-card-back p {
-  margin: 0 10px;
-}
-
-/* End Homepage cards */
 /*--------------------------------*/
 
 
diff --git a/index.html b/index.html
index e1c3f21..52e07b1 100644
--- a/index.html
+++ b/index.html
@@ -257,73 +257,49 @@ <h3 class="section-title">About The Cells</h3>
             <div class="row">
 
                 <div class="col-lg-3 col-md-6 wow fadeInUp">
-                  <div class="flip-card">
-                    <div class="flip-card-inner">
-                      <div class="flip-card-front">
-                        <img src="images/art.jpg">
-                        <div>
-                          <h3 class="blue-text ach-name">Art Circle</h3>
-                          <p class="ach-pos">Unleash your artistic side</p>
-                      </div>
-                      </div>
-                      <div class="flip-card-back">
-                        <h1 class="blue-text">Art Circle</h1>
-                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis ipsum voluptatum natus perspiciatis est autem soluta, facere excepturi reprehenderit ratione nulla vero saepe dolorem quidem quae nemo amet atque odio!</p>
-                      </div>
+                    <div class="img-wrap">
+                        <div class="per-wrap">
+                            <img src="images/art.jpg">
+                            <div>
+                                <h3 class="blue-text ach-name">Art Circle</h3>
+                                <p class="ach-pos">Unleash your artistic side</p>
+                            </div>
+                        </div>
                     </div>
-                  </div>
                 </div>
 
                 <div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
-                  <div class="flip-card">
-                    <div class="flip-card-inner">
-                      <div class="flip-card-front">
+                    <div class="img-wrap">
+                        <div class="per-wrap">
                             <img src="images/cpdc.jpg">
                             <div>
                                 <h3 class="blue-text ach-name">CPDC Cell</h3>
                                 <p class="ach-pos">Develop your personality</p>
                             </div>
-                          </div>
-                          <div class="flip-card-back">
-                            <h1 class="blue-text">CPDC Cell</h1>
-                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis ipsum voluptatum natus perspiciatis est autem soluta, facere excepturi reprehenderit ratione nulla vero saepe dolorem quidem quae nemo amet atque odio!</p>
-                          </div>
                         </div>
                     </div>
                 </div>
 
                 <div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
-                  <div class="flip-card">
-                    <div class="flip-card-inner">
-                      <div class="flip-card-front">
+                    <div class="img-wrap">
+                        <div class="per-wrap">
                             <img src="images/pdc.jpg">
                             <div>
                                 <h3 class="blue-text ach-name">PDC Cell</h3>
                                 <p class="ach-pos">Improve your professional skills</p>
                             </div>
-                            </div>
-                            <div class="flip-card-back">
-                              <h1 class="blue-text">PDC Cell</h1>
-                              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis ipsum voluptatum natus perspiciatis est autem soluta, facere excepturi reprehenderit ratione nulla vero saepe dolorem quidem quae nemo amet atque odio!</p>
-                            </div>
                         </div>
                     </div>
                 </div>
 
                 <div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
-                  <div class="flip-card">
-                    <div class="flip-card-inner">
-                      <div class="flip-card-front">
+                    <div class="img-wrap">
+                        <div class="per-wrap">
                             <img src="images/nss.jpg">
                             <div>
                                 <h3 class="blue-text ach-name">NSS Cell</h3>
                                 <p class="ach-pos">Work towards better society</p>
                             </div>
-                            </div>
-                            <div class="flip-card-back">
-                              <h1 class="blue-text">NSS Cell</h1>
-                              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis ipsum voluptatum natus perspiciatis est autem soluta, facere excepturi reprehenderit ratione nulla vero saepe dolorem quidem quae nemo amet atque odio!</p>
-                            </div>
                         </div>
                     </div>
                 </div>
@@ -333,73 +309,49 @@ <h1 class="blue-text">NSS Cell</h1>
             <div class="row" style="padding-top: 20px;">
 
                 <div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
-                  <div class="flip-card">
-                    <div class="flip-card-inner">
-                      <div class="flip-card-front">
+                    <div class="img-wrap">
+                        <div class="per-wrap">
                             <img src="images/isr.jpg">
                             <div>
                                 <h3 class="blue-text ach-name">ISR Cell</h3>
                                 <p class="ach-pos">Institution as a social paradise</p>
                             </div>
-                            </div>
-                            <div class="flip-card-back">
-                              <h1 class="blue-text">ISR Cell</h1>
-                              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis ipsum voluptatum natus perspiciatis est autem soluta, facere excepturi reprehenderit ratione nulla vero saepe dolorem quidem quae nemo amet atque odio!</p>
-                            </div>
                         </div>
                     </div>
                 </div>
 
                 <div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
-                  <div class="flip-card">
-                    <div class="flip-card-inner">
-                      <div class="flip-card-front">
+                    <div class="img-wrap">
+                        <div class="per-wrap">
                             <img src="images/higher.jpg">
                             <div>
                                 <h3 class="blue-text ach-name">Higher Studies Cell</h3>
                                 <p class="ach-pos">Learning never stops</p>
                             </div>
-                            </div>
-                            <div class="flip-card-back">
-                              <h1 class="blue-text">Higher Studies Cell</h1>
-                              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis ipsum voluptatum natus perspiciatis est autem soluta, facere excepturi reprehenderit ratione nulla vero saepe dolorem quidem quae nemo amet atque odio!</p>
-                            </div>
                         </div>
                     </div>
                 </div>
 
                 <div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
-                  <div class="flip-card">
-                    <div class="flip-card-inner">
-                      <div class="flip-card-front">
+                    <div class="img-wrap">
+                        <div class="per-wrap">
                             <img src="images/sports.jpg">
                             <div>
                                 <h3 class="blue-text ach-name">Sports Cell</h3>
                                 <p class="ach-pos">Enjoy a good game</p>
                             </div>
-                            </div>
-                            <div class="flip-card-back">
-                              <h1 class="blue-text">Sports Cell</h1>
-                              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis ipsum voluptatum natus perspiciatis est autem soluta, facere excepturi reprehenderit ratione nulla vero saepe dolorem quidem quae nemo amet atque odio!</p>
-                            </div>
                         </div>
                     </div>
                 </div>
 
                 <div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
-                  <div class="flip-card">
-                    <div class="flip-card-inner">
-                      <div class="flip-card-front">
+                    <div class="img-wrap">
+                        <div class="per-wrap">
                             <img src="images/grievance.jpg">
                             <div>
                                 <h3 class="blue-text ach-name">Grievance Cell</h3>
                                 <p class="ach-pos">Sharing is caring</p>
                             </div>
-                            </div>
-                            <div class="flip-card-back">
-                              <h1 class="blue-text">Grievance Cell</h1>
-                              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis ipsum voluptatum natus perspiciatis est autem soluta, facere excepturi reprehenderit ratione nulla vero saepe dolorem quidem quae nemo amet atque odio!</p>
-                            </div>
                         </div>
                     </div>
                 </div>
@@ -413,37 +365,25 @@ <h1 class="blue-text">Grievance Cell</h1>
                 </div>
 
                 <div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
-                  <div class="flip-card">
-                    <div class="flip-card-inner">
-                      <div class="flip-card-front">
+                    <div class="img-wrap">
+                        <div class="per-wrap">
                             <img src="images/photography.jpg">
                             <div>
                                 <h3 class="blue-text ach-name">Photography Cell</h3>
                                 <p class="ach-pos">Change your lens, Change you story</p>
                             </div>
-                            </div>
-                            <div class="flip-card-back">
-                              <h1 class="blue-text">Photography Cell</h1>
-                              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis ipsum voluptatum natus perspiciatis est autem soluta, facere excepturi reprehenderit ratione nulla vero saepe dolorem quidem quae nemo amet atque odio!</p>
-                            </div>
                         </div>
                     </div>
                 </div>
 
                 <div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
-                  <div class="flip-card">
-                    <div class="flip-card-inner">
-                      <div class="flip-card-front">
+                    <div class="img-wrap">
+                        <div class="per-wrap">
                             <img src="images/CCC.jpg">
                             <div>
                                 <h3 class="blue-text ach-name">Competitive Coding Cell</h3>
                                 <p class="ach-pos">Coding is Essential</p>
                             </div>
-                            </div>
-                            <div class="flip-card-back">
-                              <h1 class="blue-text">Competitive Coding Cell</h1>
-                              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis ipsum voluptatum natus perspiciatis est autem soluta, facere excepturi reprehenderit ratione nulla vero saepe dolorem quidem quae nemo amet atque odio!</p>
-                            </div>
                         </div>
                     </div>
                 </div>