Skip to content

Commit

Permalink
contact Ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@KhushiParekh
KhushiParekh committed Oct 19, 2024
1 parent ce778e4 commit 0fa3cdc
Show file tree
Hide file tree
Showing 4 changed files with 101 additions and 115 deletions.
Binary file modified .DS_Store
View file
Binary file not shown.
53 changes: 20 additions & 33 deletions contact-us.html
View file
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
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
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) ... */

0 comments on commit 0fa3cdc

Please sign in to comment.