"Signup form"
Bootstrap 4.1.1 Snippet by TejaNethas

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<body>
<div class="container">
<div class="col-md-6 mx-auto text-center">
<div class="header-title">
<h1 class="wv-heading--title">
Check out — it’s free!
</h1>
<h2 class="wv-heading--subtitle">
Lorem ipsum dolor sit amet! Neque porro quisquam est qui do dolor amet, adipisci velit...
</h2>
</div>
</div>
<div class="row">
<div class="col-md-4 mx-auto">
<div class="myform form ">
<form action="" method="post" name="login">
<div class="form-group">
<input type="text" name="name" class="form-control my-input" id="name" placeholder="Name">
</div>
<div class="form-group">
<input type="email" name="email" class="form-control my-input" id="email" placeholder="Email">
</div>
<div class="form-group">
<input type="number" min="0" name="phone" id="phone" class="form-control my-input" placeholder="Phone">
</div>
<div class="text-center ">
<button type="submit" class=" btn btn-block send-button tx-tfm">Create Your Free Account</button>
</div>
<div class="col-md-12 ">
<div class="login-or">
<hr class="hr-or">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.send-button{
background: #54C7C3;
width:100%;
font-weight: 600;
color:#fff;
padding: 8px 25px;
}
.g-button{
color: #fff !important;
border: 1px solid #EA4335;
background: #ea4335 !important;
width:100%;
font-weight: 600;
color:#fff;
padding: 8px 25px;
}
.my-input{
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
cursor: text;
padding: 8px 10px;
transition: border .1s linear;
}
.header-title{
margin: 5rem 0;
}
h1{
font-size: 31px;
line-height: 40px;
font-weight: 600;
color:#4c5357;
}
h2{
color: #5e8396;
font-size: 21px;
line-height: 32px;
font-weight: 400;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: