Full Tutorial




Source Code

HTML Code 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Form Tutorial : CodeWikis</title>
</head>
<body>
<form>
<div class="name">
<input type="text" name="f-name" placeholder="First Name">
<input type="text" name="d-name" placeholder="Last Name">
</div>

<input type="email" name="e-mail" placeholder="Enter your E-Mail">

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

<button>Submit</button>


</form>
</body>
</html>


CSS Code 

<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: poppins;
}

body{
background: #309cb5;
display: flex;
align-items: center;
justify-content: center;
}

form{
padding: 1cm;
background: white;
border-radius: 17px;
position: absolute;
top: 50%;
transform: translateY(-50%);
box-shadow: 0 0 10px -1px black;
display: flex;
flex-direction: column;
}

input{
padding: 10px;
border: 1px grey solid;
outline: none;
border-radius: 3px;
color: black;
margin-bottom: 15px;
}

textarea{
resize: none;
width: 100%;
height: 5cm;
padding: 10px;
outline: none;
}

button{
border-radius: 5px;
background: limegreen;
border: none;
padding: 10px;
margin-top: 0.5cm;
transition: 1s;
font-weight: 500;
}

button:hover{
background: green;
color: white;
}



Subscribe To Our Channel For More Amazing Coding Content:-  CodeWikis