Awesome Contact Form Create This Program

Ticker

10/recent/ticker-posts

Awesome Contact Form Create This Program

AK Creative 1/18/2021 03:17:00 PM

Interesting Contact Form Create By Maa Blogger



HTML Code:-

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title></title>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">

  <link rel="stylesheet" href="style.css">

</head>

<body>

  <div class="contact-page">

    <h2>Please Contact to Help</h2>

    <div class="contact-info">

      <div class="item">

        <i class="icon fas fa-home"></i>

        New Delhi, India

      </div>

      <div class="item">

        <i class="icon fas fa-phone"></i>

        +91 00000 00000

      </div>

      <div class="item">

        <i class="icon fas fa-envelope"></i>

        E-mail@address.com

      </div>

      <div class="item">

        <i class="icon fas fa-clock"></i>

        Mon - Sat 10:00 AM to 7:00 PM

      </div>

    </div>

    <form action="" class="contact-form">

      <input type="text" class="textb" placeholder="Your Name">

      <input type="email" class="textb" placeholder="Your Email">

      <textarea placeholder="Your Message"></textarea>

      <input type="submit" class="btn" value='Send'>

    </form>

  </div>

</body>

</html>


CSS Code:-

*{

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  font-family: "harrington",sans-serif;

}


body{

  min-height: 100vh;

  background: url(https://c4.wallpaperflare.com/wallpaper/301/378/355/quote-smiling-heart-wallpaper-preview.jpg) no-repeat center;

  background-size: cover;

  display: flex;

  align-items: center;

  justify-content: center;

}


.contact-page{

  width: 100%;

  max-width: 1400px;

  padding: 50px;

  display: flex;

  align-items: flex-start;

  justify-content: center;

  flex-wrap: wrap;

}


h2{

  width: 100%;

  margin-bottom: 80px;

  text-transform: uppercase;

  color: #150;

  font-size: 60px;

}


.contact-info, .contact-form{

  flex: 1;

}


.item{

  margin-bottom: 24px;

  font-size: 20px;

  color: #125;

}


.icon{

  width: 60px;

  height: 60px;

  line-height: 60px;

  background-color: #150;

  text-align: center;

  color: #fff666;

  border-radius: 50%;

  margin-right: 16px;

}


.contact-form{

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

}


.textb{

  width: calc(50% - 10px);

  height: 50px;

  padding: 12px;

  background-color: #fff666;

  border: none;

  color: #140;

  margin-bottom: 20px;

}


textarea{

  width: 100%;

  min-height: 200px;

  max-height: 400px;

  resize: vertical;

  padding: 12px;

  background-color: #fff666;

  border: none;

  color: #140;

  margin-bottom: 20px;

}


.btn{

  width: 120px;

  height: 40px;

  margin-left: auto;

  background-color: #34cc50;

  border: none;

  color: #ffff00;

  text-transform: uppercase;

  font-size: 25px;

  cursor: pointer;

  border: 2px solid #34cc50;

  transition: .3s linear;

}


.btn:hover{

  background-color: transparent;

  color: #34cc50;

}


@media screen and (max-width: 980px){

  .contact-page{

    max-width: 800px;

  }

  h2{

    font-size: 60px;

    margin-bottom: 40px;

  }


  .contact-info, .contact-form{

    flex: 100%;

    margin-bottom: 30px;

  }

  .textb{

    width: 100%;

  }

}


Output Display :-




Tags:

Post a Comment

36 Comments

  1. Unique KnowJanuary 18, 2021 at 3:21 PM

    Very very nice
    &
    Wonderful

    ReplyDelete
  2. Kanchan KirtimanJanuary 18, 2021 at 4:32 PM

    Super

    ReplyDelete
  3. Excellent workJanuary 18, 2021 at 4:39 PM

    Fantastic

    ReplyDelete
  4. AwesomeJanuary 18, 2021 at 4:44 PM

    Super

    ReplyDelete
  5. Jaunpur GPJanuary 18, 2021 at 4:46 PM

    Amazing

    ReplyDelete
  6. WonderfulJanuary 18, 2021 at 4:48 PM

    Amazing

    ReplyDelete
  7. Rock_ArviJanuary 18, 2021 at 4:51 PM

    Awesome Work

    ReplyDelete
  8. A A AJanuary 18, 2021 at 4:53 PM

    Excellent & Nice

    ReplyDelete
  9. ArviJanuary 18, 2021 at 4:56 PM

    Wonderful

    ReplyDelete
  10. UnknownJanuary 18, 2021 at 4:59 PM

    Excellent

    ReplyDelete
  11. FabulousJanuary 18, 2021 at 5:02 PM

    Superb

    ReplyDelete
  12. MLLJanuary 18, 2021 at 5:05 PM

    Very Interesting

    ReplyDelete
  13. SuperJanuary 18, 2021 at 5:07 PM

    Perfect 👌

    ReplyDelete
  14. UnknownJanuary 18, 2021 at 7:25 PM

    Perfect

    ReplyDelete
  15. UnknownJanuary 18, 2021 at 7:31 PM

    Superb

    ReplyDelete
  16. UnknownJanuary 18, 2021 at 7:32 PM

    Fantastic

    ReplyDelete
  17. UnknownJanuary 18, 2021 at 7:34 PM

    Amazing

    ReplyDelete
  18. UnknownJanuary 18, 2021 at 7:35 PM

    Kallu very nice

    ReplyDelete
  19. UnknownJanuary 18, 2021 at 7:36 PM

    Excellent

    ReplyDelete
  20. UnknownJanuary 18, 2021 at 7:37 PM

    Kallu very good

    ReplyDelete
  21. UnknownJanuary 18, 2021 at 7:38 PM

    Brilliant

    ReplyDelete
  22. UnknownJanuary 18, 2021 at 7:40 PM

    Nice

    ReplyDelete
  23. UnknownJanuary 18, 2021 at 7:41 PM

    excellent

    ReplyDelete
  24. UnknownJanuary 18, 2021 at 7:44 PM

    Awesome

    ReplyDelete
  25. UnknownJanuary 18, 2021 at 7:45 PM

    Superb

    ReplyDelete
  26. KritikaJanuary 18, 2021 at 7:47 PM

    excellent

    ReplyDelete
  27. UnknownJanuary 18, 2021 at 7:51 PM

    Awesome

    ReplyDelete
  28. UnknownJanuary 18, 2021 at 7:54 PM

    excellent

    ReplyDelete
  29. UnknownJanuary 18, 2021 at 7:56 PM

    excellent

    ReplyDelete
  30. KKJanuary 18, 2021 at 7:58 PM

    Wonderful

    ReplyDelete
  31. UnknownJanuary 18, 2021 at 8:00 PM

    excellent

    ReplyDelete
  32. UnknownJanuary 18, 2021 at 8:03 PM

    excellent

    ReplyDelete
  33. UnknownJanuary 18, 2021 at 8:07 PM

    excellent

    ReplyDelete
  34. snehaJanuary 18, 2021 at 8:10 PM

    excellent

    ReplyDelete
  35. UnknownJanuary 19, 2021 at 6:36 PM

    Awesome

    ReplyDelete
  36. UnknownJanuary 19, 2021 at 6:39 PM

    Awesome

    ReplyDelete