-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontact.html
160 lines (128 loc) · 7.01 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Portfolio Template For Developers</title>
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Responsive Portfolio Template">
<meta name="author" content="Xiaoying Riley at 3rd Wave Media">
<link rel="shortcut icon" href="favicon.ico">
<!-- Google Font -->
<link href='http://fonts.googleapis.com/css?family=Roboto:400,500,400italic,300italic,300,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<!-- FontAwesome JS -->
<script defer src="assets/fontawesome/js/all.js"></script>
<!-- Theme CSS -->
<link id="theme-style" rel="stylesheet" href="assets/css/theme-1.css">
</head>
<body>
<header class="header">
<div class="top-bar theme-bg-primary-darken">
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-dark position-relative">
<strong class="text-light pl-4 h5">chikajohnson</strong>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-uppercase" id="navigation">
<ul class="navbar-nav ml-lg-auto">
<li class="nav-item active mr-lg-3">
<a class="nav-link" href="index.html">About <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item mr-lg-3">
<a class="nav-link" href="projects.html">Projects</a>
</li>
<li class="nav-item mr-lg-3">
<a class="nav-link" href="blog.html">Blog</a>
</li>
<li class="nav-item mr-lg-3">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
<span id="slide-line"></span>
</div>
</nav>
</div>
<!--//container-->
</div>
<!--//top-bar-->
<div class="header-intro theme-bg-primary text-white py-5">
<div class="container">
<h2 class="page-heading mb-0">Contact Us</h2>
</div>
<!--//container-->
</div>
<!--//header-intro-->
</header>
<!--//header-->
<section class="section py-5">
<div class="container">
<div class="row">
<div class="contact-intro col-lg-8 mx-lg-auto mb-5 text-center">
<div class="speech-bubble bg-white p-4 p-lg-5 shadow-sm">
<p class="text-left mb-3">I'm currently taking on freelance work. If you are interested in hiring me for your project please use the form below to get in touch. Want to know how I work and what I can offer? Check out my <a href="projects.html">project case studies</a> and
<a href="resume.html">resume</a>.</p>
<h6 class="font-weight-bold text-center mb-3">You can also find me on the following channels
</h6>
<ul class="social-list-color list-inline mb-0">
<li class="list-inline-item mb-3"><a class="linkedin" href="#"><i
class="fab fa-linkedin-in fa-fw"></i></a></li>
<li class="list-inline-item mb-3"><a class="github" href="#"><i
class="fab fa-github-alt fa-fw"></i></a></li>
<li class="list-inline-item mb-3">
<a class="twitter" href="#">
<i class="fab fa-twitter fa-fw"></i>
</a>
</li>
</ul>
<!--//social-list-->
</div>
</div>
<!--//contact-intro-->
<form id="contact-form" class="contact-form col-lg-8 mx-lg-auto" method="post" action="#">
<h3 class="text-center mb-3">Get In Touch</h3>
<div class="form-row">
<div class="form-group col-md-6">
<label class="sr-only" for="cname">Name</label>
<input type="text" class="form-control" id="cname" name="name" placeholder="Name" minlength="2" required="" aria-required="true">
</div>
<div class="form-group col-md-6">
<label class="sr-only" for="cemail">Email</label>
<input type="email" class="form-control" id="cemail" name="email" placeholder="Email" required="" aria-required="true">
</div>
<div class="form-group col-12">
<label class="sr-only" for="cmessage">Your message</label>
<textarea class="form-control" id="cmessage" name="message" placeholder="Enter your message" rows="10" required="" aria-required="true"></textarea>
</div>
<div class="form-group col-12">
<button type="submit" class="btn btn-block btn-primary py-2">Send It</button>
</div>
</div>
<!--//form-row-->
</form>
</div>
<!--//row-->
</div>
<!--//container-->
</section>
<!--//section-->
<footer class="footer text-light text-center py-2">
<small class="copyright"> ©
<a class="text-light font-weight-bold" href="#" target="_blank">chikajohnson 2020</a>
</small>
</footer>
<!-- Javascript -->
<script type="text/javascript" src="assets/plugins/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="assets/plugins/popper.min.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/plugins/back-to-top.js"></script>
<!--Page Specific JS -->
<script type="text/javascript" src="assets/plugins/jquery-validation/jquery.validate.min.js"></script>
<!-- Custom JS -->
<script type="text/javascript" src="assets/js/main.js"></script>
<script type="text/javascript" src="assets/js/form.js"></script>
<!-- Style Switcher (REMOVE ON YOUR PRODUCTION SITE) -->
<script src="assets/js/demo/style-switcher.js"></script>
</body>
</html>