September 27, 2021

Contact us using html css

<body class="bg-dark">
   
      <div class="container">
      <div class="row pt-5">
          <div class="col-lg-6">
             <h2>Contact us</h2>
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.  </p>
              <form action="" class="form-fields pt-5">
                  <div class="form-group">
                      <label for="">Name</label>
                      <input type="text" name="" id="" class="form-control">
                  </div>
                  <div class="form-group">
                      <label for="">Email</label>
                      <input type="text" name="" id="" class="form-control">
                  </div>
                  <div class="form-group">
                      <label for="">Subject</label>
                      <input type="text" name="" id="" class="form-control">
                  </div>
                  <div class="form-group">
                      <label for="">Message</label>
                      <textarea name="" id="" cols="30" rows="5" class="form-control"></textarea>
                  </div>
                  <div class="form-group">
                      <button class="btn btn-info" type="submit">Submit</button>
                  </div>
              </form>
          </div>
          <div class="col-lg-6">
              <div class="img"><img src="https://www.tolmatol.com/uploads-images/contact-us-using-html-css/contact-us.jpg" alt="" width="100%"></div>
              <div class="contactUs">
                  <div class="row">
                      <div class="col-md-6"><i class="fa fa-phone"></i> Phone</div>
                      <div class="col-md-6">+91 1234 123 123</div>
                  </div>
                   <div class="row">
                      <div class="col-md-6"><i class="fa fa-envelope"></i> E-mail</div>
                      <div class="col-md-6">test@domain.com</div>
                  </div>
                   <div class="row">
                      <div class="col-md-6"><i class="fa fa-home"></i> Address</div>
                      <div class="col-md-6">1234 address second floor, any street</div>
                  </div>
                   <div class="row">
                      <div class="col-md-6"><i class="fa fa-globe"></i> Web</div>
                      <div class="col-md-6">www.tolmatol.com</div>
                  </div>
              </div>
          </div>
       
  </div>
  </div>
   
</body>

 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
   <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">
    <style>
        body { font-family: 'Poppins', sans-serif;  color: #fff;} 
        .form-fields input, .form-fields textarea { border-radius: 0px; background: #4b5054; border: none; color: #fff; min-height: 45px;} 
        .form-control:focus { border-color:#673ab7; box-shadow: none; background: #2e3133; color: #fff;}
        .form-fields label { color: #ddd;}
        .img { margin-top: 35px;}
        .contactUs {  background-color: #484848!important; padding: 20px; color: #ddd;  }
        .contactUs .row { margin: 12px 0px; line-height: 1.6;}
        .contactUs .row i { padding-right: 15px;}
        .btn { border-radius: 0px; font-size: 16px; padding: 10px 20px;}
   </style>

 

Leave a Reply

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