How to create simple Email Subscription Form using HTML and CSS : Source Code

Tutorial 7

How to create simple Email Subscription Form using HTML and CSS || Web Tutorials : Source Code

Hey Guys , Welcome To My Blog :- Web Tutorials || Yuvan Art

Full Process To Create Styles Calculator :- Click On The Below Link To Watch Full Process To Make Email Subscription Using HTML And CSS.

How to create simple Email Subscription Form using HTML and CSS || Web Tutorials

Part ( 1 ) HTML Code :-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Subscribe Button</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="box">
        <form action="#">
            <div class="formBox">
                <input type="text" name="email" placeholder="Enter your email">
                <button type="submit">Subscribe</button>
            </div>
        </form>
    </div>
</body>
</html>

Part ( 2 ) CSS Code :-

body{
    padding: 0;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background: #ececec;
}
.box{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}
.formBox{
    padding: 10px;
    background: #ececec;
    border-radius: 5px;
    box-shadow: 10px 10px 15px #c7c4c4, -10px -10px 15px #fff;
}
.formBox input{
    font-size: 18px;
    color: #000;
    padding: 15px 20px;
    border: none;
    outline: none;
    background: #fff;
}
.formBox button{
    color: #fff;
    padding: 15px 20px;
    font-size: 20px;
    border: none;
    border-radius: 5px;
    background: #4769d8;
    cursor: pointer;
    transition: .5s;
}
.formBox button:hover{
    background: red;
}