Merge pull request #549 from PrAyAg9/prayag_la

#534 Issue Solved - Added Translator Tool
Tejashri-Taral · Oct 22, 2024 · b213a42 · b213a42
2 parents 64f05c1 + 1acb78a
commit b213a42
Show file tree

Hide file tree

Showing 11 changed files with 282 additions and 69 deletions.
diff --git a/Style/about.css b/Style/about.css
@@ -0,0 +1,176 @@
+html, body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    font-family: 'Roboto', Arial, sans-serif;
+    background: linear-gradient(135deg, #f7f7f7, #e2e2e2);
+    color: #333;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    min-height: 100vh;
+}
+
+h1, h2 {
+    color: #333;
+}
+
+/* About Us Section */
+.leftabout {
+    margin: 0 50px;
+}
+
+.leftabout h3, .leftabout p {
+    text-align: center;
+}
+
+.about-section {
+    width: 100%;
+    padding: 40px 0;
+    background: #ffffff;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.about-title {
+    font-size: 2.5em;
+    text-align: center;
+    margin-bottom: 35px;
+    font-weight: 700;
+}
+
+/* Second part content css */
+#div2, #div3 {
+    font-size: 22px;
+    font-weight: bold;
+    text-align: center;
+    margin: 7px 22px;
+}
+
+/* First part: Image left, text right */
+.about-content-first, .about-content-second {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 50px;
+    gap: 30px;
+}
+
+.about-content-second {
+    flex-direction: row-reverse;
+}
+
+.about-text {
+    flex: 1;
+    font-size: 1.5em;
+    line-height: 1.8;
+    margin-right: 20px;
+}
+
+.rightabout {
+    margin: 0 50px;
+}
+
+.about-images img {
+    width: 500px;
+    height: 520px;
+    border-radius: 5%;
+    aspect-ratio: 3/2;
+    opacity: 90%;
+    box-shadow: 0 0 15px rgba(136, 136, 136, 0.5);
+    transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.about-images img:hover {
+    transform: scale(1.05);
+    box-shadow: 0 0 25px rgba(136, 136, 136, 0.7);
+}
+
+.about3 {
+    margin-right: 50px;
+}
+
+.about4 {
+    margin: 50px 25px 20px;
+}
+
+.aboutus-body {
+    font-size: 21px;
+}
+
+.slogan {
+    font-size: 22px;
+    font-weight: bold;
+    margin-bottom: 12px;
+}
+
+.about-container {
+    padding: 0 40px;
+}
+
+
+/* Adding media Queries  */
+@media (min-width: 1980px) {
+.leftabout {
+  margin-left: 250px;
+  margin-right: 250px;
+}
+
+.about3 {
+  margin-right: 230px;
+}
+
+.about4 {
+  margin-left: 180px;
+}
+
+.rightabout {
+  margin-left: 250px;
+  margin-right: 250px;
+}
+
+.aboutus-body {
+  font-size: 25px;
+}
+
+#div2 {
+  font-size: 27px;
+}
+
+#div3 {
+  font-size: 23px;
+}
+}
+
+@media (max-width: 1200px) {
+h3 {
+  font-size: 20px;
+}
+.leftabout p {
+  font-size: 15px;
+}
+
+.rightabout p {
+  font-size: 15px;
+} */
+
+/* sorry for using id and div2 div3 but something was 
+    getting overwritten and this was easy way out */
+#div2 {
+  font-size: 16px;
+}
+
+#div3 {
+  font-size: 16px;
+}
+.about-images img {
+  width: 300px;
+  height: 320px;
+  border-radius: 5%;
+  aspect-ratio: 3/2;
+  opacity: 90%;
+  box-shadow: 0 0 15px 15px rgba(136, 136, 136, 0.5);
+}
+}
diff --git a/about.html b/about.html
@@ -482,8 +482,12 @@ <h2>Subscription Successful!</h2>
           }
       });
 
-  })();
-  </script>
-</body>
+    </script>
+
+    <div class="gtranslate_wrapper"></div>
+    <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>
+
+  </body>
+</html>
 
-</html>
diff --git a/contact.html b/contact.html
@@ -233,8 +233,12 @@ <h1>Subscribe to Newsletter</h1>
     </script>
     </body>
     </html>
-
+
+    <div class="gtranslate_wrapper"></div>
+    <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>
 
 </body>
 
+
 </html>
diff --git a/features.html b/features.html
@@ -48,11 +48,11 @@
             <i class="fa-solid fa-bars menu" id="menu"></i>
         </div>
 
-         <nav class="bg-neutral-100 py-20">
+         <nav class=" bg-neutral-100 py-20">
             <div class="tabs-container">
                 <ul id="tabs" class="tabs">
                     <li class="tab">
-                        <a href="index.html">Home</a>
+                        <a href=" index.html">Home</a>
                         <div class="cursor"></div>
                     </li>
                     <li class="tab">
@@ -81,12 +81,12 @@
         </nav>
 
         <nav class="utils">
-            <ul class="nav-links">
+            <ul class=" nav-links ">
                 <li class="nav-link">
                     <i class="fa-solid fa-cart-shopping"></i>
                 </li>
-                <li class="nav-link">
-                    <a href="login-sginup.html">
+                <li class=" nav-link ">
+                    <a href=" login-sginup.html">
                         <i class="fa-solid fa-user"></i>
                     </a>
                 </li>
@@ -99,14 +99,14 @@
 
     <!-- Main Content -->
     <main>
-        <section class="feature">
+        <section class=" feature ">
             <h3 onclick="toggleAnswer(0)">User-Experience</h3>
-            <p class="answer">The TrendTrove website features a clean and organized layout, ensuring users can easily navigate through various sections, including Home, About, Features, Products, and Contact Us. The top navigation bar remains accessible, allowing for quick access to essential pages.
+            <p class=" answer">The TrendTrove website features a clean and organized layout, ensuring users can easily navigate through various sections, including Home, About, Features, Products, and Contact Us. The top navigation bar remains accessible, allowing for quick access to essential pages.
 A modern and aesthetically pleasing design enhances the shopping experience. High-quality images and a consistent color scheme create a visually appealing environment that resonates with the brand identity.</p>
         </section>
-        <section class="feature">
+        <section class=" feature ">
             <h3 onclick="toggleAnswer(1)">Seamless Integration</h3>
-            <p class="answer">TrendTrove is designed to integrate effortlessly with various platforms and services, ensuring that users can access a unified shopping experience without disruption. Whether users are browsing on desktop or mobile, the transition is smooth and intuitive.
+            <p class=" answer ">TrendTrove is designed to integrate effortlessly with various platforms and services, ensuring that users can access a unified shopping experience without disruption. Whether users are browsing on desktop or mobile, the transition is smooth and intuitive.
 The website seamlessly integrates with popular social media channels, allowing users to share products, reviews, and recommendations with ease. This fosters community engagement and enhances brand visibility.</p>
         </section>
         <section class="feature">
@@ -138,7 +138,7 @@ <h1>Contact Us</h1>
 
                 <li class="border-list">
                 </li>
-                <li class="socials">
+                <li class=" socials ">
                     <a href="https://www.linkedin.com/in/tejashri-taral-5006a82a0/" id="linkedin" target="_blank">
                         <i class="fa-brands fa-linkedin"></i>
                     </a>
@@ -157,7 +157,7 @@ <h1>Contact Us</h1>
 
         <div class="footer-section quick-links">
             <h1>Quick Links</h1>
-            <ul class="footer-list">
+            <ul class=" footer-list ">
                 <li><a href="about.html">About Us</a></li>
                 <li><a href="terms-conditions.html">Terms & Conditions</a></li>
                 <li><a href="return-policy.html">Return Policy</a></li>

diff --git a/feedback.html b/feedback.html
@@ -145,5 +145,9 @@ <h2>Drop Us a Feedback</h2>
     });
   </script>
 
+<div class="gtranslate_wrapper"></div>
+        <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>
+
 </body>
 </html>