July 25, 2021

Contact us

<section class="contact-page-section">
        <div class="container"> 

            <div class="row clearfix">
                <!--Column-->
                <div class="column col-lg-8 col-md-12 col-sm-12">
                    <!-- Contact Form -->
                    <div class="contact-form">
                        <!--Contact Form-->
                        <form method="post" action="#" id="contact-form" novalidate="novalidate">
                            <div class="row clearfix">
                                <div class="col-lg-6 col-md-12 col-sm-12 form-group">
                                    <input type="text" name="username" placeholder="Name" required="">
                                </div>
                                
                                <div class="col-lg-6 col-md-12 col-sm-12 form-group">
                                    <input type="email" name="email" placeholder="Email" required="">
                                </div>

                                <div class="col-lg-6 col-md-12 col-sm-12 form-group">
                                    <input type="text" name="phone" placeholder="Phone" required="">
                                </div>
                                
                                <div class="col-lg-6 col-md-12 col-sm-12 form-group">
                                    <input type="text" name="subject" placeholder="Subject" required="">
                                </div>
                                
                                <div class="col-lg-12 col-md-12 col-sm-12 form-group">
                                    <textarea name="message" placeholder="Massage"></textarea>
                                </div>
                                
                                <div class="col-lg-12 col-md-12 col-sm-12 form-group">
                                    <button class="btn btn-warning btn-lg text-white" type="submit" name="submit-form"><span class="btn-title">Send Massage</span></button>
                                </div>
                                
                            </div>
                        </form>
                            
                    </div>
                    <!--End Contact Form -->
                </div>
                <!--Column-->
                <div class="column col-lg-4 col-md-12 col-sm-12">
                    <div class="text">Feel free to get in touch with me. </div>

                    <ul class="contact-info">
                        <li>
                            <span class="icon fa fa-globe"></span> 
                            <strong>Location </strong>
                            India, New Delhi - 124 Any street 
                        </li>

                        <li>
                            <span class="icon fa fa-phone"></span>
                            <strong>Call Center</strong>
                            <a href="tel:+911234123132">+91 1234 123 132</a>, <a href="tel:+911234123132">+91 1234 123 132</a>
                        </li>

                        <li>
                            <span class="icon fa fa-envelope-open"></span>
                            <strong>Email Us</strong> 
                            <a href="#">info@domain.com</a>, <a href="#">info@domain.com</a>
                        </li>
                    </ul>
                    <ul class="social-icon-three">
                        <li class="title">Follow Us</li>
                        <li><a href="#"><span class="fa fa-facebook"></span></a></li>
                        <li><a href="#"><span class="fa fa-google-plus"></span></a></li>
                        <li><a href="#"><span class="fa fa-twitter"></span></a></li>
                        <li><a href="#"><span class="fa fa-skype"></span></a></li>
                        <li><a href="#"><span class="fa fa-linkedin"></span></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

 

     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    
     <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Poppins', sans-serif; }
.contact-page-section{
  position: relative;
  padding: 100px 0 50px;
}

.contact-page-section .column{
  position: relative;
  margin-bottom: 50px;
}

.contact-page-section .sec-title h2{
  font-size: 30px;
}	

.contact-page-section .contact-form{
  padding-right: 0;
  margin: 0;
}

.contact-page-section .contact-form .form-group input[type=submit],
.contact-page-section .contact-form .form-group button{
  margin-top: 20px;
}

.contact-page-section .text{
  position: relative;
  font-size: 14px;
  line-height: 28px;
  color: #777777;
  margin-bottom: 30px;
}
        ul.contact-info { list-style: none; margin: 0; padding: 0;}
.contact-page-section .contact-info{
  position: relative;
  margin-bottom: 50px;
}

.contact-page-section .contact-info li{
  position: relative;
  padding-left: 70px;
  font-size: 14px;
  line-height: 24px;
  color: #777777;
  font-weight: 400;
  margin-bottom: 45px;
}

.contact-page-section .contact-info li .icon{
  position: absolute;
  left: 0;
  top: 0;
  font-size: 36px;
  line-height: 1.4em;
  color: #bbbbbb;
}

.contact-page-section .contact-info li strong{
  display: block;
  font-size: 18px;
  line-height: 26px;
  color: #002121;
  font-weight: 700;
  margin-bottom: 5px;
}

.contact-page-section .contact-info li a{
  color: #777777;
  display: inline-block;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.contact-page-section .contact-info li a:hover{
  color: #ff7e00;
}

.social-icon-three{
  position: relative;
  display: block;
}

.social-icon-three .title{
  position: relative;
  display: block;
  font-size: 18px;
  line-height: 26px;
  color: #002121;
  font-weight: 700;
  font-family: "Archivo", sans-serif;
  margin-bottom: 20px;
}

.social-icon-three li{
  position: relative;
  display: inline-block;
  font-size: 16px;
  line-height: 24px;
  color: #002121;
  margin-right: 22px;
}

.social-icon-three li:last-child{
  margin-right: 0;
}

.social-icon-three li a{
  position: relative;
  display: block;
  font-size: 16px;
  line-height: 24px;
  color: #002121;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}

.social-icon-two li a:hover{
  color: #ff7e00;
}
        .contact-form .form-group input[type="text"], .contact-form .form-group input[type="email"], .contact-form .form-group input[type="tel"], .contact-form .form-group input[type="url"], .contact-form .form-group textarea, .contact-form .form-group select {
    position: relative;
    display: block;
    width: 100%;
    font-size: 14px;
    line-height: 28px;
    color: #bbbbbb;
    font-weight: 400;
    height: 60px;
    padding: 15px 30px;
    background-color: transparent;
    border: 1px solid #dddddd;
    border-radius: 30px;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}
        .contact-form .form-group textarea {
    height: 200px;
    border-radius: 15px;
    resize: none;
}
        .contact-form .form-group input:focus, .contact-form .form-group select:focus, .contact-form .form-group textarea:focus {
    border-color: #ff9f14; outline: none;
}
    </style>

 

Leave a Reply

Your email address will not be published. Required fields are marked *