forked from saroz/domain-for-sale
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
160 lines (157 loc) · 8.14 KB
/
index.html
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sales Inquery || [Your Domain]</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link href="https://fonts.googleapis.com/css?family=Mukta+Mahee:300,700" rel="stylesheet">
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<section class="bg-alt hero p-0">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 bg-faded text-center col-fixed">
<div class="vMiddle">
<h1 class="pt-4 h2">
<span class="text-green">[Your Domain].com</span>
<small>available for sale</small>
</h1>
<p class="mt-4">
For instantly purchase. Please make an order.
</p>
<div class="pt-5">
<label for="name">
<a class="btn text-white bg-green btn-lg">Buy now for $4999</a>
</label>
</div>
<div class="row d-md-flex text-center justify-content-center text-primary action-icons">
<div class="col-sm-4">
<p><em class="ion-ios-telephone-outline icon-md"></em></p>
<p class="lead"><a href="tel:+[Your Phone]">+[Your Phone]</a></p>
</div>
<div class="col-sm-4">
<p><em class="ion-ios-chatbubble-outline icon-md"></em></p>
<p class="lead"><a href="mailto:email@[Your Domain].com">email@[Your Domain].com</a></p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 offset-sm-6">
<section class="bg-alt">
<div class="container">
<div class="row height-100">
<div class="col-sm-10 offset-sm-1 mt-2">
<form id="main-offer-form" action="contact.php" method="post">
<h2 class="text-primary">Interested in this domain?</h2>
<hr/>
<div class="form-group">
<input
type="text"
name="name"
id="name"
class="form-control"
placeholder="Full name (Required)"
>
</div>
<div class="row">
<div class="col">
<div class="form-group">
<input
type="email"
name="email"
class="form-control"
placeholder="Email (Required)"
>
</div>
</div>
<div class="col">
<div class="form-group">
<input
type="text"
name="phone"
class="form-control"
placeholder="Phone number (Required)"
>
</div>
</div>
</div>
<div class="form-group">
<input
type="number"
name="price"
class="form-control"
min="0"
placeholder="Offer price in USD? (Required)">
</div>
<div class="form-group">
<textarea name="comments" class="form-control" placeholder="Message (optional)"></textarea>
</div>
<div class="form-group">
<div id="recaptcha" class="g-recaptcha" data-sitekey="6Lc_sf8aAAAAAFk3KIcYvqcIoo1HeCOZu4faK3DA" data-callback="onSubmit" data-size="invisible"></div>
</div>
<button type="submit" class="btn text-white btn-lg bg-primary btn-block">Make an offer</button>
</form>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</section>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script>
$( "#main-offer-form" ).validate({
errorClass: 'form-control-feedback',
errorElement: 'div',
highlight: function(element) {
$(element).parents(".form-group").addClass("has-danger");
},
unhighlight: function(element) {
$(element).parents(".form-group").removeClass("has-danger");
},
rules: {
name: 'required',
email: {
required: true,
email: true
},
phone: {
required: true,
minlength:10,
maxlength:10
},
price: "required",
comments: {
maxlength: 500
}
},
messages: {
name: 'Please enter your name.',
email: {
required: 'You can not leave this empty.',
email: 'Please enter a valid email address.'
},
phone: {
required: 'You can not leave this empty.',
matches: 'Please enter a valide phone number.',
minlength: 'Phone number should be min 10 digits.',
maxlength: 'Phone number should be max 10 digits.'
},
price: {
price: 'Please enter offered price.'
},
comments: {
maxlength: 'Message length must be less than 500 character.'
}
}
});
</script>
</body>
</html>