<div class="container mt-xl-5 mb-5">
<div class="d-flex justify-content-center pt-5">
<h2 class="font-weight-bold">Get in touch!</h2>
</div>
<div class="d-flex justify-content-center text-muted">Contact us for a quote, help to join the team.</div>
<div class="d-md-flex flex-md-row justify-content-center py-4">
<div class="d-md-flex flex-md-column contact px-4">
<div class="d-md-flex justify-content-center icon py-2"> <span class="fa fa-map-marker"></span> <span class="mobile-info text-dark p-2 pb-3">102 street 2714 Don</span> </div>
<div class="contact-info">102 street 2714 Don</div>
</div>
<div class="d-flex flex-column contact px-4">
<div class="d-md-flex justify-content-center icon py-2"> <span class="fa fa-phone"></span> <span class="mobile-info text-dark p-2 pb-3">+02 1234 567</span> </div>
<div class="contact-info">+02 1234 567</div>
</div>
<div class="d-flex flex-column contact px-4">
<div class="d-md-flex justify-content-center icon py-2"> <span class="fa fa-envelope"></span> <span class="mobile-info text-dark p-2 pb-3">
[email protected]</span> </div>
<div class="contact-info">
[email protected]</div>
</div>
</div>
<div class="d-flex flex-row justify-content-center">
<form class="w-xl-50 w-lg-75">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group"> <label for="name">Your Name</label>
<div class="input-field"> <span class="fa fa-user-o p-2 border-right"></span> <input type="text" required> </div>
</div>
<div class="form-group"> <label for="name">Mail</label>
<div class="input-field"> <span class="fa fa-envelope-o p-2"></span> <input type="email" required> </div>
</div>
<div class="form-group"> <label for="name">Phone</label>
<div class="input-field"> <span class="fa fa-mobile p-2"></span> <input type="tel" required> </div>
</div>
</div>
<div class="col-md-6">
<div class="form-group"> <label for="msg">Message</label>
<div class="input-field bg-light"> <textarea name="message" id="msg" cols="10" rows="9" class="form-control bg-light" placeholder="Your Name"></textarea> </div>
</div>
</div>
<div class="d-flex flex-row justify-content-center w-100"> <input type="button" value="send message" class="btn"> </div>
</div>
</div>
</form>
</div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
* {
box-sizing: border-box
}
body {
background-color: navy
}
.container {
background-color: blanchedalmond;
border-radius: 10px
}
h2 {
color: navy
}
.text-muted {
font-family: 'Ubuntu', sans-serif
}
.fa-map-marker,
.fa-phone,
.fa-envelope {
font-size: 25px;
font-weight: bold
}
.icon {
color: rgb(105, 27, 179)
}
.contact:hover {
background-color: #fff;
border-radius: 5px;
cursor: pointer;
position: relative
}
form .container {
background-color: #fff;
border-radius: 10px;
padding: 20px;
margin: 20px auto
}
input,
textarea,
.form-control {
outline: none;
border: none
}
.input-field {
border: 1px solid #ddd;
padding: 5px;
border-radius: 5px
}
.input-field:hover {
border: 2px solid rgb(105, 27, 179);
color: rgb(105, 27, 179);
cursor: pointer
}
label {
font-weight: 500
}
.fa-mobile {
font-size: 20px
}
#msg {
height: 220px
}
.btn {
background-color: rgb(105, 27, 179);
color: #fff;
padding: 5px 10px;
width: 200px;
margin: 10px auto
}
.mobile-info {
display: none
}
@media(min-width:992px) and (max-width:1199px) {
form {
width: 75%
}
.container {
margin-top: 50px
}
}
@media(max-width:767px) {
.mobile-info {
display: inline
}
.contact-info {
display: none
}
.contact {
margin: 10px 0;
border: 1px solid rgb(105, 27, 179);
border-radius: 5px
}
}