Contact Message Form Using Only HTML & CSS

byPure Coding -October 05, 2020

1

Example :)

Contact Message

Source Code :)

HTML:

<!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 Form Using HTML & CSS | Pure Coding</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 Email" 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:

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Poppins', sans-serif;
}

body {
   width: 100%;
   min-height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   background: linear-gradient(23deg, rgba(253,206,88,1) 0%, rgba(255,84,41,1) 40%, rgba(189,43,188,1) 80%, rgba(2,67,223,1) 100%);
   padding: 20px;
}

.container {
   background: #FFF;
   padding: 2rem;
   border-radius: 5px;
   box-shadow: 0 0 5px rgba(0,0,0,.5);
   border-top: 4px solid royalblue;
   width: 900px;
}

.container h2 {
   color: royalblue;
   font-size: 2rem;
   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: .8rem;
   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: 1rem;
   text-align: center;
   background: linear-gradient(23deg, rgba(253,206,88,1) 0%, rgba(255,84,41,1) 40%, rgba(189,43,188,1) 80%, rgba(2,67,223,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%;
   }
}

Video:

1 Comments

NINE STAR STOREJune 22, 2021 at 6:34 AM
Hello I also use this theme but when i remove mscontent they are taking to that means owners website you have removed it freely
ReplyDelete
Replies

Add comment