Skip to content

Commit

Permalink
Updated Contact section
Browse files Browse the repository at this point in the history
  • Loading branch information
@IshaRawat7
IshaRawat7 committed Oct 8, 2024
1 parent 95b7b28 commit c6c2616
Show file tree
Hide file tree
Showing 2 changed files with 219 additions and 16 deletions.
84 changes: 68 additions & 16 deletions index.html
View file
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: [email protected]</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
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;
}
}

0 comments on commit c6c2616

Please sign in to comment.