-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontact.html
118 lines (114 loc) · 6.77 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>O.A.K | Fashion Store</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Ubuntu:300,500|Raleway:300,400,500' rel='stylesheet' type='text/css'>
<link rel="icon" type="image/png" href="images/favicon16.png" sizes="16x16">
<link rel="icon" type="image/png" href="images/favicon32.png" sizes="32x32">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<header class="menuBar clearfix">
<section class="logo">
<a href="index.html"> <img src="assets/logo.png" alt="OAK">
<h1>OAK</h1></a>
</section>
<ul class="menu clearfix">
<li><a href="index.html"><h6>Home</h6></a></li>
<li><a href="blog.html"><h6>Blog</h6></a> </li>
<li><a href="#"><h6>Contact</h6></a> </li>
</ul>
</header>
<!-- ooooooooooooooooooooo -->
<main>
<header class="pageHeader contact clearfix">
<div class="contactTitle">
<h2>Contact</h2>
<h5>Everything created by a creative trivial</h5>
</div>
<div class="speechBubble">
<img src="assets/logo.png" alt="">
</div>
</header>
<section class="contactContent clearfix">
<section class="contactInfo">
<address class="clearfix">
<div class="contactIcon first">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 125" enable-background="new 0 0 100 100" xml:space="preserve"><g><path d="M63.5,10.3H36.5c-3,0-5.5,2.5-5.5,5.5v68.5c0,3,2.5,5.5,5.5,5.5h26.9c3,0,5.5-2.5,5.5-5.5V15.8 C68.9,12.7,66.5,10.3,63.5,10.3z M47,15.5H53c0.3,0,0.5,0.2,0.5,0.5c0,0.3-0.2,0.5-0.5,0.5H47c-0.3,0-0.5-0.2-0.5-0.5 C46.6,15.7,46.8,15.5,47,15.5z M50,86.9c-1.8,0-3.3-1.5-3.3-3.3s1.5-3.3,3.3-3.3c1.8,0,3.3,1.5,3.3,3.3S51.8,86.9,50,86.9z M66.8,76.7c0,0.6-0.5,1.1-1.1,1.1H34.3c-0.6,0-1.1-0.5-1.1-1.1V22.1c0-0.6,0.5-1.1,1.1-1.1h31.4c0.6,0,1.1,0.5,1.1,1.1V76.7z"/></g><!-- Created by Jennifer Cozzette from the Noun Project -->
</div>
<div class="contactWords">
<h6>Call Us:</h6>
<p>+22 7773 333</p>
</div>
</address>
<address class="clearfix">
<div class="contactIcon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 125" enable-background="new 0 0 100 100" xml:space="preserve"><path d="M50.468,2.259c-17.905,0-32.42,14.515-32.42,32.42c0,17.905,32.42,62.58,32.42,62.58S82.89,52.584,82.89,34.679 C82.89,16.774,68.374,2.259,50.468,2.259z M50.467,90.259c0,0-28.325-39.028-28.325-54.675c0-15.644,12.681-28.325,28.325-28.325 c15.644,0,28.33,12.681,28.33,28.325C78.797,51.23,50.467,90.259,50.467,90.259z"/><path d="M50.47,21.923c-6.749,0-12.378,5.63-12.378,12.376c0,6.746,5.629,12.375,12.378,12.375c6.739,0,12.375-5.629,12.375-12.375 C62.846,27.554,57.209,21.923,50.47,21.923z M50.47,42.799c-4.637,0-8.501-3.866-8.501-8.5c0-4.634,3.864-8.5,8.501-8.5 c4.627,0,8.5,3.867,8.5,8.5C58.971,38.933,55.098,42.799,50.47,42.799z"/><!-- Created by Jason Robles from the Noun Project -->
</div>
<div class="contactWords"><h6>Address:</h6>
<p>111 Hwjdiutj And</p>
<p>Toloro, IL, CANADA</p>
</div>
</address>
<address class="clearfix">
<div class="contactIcon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 125" enable-background="new 0 0 100 100" xml:space="preserve"><g><g><path d="M86.167,72.552H14.833c-0.828,0-1.5-0.672-1.5-1.5V26.02c0-0.828,0.672-1.5,1.5-1.5h71.334c0.828,0,1.5,0.672,1.5,1.5 v45.031C87.667,71.88,86.995,72.552,86.167,72.552z M16.333,69.552h68.334V27.52H16.333V69.552z"/></g><g><path d="M50.5,54.081c-0.315,0-0.63-0.099-0.896-0.297L13.938,27.223c-0.665-0.495-0.803-1.435-0.308-2.099 s1.437-0.802,2.099-0.308L50.5,50.711l34.771-25.894c0.663-0.495,1.604-0.357,2.099,0.308c0.495,0.664,0.357,1.604-0.308,2.099 L51.396,53.784C51.13,53.982,50.815,54.081,50.5,54.081z"/></g><g><path d="M14.834,72.552c-0.434,0-0.863-0.187-1.159-0.548c-0.526-0.64-0.435-1.585,0.206-2.11l28.74-23.629 c0.639-0.529,1.586-0.435,2.11,0.206c0.526,0.64,0.435,1.585-0.206,2.11L15.785,72.21C15.507,72.44,15.169,72.552,14.834,72.552z"/></g><g><path d="M86.166,72.552c-0.335,0-0.673-0.111-0.951-0.342l-28.74-23.629c-0.641-0.525-0.732-1.471-0.206-2.11 c0.524-0.641,1.472-0.735,2.11-0.206l28.74,23.629c0.641,0.525,0.732,1.471,0.206,2.11C87.029,72.365,86.6,72.552,86.166,72.552z"/></g></g>
<!-- Created by Zach VanDeHey from the Noun Project -->
</div>
<div class="contactWords">
<h6>Email:</h6>
<p>[email protected]</p>
</div>
</address>
</section>
<form class="contactForm clearfix">
<div class="intro">
<input class="contactInput"type="text" name="name"placeholder="Name*" required autocomplete="off"> <!-- p styling -->
<input class="contactInput"type="email" name="email" placeholder="Email*" required autocomplete="off"> <!-- p styling -->
<input class="contactInput"type="text" name="subject" placeholder="Subject" autocomplete="off"> <!-- p styling -->
</div>
<div class="message">
<textarea class="contactInput" name="message" placeholder="Message"></textarea> <!-- p styling -->
<input class="contactSubmit" type="submit" name="submit"> <!-- h5 styling -->
</div>
</form>
</section>
</div>
</main>
<!-- ooooooooooooooooooooo -->
<footer class="clearfix">
<div class="innerWrapper">
<section class="address">
<h4>O.A.K Theme</h4>
<p>111 Hwjdiutj And</p>
<p>Toloro, IL, CANADA</p>
<p>111 111</p>
</section>
<section class="middle">
<ul class="social clearfix">
<a href="http://facebook.com" target="_blank"><li><i class="fa fa-facebook"></i></li></a>
<a href="http://twitter.com" target="_blank"><li><i class="fa fa-twitter"></i></li></a>
<a href="http://flickr.com"><li><i class="fa fa-flickr"target="_blank"></i></li></a>
<a href="http://dribbble.com" target="_blank"><li><i class="fa fa-dribbble"></i></li></a>
<a href="http://pinterest.com" target="_blank"><li><i class="fa fa-pinterest"></i></li></a>
<a href="http://linkedin.com" target="_blank"><li><i class="fa fa-linkedin"></i></li></a>
<a href="http://google.com" target="_blank"><li><i class="fa fa-google-plus"></i></li></a>
</ul>
<section class="copywrite">
<p>© 2015 OAK, All Rights Reserved</p>
</section>
</section>
<section class="contact">
<h4>Contact Us</h4>
<p>T: 77 999 2883</p>
<a href="mailto:[email protected]"><p>E: [email protected]</p></a>
<a href="#"><p>W: www.oak.com</p></a>
</section>
</div>
</footer>
</div>
</body>
</html>