Skip to content

Commit

Permalink
Redesigned Contact-Us Section
Browse files Browse the repository at this point in the history
  • Loading branch information
@AsmitaMishra24
AsmitaMishra24 committed Aug 10, 2024
1 parent fee92b8 commit 4b91f46
Show file tree
Hide file tree
Showing 2 changed files with 170 additions and 47 deletions.
131 changes: 131 additions & 0 deletions contactus.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
#contact-section {
background-color: #f9f9f9;
padding: 60px 0;
font-family: 'Oxygen', sans-serif;
}

.container {
max-width: 1200px;
margin: 0;
padding: 0 10px;
}

.contact-wrapper {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
}

.contact-info {
flex: 1;
max-width: 45%;
margin-right: 20px;
}

.section__title {
font-size: 2.5rem;
margin-bottom: 20px;
color: var(--text-dark);
}

.section__description {
font-size: 1rem;
color: #555;
margin-bottom: 40px;
line-height: 1.6;
}

.contact-info img {
max-width: 100%;
height: auto;
border-radius: 10px;
}

.contact-form-wrapper {
flex: 1;
max-width: 50%;
margin-top: 10px;
}

.contact-form-wrapper h2 {
font-size: 2.2rem;
margin-bottom: 30px;
font-weight: 500;
color: #6F57C7;
text-shadow: 2px 2px 4px rgba(111, 87, 199, 0.5);
}

.form-group {
position: relative;
display: flex;
flex-direction: column;
margin-bottom: 20px;
}

.form-group label {
display: flex;
align-items: center;
font-size: 1rem;
color: var(--text-dark);
}

.form-group i {
margin-right: 10px;
color: #333;
}

#email,
.form-group input,
.form-group textarea {
width: 100%;
padding: 10px 15px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 1rem;
color: #333;
outline: none;
box-sizing: border-box;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
color: #aaa;
}

.form-group textarea {
resize: vertical;
height: 180px;
}

.form-actions {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
gap: 15px;
margin-top: 20px;
}

#btn-submit, #btn-feedback {
color: #ffffff;
background-color: #6F57C7;
padding: 10px 20px;
width: 120px;
border-radius: 5px;
text-transform: capitalize;
border: none;
outline: none;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
margin-top: 15px;
box-shadow: 0 4px 8px rgba(111, 87, 199, 0.7);
}

#btn-submit:hover, #btn-feedback:hover {
color: #ffffff;
font-weight: 600;
background-color: #FF5656;
box-shadow: 0 4px 8px rgba(255, 86, 86, 0.7);
}
86 changes: 39 additions & 47 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="counter.css" class="rel href">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css">
<link rel="stylesheet" href="contactus.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Expand Down Expand Up @@ -1900,56 +1901,47 @@ <h2 class="section__title" align-items="center" data-aos="slide-right">Contact U
</section> -->

<section>
<div class="container" id="cnt-form">
<div class="items">
<div class="contact" data-aos="slide-right">
<div>
<h1 class="section__title" style="height: 90px;">Contact Us</h1>
<p>Feel Free to drop us a message with any inquiries or feedback.We're here to assist you!</p>
<img src="./img/flat-design-illustration-customer-support_23-2148887720.avif">
<section id="contact-section">
<div class="container" id="cnt-form">
<div class="contact-wrapper">
<div class="contact-info" data-aos="slide-right">
<h1 class="section__title">Contact Us</h1>
<p class="section__description">
Feel free to drop us a message with any inquiries or feedback. We're here to assist you!
</p>
<img src="./img/flat-design-illustration-customer-support_23-2148887720.avif" alt="Customer Support">
</div>
<div class="contact-form-wrapper" data-aos="fade-in">
<h2>Get in Touch</h2>
<form id="contact-form" name="CalcDiverse Contact" autocomplete="off">
<div class="form-group">
<label for="Name">
<i class="fa-solid fa-user"></i>
<input type="text" id="Name" placeholder="Name" required>
</label>
</div>
</div>
<div class="contact-form" data-aos="fade-in">
<h1>Contact Us</h1>
<form id="contact-form" name="CalcDiverse Contact" autocomplete="off">
<div class="one" style="position: relative;">
<i class="icon1 fa-solid fa-user"></i>
<input type="text" id="Name" placeholder="Name" style="padding-left: 6%;">
</div>
<div style="position: relative;">
<i class="icon2 fa-solid fa-envelope"></i>
<input type="email" id="email" placeholder="Email" class="contact-us-email-fix" style="padding-left:6%; width: 50% !important;
padding-left: 6% !important;
padding-bottom: 10px !important;
margin: 20px !important;
margin-left: 30px !important;
outline: none !important;
border: none !important;
font-size: 15px !important;
background: none !important;
border-bottom: 1px solid var(--text-dark) !important;
color: var(--text-dark) !important;
font-family: 'Oxygen', sans-serif !important; border-radius: 20px;" required>
</div>
<div style="position: relative;">
<i class="icon3 fa-solid fa-message"></i>
<textarea id="message" placeholder="Type your message here.." style="padding-left:6%;"
required></textarea><br>
</div>
<button type="submit" class="btn btn-style" data-aos="fade-in" id="btn-style"
style="margin-right: 40px;box-shadow: 2px 2px 8px red;">Send</button>
<button onclick="window.location.href='feed.html'" class="btn btn-style" data-aos="fade-in"
id="btn-style" style="box-shadow: 2px 2px 8px red;">Feedback</button>
</form>
</div>
<div class="form-group">
<label for="email">
<i class="fa-solid fa-envelope"></i>
<input type="email" id="email" placeholder="Email" required>
</label>
</div>
<div class="form-group">
<label for="message">
<i class="fa-solid fa-message"></i>
<textarea id="message" placeholder="Type your message here..." required></textarea>
</label>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary" id="btn-submit">Send</button>
<button type="button" onclick="window.location.href='feed.html'" class="btn btn-secondary" id="btn-feedback">Feedback</button>
</div>
</form>
</div>
</div>
</section>




</div>
</section>

<section class="subscribe" id="Contact">
<div class="section__container subscribe__container">
<div class="subscribe__content">
Expand Down

0 comments on commit 4b91f46

Please sign in to comment.