Merge branch 'main' into dropdownMenu

rahulbamnuya · Oct 21, 2024 · c160cb7 · c160cb7
2 parents a614459 + 0e69119
commit c160cb7
Show file tree

Hide file tree

Showing 8 changed files with 364 additions and 232 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -1436,28 +1436,34 @@ body.dark-mode .chapter-card:hover {
 \*-----------------------------------*/
 
 #pricing .container {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  width: 97%;
+  padding: 20px 0px;
+  margin-left: 100px;
+}
 
-  margin-top:  20px;
-  margin-bottom:  20px;
-  width:  97%;
-  padding:  20px 0px;
-  margin-left:  100px;
+.pricing-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px; /* Space between the cards */
+  justify-content: space-around;
 
 }
 
 .pricing-card {
   box-shadow: rgba(53, 31, 31, 0.5) 0px 5px 10px 0px inset;
-  padding: 40px 50px;
+  padding: 20px 30px;
   background-color: var(--seashell);
   text-align: center;
   transition: var(--transition-2);
   border-radius: var(--radius-5);
-  /* box-shadow: var(--shadow-2); */
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  min-height: 150px;
-  margin-top: 100px;
+  flex-basis: 30%; /* Adjust width for 3 cards in a row */
+  min-height: 150px; /* Set the minimum height */
+
 }
 
 .pricing-card button {
@@ -1510,21 +1516,12 @@ body.dark-mode .pricing-card button {
   font-weight: var(--fw-700);
   margin-block-start: 10px;
   padding-left: 25%;
-  padding-right: 25%; 
+  padding-right: 25%;
 }
 .pricing-card .price:hover {
   color: rgb(255, 195, 0);
 }
 
-/* .pricing-card-list {
-  margin-block: 20px 40px;
-  flex-grow: 1;
-} */
-
-.pricing-card-list .card-item:not(:last-child) {
-  border-block-end: 1px solid var(--ghost-white);
-}
-
 .pricing-card .card-text {
   padding-block: 10px;
 }
@@ -1538,7 +1535,7 @@ body.dark-mode .pricing-card button {
   align-self: center;
   margin-top: auto;
 }
-*/ .dark-mode .pricing-card .btn {
+.dark-mode .pricing-card .btn {
   background-color: #8e4949 !important;
   border: none !important;
 }
@@ -1547,6 +1544,22 @@ body.dark-mode .pricing-card button {
   transform: scale(1.1);
 }
 
+/* Responsive design */
+@media (max-width: 768px) {
+  .pricing-card {
+    flex-basis: 45%; /* Adjust for smaller screens */
+    min-height: 200px;
+  }
+}
+
+@media (max-width: 480px) {
+  .pricing-card {
+    flex-basis: 100%; /* Single column layout for small screens */
+    min-height: 180px;
+  }
+}
+
+
 /*-----------------------------------*\
   #AUTHOR
 \*-----------------------------------*/

diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -15,6 +15,148 @@
 .cookie-consent .close-btn {
   background: #000;
 }
+.mySwiper {
+  width: 100%;
+  padding: 50px 0;
+}
+
+.swiper-slide {
+  text-align: center;
+  background: transparent;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 50px;
+  perspective: 1000px; /* For 3D flip effect */
+}
+
+.flip-card {
+  background-color: transparent;
+  width: 100%;
+  max-width: 300px;
+  height: 400px;
+  border: none;
+  cursor: pointer;
+  position: relative;
+}
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.8s;
+  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;
+  border-radius: 15px;
+  overflow: hidden;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  padding: 20px;
+}
+
+.flip-card-front {
+  background-color: #f0f0f0;
+  color: black;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.flip-card-back {
+  background-color: #333;
+  color: white;
+  transform: rotateY(180deg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.card-image {
+  width: 120px;
+  height: 120px;
+  margin-bottom: 20px;
+  border-radius: 50%;
+  overflow: hidden;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.card-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+h2 {
+  font-size: 1.5rem;
+  margin-bottom: 10px;
+  color: #333;
+}
+
+.bio {
+  font-size: 0.9rem;
+  color: #666;
+  margin-bottom: 15px;
+}
+
+.rows-icons {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.rows-icons i {
+  font-size: 1.2rem;
+  color: #666;
+  transition: color 0.3s ease;
+}
+
+.rows-icons i:hover {
+  color: #ff7f50;
+}
+
+.rating {
+  margin-top: 10px;
+}
+
+.rating i {
+  font-size: 1.2rem;
+  color: #ffd700;
+}
+
+/* Dark Mode Styles */
+.dark-mode .flip-card-front {
+  background-color: #2c2c2c;
+  color: white;
+}
+
+.dark-mode .bio {
+  color: #bbb;
+}
+
+.dark-mode .rating i {
+  color: #ffdf00;
+}
+
+.dark-mode .rows-icons i {
+  color: #aaa;
+}
+
+.dark-mode .rows-icons i:hover {
+  color: #ff7f50;
+}
+
 
 /*repetition*/
 swiper-container {
@@ -52,15 +194,7 @@ swiper-container {
 
 /*repetition*/
 /* testimonal card fix by harshcodesit */
-swiper-slide {
-  text-align: center;
-  font-size: 15;
-  background: transparent;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 50px;
-}
+
 /* ########### */
 
 /*repetition*/

diff --git a/assets/html/pricing.html b/assets/html/pricing.html
@@ -461,9 +461,6 @@
     max-width: 30rem; /* Optional max width for cards */
     margin: 1rem; /* Optional margin around each card */
 }
-
-
-
 .card img {
     width: 100%;
     height: auto;
@@ -484,8 +481,6 @@
   display: block;
 }
 
-
-
     </style>
 </head>
 <body>

diff --git a/audiobook.html b/audiobook.html
@@ -14,6 +14,7 @@
       sizes="32x32"
       href="./assets/favicon_package_v0.16/favicon-32x32.png"
     />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
     <link
       rel="icon"
       type="image/png"
@@ -781,7 +782,7 @@ <h4>Explore</h4>
             <h4>follow us</h4>
             <div class="social-links">
               <a href="#"><i class="fab fa-facebook-f"></i></a>
-              <a href="#"><i class="fab fa-twitter"></i></a>
+              <a href="#"><i class="fa-brands fa-x-twitter"></i></a>
               <a href="#"><i class="fab fa-instagram"></i></a>
               <a href="#"><i class="fab fa-linkedin-in"></i></a>
             </div>

diff --git a/copyrightpolicy.html b/copyrightpolicy.html
@@ -475,6 +475,11 @@ <h2>Quick Links</h2>
                     <a href="https://www.discord.com/" target="_blank">
                       <div class="icon">
                         <i class="fab fa-discord" title="Discord" style="cursor: pointer;"></i>
+                        <style>
+                            .dark-mode .fab.fa-discord:hover{
+                                color: #3b5998 !important;
+                            }
+                        </style>
                       </div>
                      </a>
                     <a href="https://www.linkedin.com/in/anurag-verma-b91417253/">
@@ -486,6 +491,11 @@ <h2>Quick Links</h2>
                     <a href="https://x.com/anuragverma_108">
                         <div class="icon">
                             <i class="fab fa-twitter" title="X" style="cursor: pointer;"></i>
+                            <style>
+                                .dark-mode .fab.fa-twitter:hover{
+                                    color: whitesmoke !important;
+                                }
+                            </style>
                         </div>
                     </a>
 
@@ -738,6 +748,7 @@ <h2>Quick Links</h2>
         });
 
       </script>
+      <style>
 </body>
 
 </html>