forked from Waite0603/Resume-vCard-Collection
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontact.html
183 lines (163 loc) · 9.04 KB
/
contact.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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>vCard - Contact</title>
<!-- Meta Data -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="format-detection" content="telephone=no"/>
<meta name="format-detection" content="address=no"/>
<meta name="author" content="ArtTemplate" />
<meta name="description" content="vCard" />
<!-- Twitter data -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ArtTemplates">
<meta name="twitter:title" content="vCard">
<meta name="twitter:description" content="vCard">
<meta name="twitter:image" content="assets/images/social.jpg">
<!-- Open Graph data -->
<meta property="og:title" content="ArtTemplate" />
<meta property="og:type" content="website" />
<meta property="og:url" content="your url website" />
<meta property="og:image" content="assets/images/social.jpg" />
<meta property="og:description" content="vCard" />
<meta property="og:site_name" content="vCard" />
<!-- Favicons -->
<link rel="apple-touch-icon" sizes="144x144" href="assets/images/favicons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/images/favicons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="assets/images/favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="57x57" href="assets/images/favicons/apple-touch-icon-57x57.png">
<link rel="shortcut icon" href="assets/images/favicons/favicon.png" type="image/png">
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="assets/styles/style.css"/>
</head>
<body class="bg-triangles">
<!-- Preloader -->
<div class="preloader">
<div class="preloader__wrap">
<div class="circle-pulse">
<div class="circle-pulse__1"></div>
<div class="circle-pulse__2"></div>
</div>
<div class="preloader__progress"><span></span></div>
</div>
</div>
<main class="main">
<div class="container gutter-top">
<div class="row sticky-parent">
<!-- Sidebar -->
<aside class="col-12 col-md-12 col-xl-3">
<div class="sidebar box pb-0 sticky-column">
<svg class="avatar avatar--180" viewBox="0 0 188 188">
<g class="avatar__box">
<image xlink:href="assets/img/avatar-1.jpg" height="100%" width="100%" />
</g>
</svg>
<div class="text-center">
<h3 class="title title--h3 sidebar__user-name"><span class="weight--500">Felecia</span> Brown</h3>
<div class="badge badge--gray">Creative Director</div>
<!-- Social -->
<div class="social">
<a class="social__link" href="http://www.bootstrapmb.com/"><i class="font-icon icon-facebook"></i></a>
<a class="social__link" href="https://www.behance.com/"><i class="font-icon icon-twitter"></i></a>
<a class="social__link" href="https://www.linkedin.com/"><i class="font-icon icon-linkedin2"></i></a>
</div>
</div>
<div class="sidebar__info box-inner box-inner--rounded">
<ul class="contacts-block">
<li class="contacts-block__item" data-toggle="tooltip" data-placement="top" title="Birthday">
<i class="font-icon icon-calendar"></i>March 12, 1995
</li>
<li class="contacts-block__item" data-toggle="tooltip" data-placement="top" title="Address">
<i class="font-icon icon-location"></i>Hong Kong, China
</li>
<li class="contacts-block__item" data-toggle="tooltip" data-placement="top" title="E-mail">
<a href="mailto:[email protected]"><i class="font-icon icon-envelope"></i>[email protected]</a>
</li>
<li class="contacts-block__item" data-toggle="tooltip" data-placement="top" title="Phone">
<i class="font-icon icon-phone"></i>+1 (070) 123-4567
</li>
<li class="contacts-block__item" data-toggle="tooltip" data-placement="top" title="Skype">
<a href=""><i class="font-icon icon-skype"></i>Felecia_Brown</a>
</li>
</ul>
<a class="btn btn--blue-gradient" href="#"><i class="font-icon icon-download"></i> Download CV</a>
</div>
</div>
</aside>
<!-- Content -->
<div class="col-12 col-md-12 col-xl-9">
<div class="box">
<!-- Menu -->
<div class="circle-menu">
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
<div class="inner-menu">
<ul class="nav">
<li class="nav__item"><a href="index.html">About</a></li>
<li class="nav__item"><a href="resume.html">Resume</a></li>
<li class="nav__item"><a class="active" href="portfolio.html">Portfolio</a></li>
<li class="nav__item"><a href="blog.html">Blog</a></li>
<li class="nav__item"><a href="contact.html">Contact</a></li>
</ul>
</div>
<!-- About -->
<div class="pb-2">
<h1 class="title title--h1 title__separate">Contact</h1>
</div>
<!-- Contact -->
<h2 class="title title--h3">Contact Form</h2>
<form id="contact-form" class="contact-form" data-toggle="validator">
<div class="row">
<div class="form-group col-12 col-md-6">
<i class="font-icon icon-user"></i>
<input type="text" class="input input__icon form-control" id="nameContact" name="nameContact" placeholder="Full name" required="required" autocomplete="on" oninvalid="setCustomValidity('Fill in the field')" onkeyup="setCustomValidity('')">
<div class="help-block with-errors"></div>
</div>
<div class="form-group col-12 col-md-6">
<i class="font-icon icon-envelope"></i>
<input type="email" class="input input__icon form-control" id="emailContact" name="emailContact" placeholder="Email address" required="required" autocomplete="on" oninvalid="setCustomValidity('Email is incorrect')" onkeyup="setCustomValidity('')">
<div class="help-block with-errors"></div>
</div>
<div class="form-group col-12 col-md-12">
<textarea class="textarea form-control" id="messageContact" name="messageContact" placeholder="Your Message" rows="4" required="required" oninvalid="setCustomValidity('Fill in the field')" onkeyup="setCustomValidity('')"></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6 order-2 order-md-1 text-center text-md-left">
<div id="validator-contact" class="hidden"></div>
</div>
<div class="col-12 col-md-6 order-1 order-md-2 text-right">
<button type="submit" class="btn"><i class="font-icon icon-send"></i> Send Message</button>
</div>
</div>
</form>
</div>
<!-- Footer -->
<footer class="footer">© 2019 vCard</footer>
</div>
</div>
</div>
</main>
<div class="back-to-top"></div>
<!-- SVG masks -->
<svg class="svg-defs">
<clipPath id="avatar-box">
<path d="M1.85379 38.4859C2.9221 18.6653 18.6653 2.92275 38.4858 1.85453 56.0986.905299 77.2792 0 94 0c16.721 0 37.901.905299 55.514 1.85453 19.821 1.06822 35.564 16.81077 36.632 36.63137C187.095 56.0922 188 77.267 188 94c0 16.733-.905 37.908-1.854 55.514-1.068 19.821-16.811 35.563-36.632 36.631C131.901 187.095 110.721 188 94 188c-16.7208 0-37.9014-.905-55.5142-1.855-19.8205-1.068-35.5637-16.81-36.63201-36.631C.904831 131.908 0 110.733 0 94c0-16.733.904831-37.9078 1.85379-55.5141z"/>
</clipPath>
<clipPath id="avatar-hexagon">
<path d="M0 27.2891c0-4.6662 2.4889-8.976 6.52491-11.2986L31.308 1.72845c3.98-2.290382 8.8697-2.305446 12.8637-.03963l25.234 14.31558C73.4807 18.3162 76 22.6478 76 27.3426V56.684c0 4.6805-2.5041 9.0013-6.5597 11.3186L44.4317 82.2915c-3.9869 2.278-8.8765 2.278-12.8634 0L6.55974 68.0026C2.50414 65.6853 0 61.3645 0 56.684V27.2891z"/>
</clipPath>
</svg>
<!-- JavaScripts -->
<script src="assets/js/jquery-3.4.1.min.js"></script>
<script src="assets/js/plugins.js"></script>
<script src="assets/js/common.js"></script>
</body>
</html>