diff --git a/Website/contact.html b/Website/contact.html index a0e495561..bea631647 100644 --- a/Website/contact.html +++ b/Website/contact.html @@ -36,7 +36,7 @@ transition: width 0.09s ease-in-out; border-radius: 10px; } - .dark-mode .content{ + /* .dark-mode .content{ background-color: white; } .dark-mode .title{ @@ -44,10 +44,10 @@ } .dark-mode .paragraph{ color: #555; - } + } */ - +
@@ -80,7 +80,18 @@
  • Feedback
  • Contact
    • -
  • + +
  • + Know More +
    + How we work? + Projects + Team + Code of Conduct +
    +
    • + +
  • GitHub
    • -
  • +
  • +
    + +
    +
    • +
    @@ -135,5 +151,17 @@

    Contact Us

    + - + diff --git a/Website/css/contact.css b/Website/css/contact.css index a0557a5e1..c6113bbc3 100644 --- a/Website/css/contact.css +++ b/Website/css/contact.css @@ -1,5 +1,5 @@ /* General Styles */ -body { +/* body { font-family: Arial, sans-serif; background-color: #0a0a2e; font-family: 'Arial', sans-serif; @@ -9,9 +9,30 @@ body { justify-content: center; align-items: center; height: 100vh; +} */ + + +body { + background-color: var(--primary-color, #fff); + color: var(--secondary-color, #111); + transition: background-color 0.3s, color 0.3s; +} + +.dark-theme { + --primary-color: #111112; + --secondary-color: #fff; +} + + +#icon { + width: 19px; + cursor: pointer; + border-color: #06fdfd; + } + header { - background-color: #121245; + background-color: rgb(99, 99, 241); padding: 10px 20px; animation: fadeIn 1s ease-in-out; } @@ -106,7 +127,8 @@ header { right: 0; gap: 10px; width: 100%; - background-color: #13034f; + background-color: rgb(99, 99, 241); + /* background-color: #13034f; */ opacity: 0; visibility: hidden; transform: translateY(-20px); @@ -151,24 +173,74 @@ header { filter: brightness(0) invert(1); margin-top: -5px; } + /* Dropdown Container */ +.dropdown { + position: relative; + display: inline-block; +} + +/* Dropdown Button Style */ +.dropbtn { + font-size: 16px; + color: white; + font-weight: bold; + background-color: inherit; + font-family: inherit; + border: none; + cursor: pointer; + padding: 10px 15px; + text-decoration: none; +} + +/* Dropdown Content (Hidden by Default) */ +.dropdown-content { + display: none; + position: absolute; + background-color: #f0f4f8; + min-width: 160px; + box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); + z-index: 1; + border-radius: 5px; +} + +/* Dropdown Content Links */ +.dropdown-content a { + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; + text-align: left; +} + +.dropdown-content a:hover { + background-color: #0066cc; /* Hover effect */ + color: white; +} + +/* Show Dropdown on Hover */ +.dropdown:hover .dropdown-content { + display: block; +} + /* Dropdown */ - .dropdown { + /* .dropdown { float: left; overflow: hidden; - } + margin-right: 30px; + } - .dropbtn { + .dropbtn { font-size: 16px; border: none; outline: none; color: white; font-weight: bold; - background-color: inherit; + font-family: inherit; - margin: 0; + background-color: inherit; cursor: pointer; - } + } .dropdown-content { display: none; @@ -177,29 +249,29 @@ header { min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; - } - - .dark-mode .dropdown-content { + } + */ + /* .dark-mode .dropdown-content { background-color: #170179; - } + } */ - .dropdown-content a { + /* .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; - } - + } */ + /* Hover Effect for Dropdown Items */ - .dropdown-content a:hover { + /* .dropdown-content a:hover { color: #0066cc; - } - - .dropdown:hover .dropdown-content { - display: block; - } + } */ + /* .dropdown:hover .dropdown-content { + display: inline-block; + } */ + .show { display: block; } @@ -257,13 +329,15 @@ header { /* Contact Form Container */ .contact-container { - background-color: #0b065f; /* Darker blue for form background */ + background-color: rgb(99, 99, 241); + /* background-color: #0b065f; Darker blue for form background */ padding: 40px; border-radius: 10px; box-shadow: 0 0 10px rgba(243, 246, 246, 0.2); max-width: 500px; width: 100%; text-align: center; + transition: transform 0.3s ease, box-shadow 0.3s ease; } @@ -274,8 +348,9 @@ header { .contact-container h2 { margin-bottom: 20px; - font-size: 24px; - color: #ffffff; /* White title for contrast */ + color: #0e08d3; + font-size: 29px; + } .contact-container p { @@ -305,7 +380,9 @@ textarea { font-size: 16px; width: 100%; box-sizing: border-box; - background-color: #110769; /* Darker blue text field background */ + background-color: rgb(99, 99, 241); + + /* background-color: #110769; Darker blue text field background */ color: #ffffff; /* White text in the fields */ transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } @@ -313,7 +390,7 @@ textarea { input[type="text"]:hover, input[type="email"]:hover, textarea:hover { - background-color: #0d0891; /* Slightly lighter blue on hover */ + background-color: #0e08d3; /* Slightly lighter blue on hover */ border-color: #0bc1f9; /* Lighter blue border on hover */ box-shadow: 0 0 5px rgba(255, 255, 255, 0.5); /* White shadow on hover */ } @@ -321,7 +398,7 @@ textarea:hover { input[type="text"]:focus, input[type="email"]:focus, textarea:focus { - background-color: #0d0891; /* Lighter blue background when focused */ + border-color: #05d1fa; /* Light blue border on focus */ outline: none; box-shadow: 0 0 10px rgba(255, 255, 255, 0.7); /* Stronger white shadow when focused */ @@ -332,7 +409,9 @@ textarea { } button { - background-color: #416f77; + background-color: #c25be1; + background-color: #180de4; + height: 40px; color: white; border: none; border-radius: 5px; @@ -351,7 +430,7 @@ button:hover { /* Back to Home Button Styles */ .back-button { margin-top: 20px; - background-color: #5048eb; + background-color: #180de4; color: white; padding: 10px 20px; border: none; diff --git a/Website/moon-solid.svg b/Website/moon-solid.svg new file mode 100644 index 000000000..199a7e27e --- /dev/null +++ b/Website/moon-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Website/sun-solid (1).svg b/Website/sun-solid (1).svg new file mode 100644 index 000000000..2caec7d95 --- /dev/null +++ b/Website/sun-solid (1).svg @@ -0,0 +1 @@ + \ No newline at end of file