Awesome Creation of Contact Message By Maa Blogger

Ticker

10/recent/ticker-posts

Awesome Creation of Contact Message By Maa Blogger

AK Creative 1/12/2021 04:25:00 PM

Fabulous Code For Contact Message Programs 


HTML Code:-

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

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


    <link rel="stylesheet" type="text/css" href="style.css">


    <title>Contact Message</title>

</head>

<body>

    <div class="container">

        <h2>Contact Message</h2>

        <form>

            <div class="input-box">

                <input type="text" placeholder="Enter Your Name" required>

            </div>

            <div class="input-box">

                <input type="email" placeholder="Enter a Valid E-mail" required>

            </div>

            <div class="input-box">

                <input type="text" placeholder="Enter Subject" required>

            </div>

            <div class="input-box">

                <textarea placeholder="Enter Message" required></textarea>

            </div>

            <div class="input-box input-btn">

                <button>Send Message</button>

            </div>

        </form>

    </div>

</body>

</html>


CSS Code:-

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: 'Palatino Linotype';

}


body {

    width: 100%;

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    background: url(https://cdn.pixabay.com/photo/2014/09/14/18/04/dandelion-445228_960_720.jpg);

    padding: 20px;

}


.container {

    background: transparent;

    padding: 2rem;

    border-radius: 5px;

    box-shadow: 0 0 5px rgba(0,0,0,.5);

    border-top: 4px solid royalblue;

    width: 550px;

}


.container h2 {

    color: blue;

    font-size: 3.5rem;

    text-align: center;

    margin-bottom: 20px;

}


.container .input-box {

    width: 100%;

    min-height: 40px;

    margin-bottom: 20px;

}


.container .input-box input, .container .input-box textarea {

    width: 100%;

    height: 100%;

    background: #FFF;

    border: none;

    box-shadow: 0 0 10px rgba(0,0,0,0.1);

    padding: 10px;

    border-radius: 30px;

    font-size: 1rem;

    transition: .3s;

}


.container .input-box textarea {

    min-height: 150px;

    padding-top: 15px;

    padding-left: 15px;

}


.container .input-box input:hover, .container .input-box input:focus, .container .input-box input:valid, .container .input-box textarea:hover, .container .input-box textarea:focus, .container .input-box textarea:valid {

    box-shadow: 0 0 10px rgba(0,0,0,0.1),

                0 0 20px rgba(0,0,0,0.1);

}


.container .input-btn {

    width: 100%;

    display: flex;

    justify-content: center;

}


.container .input-btn button {

    padding: .7rem 2rem;

    border: none;

    background: transparent;

    font-size: 2rem;

    text-align: center;

    background: linear-gradient(230deg, rgba(113,16,88,1) 0%, rgba(115,4,41,1) 40%, rgba(129,4,108,1) 80%, rgba(2,7,183,1) 100%);

    background-size: 400%;

    color: #FFF;

    animation: animatebtn 8s infinite;

    cursor: pointer;

    border-radius: 30px;

    box-shadow: 5px 5px 10px tomato;

}


@keyframes animatebtn {

    0% {

        background-position: 400%;

    }

    100% {

        background-position: 100%;

    }

}


Output Display



Post a Comment

41 Comments

  1. Unique KnowJanuary 12, 2021 at 4:27 PM

    Wowwww
    Very
    Nice
    Wonderful

    ReplyDelete
  2. Kanchan KirtimanJanuary 12, 2021 at 4:29 PM

    Great

    ReplyDelete
  3. UnknownJanuary 12, 2021 at 4:31 PM

    Awesome

    ReplyDelete
  4. ArzuJanuary 12, 2021 at 4:33 PM

    Attractive

    ReplyDelete
  5. AnonymousJanuary 12, 2021 at 4:33 PM

    Really ows

    ReplyDelete
  6. UnknownJanuary 12, 2021 at 4:39 PM

    Excellent

    ReplyDelete
  7. UnknownJanuary 12, 2021 at 4:41 PM

    Very Nice

    ReplyDelete
  8. UnknownJanuary 12, 2021 at 4:43 PM

    Mind Blowing

    ReplyDelete
  9. UnknownJanuary 12, 2021 at 4:44 PM

    Excellent

    ReplyDelete
  10. UnknownJanuary 12, 2021 at 4:49 PM

    Very Nice

    ReplyDelete
  11. UnknownJanuary 12, 2021 at 4:51 PM

    Nicely done

    ReplyDelete
  12. UnknownJanuary 12, 2021 at 4:53 PM

    Awesome

    ReplyDelete
  13. UnknownJanuary 12, 2021 at 4:54 PM

    superb

    ReplyDelete
  14. UnknownJanuary 12, 2021 at 4:56 PM

    Wonderful

    ReplyDelete
  15. UnknownJanuary 12, 2021 at 4:58 PM

    Perfect

    ReplyDelete
  16. KritikaJanuary 12, 2021 at 5:00 PM

    Perfect

    ReplyDelete
  17. UnknownJanuary 12, 2021 at 5:02 PM

    Perfect

    ReplyDelete
  18. UnknownJanuary 12, 2021 at 5:03 PM

    Interesting

    ReplyDelete
  19. UnknownJanuary 12, 2021 at 5:04 PM

    Wonderful

    ReplyDelete
  20. UnknownJanuary 12, 2021 at 5:05 PM

    Wonderful

    ReplyDelete
  21. KKJanuary 12, 2021 at 5:06 PM

    Excellent

    ReplyDelete
  22. UnknownJanuary 12, 2021 at 5:11 PM

    Wonderful

    ReplyDelete
  23. UnknownJanuary 12, 2021 at 5:12 PM

    Superb

    ReplyDelete
  24. UnknownJanuary 12, 2021 at 5:15 PM

    Perfect

    ReplyDelete
  25. son aJanuary 12, 2021 at 5:19 PM

    Perfect

    ReplyDelete
  26. UnknownJanuary 12, 2021 at 5:20 PM

    Wonderful

    ReplyDelete
  27. UnknownJanuary 12, 2021 at 5:21 PM

    Perfect

    ReplyDelete
  28. UnknownJanuary 12, 2021 at 5:23 PM

    Perfect

    ReplyDelete
  29. UnknownJanuary 12, 2021 at 5:25 PM

    Wonderful Nice

    ReplyDelete
  30. UnknownJanuary 12, 2021 at 5:29 PM

    Kallu nice

    ReplyDelete
  31. WonderingJanuary 12, 2021 at 10:33 PM

    Fabulous idea

    ReplyDelete
  32. Excellent workJanuary 12, 2021 at 10:36 PM

    Fabulous idea

    ReplyDelete
  33. Jaunpur GPJanuary 12, 2021 at 10:40 PM

    Fantastic and wonderful

    ReplyDelete
  34. WonderfulJanuary 12, 2021 at 10:42 PM

    Fantastic and wonderful

    ReplyDelete
  35. Rock_ArviJanuary 12, 2021 at 10:43 PM

    Fantastic and wonderful

    ReplyDelete
  36. A A AJanuary 12, 2021 at 10:46 PM

    Excellent

    ReplyDelete
  37. ArviJanuary 12, 2021 at 10:49 PM

    Fantastic

    ReplyDelete
  38. UnknownJanuary 12, 2021 at 10:53 PM

    wonderful

    ReplyDelete
  39. FabulousJanuary 12, 2021 at 10:55 PM

    Amazing

    ReplyDelete
  40. MLLJanuary 12, 2021 at 10:59 PM

    Superb

    ReplyDelete
  41. SuperJanuary 12, 2021 at 11:00 PM

    Fantastic and wonderful

    ReplyDelete