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

Improve Interactivity, Fix Contact Us footer section and contact us form #767

Closed
wants to merge 1 commit into from
Closed

Improve Interactivity, Fix Contact Us footer section and contact us form #767

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
Binary file added Twitter.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
313 changes: 251 additions & 62 deletions contactus.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -265,29 +265,142 @@
</nav>
<!-- Contact Form Section -->
<section class="container">
<div class="contact-form">
<h2>Contact Us</h2>
<form>
<div class="form-group">
<input type="text" id="name" name="name" required placeholder=" ">
<label for="name">Full Name</label>
</div>
<div class="form-group">
<input type="email" id="email" name="email" required placeholder=" ">
<label for="email">Email Address</label>
</div>
<div class="form-group">
<input type="text" id="subject" name="subject" required placeholder=" ">
<label for="subject">Subject</label>
</div>
<div class="form-group">
<textarea id="message" name="message" rows="5" required placeholder=" "></textarea>
<label for="message">Your Message</label>
</div>
<button type="submit" class="submit-btn">Send Message</button>
</form>
</div>
</section>
<style>
/* Contact Form Styling */
.contact-form {
max-width: 600px;
margin: 50px auto;
padding: 40px;
background: url('https://wallpaperaccess.com/full/3124512.jpg') no-repeat center center;
background-size: cover;
border-radius: 10px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
color: #ffffff;
}

.contact-form h2 {
text-align: center;
font-size: 28px;
margin-bottom: 30px;
color: #ffffff;
text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}

.contact-form .form-group {
position: relative;
margin-bottom: 25px;
}

.contact-form input,
.contact-form textarea {
width: 100%;
padding: 15px;
background: rgba(255, 255, 255, 0.1);
border: none;
border-bottom: 2px solid #00a69c;
border-radius: 5px;
color: #ffffff;
font-size: 16px;
transition: all 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
background: rgba(255, 255, 255, 0.2);
border-bottom-color: #ffffff;
outline: none;
box-shadow: 0 4px 8px rgba(0, 166, 156, 0.3);
}

.contact-form label {
position: absolute;
left: 15px;
top: 15px;
color: #ffffff;
font-size: 16px;
pointer-events: none;
transition: all 0.3s ease;
}

.contact-form input:focus + label,
.contact-form input:not(:placeholder-shown) + label,
.contact-form textarea:focus + label,
.contact-form textarea:not(:placeholder-shown) + label {
top: -10px;
font-size: 12px;
color: #00a69c;
text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}

/* Enhanced Button Hover Effect */
.contact-form .submit-btn {
width: 100%;
padding: 15px;
background-color: #00a69c;
border: none;
border-radius: 5px;
color: #ffffff;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: background 0.3s ease, transform 0.2s ease;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.contact-form .submit-btn:hover {
background-color: #008f82;
transform: translateY(-3px);
box-shadow: 0 6px 12px rgba(0, 143, 130, 0.4);
}

.contact-form .submit-btn:active {
transform: translateY(1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Input Field Hover Effect */
.contact-form input:hover,
.contact-form textarea:hover {
background: rgba(255, 255, 255, 0.15);
border-bottom-color: #00c7b6;
box-shadow: 0 2px 4px rgba(0, 166, 156, 0.2);
}

/* Responsive adjustments */
@media (max-width: 768px) {
.contact-form {
padding: 30px;
}

.contact-form h2 {
font-size: 24px;
}
}
</style>

<div class="contact-form">
<h2>Contact Us</h2>
<form>
<div class="form-group">
<input type="text" id="name" name="name" required placeholder=" ">
<label for="name">Full Name</label>
</div>
<div class="form-group">
<input type="email" id="email" name="email" required placeholder=" ">
<label for="email">Email Address</label>
</div>
<div class="form-group">
<input type="text" id="subject" name="subject" required placeholder=" ">
<label for="subject">Subject</label>
</div>
<div class="form-group">
<textarea id="message" name="message" rows="5" required placeholder=" "></textarea>
<label for="message">Your Message</label>
</div>
<button type="submit" class="submit-btn">Send Message</button>
</form>
</div>
</section>

<!-- Footer -->
<footer class="footer-container">
Expand All @@ -308,49 +421,125 @@ <h2>Contact Us</h2>
</div>


<style>
/* Basic Footer Styling */
.footer-links {
display: flex;
flex-direction: column;
gap: 30px;
background-color: #1a1a1a;
padding: 30px 5%;
}

/* Row Styling */
.footer-row {
display: flex;
justify-content: space-between;
gap: 60px;
flex-wrap: wrap; /* Allows columns to wrap on smaller screens */
}

/* Column Header Styling */
.footer-column h4 {
font-size: 16px;
color: #00a69c;
margin-bottom: 15px;
}

/* List Styling */
.footer-column ul {
list-style: none;
padding: 0;
margin: 0;
}

/* Sub-Link Spacing */
.footer-column ul li {
display: inline-block;
margin-right: 15px; /* Adds space between each link */
margin-bottom: 10px; /* Adds vertical space for wrapping */
}

/* Styling for Links */
.footer-column ul li a {
text-decoration: none;
color: #ffffff;
font-size: 14px;
padding: 5px 0;
display: inline-block;
}

/* Hover Effect */
.footer-column ul li a:hover {
text-decoration: underline;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
.footer-row {
flex-direction: column;
gap: 40px;
}

.footer-column h4 {
font-size: 14px;
}

.footer-column ul li a {
font-size: 13px;
padding: 4px 0;
}
}
</style>

<div class="footer-links">
<div class="footer-column">
<h4>HELPFUL LINKS</h4>
<ul>
<li><a href="#">Help Centre</a></li>
<li><a href="#">Special Assistance</a></li>
<li><a href="#">Download The App</a></li>
<li><a href="#">Booking Conditions</a></li>
</ul>
</div>

<div class="footer-column">
<h4>ABOUT US</h4>
<ul>
<li><a href="#">Media Center</a></li>
<li><a href="#">Investors</a></li>
<li><a href="#">Modern Slavery Act</a></li>
<li><a href="terms.html">Terms Of Use</a></li>

</ul>
</div>

<div class="footer-column">
<h4>KEEPING SAFE</h4>
<ul>
<li><a href="#">ATOL Protected</a></li>
<li><a href="#">Travel Aware</a></li>
<li><a href="#">FCDO Travel Advice</a></li>
<li><a href="#">ABTA</a></li>
</ul>
<!-- First Row: HELPFUL LINKS and ABOUT US -->
<div class="footer-row">
<div class="footer-column">
<h4>HELPFUL LINKS</h4>
<ul>
<li><a href="#">Help Centre</a></li>
<li><a href="#">Special Assistance</a></li>
<li><a href="#">Download The App</a></li>
<li><a href="#">Booking Conditions</a></li>
</ul>
</div>

<div class="footer-column">
<h4>ABOUT US</h4>
<ul>
<li><a href="#">Media Center</a></li>
<li><a href="#">Investors</a></li>
<li><a href="#">Modern Slavery Act</a></li>
<li><a href="terms.html">Terms Of Use</a></li>
</ul>
</div>
</div>

<div class="footer-column">
<h4>FIND US</h4>
<ul>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Group Cookie Notice</a></li>
<li><a href="privacy.html">Privacy And Policy</a></li>
<li><a href="#">Sitemap</a></li>
</ul>

<!-- Second Row: KEEPING SAFE and FIND US -->
<div class="footer-row">
<div class="footer-column">
<h4>KEEPING SAFE</h4>
<ul>
<li><a href="#">ATOL Protected</a></li>
<li><a href="#">Travel Aware</a></li>
<li><a href="#">FCDO Travel Advice</a></li>
<li><a href="#">ABTA</a></li>
</ul>
</div>

<div class="footer-column">
<h4>FIND US</h4>
<ul>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Group Cookie Notice</a></li>
<li><a href="privacy.html">Privacy And Policy</a></li>
<li><a href="#">Sitemap</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>


<div class="footer-bottom">
Expand Down
Loading