HTML
xxxxxxxxxx1
<div class="container my-5 py-5 z-depth-1">2
3
4
<!--Section: Content-->5
<section class="px-md-5 mx-md-5 text-center text-lg-left dark-grey-text">6
7
<h3 class="font-weight-bold">Contact Us</h3>8
9
<p class="text-muted">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id quam sapiente10
molestiae <br>11
numquam quas, voluptates omnis nulla ea odio quia similique corrupti magnam, doloremque laborum.</p>12
13
<hr class="my-5">14
15
<!--Grid row-->16
<div class="row">17
18
<!--Grid column-->19
<div class="col-lg-5 col-md-12 mb-0 mb-md-0">20
21
<h4 class="font-weight-bold">Call or email</h4>22
23
<p class="text-muted mb-4">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id quam sapiente24
molestiae.</p>25
26
<p class="font-weight-bold">Support:</p>27
28
<p class="mb-2">+ 800 123 456</p>29
30
<p class="mb-2"><a href="#">Contact support</a></p>31
32
<p class="mb-4">Our technical support is available by phone or email from 11am to 11pm.</p>33
34
<p class="font-weight-bold">Sales:</p>35
36
<p class="mb-2">+ 900 123 456</p>37
38
<p class="mb-2"><a href="#">Contact sales</a></p>39
40
<p class="mb-4">Our sales team is available by phone or email from 11am to 11pm.</p>41
42
<p class="font-weight-bold">General inquiries:</p>43
44
<p class="mb-2"><a href="#">info@mycompany.com</a></p>45
46
47
</div>48
<!--Grid column-->49
50
<!--Grid column-->51
<div class="col-lg-7 col-md-12 mb-4 mb-md-0">52
53
<!--Grid row-->54
<div class="row">55
56
<!--Grid column-->57
<div class="col-md-6">58
59
<!-- Material outline input -->60
<div class="md-form md-outline mb-0">61
<input type="text" id="form-first-name" class="form-control">62
<label for="form-first-name">First name</label>63
</div>64
65
</div>66
<!--Grid column-->67
68
<!--Grid column-->69
<div class="col-md-6">70
71
<!-- Material outline input -->72
<div class="md-form md-outline mb-0">73
<input type="text" id="form-last-name" class="form-control">74
<label for="form-last-name">Last name</label>75
</div>76
77
</div>78
<!--Grid column-->79
80
</div>81
<!--Grid row-->82
83
<!-- Material outline input -->84
<div class="md-form md-outline mt-3">85
<input type="text" id="form-company" class="form-control">86
<label for="form-company">Company name</label>87
</div>88
89
<!-- Material outline input -->90
<div class="md-form md-outline mt-3">91
<input type="email" id="form-email" class="form-control">92
<label for="form-email">E-mail</label>93
</div>94
95
<!-- Material outline input -->96
<div class="md-form md-outline mt-3">97
<input type="number" id="form-number" class="form-control">98
<label for="form-number">Phone</label>99
</div>100
101
<select class="browser-default custom-select" style="color: #757575bd">102
<option selected>Select department</option>103
<option value="1">Support</option>104
<option value="2">Sales</option>105
<option value="3">General</option>106
</select>107
108
<!-- Material outline input -->109
<div class="md-form md-outline">110
<input type="text" id="form-subject" class="form-control">111
<label for="form-subject">Subject</label>112
</div>113
114
<!--Material textarea-->115
<div class="md-form md-outline mb-3">116
<textarea id="form-message" class="md-textarea form-control" rows="3"></textarea>117
<label for="form-message">How we can help?</label>118
</div>119
120
<button type="submit" class="btn btn-info btn-sm ml-0">Submit<i class="far fa-paper-plane ml-2"></i></button>121
122
</div>123
<!--Grid column-->124
125
</div>126
<!--Grid row-->127
128
129
</section>130
<!--Section: Content-->131
132
133
</div>134
135
CSS
1
1
JS
1
1
Console errors: 0