To create a Subscribe Forms using HTML and CSS, follow these steps:
1. Create an HTML file and include a basic structure with a head and body tag. You can use the following code as a starting point:
<!DOCTYPE html>
<html>
<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 Forms using Html and Css</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
2. Inside the body tag, create a div element with a class of "container".
<div class="container">
<div class="subscribe-wrapper"></div>
</div>
3. Add an background inside the subscribe-wrapper div.
<div class="background">
<div class="background-square"></div>
<div class="background-square"></div>
<div class="background-square"></div>
<div class="background-square"></div>
</div>
4. Add a subscribe-form with title, intro, etc type after background inside the subscribe-wrapper div.
<form class="subscribe-form">
<p class="title">Subscribe by Email</p>
<p class="intro">Get all latest content delivered straight to your inbox.</p>
<div class="flex">
<input type="email" class="email" placeholder="Email Address.">
<button class="button">Subscribe</button>
</div>
</form>
5. Create a CSS file and style your music player to make it look nice. You can use the following code as a starting point:
* {
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: #0084ff;
height: 100vh;
font-family: roboto;
}
.container {
width: 340px;
height: auto;
}
.subscribe-wrapper {
position: relative;
margin: 0 auto 20px;
overflow: hidden;
background: linear-gradient(90deg, #f5f5ff, #00ffd2);
border-radius: 6px;
box-shadow: 0 2px 5px #0005;
}
.background {
position: absolute;
top: -18px;
left: 43%;
transform: rotate(-27deg);
opacity: 0.8;
}
.background .background-square {
position: absolute;
width: 80px;
height: 80px;
border-radius: 8px;
box-shadow: 6px 2px 4px #0008;
}
.background .background-square:nth-child(1) {
background: linear-gradient(-90deg, #5400ff, #72c8ff);
}
.background .background-square:nth-child(2) {
background: linear-gradient(0deg, #f00, #72c8ff);
top: 30px;
left: 88px;
}
.background .background-square:nth-child(3) {
background: linear-gradient(342deg, #00daff, #e00000);
top: 120px;
left: 88px;
}
.background .background-square:nth-child(4) {
background: linear-gradient(90deg, #71bfff, #6eacff);
top: -68px;
left: -63px;
}
.subscribe-form {
position: relative;
padding: 25px;
}
.subscribe-form .title {
font-weight: 600;
font-size: 18px;
}
.subscribe-form .intro {
width: 92%;
font-size: 14px;
margin-bottom: 30px;
}
.flex {
display: flex;
}
.subscribe-form input {
border: solid 1px #0008;
border-radius: 2px;
font-size: 12px;
height: 30px !important;
width: -webkit-fill-available;
padding: 0 10px;
margin-right: 5px;
margin-bottom: 10px;
display: inline-block;
}
.subscribe-form input:focus {
outline-color: #0084ff;
border-color: #0084ff;
}
.subscribe-form button {
background: #f00;
border: none;
color: #fff;
border-radius: 2px;
height: 28px;
padding: 0 10px;
transition: 0.3s;
}
.subscribe-form button:hover {
cursor: pointer;
background: rgb(179, 0, 0);
}
6. Save the file and open it in a web browser to see your Subscribe Forms.
That's it! You should now have a basic Subscribe Forms created using HTML and CSS. You can customize the styles to fit your own preferences and add more information if needed.
<div class="container">
<div class="subscribe-wrapper">
<div class="background">
<div class="background-square"></div>
<div class="background-square"></div>
<div class="background-square"></div>
<div class="background-square"></div>
</div>
<form class="subscribe-form">
<p class="title">Subscribe by Email</p>
<p class="intro">Get all latest content delivered straight to your inbox.</p>
<div class="flex">
<input type="email" class="email" placeholder="Email Address.">
<button class="button">Subscribe</button>
</div>
</form>
</div>
</div>
* {
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: #0084ff;
height: 100vh;
font-family: roboto;
}
.container {
width: 340px;
height: auto;
}
.subscribe-wrapper {
position: relative;
margin: 0 auto 20px;
overflow: hidden;
background: linear-gradient(90deg, #f5f5ff, #00ffd2);
border-radius: 6px;
box-shadow: 0 2px 5px #0005;
}
.background {
position: absolute;
top: -18px;
left: 43%;
transform: rotate(-27deg);
opacity: 0.8;
}
.background .background-square {
position: absolute;
width: 80px;
height: 80px;
border-radius: 8px;
box-shadow: 6px 2px 4px #0008;
}
.background .background-square:nth-child(1) {
background: linear-gradient(-90deg, #5400ff, #72c8ff);
}
.background .background-square:nth-child(2) {
background: linear-gradient(0deg, #f00, #72c8ff);
top: 30px;
left: 88px;
}
.background .background-square:nth-child(3) {
background: linear-gradient(342deg, #00daff, #e00000);
top: 120px;
left: 88px;
}
.background .background-square:nth-child(4) {
background: linear-gradient(90deg, #71bfff, #6eacff);
top: -68px;
left: -63px;
}
.subscribe-form {
position: relative;
padding: 25px;
}
.subscribe-form .title {
font-weight: 600;
font-size: 18px;
}
.subscribe-form .intro {
width: 92%;
font-size: 14px;
margin-bottom: 30px;
}
.flex {
display: flex;
}
.subscribe-form input {
border: solid 1px #0008;
border-radius: 2px;
font-size: 12px;
height: 30px !important;
width: -webkit-fill-available;
padding: 0 10px;
margin-right: 5px;
margin-bottom: 10px;
display: inline-block;
}
.subscribe-form input:focus {
outline-color: #0084ff;
border-color: #0084ff;
}
.subscribe-form button {
background: #f00;
border: none;
color: #fff;
border-radius: 2px;
height: 28px;
padding: 0 10px;
transition: 0.3s;
}
.subscribe-form button:hover {
cursor: pointer;
background: rgb(179, 0, 0);
}
Copyright © 2021-2023 | WsCoder | All Right Reserved
