From fe6b6135f91af93f6e807672e18c4b77b66582ee Mon Sep 17 00:00:00 2001 From: Shrutibansal22 Date: Sun, 13 Oct 2024 11:21:40 +0530 Subject: [PATCH 1/3] changes dn on terms&condition page successfully --- Terms.html | 159 ++++++++++++------------- terms.css | 336 ++++++++++++++++++++++++++++++++++++++++++----------- 2 files changed, 344 insertions(+), 151 deletions(-) diff --git a/Terms.html b/Terms.html index 8604839..d610541 100644 --- a/Terms.html +++ b/Terms.html @@ -102,15 +102,15 @@ -
+
-

Terms and Conditions

-

Welcome to Visuak-sort!

+

Terms and Conditions

+

Welcome to Visual-sort!

@@ -269,93 +269,82 @@

-
-
+
+
+
+
+ + Visual Sort + +
+
    +
  • Visual Sort is a web-based sorting algorithm visualization tool which provides an + interactive way to visualize various sorting algorithms in action, helping users understand how + different algorithms work and their efficiency in sorting data
    • +
+
+
+
+
Home
+ +
-
-
-
- - Visual Sort - -
-
    -
  • Visual Sort is a web-based sorting algorithm visualization tool which provides an - interactive way to visualize various sorting algorithms in action, helping users understand how - different algorithms work and their efficiency in sorting data
    • -
-
-
-
-
Home
- -
- -
-
About
- -
- -
-
Support
- -
- -
-
Legal
- -
- -
- -
- -
- - - -
-
-
- +
+
About
+ +
+ +
+
Support
+ +
+ +
+
Legal
+ +
-
- + +
+
-
- + +
+
+
+ +
+
+ +
+
+ +
+ +
- - -
- -
-

© 2024 Visual Sort - Mastan Sayyad, Inc. All rights reserved.

-
-
+
+
diff --git a/terms.css b/terms.css index 643bd3e..35e2bff 100644 --- a/terms.css +++ b/terms.css @@ -1,102 +1,306 @@ -@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap"); +body { + font-family: 'Muli', sans-serif; + line-height: 1.6; + color: #333; + background-color: #f9f9f9; +} -:root { - --bg-clr: #6c00f9; - --white: #fff; - --primary-text-clr: #212121; - --secondary-text-clr: #8c8c8c; - --bg-hvr: #5803c7; +/* Loader Style */ +#Loader { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(255, 255, 255, 0.8); + display: flex; + justify-content: center; + align-items: center; + z-index: 9999; } -* { - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: "Open Sans", sans-serif; +.site-wrap { + padding-top: 70px; } -body{ - background: blue; - font-size: 12px; - +/* header */ + +.text h1 { + color: rgb(0, 0, 0) !important; + font-size: 40px; + font-weight: bold; + text-align: center; + margin-bottom: 30px; + text-transform: uppercase; + letter-spacing: 1px; + border-bottom: 3px solid rgba(219, 127, 219, 0.5); + padding-bottom: 10px; } -.flex_align_justify{ - display: flex; - align-items: center; - justify-content: center; +/* Navbar Styles */ +.navbar { + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} + +.nav-link { + color: rgba(219, 127, 219, 0.9); } -.flex_align{ +.nav-link:hover { + color: rgb(219, 127, 219); +} + +/* Terms and Conditions Section */ +.wrapper { + padding: 40px; +} + +.terms_service { + background: white; + border-radius: 10px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + padding: 20px; +} + +.tc_item { + margin-bottom: 30px; +} + +.tc_head { + border-bottom: 2px solid rgb(219, 127, 219); + padding-bottom: 10px; + margin-bottom: 20px; +} + +.tc_body h3 { + color: rgb(219, 127, 219); + font-size: 28px; + margin-bottom: 15px; + font-weight: bold; +} + +.tc_body h4 { + color: rgb(160, 80, 160); + font-size: 22px; + margin-top: 15px; + margin-bottom: 10px; +} + +.tc_body ol { + padding-left: 20px; +} + +/* Footer Styles */ +footer { + background-color: rgba(0, 0, 0, 0.05); +} + +.footer-title { + font-size: 24px; + font-weight: bold; + color: rgb(219, 127, 219); +} + +.footer-title:hover { + color: rgba(219, 127, 219, 0.9); +} + +.nav h5 { + color: rgb(219, 127, 219); +} + +.nav-link { + color: #666; +} + +.nav-link:hover { + color: rgb(219, 127, 219); +} + +/* Social Icons */ +.icons { display: flex; - align-items: center; + justify-content: center; + margin: 20px 0; } -.wrapper{ - min-height: 100vh; - padding: 0 20px; +.icons div { + margin: 0 10px; } -.terms_service{ - width: 800px; - max-width: 100%; - height: 650px; - background: lightcyan; - border-radius: 3px; - box-shadow: 0px 0px 3px rgba(0,0,0,0.15); +.icons i { + font-size: 24px; + color: rgb(219, 127, 219); + transition: color 0.3s; } -.terms_service .tc_item{ - padding: 20px 40px; +.icons i:hover { + color: rgba(219, 127, 219, 0.9); } -.terms_service .tc_head{ - box-shadow: 0 1px 2px rgba(0,0,0,0.15); - height: 90px; +/* Go to Top Button */ +.topbtn { + position: fixed; + bottom: 20px; + right: 20px; + z-index: 1000; } -.terms_service .tc_head .icon{ - width: 50px; - height: 50px; - background: var(--bg-clr); - margin-right: 20px; +.gotopbtn { + background-color: rgb(219, 127, 219); + color: white; + border: none; border-radius: 50%; - font-size: 18px; - color: var(--white); + padding: 10px; + cursor: pointer; + transition: background-color 0.3s; } -.terms_service .tc_body{ - height: calc(100% - 170px); - overflow: auto; - padding-right: 20px; +.gotopbtn:hover { + background-color: rgba(219, 127, 219, 0.9); } -.terms_service .tc_body ol li{ - margin-bottom: 15px; +/* Chatbot Button */ +.chatbot-button { + background: rgba(219, 127, 219, 0.9); + border-radius: 8px; + border: none; + position: relative; + overflow: hidden; + padding: 10px; } -.terms_service .tc_body ol li h3{ - margin-bottom: 5px; +.chatbot-button:hover { + background: rgba(219, 127, 219, 0.9); } -.terms_service .tc_foot{ - box-shadow: 0 -1px 2px rgba(0,0,0,0.15); - justify-content: space-between; - height: 80px; +.tooltip-text { + position: absolute; + bottom: 60px; + left: 50%; + transform: translateX(-50%); + background-color: rgba(0, 0, 0, 0.7); + color: white; + padding: 5px 10px; + border-radius: 5px; + display: none; } -.terms_service .tc_foot button{ +.chatbot-button:hover .tooltip-text { + display: block; +} + +/* Responsive Design */ +@media (max-width: 768px) { + .navbar-brand { + font-size: 20px; + } + + .footer-title { + font-size: 20px; + } +} + +/* footer */ + +footer { + background-color: rgba(0, 0, 0, 0.05); + margin: 0; + padding: 0; width: 100%; - border: 1px solid var(--bg-clr); - padding: 10px 20px; - border-radius: 3px; +} + +.footer-title { + font-size: 24px; + font-weight: bold; + color: rgb(219, 127, 219); + margin-bottom: 15px; +} + +.footer-title:hover { + color: rgba(219, 127, 219, 0.9); +} + +.footer-header-title { + font-size: 20px; + font-weight: bold; + color: rgb(219, 127, 219); + margin-bottom: 10px; +} + +.footer-content { + padding-left: 0; + padding-right: 0; +} + +.nav-link { + color: #666; + transition: color 0.3s; +} + +.nav-link:hover { + color: rgb(219, 127, 219); +} + +.footer-description { + color: #555; + font-size: 14px; +} + +.icons { + display: flex; + justify-content: center; + margin: 20px 0; +} + +.icons div { + margin: 0 10px; +} + +.icons i { + font-size: 24px; + color: rgb(219, 127, 219); + transition: color 0.3s; +} + +.icons i:hover { + color: rgba(219, 127, 219, 0.9); +} + +.topbtn { + position: fixed; + bottom: 20px; + right: 20px; + z-index: 1000; +} + +.gotopbtn { + background-color: rgb(219, 127, 219); + color: white; + border: none; + border-radius: 50%; + padding: 10px; cursor: pointer; - transition: all 0.5s ease; + transition: background-color 0.3s; } -.txt h3{ - color: red; - font-size: larger; + +.gotopbtn:hover { + background-color: rgba(219, 127, 219, 0.9); } -.footer{ - background-color: aqua; + +.footer-bottom { + margin-top: 20px; + text-align: center; + color: #666; +} + +.footer-bottom p { + margin: 0; +} + +.container { + margin-left: 0; + margin-right: 0; + padding-left: 0; + padding-right: 0; } From d85f175187d4aa0042cf09e48f31aacce494106d Mon Sep 17 00:00:00 2001 From: Shrutibansal22 Date: Sun, 13 Oct 2024 11:39:46 +0530 Subject: [PATCH 2/3] changed with proper padding --- terms.css | 334 +++++++++++------------------------------------------- 1 file changed, 68 insertions(+), 266 deletions(-) diff --git a/terms.css b/terms.css index 35e2bff..5f90616 100644 --- a/terms.css +++ b/terms.css @@ -1,306 +1,108 @@ -body { - font-family: 'Muli', sans-serif; - line-height: 1.6; - color: #333; - background-color: #f9f9f9; -} - -/* Loader Style */ -#Loader { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(255, 255, 255, 0.8); - display: flex; - justify-content: center; - align-items: center; - z-index: 9999; -} +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap"); -.site-wrap { - padding-top: 70px; +:root { + --bg-clr: #d19cd9; /* Changed to a new color */ + --white: #fff; + --primary-text-clr: #333; /* Updated text color */ + --secondary-text-clr: #8c8c8c; /* Kept as is */ + --bg-hvr: #b67dc8; /* Updated hover color */ } -/* header */ - -.text h1 { - color: rgb(0, 0, 0) !important; - font-size: 40px; - font-weight: bold; - text-align: center; - margin-bottom: 30px; - text-transform: uppercase; - letter-spacing: 1px; - border-bottom: 3px solid rgba(219, 127, 219, 0.5); - padding-bottom: 10px; +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Open Sans", sans-serif; } -/* Navbar Styles */ -.navbar { - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +body { + background-color: #f9f9f9; /* Updated background color */ + font-size: 12px; + color: #333; /* Updated text color */ } -.nav-link { - color: rgba(219, 127, 219, 0.9); +.flex_align_justify { + display: flex; + align-items: center; + justify-content: center; } -.nav-link:hover { - color: rgb(219, 127, 219); +.flex_align { + display: flex; + align-items: center; } -/* Terms and Conditions Section */ .wrapper { - padding: 40px; + min-height: 100vh; + padding: 0 20px; } .terms_service { - background: white; - border-radius: 10px; + width: 800px; + max-width: 100%; + height: 650px; + background: white; /* Changed to white */ + border-radius: 10px; /* Updated border radius */ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); - padding: 20px; -} - -.tc_item { - margin-bottom: 30px; -} - -.tc_head { - border-bottom: 2px solid rgb(219, 127, 219); - padding-bottom: 10px; - margin-bottom: 20px; -} - -.tc_body h3 { - color: rgb(219, 127, 219); - font-size: 28px; - margin-bottom: 15px; - font-weight: bold; } -.tc_body h4 { - color: rgb(160, 80, 160); - font-size: 22px; - margin-top: 15px; - margin-bottom: 10px; +.terms_service .tc_item { + padding: 20px 40px; } -.tc_body ol { - padding-left: 20px; +.terms_service .tc_head { + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); + height: 90px; + border-bottom: 2px solid var(--bg-clr); /* Updated border color */ } -/* Footer Styles */ -footer { - background-color: rgba(0, 0, 0, 0.05); -} - -.footer-title { - font-size: 24px; - font-weight: bold; - color: rgb(219, 127, 219); -} - -.footer-title:hover { - color: rgba(219, 127, 219, 0.9); -} - -.nav h5 { - color: rgb(219, 127, 219); -} - -.nav-link { - color: #666; -} - -.nav-link:hover { - color: rgb(219, 127, 219); -} - -/* Social Icons */ -.icons { - display: flex; - justify-content: center; - margin: 20px 0; -} - -.icons div { - margin: 0 10px; -} - -.icons i { - font-size: 24px; - color: rgb(219, 127, 219); - transition: color 0.3s; -} - -.icons i:hover { - color: rgba(219, 127, 219, 0.9); -} - -/* Go to Top Button */ -.topbtn { - position: fixed; - bottom: 20px; - right: 20px; - z-index: 1000; -} - -.gotopbtn { - background-color: rgb(219, 127, 219); - color: white; - border: none; +.terms_service .tc_head .icon { + width: 50px; + height: 50px; + background: var(--bg-clr); /* Updated background color */ + margin-right: 20px; border-radius: 50%; - padding: 10px; - cursor: pointer; - transition: background-color 0.3s; -} - -.gotopbtn:hover { - background-color: rgba(219, 127, 219, 0.9); -} - -/* Chatbot Button */ -.chatbot-button { - background: rgba(219, 127, 219, 0.9); - border-radius: 8px; - border: none; - position: relative; - overflow: hidden; - padding: 10px; + font-size: 18px; + color: var(--white); } -.chatbot-button:hover { - background: rgba(219, 127, 219, 0.9); +.terms_service .tc_body { + height: calc(100% - 170px); + overflow: auto; + padding-right: 20px; } -.tooltip-text { - position: absolute; - bottom: 60px; - left: 50%; - transform: translateX(-50%); - background-color: rgba(0, 0, 0, 0.7); - color: white; - padding: 5px 10px; - border-radius: 5px; - display: none; -} - -.chatbot-button:hover .tooltip-text { - display: block; -} - -/* Responsive Design */ -@media (max-width: 768px) { - .navbar-brand { - font-size: 20px; - } - - .footer-title { - font-size: 20px; - } -} - -/* footer */ - -footer { - background-color: rgba(0, 0, 0, 0.05); - margin: 0; - padding: 0; - width: 100%; -} - -.footer-title { - font-size: 24px; - font-weight: bold; - color: rgb(219, 127, 219); +.terms_service .tc_body ol li { margin-bottom: 15px; } -.footer-title:hover { - color: rgba(219, 127, 219, 0.9); +.terms_service .tc_body ol li h3 { + margin-bottom: 5px; + color: var(--bg-clr); /* Updated text color */ } -.footer-header-title { - font-size: 20px; - font-weight: bold; - color: rgb(219, 127, 219); - margin-bottom: 10px; +.terms_service .tc_foot { + box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.15); + justify-content: space-between; + height: 80px; } -.footer-content { - padding-left: 0; - padding-right: 0; -} - -.nav-link { - color: #666; - transition: color 0.3s; -} - -.nav-link:hover { - color: rgb(219, 127, 219); -} - -.footer-description { - color: #555; - font-size: 14px; -} - -.icons { - display: flex; - justify-content: center; - margin: 20px 0; -} - -.icons div { - margin: 0 10px; -} - -.icons i { - font-size: 24px; - color: rgb(219, 127, 219); - transition: color 0.3s; -} - -.icons i:hover { - color: rgba(219, 127, 219, 0.9); -} - -.topbtn { - position: fixed; - bottom: 20px; - right: 20px; - z-index: 1000; -} - -.gotopbtn { - background-color: rgb(219, 127, 219); - color: white; - border: none; - border-radius: 50%; - padding: 10px; +.terms_service .tc_foot button { + width: 100%; + border: 1px solid var(--bg-clr); /* Updated border color */ + padding: 10px 20px; + border-radius: 3px; cursor: pointer; - transition: background-color 0.3s; + transition: all 0.5s ease; + background-color: var(--bg-clr); /* Updated background color */ + color: var(--white); /* Updated text color */ } -.gotopbtn:hover { - background-color: rgba(219, 127, 219, 0.9); -} - -.footer-bottom { - margin-top: 20px; - text-align: center; - color: #666; -} - -.footer-bottom p { - margin: 0; +.txt h3 { + color: rgb(219, 127, 219); /* Updated color */ + font-size: larger; } -.container { - margin-left: 0; - margin-right: 0; - padding-left: 0; - padding-right: 0; +.footer { + background-color: rgba(0, 0, 0, 0.05); /* Kept as is */ } From c0659cbdd3b9a2e8d24631554607eca53419e515 Mon Sep 17 00:00:00 2001 From: Shrutibansal22 Date: Sun, 13 Oct 2024 11:44:16 +0530 Subject: [PATCH 3/3] changed --- terms.css | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/terms.css b/terms.css index 5f90616..55f879f 100644 --- a/terms.css +++ b/terms.css @@ -1,11 +1,11 @@ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap"); :root { - --bg-clr: #d19cd9; /* Changed to a new color */ + --bg-clr: #d19cd9; --white: #fff; - --primary-text-clr: #333; /* Updated text color */ - --secondary-text-clr: #8c8c8c; /* Kept as is */ - --bg-hvr: #b67dc8; /* Updated hover color */ + --primary-text-clr: #333; + --secondary-text-clr: #8c8c8c; + --bg-hvr: #b67dc8; } * { @@ -16,9 +16,9 @@ } body { - background-color: #f9f9f9; /* Updated background color */ + background-color: #f9f9f9; font-size: 12px; - color: #333; /* Updated text color */ + color: #333; } .flex_align_justify { @@ -41,8 +41,8 @@ body { width: 800px; max-width: 100%; height: 650px; - background: white; /* Changed to white */ - border-radius: 10px; /* Updated border radius */ + background: white; + border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } @@ -53,13 +53,13 @@ body { .terms_service .tc_head { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); height: 90px; - border-bottom: 2px solid var(--bg-clr); /* Updated border color */ + border-bottom: 2px solid var(--bg-clr); } .terms_service .tc_head .icon { width: 50px; height: 50px; - background: var(--bg-clr); /* Updated background color */ + background: var(--bg-clr); margin-right: 20px; border-radius: 50%; font-size: 18px; @@ -78,7 +78,7 @@ body { .terms_service .tc_body ol li h3 { margin-bottom: 5px; - color: var(--bg-clr); /* Updated text color */ + color: var(--bg-clr); } .terms_service .tc_foot { @@ -89,20 +89,20 @@ body { .terms_service .tc_foot button { width: 100%; - border: 1px solid var(--bg-clr); /* Updated border color */ + border: 1px solid var(--bg-clr); padding: 10px 20px; border-radius: 3px; cursor: pointer; transition: all 0.5s ease; - background-color: var(--bg-clr); /* Updated background color */ - color: var(--white); /* Updated text color */ + background-color: var(--bg-clr); + color: var(--white); } .txt h3 { - color: rgb(219, 127, 219); /* Updated color */ + color: rgb(219, 127, 219); font-size: larger; } .footer { - background-color: rgba(0, 0, 0, 0.05); /* Kept as is */ + background-color: rgba(0, 0, 0, 0.05); }