<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700&display=swap" rel="stylesheet"/>
<div class="container contact-container">
<div class="row">
<!-- Left side content -->
<div class="col-lg-6 d-flex flex-column justify-content-center mb-4 mb-lg-0">
<p class="text-secondary mb-1">WE'RE HERE TO HELP YOU</p>
<h1 class="main-heading">Discuss Your <strong>Chemical Solution</strong> Needs</h1>
<p class="sub-text">Are you looking for top-quality chemical solutions tailored to your needs? Reach out to us.</p>
<div class="contact-info d-flex align-items-center">
<div style="width: 40px; height: 40px; background-color: #e8f1ff; border-radius: 5px; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
<i class="fa fa-envelope text-primary"></i>
</div>
<div>
<small class="text-muted d-block">E-mail</small>
<span>solvent***@gmail.com</span>
</div>
</div>
<div class="contact-info d-flex align-items-center">
<div style="width: 40px; height: 40px; background-color: #e8f1ff; border-radius: 5px; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
<i class="fa fa-phone text-primary"></i>
</div>
<div>
<small class="text-muted d-block">Phone number</small>
<span>+123 - 456 - 7890</span>
</div>
</div>
</div>
<!-- Right side form -->
<div class="col-lg-6">
<div class="contact-form">
<form>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder=" ">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder=" ">
</div>
<div class="form-group">
<label for="industry">Industry</label>
<select class="form-control" id="industry">
<option selected disabled></option>
<option>Pharmaceuticals</option>
<option>Manufacturing</option>
<option>Agriculture</option>
<option>Research</option>
<option>Other</option>
</select>
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea class="form-control" id="message" rows="5" placeholder=" "></textarea>
</div>
<div class="text-center">
<button type="submit" class="btn btn-get-solution">
Get a Solution
<span>
<i class="fa fa-arrow-right text-primary" style="font-size: 12px;"></i>
</span>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS and dependencies -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
body {
background-color: #f0f4f8;
font-family: "Raleway", sans-serif;
}
.contact-container {
padding: 5% 0;
}
select.form-control:not([size]):not([multiple]) {
height: auto;}
.main-heading {
font-weight: 400;
color: #152238;
margin-bottom: 1.5rem;
font-size: 2.5rem;
}
.sub-text {
color: #6c757d;
margin-bottom: 2rem;
}
.contact-info i {
color: #007bff;
font-size: 1.2rem;
}
.contact-form {
background-color: #ffffff;
border-radius: 20px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
padding: 2rem 2.5rem;
}
.form-group {
position: relative;
margin-bottom: 1.8rem;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
border: none;
border-radius: 45px;
padding: 10px;
background: #ffffff;
transition: 0.3s ease-in-out;
box-shadow: inset 0 0 0 1px #ced4da;
font-size: 1rem;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
background: #fff;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
border-color: #007bff;
transform: scale(1.01);
}
.form-group label {
position: absolute;
top: 50%;
left: 1.25rem;
transform: translateY(-50%);
font-size: 0.95rem;
color: #6c757d;
background: white;
padding: 0 0.3rem;
transition: 0.2s ease all;
pointer-events: none;
}
.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label,
.form-group textarea:focus + label,
.form-group textarea:not(:placeholder-shown) + label,
.form-group select:focus + label,
.form-group select:not([value=""]) + label {
top: -0.7rem;
left: 1rem;
background: #fff;
font-size: 0.75rem;
color: #007bff;
}
/* Enhanced dropdown */
select.form-control {
cursor: pointer;
background: linear-gradient(135deg, #e3f2fd, #ffffff);
appearance: none;
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 16px 16px;
}
textarea.form-control {
border-radius: 15px !important;
resize: none;
}
.btn-get-solution {
background-color: #007bff;
color: white;
border-radius: 30px;
padding: 0.75rem 2rem;
font-weight: 600;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
}
.btn-get-solution:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 123, 255, 0.3);
}
.btn-get-solution::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.2);
transition: all 0.4s ease-in-out;
z-index: -1;
}
.btn-get-solution:hover::before {
left: 100%;
}
.btn-get-solution span {
margin-left: 0.75rem;
background: white;
border-radius: 50%;
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
}
.btn-get-solution:hover span {
transform: scale(1.1);
transition: 0.3s ease;
}
.contact-info {margin-bottom: 10px;}
