Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Updated Contact section #284

Merged
merged 1 commit into from
Oct 8, 2024
+219 −16
Merged

Updated Contact section #284

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 68 additions & 16 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -590,25 +590,77 @@ <h2>Explore Popular Destinations</h2>
defer
></script>

<!-- CONTACT US-->
<section id="contact">
<div class="form-wrapper">
<header class="form-head">
<h2>Contact US</h2>
</header>
<form id="contactForm" action="https://formspree.io/f/mqkvkayy" method="POST">
<div class="name-form">
<label for="name">Name : </label>
<input id="name" type="text" name="name" required />
<div class="container">
<div class="contact-container">
<div class="grid-container">
<div class="text-container">
<div class="heading">
<h2 class="title">CONTACT US</h2>
<p class="description">At BuddyTrail, we are here to assist you every step of the way! Whether you have questions, feedback, or just want to learn more about our platform, feel free to reach out to us. Our team is committed to providing you with the best experience as you explore new trails and make new friends along the way.</p>
</div>
<ul class="info-list">
<li class="info-item">
<div class="icon bg-blue-900">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"></path>
<path d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0z"></path>
</svg>
</div>
<div class="info-text-content">
<h3 class="info-title">Our Address</h3>
<p class="info-description">123 Trailblazer Lane, Adventure</p>
</div>
</li>
<li class="info-item">
<div class="icon bg-blue-900">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2"></path>
<path d="M15 7a2 2 0 0 1 2 2"></path>
<path d="M15 3a6 6 0 0 1 6 6"></path>
</svg>
</div>
<div class="info-text-content">
<h3 class="info-title">Contact</h3>
<p class="info-description">Mobile: +91 921 456-7890</p>
<p class="info-description">Mail: buddyTrail@gmail.com</p>
</div>
</li>
<li class="info-item">
<div class="icon bg-blue-900">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
<path d="M12 7v5l3 3"></path>
</svg>
</div>
<div class="info-text-content">
<h3 class="wr">Working Hours</h3>
<p class="info-description">Monday - Friday: 08:00 - 17:00</p>
<p class="info-description">Saturday & Sunday: 08:00 - 12:00</p>
</div>
</li>
</ul>
</div>
<div class="form-container">
<h2 class="form-title">Ready to Get Started?</h2>
<form id="contactForm">
<div class="input-group">
<input type="text" id="name" placeholder="Your name" class="input-field">
<input type="email" id="email" placeholder="Your email address" class="input-field">
<textarea id="textarea" placeholder="Write your message..." class="input-field"></textarea>
</div>
<div class="submit-button-container">
<button type="submit" class="submit-button">Send Message</button>
</div>
</form>
</div>
</div>
</div>
<div class="email-form">
<label for="email">Email :</label>
<input id="email" type="email" name="email" required />
</div>
<button type="submit">Submit</button>
</form>
</div>
</section>

</section>


<!-- Add this custom popup HTML -->
<div id="confirmationPopup" class="popup" style="display: none;">
<div class="popup-content">
Expand Down
151 changes: 151 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1347,3 +1347,154 @@ justify-content: center;

/* Extra large devices (large laptops and desktops, 1200px and up) */
/*@media only screen and (min-width: 1200px) {...}*/


/*For contact page*/
/* Section Styling */
.contact-heading {
text-align: center;
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 20px;
}


.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 2rem;
}

/* Heading and Title */
.subheading {
font-weight: 600;
text-transform: uppercase;
color: #3b82f6;
}

.title {
font-weight: bold;
color: #111827;
font-size: 5rem;
}

.wr{
font-weight:600;
color: black;
}
.description {
color: #4b5563;
margin-top: 1rem;
font-size: 1.25rem;
}

/* Contact Container */
.contact-container {
display: flex;
justify-content: center;
align-items: stretch;
}

/* Grid Layout */
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
}

/* Text Container */
.text-container {
padding-right: 1.5rem;
}

/* Info Text */
.info-text {
margin-bottom: 1.5rem;
color: #4b5563;
font-size: 1rem;
}

/* Info List */
.info-list {
list-style: none;
padding: 0;
}

.info-item {
display: flex;
margin-bottom: 1.5rem;
}

.icon {
width: 2.5rem;
height: 2.5rem;
display: flex;
justify-content: center;
align-items: center;
border-radius: 0.5rem;
color: white;
}

.info-text-content {
margin-left: 1rem;
}

.info-title {
font-weight: 600;
color: #000e2b;
}

.info-description {
color:whitesmoke;
}

/* Form Styling */
.form-container {
padding: 1.5rem;
background-color: white;
border-radius: 0.75rem;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.form-title {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 1rem;
color: #111827;
}

.input-group {
margin-bottom: 1.5rem;
}

.input-field {
width: 100%;
padding: 0.75rem;
margin-bottom: 1rem;
border: 1px solid #d1d5db;
border-radius: 0.5rem;
}

.submit-button-container {
text-align: center;
}

.submit-button {
background-color: #2563eb;
color: white;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
border: none;
cursor: pointer;
}

.submit-button:hover {
background-color: #1d4ed8;
}

/* Responsive Design */
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr;
}
}
Loading