html & Css Code

HTML Code & Css Code :

html Code

<div class=”contact-section”>
<div class=”contact-box”>
<h2>Contact Us</h2>
<p>We’d love to hear from you. Send us a message!</p>

<!– Disable Captcha –>
<input type=”hidden” name=”_captcha” value=”false”>

<!– Redirect page after submission –>
<input type=”hidden” name=”_next” value=”https://yourwebsite.com/thank-you”>

<div class=”form-group”>
<input type=”email” name=”email” required>
<label>Your Email</label>
</div>

<div class=”form-group”>
<textarea name=”message” rows=”5″ required></textarea>
<label>Your Message</label>
</div>

<button type=”submit” class=”submit-btn”>Send Message</button>
</form>
</div>
</div>

Contact Us

We’d love to hear from you. Send us a message!

Css Code

.contact-section {
background: #fffff;
padding: 60px 20px;
display: flex;
justify-content: center;
}

.contact-box {
background: #002583;
padding: 40px 35px;
width: 100%;
max-width: 550px;
border-radius: 18px;
color: white;
box-shadow: 0px 0px 25px rgba(0,0,0,0.35);
}

.contact-box h2 {
font-size: 32px;
margin-bottom: 5px;
color: #ffb800;
font-weight: 700;
}

.contact-box p {
margin-bottom: 25px;
font-size: 15px;
opacity: 0.9;
}

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

.form-group input,
.form-group textarea {
width: 100%;
padding: 12px 15px;
border: 2px solid #ffb800;
background: transparent;
color: white;
border-radius: 10px;
outline: none;
font-size: 15px;
}

.form-group label {
position: absolute;
top: -12px;
left: 15px;
background: #002583;
padding: 0 6px;
font-size: 14px;
color: #ffb800;
}

.submit-btn {
width: 100%;
padding: 12px 20px;
background: #ffb800;
border: none;
color: #002583;
font-size: 18px;
font-weight: bold;
border-radius: 10px;
cursor: pointer;
transition: 0.3s ease;
}

.submit-btn:hover {
background: #e5e8ef;
color: #002583;
}

Contact Us

We’d love to hear from you. Send us a message!