From 8cb61095dc1976d1e2e4309f1a201bcb381ec640 Mon Sep 17 00:00:00 2001
From: Sejalitgithub <2021.sejal.maurya@ves.ac.in>
Date: Mon, 14 Oct 2024 20:55:28 +0530
Subject: [PATCH] contactus page added
---
contact.html | 105 ++++++++++++++++++++++
main-page.html | 7 +-
resources/css/contact.css | 180 +++++++++++++++++++++++++++++++++++++
resources/css/footer.css | 4 +-
resources/css/nav.css | 183 +++++++++++++++++---------------------
5 files changed, 375 insertions(+), 104 deletions(-)
create mode 100644 contact.html
create mode 100644 resources/css/contact.css
diff --git a/contact.html b/contact.html
new file mode 100644
index 0000000..143645b
--- /dev/null
+++ b/contact.html
@@ -0,0 +1,105 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Contact Us
+
+
+
+
+
+
+
+
+
+
+
Contact Us
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/main-page.html b/main-page.html
index f35a7d3..38104f2 100644
--- a/main-page.html
+++ b/main-page.html
@@ -24,7 +24,10 @@
-
- Watch
+ Home
+
+ -
+ Watch
-
@@ -36,7 +39,7 @@
About
-
-
+
-
diff --git a/resources/css/contact.css b/resources/css/contact.css
new file mode 100644
index 0000000..7953ce0
--- /dev/null
+++ b/resources/css/contact.css
@@ -0,0 +1,180 @@
+/* Reset some default styles */
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ display: flex; /* Use flexbox for centering */
+ justify-content: center; /* Center horizontally */
+ align-items: center; /* Center vertically */
+ min-height: 100vh; /* Make body full height */
+ background-color: #f0f0f0; /* Optional: background color */
+}
+
+/* Contact Form Styles */
+#contact-form {
+ display: flex;
+ flex-direction: column;
+ max-width: 800px; /* Increased max-width */
+ margin: 10px auto;
+ padding: 20px; /* Increased padding */
+ background-color: rgb(59, 6, 90); /* Form background color */
+ border-radius: 10px; /* Slightly larger border radius */
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Increased shadow depth */
+}
+
+
+#contact-form h2 {
+ text-align: center; /* Center the title */
+ color: #f2f2f2; /* Title color */
+ margin-bottom: 30px; /* Increased space below the title */
+ font-size: 1.8rem; /* Increased font size for the title */
+}
+
+#contact-form label {
+ margin: 15px 0 5px; /* Spacing for labels */
+ color: #f2f2f2; /* Label color */
+ font-size: 1.1rem; /* Increased font size for labels */
+}
+
+#contact-form input,
+#contact-form textarea {
+ padding: 15px; /* Increased padding inside inputs */
+ border: none; /* Remove default border */
+ border-radius: 8px; /* Larger rounded corners */
+ margin-bottom: 20px; /* Space between inputs */
+ font-size: 1.1rem; /* Increased font size */
+ background-color: #f2f2f2; /* Input background color */
+ color: #333; /* Text color */
+}
+
+#contact-form button {
+ padding: 15px; /* Increased padding for button */
+ background-color: #aa12c9; /* Button background color */
+ border: none; /* Remove border */
+ border-radius: 8px; /* Larger rounded corners */
+ color: #fff; /* Text color */
+ font-size: 1.1rem; /* Increased font size */
+ cursor: pointer; /* Pointer cursor on hover */
+ transition: background-color 0.3s ease; /* Smooth background change */
+}
+
+#contact-form button:hover {
+ background-color: rgb(190, 74, 236); /* Background color on hover */
+}
+
+
+
+.content h2 {
+ text-align: center; /* Center the text */
+ color: black; /* Set the color of the heading */
+ margin-bottom: 20px; /* Space below the title */
+}
+
+/* Navbar Styles */
+#navbar {
+ z-index: 10000;
+ display: flex;
+ position: fixed;
+ justify-content: center;
+ height: 60px; /* Increased navbar height */
+ top: 0;
+ left: 0;
+ width: 100%;
+ overflow: hidden;
+ background-color: rgb(59, 6, 90);
+}
+
+/* Navbar Links */
+.logo {
+ position: fixed;
+ opacity: 90%;
+ top: -62px;
+ left: -35px;
+}
+
+.navlinks {
+ position: static;
+ display: flex;
+ justify-content: space-around;
+ margin-top: 5px;
+}
+
+.navlinks li {
+ list-style: none;
+}
+
+#navbar a {
+ display: flex;
+ color: #f2f2f2;
+ text-align: center;
+ padding: 16px; /* Increased padding for links */
+ text-decoration: none;
+ cursor: pointer;
+ font-size: x-large; /* Keep as is for large links */
+ font-family: consolas;
+ text-transform: uppercase;
+}
+
+/* Active Class and Hover Effect */
+.active, .btn:hover {
+ background-color: #aa12c9;
+ border-top-left-radius: 15px;
+ border-top-right-radius: 15px;
+}
+
+/* Page Content */
+.content {
+ padding: 30px;
+ padding-top: 60px; /* Prevent content from being hidden behind the navbar */
+}
+
+/* Responsive Styles */
+@media screen and (max-width: 800px) {
+ .logo {
+ float: left;
+ }
+
+ .navlinks {
+ position: absolute;
+ right: 0px;
+ }
+}
+
+@media screen and (max-width: 619px) {
+ label #btnNav {
+ display: block;
+ }
+
+ .logo {
+ position: relative;
+ top: -90px;
+ }
+
+ .navlinks {
+ position: fixed;
+ display: flex;
+ flex-direction: column;
+ top: 8vh;
+ background-color: rgb(59, 6, 90);
+ align-items: center;
+ width: 50%;
+ height: 92vh;
+ transform: translateX(100%);
+ transition: transform 0.5s ease-in;
+ }
+
+ #check:checked ~ ul {
+ transform: translateX(0%);
+ }
+
+ #check:checked ~ label #btnNav {
+ display: none;
+ }
+
+ #check:checked ~ label #cancel {
+ display: block;
+ }
+}
diff --git a/resources/css/footer.css b/resources/css/footer.css
index fbd48b9..d5817f9 100644
--- a/resources/css/footer.css
+++ b/resources/css/footer.css
@@ -27,8 +27,8 @@ h3{
clear: both;
color: #666;
margin: 0 auto 10px auto;
- width: 850px;
- padding: 5px 0;
+ width: 1600px;
+ padding: 5px 5px;
text-align: center;
border-top: 1px solid #F2F2F2;
diff --git a/resources/css/nav.css b/resources/css/nav.css
index 6982af8..a78fd8f 100644
--- a/resources/css/nav.css
+++ b/resources/css/nav.css
@@ -1,69 +1,64 @@
-
-
-body::-webkit-scrollbar-button{
- background:rgb(59, 6, 90);
+/* Custom scrollbar styling */
+body::-webkit-scrollbar-button {
+ background: rgb(59, 6, 90);
}
-body::-webkit-scrollbar-button:hover{
- background:#aa12c9;
- border-radius: 5px;
+body::-webkit-scrollbar-button:hover {
+ background: #aa12c9;
+ border-radius: 5px;
}
-body::-webkit-scrollbar{
+body::-webkit-scrollbar {
width: 10px;
}
-body::-webkit-scrollbar-track{
- background:rgb(59, 6, 90);
+body::-webkit-scrollbar-track {
+ background: rgb(59, 6, 90);
}
-body::-webkit-scrollbar-thumb{
+body::-webkit-scrollbar-thumb {
border-radius: 5px;
- box-shadow: inset 0 0 6px rgb(59, 6, 90);
- background: linear-gradient(#aa12c9,rgb(190, 74, 236));
+ box-shadow: inset 0 0 6px rgb(59, 6, 90);
+ background: linear-gradient(#aa12c9, rgb(190, 74, 236));
}
-body::-webkit-scrollbar-thumb:hover{
- background: linear-gradient(rgb(190, 74, 236),#aa12c9);
+body::-webkit-scrollbar-thumb:hover {
+ background: linear-gradient(rgb(190, 74, 236), #aa12c9);
}
-
+
/* Style the navbar */
#navbar {
z-index: 10000;
display: flex;
position: fixed;
justify-content: center;
- height: 50px;
+ height: 60px; /* Slightly taller for better aesthetics */
top: 0;
left: 0;
width: 100%;
overflow: hidden;
- background-color:rgb(59, 6, 90);
+ background-color: rgb(59, 6, 90);
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Added shadow for depth */
}
- /* Navbar links */
-.logo{
+/* Navbar logo */
+.logo {
position: fixed;
opacity: 90%;
- top: -62px;
+ top: -60px; /* Adjusted for alignment */
left: -35px;
+ transition: transform 0.3s ease; /* Smooth transition for logo */
}
-
-
-
-
-.navlinks{
+/* Navbar links */
+.navlinks {
position: static;
display: flex;
justify-content: space-around;
margin-top: 5px;
}
-
-
-
-.navlinks li{
+.navlinks li {
list-style: none;
}
@@ -71,116 +66,104 @@ body::-webkit-scrollbar-thumb:hover{
display: flex;
color: #f2f2f2;
text-align: center;
- padding: 14px;
+ padding: 14px 20px; /* Added horizontal padding for better click area */
text-decoration: none;
cursor: pointer;
- font-size: x-large;
- font-family: consolas;
+ font-size: 1.1rem; /* Adjusted font size */
+ font-family: 'Consolas', monospace;
text-transform: uppercase;
+ transition: background-color 0.3s ease; /* Smooth transition on hover */
}
+/* Style the active class (and buttons on mouse-over) */
+.active,
+.btn:hover {
+ background-color: #aa12c9;
+ border-radius: 15px; /* Unified border radius */
+}
-
-
- /* Style the active class (and buttons on mouse-over) */
-.active, .btn:hover {
- background-color:#aa12c9;
- border-top-left-radius: 15px;
- border-top-right-radius: 15px;
-}
-
- /* Page content */
+/* Page content */
.content {
padding: 30px;
-}
-
-
- /* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
- .content {
- padding-top: 60px;
+ padding-top: 60px; /* Ensures content is not hidden behind the navbar */
}
-.faq{
+/* FAQ section */
+.faq {
margin-left: 30%;
}
+/* Responsive button styles */
label #btnNav,
-label #cancel{
+label #cancel {
position: fixed;
color: white;
font-size: 30px;
- right:2%;
+ right: 2%;
top: 2%;
cursor: pointer;
display: none;
-
}
-#check{
+/* Hidden checkbox for mobile navigation */
+#check {
display: none;
}
-
-
-@media screen and (max-width:1366px){
- #logo{
- transition: 0.2s ease-in-out;
+/* Media queries */
+@media screen and (max-width: 1366px) {
+ #logo {
+ transition: transform 0.2s ease-in-out;
}
-
}
-@media screen and (max-width:800px){
- .logo{
+
+@media screen and (max-width: 800px) {
+ .logo {
float: left;
}
- .navlinks{
+
+ .navlinks {
position: absolute;
right: 0px;
}
- .faq{
+ .faq {
margin-left: 0;
}
}
-@media screen and (max-width:619px){
- /* body{
- display: none;
- } */
-
-label #btnNav{
- display: block;
-}
-
-.logo{
- position: relative;
- top: -90px;
-}
+@media screen and (max-width: 619px) {
+ label #btnNav {
+ display: block;
+ }
-.navlinks{
- position: fixed;
- display: flex;
- flex-direction: column;
- top: 8vh;
- background-color: rgb(59, 6, 90);
- align-items: center;
- width: 50%;
- height: 92vh;
- transform: translateX(100%);
- transition: transform 0.5s ease-in;
-}
+ .logo {
+ position: relative;
+ top: -90px;
+ }
-#check:checked ~ ul{
- transform: translateX(0%);
-}
+ .navlinks {
+ position: fixed;
+ display: flex;
+ flex-direction: column;
+ top: 8vh;
+ background-color: rgb(59, 6, 90);
+ align-items: center;
+ width: 60%; /* Adjusted for better fit */
+ height: 92vh;
+ transform: translateX(100%);
+ transition: transform 0.5s ease-in;
+ }
-#check:checked ~ label #btnNav{
- display: none;
-}
+ #check:checked ~ ul {
+ transform: translateX(0%);
+ }
-#check:checked ~ label #cancel{
- display: block;
-}
+ #check:checked ~ label #btnNav {
+ display: none;
+ }
+ #check:checked ~ label #cancel {
+ display: block;
+ }
}
-
-