-
Notifications
You must be signed in to change notification settings - Fork 0
/
contact.html
104 lines (104 loc) · 5.6 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bluebox - Contact | Damian Fiałkiewicz Portfolio</title>
<meta name="description" content="Projekt responsywnej strony biznesowej Bluebox stworzony na podstawie darmowego PSD">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.min.css">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700" rel="stylesheet" type="text/css">
</head>
<body>
<header class="main-header">
<a class="logo-link" href="index.html">
<img class="logo" src="img/navigation/logo.svg" alt="logo"/>
</a>
<nav class="menu">
<button type="button" class="hamburger"><span class="btn-text-hide">Menu mobile</span></button>
<ul class="menu__list">
<li class="menu__item"><a class="menu__link" href="about.html">About</a></li>
<li class="menu__item"><a class="menu__link" href="index.html">Services</a></li>
<li class="menu__item"><a class="menu__link" href="works.html">Works</a></li>
<li class="menu__item"><a class="menu__link menu__link--active" href="contact.html">Contact us</a></li>
</ul>
</nav>
<button class="btn-search"><span class="btn-text-hide">Search mobile</span></button>
<form class="form-search">
<input type="search" class="form-search__field" placeholder="Search">
<button type="submit" class="form-search__submit">
<span class="btn-text-hide">Search submit</span>
</button>
</form>
</header>
<main>
<a class="scroll-arrow"></a>
<h1 class="contact-title">Get in touch with us</h1>
<div class="contact">
<div class="contact__section">
<p class="contact__text">
Thank you for stopping by! We are happy to hear from you.
Please contact us through the form below and we will get back to you as soon as we can.
</p>
<form class="contact__form">
<label class="contact__label">Name
<input class="contact__field" type="text" name="name" required>
</label>
<label class="contact__label">Email Adress
<input class="contact__field" type="email" name="email" required>
</label>
<label class="contact__label">Subject
<input class="contact__field" type="text" name="subject" required>
</label>
<label class="contact__label">Description
<textarea class="contact__field contact__field--textarea" name="desc" required></textarea>
</label>
<button class="contact__submit" type="submit" name="submit">Submit</button>
</form>
</div>
<section class="contact__section map">
<h2 class="map__title">We are here</h2>
<div class="map__container">
<div class="map__google"></div>
</div>
<address class="map__adress">
<img class="map__icon-place" src="img/navigation/location.svg" alt="place" />
<span class="map__company">BlueBox Company</span><br>
1234 Road<br>
London, SW1 000<br>
<span class="map__phone">Tel: 01000 334 556</span>
<span class="map__phone">Fax: 01000 334 556</span>
<span class="map__phone">Email: <a class="map__mail" href="mailto:[email protected]">[email protected]</a></span>
</address>
</section>
</div>
</main>
<footer class="footer">
<div class="footer__wrapper">
<div class="footer__container">
<div class="footer__side">
<ul class="footer__list">
<li class="footer__item"><a class="footer__link" href="about.html">About</a></li>
<li class="footer__item"><a class="footer__link" href="index.html">Services</a></li>
<li class="footer__item"><a class="footer__link" href="works.html">Works</a></li>
<li class="footer__item"><a class="footer__link" href="contact.html">Contact us</a></li>
</ul>
<p class="footer__copyright">© 2016 BlueBox. All Right Reserved.</p>
<p class="footer__copyright">Developed by <a href="/" class="footer__developer">Damian Fiałkiewicz</a>.</p>
</div>
<ul class="footer__socials">
<li class="footer__social"><a href="http://facebook.com" class="footer__social-link"><img src="img/socials/facebook.png" alt="facebook"></a></li>
<li class="footer__social"><a href="http://linkedin.com" class="footer__social-link"><img src="img/socials/linkedin.png" alt="linkedin"></a></li>
<li class="footer__social"><a href="http://twitter.com" class="footer__social-link"><img src="img/socials/twitter.png" alt="twitter"></a></li>
<li class="footer__social"><a href="http://pinterest.com" class="footer__social-link"><img src="img/socials/pinterest.png" alt="pinterest"></a></li>
<li class="footer__social"><a href="http://dribbble.com" class="footer__social-link"><img src="img/socials/dribbble.png" alt="dribbble"></a></li>
<li class="footer__social"><a href="http://plus.google.com" class="footer__social-link"><img src="img/socials/google-plus.png" alt="google+"></a></li>
</ul>
</div>
<p class="footer__desc">The logos used in the design are the property of their respective owners / copyright holders.</p>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script src="js/main.min.js"></script>
<script async dyfer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC5Ll6-tQI87W7lCcM0WZKQwjDCiGYCdKE&callback=initMap"></script>
</body>
</html>