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

contact Ui #311

Merged
merged 1 commit into from
Oct 20, 2024
+101 −115
Merged

contact Ui #311

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 modified .DS_Store
View file
Open in desktop
Binary file not shown.
53 changes: 20 additions & 33 deletions contact-us.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,28 +50,27 @@
</header>

<!-- Main Contact Form Section -->
<div class="contact-section">
<div class="container">
<div class="contact-section container">
<div class="contact-container container">
<div class="contact-info">
<a href="tel:+1234567890" class="info-item">
<i class="fas fa-phone"></i> <!-- Font Awesome icon for phone -->
<h2>Get In Touch</h2>
<p>We'd love to hear from you. Here's how you can reach us...</p>
<a href="tel:+918957818597" class="info-item">
<i class="fas fa-phone"></i>
<span>+91 895 781 8597</span>
</a>
<a href="mailto:[email protected]" class="info-item">
<i class="fas fa-envelope"></i> <!-- Font Awesome icon for email -->
<i class="fas fa-envelope"></i>
<span>[email protected]</span>
</a>
<a href="https://www.google.com/maps/place/123+Street+Name,+City,+Country" class="info-item" target="_blank">
<i class="fas fa-map-marker-alt"></i> <!-- Font Awesome icon for address -->
<a href="https://www.google.com/maps/place/Fatehpur,+Uttar+Pradesh,+India" class="info-item" target="_blank">
<i class="fas fa-map-marker-alt"></i>
<span>Fatehpur, Uttar Pradesh, India</span>
</a>
</div>

<div class="contact-container">
<h2>Get In Touch</h2>
<p style="color: black; margin-bottom: 30px;">Feel free to reach out for any inquiries or feedback.</p>

<!-- Contact Form -->
<div class="contact-form-container">
<h2>Send us a message</h2>
<form class="contact-form" action="https://formspree.io/f/mdkonvre" method="POST">
<div class="input-group">
<input type="text" id="name" name="name" placeholder="Your Name" required />
Expand All @@ -87,24 +86,22 @@ <h2>Get In Touch</h2>
</div>
</form>
</div>

<!-- Error Message -->
<div id="error-message" class="error-message"></div>
</div>

<!-- Error Message -->
<div id="error-message" class="error-message"></div>
</div>


<!-- Social Media Links and Footer -->
<footer class="footer">
<ul class="social-icon">
<li class="social-icon__item">
<a class="social-icon__link"
href="https://m.facebook.com/profile.php?eav=AfaQiAnLMKoJt9fhAP0mpclv59dhzAMBnCy-rfJi2qawDv01IOkuI4RSxLQFG4508J0&paipv=0">
<a class="social-icon__link" href="https://m.facebook.com/profile.php?eav=AfaQiAnLMKoJt9fhAP0mpclv59dhzAMBnCy-rfJi2qawDv01IOkuI4RSxLQFG4508J0&paipv=0">
<i class="fa-brands fa-facebook"></i>
</a>
</li>
<li class="social-icon__item">
<a class="social-icon__link" href=" https://twitter.com/gps_96169">
<a class="social-icon__link" href="https://twitter.com/gps_96169">
<i class="fa-brands fa-x-twitter"></i>
</a>
</li>
Expand All @@ -123,22 +120,12 @@ <h2>Get In Touch</h2>
<i class="fa-brands fa-whatsapp"></i>
</a>
</li>

</ul>
<ul class="menu">
<li class="menu__item"><a class="menu__link" href="#">Home</a></li>
<li class="menu__item">
<a class="menu__link" href="about-us.html">About</a>
</li>
<li class="menu__item">
<a class="menu__link" href="project.html">Project Section</a>
</li>
<li class="menu__item">
<a class="menu__link" href="index.html">Profile Section</a>
</li>
<!-- <li class="menu__item">
<a class="menu__link" href="contact-us.html">Contact</a>
</li> -->
<li class="menu__item"><a class="menu__link" href="about-us.html">About</a></li>
<li class="menu__item"><a class="menu__link" href="project.html">Project Section</a></li>
<li class="menu__item"><a class="menu__link" href="index.html">Profile Section</a></li>
</ul>
<p>Dev Profiles &copy; <span id="dates"></span> | All Rights Reserved</p>
</footer>
Expand All @@ -150,4 +137,4 @@ <h2>Get In Touch</h2>
<script src="script.js"></script>
</body>

</html>
</html>
4 changes: 4 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,10 @@ document.addEventListener("DOMContentLoaded", function () {
document.querySelector("footer").classList.toggle("text-color");
const buttons = document.querySelectorAll(".add");

// const contactContainer = document.querySelector(".contact-container");
// if (contactContainer) {
// darkMode.classList.toggle("light-background");
// }
buttons.forEach((button) => {
button.classList.toggle("bg-color");
});
Expand Down
159 changes: 77 additions & 82 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -741,143 +741,138 @@ footer {
}

/* Contact Section */
/* ... (keep all existing CSS rules) ... */

/* UPDATED: Improved Contact Page Styles */
.contact-section {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
justify-content: center;
align-items: center;
min-height: calc(100vh - 100px);
padding: 50px 20px;
/* background-color: var(--color-body-bg); */
}

/* Left Contact Info Styling */
.contact-container {
display: flex;
max-width: 1200px;
/* background: var(--color-profile-card-bg); */
border-radius: 20px;
box-shadow: 0 0 20px 25px rgba(51, 63, 70, 0.227);
overflow: hidden;
padding:0;

}

.contact-info {
flex: 1;
padding: 50px;
background: linear-gradient(135deg, var(--color-profile-border), var(--color-green));
color: white;
display: flex;
flex-direction: column;
flex: 1;
max-width: 400px;
margin-right: 100px;
justify-content: center;
align-items: flex-start;
gap: 20px;
}

.contact-info h2 {
font-size: 32px;
margin-bottom: 20px;
}

.contact-info p {
margin-bottom: 30px;
font-size: 16px;
line-height: 1.6;
}

.info-item {
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 15px;
font-family: "Poppins", sans-serif;
text-decoration: none;
color: #ffffff;
transition: color 0.3s, background-color 0.3s;
padding: 10px;
border-radius: 8px;
align-items: center;
margin-bottom: 20px;
font-size: 16px;
color: white;
text-decoration: none;
transition: transform 0.3s ease;
}

/* Hover effect */

.info-item:hover {
background-color: rgba(255, 99, 71, 0.1);
color: #ff6347;
border: 1px solid rgba(255, 255, 255, 0.509);
transform: translateX(10px);
}

.info-item i {
margin-right: 10px;
color: #ff6347;
margin-right: 15px;
font-size: 24px;
}



/* Right Contact Form Container */
/* Contact Container Styling */

.contact-container {
max-width: 800px;
margin: 50px auto;
.contact-form-container {
flex: 1;
padding: 50px;
background: #fff;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
font-family: "Poppins", sans-serif;
transition: box-shadow 0.3s ease, border 0.3s ease;
}

.contact-container:hover {
border: 1px solid rgba(0, 0, 0, 0.061);
box-shadow: inset 0 0 35px rgba(0, 0, 0, 0.869);
background: white;
}

.contact-container h2 {
text-align: center;
margin-bottom: 5px;
color: #333;
font-size: 32px;
font-weight: 900;
}

.contact-container p {
color: black;
.contact-form-container h2 {
color: var(--color-profile-border);
margin-bottom: 30px;
text-align: center;
font-size: 28px;
}

/* Contact Form Styling */

.contact-form {
display: flex;
flex-direction: column;
flex-direction: column;
}

.input-group {
margin-bottom: 20px;
margin-bottom: 20px;
}

.contact-form input,
.contact-form textarea {
width: 100%;
padding: 15px;
border-radius: 8px;
border: 1px solid #ccc;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
color: #333;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
transition: border-color 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
outline: none;
border: 1px solid #ff6347;
box-shadow: 0 0 10px rgba(255, 99, 71, 0.2);
outline: none;
}

/* Submit Button Styling */

.contact-form button {
width: 70%;
padding: 15px;
background-color: #ff6347;
color: white;
padding: 15px 30px;
background-color: #ee8122;
color: white;
border: none;
border-radius: 8px;
border-radius: 5px;
font-size: 18px;
cursor: pointer;
transition: background-color 0.3s ease;
align-self: center;
cursor: pointer;
transition: background-color 0.3s ease;
}

.contact-form button:hover {
background-color: #e5533d;
background-color:#f0642d ;
}

/* Error Message Styling */

.error-message {
color: rgb(0, 0, 0);
text-align: center;
color: #ff6347;
margin-top: 20px;
height: fit-content;
padding: 2rem;
border-radius: 10px;
padding: 10px;
border-radius: 5px;
background-color: rgba(255, 99, 71, 0.1);
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
.contact-container {
flex-direction: column;
}

.contact-info, .contact-form-container {
padding: 30px;
}
}

/* ... (keep all existing CSS rules after this point) ... */
Loading