ANSHIKA-26#1248 givefeedback updated

README.md

@@ -17,7 +17,7 @@
       <th>Event Description</th>
    </tr>
    <tr>
-      <td><img src="./images/Untitled design.png" width="200" height="auto" loading="lazy" alt="GSSoC 24"/></td>
+      <td><img src="./images/Untitled design.webp" width="200" height="auto" loading="lazy" alt="GSSoC 24"/></td>
       <td>GirlScript Summer of Code 2024</td>
       <td>GirlScript Summer of Code is a three-month-long Open Source Program conducted every summer by GirlScript Foundation. It is an initiative to bring more beginners to Open-Source Software Development.</td>
    </tr>
@@ -245,4 +245,4 @@ We encourage you to explore the website, share your thoughts, and get involved i
     </a>
 </div>
 
-## Show some ❤️ by starring this awesome repository!
+## Show some ❤️ by starring this awesome repository!

backend/package.json

@@ -12,6 +12,7 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
+    "backend": "file:",
     "bcryptjs": "^2.4.3",
     "cors": "^2.8.5",
     "dotenv": "^16.4.5",

blog.html

@@ -365,7 +365,7 @@ <h2>Forgot Password</h2>
             <div class="slider">
               <img src="https://img.icons8.com/emoji/48/000000/sun-emoji.png" alt="Sun" class="icon sun-icon">
               <img src="https://img.icons8.com/emoji/48/000000/crescent-moon-emoji.png" alt="Moon"
-                class="icon moon-icon" margin-right="0px">
+                class="icon moon-icon" style="position: absolute; left:35px;">
             </div>
           </label>
           <span id="mode-label"></span>

category.css

@@ -13,10 +13,10 @@
   gap: 60px;
 }
 .new-category-box {
-  /*background: #f9f9f9;*/ 
+
   border-radius: .75rem;
   box-shadow: 0 10px 20px rgb(0, 0, 0);
-  transition: transform 0.3s, box-shadow 0.3s;
+  /* transition: transform 0.3s, box-shadow 0.3s; */
   width: 19rem;
   display: flex;
   flex-direction: column;
@@ -29,6 +29,10 @@
   box-sizing: border-box;
   box-shadow: 0 10px 20px -5px rgba(0,0,0,0.5);
   color: white;
+  position: relative;
+  overflow: hidden;
+  transition: transform 0.4s ease-in-out;
+
 
 }
 
@@ -87,20 +91,62 @@ img {
   border-radius: 0 0 .75rem .75rem;
 }
 
-.new-category-box:hover .s1, .new-category-box:hover .s2 {
+/* .new-category-box:hover .s1, .new-category-box:hover .s2 {
   width: 100%;
-}
-
+} */
+/* 
 .new-category-box:hover img {
   transform: scale(1.1);
+} */
+
+.new-post-thumbnail img {
+  position: absolute;
+  top : 0; 
+  left : 0  ; 
+  z-index: 0 ;
+  width: 100%;
+  height: 100%;
+  object-fit:cover;
+  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
 }
 
-.new-post-content {
+.new-category-box:hover .new-post-thumbnail img {
+  transform: scale(1.1);  /* Slight zoom-in effect */
+  opacity: 0.3;          /* Transparency on hover */
+}
+
+
+
+
+/* .new-post-content {
   display: flex;
   flex-direction: column;
   padding: 15px;
+} */
+.new-post-content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.5); /* Dark overlay for better contrast */
+  opacity: 0;
+  transition: opacity 0.4s ease-in-out;
+  z-index: 1;
 }
 
+.new-category-box:hover .new-post-content {
+  opacity: 1;
+}
+.new-post-title, .new-post-excerpt, .section-btn {
+  color: #fff; /* White text for visibility over the dark background */
+}
+
+
 .new-post-title {
   font-size: 17px;
   color: #686868;
@@ -130,7 +176,7 @@ img {
   margin-left: 2px;
   overflow: hidden;
   text-overflow: ellipsis;
-  height: 40px;
+  height: 45px;
 }
 
 .new-read-more-link {
@@ -154,6 +200,9 @@ img {
   background: #0e25cf;
 }
 
+
+
+
 /* Responsive Design */
 @media (max-width: 768px) {
   .category-row {
@@ -501,3 +550,9 @@ img {
 [data-theme="dark"] .new-category-box:hover .new-post-excerpt {
   color: var(--hover-text-color);
 }
+.dark .article{
+  background-color: none;	  background-color: none;
+}
+.secondary-title >p{
+  padding: 15px 1px;
+}	

category.html

@@ -17,7 +17,7 @@
 
     <!--css-->
     <!-- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> -->
-
+    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Playfair+Display:700|Raleway:500.700'>
     <link rel="stylesheet" href="category.css">
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="Scroll_and_progressbar.css">
@@ -877,6 +877,84 @@ <h2 class="footer-title secondary-title mt-5">Connect with us</h2>
 <script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
 <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
 <script src="script.js"></script>
+<script>
+    Vue.config.devtools = true;
+
+Vue.component('card', {
+  template: `
+    <div class="card-wrap"
+      @mousemove="handleMouseMove"
+      @mouseenter="handleMouseEnter"
+      @mouseleave="handleMouseLeave"
+      ref="card">
+      <div class="card"
+        :style="cardStyle">
+        <div class="card-bg" :style="[cardBgTransform, cardBgImage]"></div>
+        <div class="card-info">
+          <slot name="header"></slot>
+          <slot name="content"></slot>
+        </div>
+      </div>
+    </div>`,
+  mounted() {
+    this.width = this.$refs.card.offsetWidth;
+    this.height = this.$refs.card.offsetHeight;
+  },
+  props: ['dataImage'],
+  data: () => ({
+    width: 0,
+    height: 0,
+    mouseX: 0,
+    mouseY: 0,
+    mouseLeaveDelay: null }),
+
+  computed: {
+    mousePX() {
+      return this.mouseX / this.width;
+    },
+    mousePY() {
+      return this.mouseY / this.height;
+    },
+    cardStyle() {
+      const rX = this.mousePX * 30;
+      const rY = this.mousePY * -30;
+      return {
+        transform: `rotateY(${rX}deg) rotateX(${rY}deg)` };
+
+    },
+    cardBgTransform() {
+      const tX = this.mousePX * -40;
+      const tY = this.mousePY * -40;
+      return {
+        transform: `translateX(${tX}px) translateY(${tY}px)` };
+
+    },
+    cardBgImage() {
+      return {
+        backgroundImage: `url(${this.dataImage})` };
+
+    } },
+
+  methods: {
+    handleMouseMove(e) {
+      this.mouseX = e.pageX - this.$refs.card.offsetLeft - this.width / 2;
+      this.mouseY = e.pageY - this.$refs.card.offsetTop - this.height / 2;
+    },
+    handleMouseEnter() {
+      clearTimeout(this.mouseLeaveDelay);
+    },
+    handleMouseLeave() {
+      this.mouseLeaveDelay = setTimeout(() => {
+        this.mouseX = 0;
+        this.mouseY = 0;
+      }, 1000);
+    } } });
+
+
+
+const app = new Vue({
+  el: '#app' });
+</script>
 
 </body>