Skip to content

Commit

Permalink
Merge branch 'PriyaGhosal:main' into main
Browse files Browse the repository at this point in the history
  • Loading branch information
@AbrerAsif07
AbrerAsif07 authored Oct 23, 2024
2 parents 8aca255 + 2dbf61c commit 260462c
Show file tree
Hide file tree
Showing 20 changed files with 1,301 additions and 220 deletions.
237 changes: 81 additions & 156 deletions contact.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,124 +17,121 @@
/>
</head>
<style>
.card {
width: 50%; /* Set a specific width */
margin: 10px auto; /* Center horizontally with automatic margins */
padding: 20px; /* Add padding */
.card {
width: 80%;
margin: 30px auto;
padding: 20px;
margin-bottom: 70px;
border: 1px solid #ccc; /* Optional: Add a border */
border-radius: 8px; /* Optional: Add rounded corners */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Optional: Add shadow */
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
background-color: #fff;
}

.card-header {
background-color: #1971b0;
color: #0c0c0c;
padding: 10px;
margin-bottom: 15px;
.card-header h2{
color: #fff;
padding: 15px;
margin-bottom: 20px;
text-align: center;
width: 90%;
width: 100%;
border-bottom: 1px solid #ddd;
border-radius: 6px;
text-shadow: 2px 2px 10px gray;
}

#contactus .card-body {
.card-body {
display: flex;
justify-content: space-between; /* Form on the left and image on the right */
align-items: flex-start; /* Align content to the top */
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: 20px;
}

#contactus .form-section {
width: 50%; /* Width for the form section */
color: #fff;
.form-section {
flex: 1;
min-width: 45%;
color: #121111;
}

#contactus .image-section {
padding-top: 35px;
width: 60%; /* Width for the image section */
.image-section {
flex: 1;
min-width: 45%;
display: flex;
justify-content: center; /* Center the image */
justify-content: center;
align-items: center;
}

#contactus .image-section img {
max-width: 100%; /* Ensure the image does not exceed its container width */
.image-section img {
max-width: 100%;
height: auto;
max-height: 500px;
}

#contactus .form-group {
.form-group {
margin-bottom: 20px;
color: #121111; /* Form text color */
color: #fff;
}

#contactus label {
label {
display: block;
margin-bottom: 10px;
color: #1e1e1e;
}

#contactus input, #contactus textarea {
width: 100%; /* Adjust width for better alignment */
padding: 10px;
input, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 5px;
color: #121212;
}

#contactus textarea {
height: 100px; /* Adjust height for textarea */
textarea {
height: 120px;
}

#contactus button[type="submit"] {
background-color: #0a6aae;
button[type="submit"] {
background-color: rgb(27, 27, 27);
color: #fff;
padding: 10px 20px;
padding: 12px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1.5rem;
}

#contactus button[type="submit"]:hover {
background-color: #2d81f7;
button[type="submit"]:hover {
background-color: black;
}

.error-message {
color: red;
font-size: 0.9em;
margin-top: 5px;
display: none; /* Hide by default */
}

/* Fixed header styles */
header {
background-color: black;
position: fixed;
top: 0;
height: 85px;
width: 100%;
z-index: 1000;
transition: background-color 0.3s ease, opacity 0.3s ease;
color: red;
font-size: 0.9em;
margin-top: 5px;
display: none;
}

/* Sticky effect and opacity changes */
header.sticky {
background-color: rgba(0, 0, 0, 0.9);
opacity: 0.9;
}
@media (max-width: 768px) {
.card-body {
flex-direction: column;
}

/* Adjust the content below the header */
.container-fluid {
margin-top: 85px; /* Space for the fixed header */
.form-section, .image-section {
width: 100%;
min-width: 100%;
}
}

</style>
<body>
<div class="container-fluid">
<header>
<nav style="padding: 5px;width:90%">
<div class="logo">
<img src="img/logo.png" id="logo-web">
<h1 id="logo"><a href="#home">BuddyTrail</a></h1>
</div>
<header style="background-color: black;height:85px;">
<nav style="padding: 5px;width:90%;">
<div class="logo">
<img src="img/logo.png" id="logo-web">
<h1 id="logo"><a href="#home">BuddyTrail</a></h1>
</div>

<!-- Hamburger button for mobile -->
<button class="hamburger" id="hamburger">☰</button>

Expand All @@ -151,7 +148,6 @@ <h1 id="logo"><a href="#home">BuddyTrail</a></h1>
<li><a href="./contact.html" class="navhover">Contact</a></li>
<li><a href="index.html#reviews" class="navhover">Reviews</a></li>
<li><a href="auth.html" class="navhover">Sign In</a></li>

</ul>

<!-- Toggle Button -->
Expand All @@ -160,50 +156,46 @@ <h1 id="logo"><a href="#home">BuddyTrail</a></h1>
<span class="moon-icon glow" style="display: none;"><img src="moon.png" alt="Dark mode"></span>
</button>
</nav>
</header>
<div>
</header>
<section id="contactus">

<div class="card pb-5 pt-1" style="background-color:#fff;">
<div class="card pb-5 pt-1">
<div class="card-header">
<h2>Contact Us</h2>
</div>
<div class="card-body">
<div class="form-section">
<form id="contactForm">
<div class="form-group">
<label for="name" style="color: #121111;">Name</label>
<label for="name">Name</label>
<input type="text" id="fullname" name="fullname" placeholder="Your name">
<span class="error-message" id="nameError"></span>
</div>
<div class="form-group">
<label for="email" style="color: #121111;">Email</label>
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="Your email">
<span class="error-message" id="emailError"></span>
</div>
<div class="form-group">
<label for="phone" style="color: #121111;">Phone Number</label>
<label for="phone">Phone Number</label>
<input type="tel" id="phone" name="phone" placeholder="Your phone number">
<span class="error-message" id="phoneError"></span>
</div>
<div class="form-group">
<label for="message" style="color: #121111;">Message</label>
<label for="message">Message</label>
<textarea id="message" name="message" placeholder="Your message"></textarea>
<span class="error-message" id="messageError"></span>
</div>
<button type="submit">Send</button>
</form>
</div>
<div class="image-section">
<img src="./image.png" alt="Contact Image"style="max-width: 80%; height: auto; max-height: 500px;">
<img src="./image.png" alt="Contact Image" style="max-width: 80%; height: auto; max-height: 500px;">
</div>
</div>
</div>
</section>
</div>
</div>

<div class="gtranslate_wrapper"></div>

<footer id="footer">
<div class="footer-container">
Expand All @@ -214,86 +206,19 @@ <h3>About Us</h3>
</div>

<!-- Quick Links Section -->
<div class="footer-column">
<h3>Quick Links</h3>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="faq.html" class="faq-link">FAQs</a></li>
<li><a href="#services">Services</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="team.html">Team</a></li>
<li><a href="contributor/contributor.html">Our Contributor</a></li>
</ul>
</div>

<!-- Legal Links Section -->
<div class="footer-column">
<h3>Legal Links</h3>
<ul>
<li><a href="terms_of_service.html">Terms of Service</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="copyright.html">Copyright Notice</a></li>
<li><a href="disclaimer.html">Disclaimer</a></li>
<li><a href="cookie_policy.html">Cookie Policy</a></li>

</ul>
</div>

<!-- Contact Us Section -->
<div class="footer-column">
<h3>Contact Us</h3>
<p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
<p>Phone: <a href="tel:+1234567890">+123 456 7890</a></p>
</div>

<!-- Follow Us Section -->
<div class="footer-column">
<h3>Follow Us</h3>
<div class="social-icons">
<a href="https://discord.com/invite/priyaghosal"><i class="fab fa-discord"></i></a>
<a href="https://x.com/https://twitter.com/PriyaGhosa39968"><i class="fa-brands fa-x-twitter"></i></a>
<a href="https://github.com/PriyaGhosal/BuddyTrail"><i class="fab fa-github"></i></a>
<a href="https://www.linkedin.com/in/priya-ghosal-785771286/"><i class="fab fa-linkedin-in"></i></a>
</div>
<p>Email: [email protected]</p>
<p>Phone: +123 456 7890</p>
</div>



</div>

<!-- Footer Bottom Section -->
<!-- Copyright -->
<div class="footer-bottom">
<p class="copyright-b" style="font-size: 15px;">&copy; 2024 BuddyTrail. All rights reserved.</p>
<p>&copy; 2023 BuddyTrail. All rights reserved.</p>
</div>
</footer>

<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="./contact.js"></script>

<script>
window.onscroll = function() {
var header = document.querySelector("header");
if (window.pageYOffset > 0) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
};
</script>
</footer>

<script src="./contact.js"></script>
</body>
</html>
12 changes: 6 additions & 6 deletions contributor/contributor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,12 +90,12 @@ <h3>About Us</h3>
<div class="footer-column">
<h3>Quick Links</h3>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="team.html">Team</a></li>
<li><a href="contributor/contributor.html">Our Contributor</a></li>
<li><a href="../index.html">Home</a></li>
<li><a href="../about.html">About</a></li>
<li><a href="../service.html">Services</a></li>
<li><a href="../contact.html">Contact</a></li>
<li><a href="../team.html">Team</a></li>


</ul>
</div>
Expand Down
Loading

0 comments on commit 260462c

Please sign in to comment.