<section class="contact-us-3 py-5">
<div class="fui-container bg-contain" style="background-image: linear-gradient(rgba(255,255,255,0.9),rgba(255,255,255,0.9)),url(images/logo-green.png)">
<div class="row">
<!-- CONTACT INFO -->
<div class="col-md-12 col-12 pb-2">
<h2 class="uppercase weight-500">Get in touch</h2>
<!-- CONTACT INFO -->
<div class="contact-info">
<!-- EMAIL -->
<div class="single-contact-info">
<i class="if if-envelope"></i>
<a href="mailto:email@email.com">email@email.com</a>
</div>
<!-- EMAIL -->
<div class="single-contact-info">
<i class="if if-phone"></i>
<a href="">(123) 123-1234</a>
</div>
</div>
</div>
<!-- COL -->
<div class="col-md-6 col-12">
<div class="group">
<input type="text" name="name" class="fui-input" placeholder="Name*" required>
</div>
</div>
<!-- COL -->
<div class="col-md-6 col-12">
<div class="group">
<input type="email" name="email" class="fui-input" placeholder="Email*" required>
</div>
</div>
<!-- COL -->
<div class="col-md-6 col-12">
<div class="group">
<input type="tel" name="phone" class="fui-input" placeholder="Phone">
</div>
</div>
<!-- COL -->
<div class="col-md-6 col-12">
<div class="group">
<input type="text" name="address" class="fui-input" placeholder="Address">
</div>
</div>
<!-- COL -->
<div class="col-md-12 col-12">
<div class="group">
<input type="text" name="subject" class="fui-input" placeholder="Subject">
</div>
</div>
<!-- COL -->
<div class="col-md-12 col-12">
<div class="group">
<textarea name="message" class="fui-input" placeholder="Message*" required></textarea>
</div>
</div>
<!-- SUBMIT -->
<div class="col-md-12 col-12">
<div class="group">
<button class="fui-btn fui-btn-primary px-4 py-1" type="submit">SEND</button>
</div>
</div>
</div>
</div>
</section>
.contact-us-3 .contact-info {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.contact-us-3 .contact-info .single-contact-info {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
margin-right: 20px;
padding: 10px 0;
}
.contact-us-3 .contact-info .single-contact-info i {
width: 40px;
height: 40px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background: black;
color: white;
border-radius: 50%;
margin-right: 10px;
}
.contact-us-3 .contact-info .single-contact-info a {
font-weight: 500;
color: black;
}
.contact-us-3 .contact-info .single-contact-info a:hover {
color: #008cff;
}
.contact-us-3 .fui-input {
border-radius: 0;
border-color: black;
padding: 15px;
background: transparent;
}
.contact-us-3 .fui-input::-webkit-input-placeholder {
color: black;
}
.contact-us-3 .fui-input:-ms-input-placeholder {
color: black;
}
.contact-us-3 .fui-input::-ms-input-placeholder {
color: black;
}
.contact-us-3 .fui-input::placeholder {
color: black;
}
.contact-us-3 .fui-input:focus {
border-color: #008cff;
}
.contact-us-3 .fui-input:focus::-webkit-input-placeholder {
color: gray;
}
.contact-us-3 .fui-input:focus:-ms-input-placeholder {
color: gray;
}
.contact-us-3 .fui-input:focus::-ms-input-placeholder {
color: gray;
}
.contact-us-3 .fui-input:focus::placeholder {
color: gray;
}
Insert before the closing </head> tag
<!-- Icon Famous -->
<link rel="stylesheet" href="https://cdn.boomcdn.com/libs/icon-famous/1.0.0-beta.2/iconfamous.css">
<!-- Famous UI -->
<link rel="stylesheet" href="https://cdn.boomcdn.com/libs/famous-ui/1.0.0-beta.1/famousui.css">
Insert before the closing </body> tag
<!-- jQuery -->
<script src="https://cdn.boomcdn.com/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Famous UI -->
<script src="https://cdn.boomcdn.com/libs/famous-ui/1.0.0-beta.1/famousui.js"></script>