<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bright Contact Form</title>
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
</head>
<body>
<div class="contacts-main">
<div class="contant11-top-bg">
<div class="wrapper">
<div class="d-grid contact section-gap">
<div class="contact-info-left d-grid text-center">
<div class="contact-info">
<span class="fa fa-location-arrow" aria-hidden="true"></span>
<h4>Address</h4>
<p>4885 Pretty View Lane, Lorem ipsum, Dolor sit amet, New York, USA</p>
</div>
<div class="contact-info">
<span class="fa fa-phone" aria-hidden="true"></span>
<h4>Phone</h4>
<p><a href="tel:+44 7834 857829">+44 7834 857829</a></p>
<p><a href="tel:+44 987 654 321">+44 987 654 321</a></p>
</div>
<div class="contact-info">
<span class="fa fa-envelope-open" aria-hidden="true"></span>
<h4>Mail</h4>
<p><a href="mailto:mail@example.com" class="email">mail@example.com</a></p>
<p><a href="mailto:mail@example.com" class="email">mail@example.com</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="form-41-mian section-gap">
<div class="wrapper">
<h3 class="cont-head">Get in touch with us</h3>
<div class="d-grid align-form-map">
<div class="form-inner-cont">
<form action="contact-form.php" method="post">
<input type="text" name="name" class="form-control" placeholder="Your Name" required="">
<br>
<input type="email" name="email" class="form-contol" placeholder="Your Email" required="">
<br>
<textarea name="message" class="form-control" placeholder="Message" rows="4" required=""></textarea>
<input type="submit" class="form-control submit" value="Send Message" style="width: 150px;text-align: center;">
</form>
</div>
<div class="map">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3001161.424489281!2d-78.01909140705047!3d42.72866436845163!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4ccc4bf0f123a5a9%3A0xddcfc6c1de189567!2sNew%20York%2C%20USA!5e0!3m2!1sen!2sin!4v1570786994395!5m2!1sen!2sin"
frameborder="0" allowfullscreen=""></iframe>
</div>
</div>
</div>
</div>
</body>
</html>
----------------------------------------------------CSS---------------------------------------------------
body,
html {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
textarea {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
* {
box-sizing: border-box;
}
.wrapper {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) {
.wrapper {
max-width: 540px;
}
}
@media (min-width: 768px) {
.wrapper {
max-width: 720px;
}
}
@media (min-width: 992px) {
.wrapper {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.wrapper {
max-width: 1140px;
}
}
.d-grid {
display: grid;
}
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
button,
select {
outline: none;
appearance: none;
-webkit-appearance: none;
}
button,
.btn,
select {
cursor: pointer;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
a {
text-decoration: none;
}
iframe {
border: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
p {
margin: 0;
padding: 0;
}
/* Section top bottom gap */
.section-gap {
padding: 4.5rem 0;
}
@media screen and (max-width:767px) {
.section-gap {
padding: 3.5rem 0;
}
}
@media screen and (max-width:480px) {
.section-gap {
padding: 3rem 0;
}
}
/* / Section top bottom gap */
/* title-styling */
h3.global-title {
font-size: 40px;
line-height: 45px;
color: #16191e;
margin-bottom: 50px;
text-transform: capitalize;
}
@media screen and (max-width:767px) {
h3.global-title {
font-size: 40px;
line-height: 45px;
}
}
@media screen and (max-width:600px) {
h3.global-title {
font-size: 35px;
line-height: 40px;
}
}
@media screen and (max-width:500px) {
h3.global-title {
font-size: 30px;
line-height: 35px;
}
}
/* / title-styling */
.contant11-top-bg {
background: url('../images/c11-bg.jpg') no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.contact-info h4 {
font-size: 20px;
color: #000;
margin: 10px 0 5px 0;
}
.contact-info-left {
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 50px;
}
.contact-info {
-o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 2rem;
background: #fff;
border-radius: 4px;
}
.contact p {
font-size: 16px;
color: #636363;
line-height: 24px;
}
.contact a {
display: block;
color: #636363;
}
.contact {
grid-template-columns: 1fr;
}
.contact a:hover {
display: block;
color: #002663;
}
.contact span.fa {
font-size: 40px;
color: #002663;
margin-bottom: 10px;
}
iframe {
width: 100%;
height: 450px;
}
@media (max-width: 1024px) {
.contact-info-left {
grid-gap: 40px;
}
}
@media (max-width: 991px) {
.contact-info-left {
grid-template-columns: 1fr;
}
}
@media (max-width: 900px) {
.contact p {
font-size: 17px;
}
}
@media (max-width: 800px) {
.contact a {
font-size: 16px;
}
.contact {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.map {
float: none;
width: 100%;
text-align: left;
}
iframe {
height: 280px;
}
}
@media (max-width: 375px) {
.contact p {
font-size: 15px;
}
}
/*--//responsive--*/
.align-form-map {
grid-template-columns: 1fr 1fr;
grid-gap: 80px;
}
h3.cont-head {
font-size: 35px;
line-height: 40px;
color: #002663;
margin-bottom: 35px;
}
form.signin-form {
text-align: left;
}
.form-input {
margin-bottom: 15px;
}
.form-inner-cont label {
font-size: 16px;
line-height: 20px;
margin-bottom: 10px;
color: #636363;
display: block;
}
.form-inner-cont input,
.form-inner-cont textarea {
outline: none;
width: 100%;
font-size: 15px;
padding: 0px 15px;
margin-bottom: 25px;
color: #304659;
height: 45px;
text-align: left;
-webkit-appearance: none;
background: #ffffff;
display: grid;
grid-template-columns: .1fr 1fr;
align-items: center;
padding-left: 15px;
border: 1px solid rgba(31, 94, 180, 0.22);
border-radius: 4px;
}
.form-inner-cont input:focus,
.form-inner-cont textarea:focus {
border: 1px solid #002663;
}
.form-inner-cont textarea {
height: 125px;
resize: none;
padding: 15px 15px;
}
.btn-contact {
min-width: 130px;
cursor: pointer;
text-decoration: none;
-webkit-appearance: none;
display: inline-block;
font-style: normal;
font-weight: normal;
font-size: 15px;
text-align: center;
color: #000000;
background: #fff;
padding: 14px 18px;
border-radius: 4px;
transition: 0.3s ease;
border: 1px solid #002663;
width: 100%;
margin-top: 15px;
text-transform: uppercase;
}
.btn-contact:hover {
background: #002663;
color: #fff;
}
iframe {
width: 100%;
height: 100%;
border: 5px solid #f5f5f5;
border-radius: 4px;
}
@media all and (max-width: 1280px) {
.form-41-mian {
padding: 4em 0;
}
}
@media all and (max-width: 1024px) {
.align-form-map {
grid-gap: 60px;
}
}
@media all and (max-width: 991px) {
.align-form-map {
grid-gap: 60px;
grid-template-columns: 1fr;
}
iframe {
height: 350px;
}
}
@media all and (max-width: 590px) {
h3.cont-head {
font-size: 30px;
margin-bottom: 30px;
}
iframe {
height: 300px;
}
}
0 Comments