-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcontact.html
More file actions
132 lines (127 loc) · 6.58 KB
/
contact.html
File metadata and controls
132 lines (127 loc) · 6.58 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="shortcut icon" type="image/png" href="img/favicon.png">
<title>Contact | Natours</title>
</head>
<body>
<div class="navigation">
<input id="navi-toggle" class="navigation__checkbox" type="checkbox">
<label for="navi-toggle" class="navigation__button">
<span class="navigation__icon"> </span>
</label>
<div class="navigation__background"> </div>
<nav class="navigation__nav">
<ul class="navigation__list">
<li class="navigation__item"><a href="index.html" class="navigation__link"><span>00</span>Home</a></li>
<li class="navigation__item"><a href="company.html" class="navigation__link"><span>01</span>Company</a>
</li>
<li class="navigation__item"><a href="contact.html" class="navigation__link"><span>02</span>Contact</a>
</li>
<li class="navigation__item"><a href="careers.html" class="navigation__link"><span>03</span>Careers</a>
</li>
<li class="navigation__item"><a href="privacy.html" class="navigation__link"><span>04</span>Privacy</a>
</li>
<li class="navigation__item"><a href="terms.html" class="navigation__link"><span>05</span>Terms</a>
</li>
</ul>
</nav>
</div>
<header class="header">
<div class="header__logo-box">
<img class="header__logo" src="img/logo-white.png" alt="logo">
</div>
<div class="header__text-box">
<h1 class="heading-primary">
<span class="heading-primary--main">Natours</span>
<span class="heading-primary--sub">Contact Us</span>
</h1>
<a class="btn btn--white btn--animated" href="index.html">Back to Home</a>
</div>
</header>
<main class="main">
<section class="section-about u-margin-bottom-big">
<div class="u-center-text u-margin-bottom-big">
<h2 class="heading-secondary">We are here for you</h2>
</div>
<div class="row">
<div class="col-1-of-2">
<h3 class="heading-tertiary u-margin-bottom-small">Get in touch</h3>
<p class="paragraph">Have a question about one of our tours, need to clarify a booking, or just want
to say hello? Fill in the form and we will get back to you within 24 hours.</p>
<div class="book__form" style="margin-top: 3rem;">
<form id="contactForm" class="form">
<div class="form__group">
<input type="text" id="contact-name" name="name" class="form__input"
placeholder="Your name" required>
<label for="contact-name" class="form__label">Your name</label>
</div>
<div class="form__group">
<input type="email" id="contact-email" name="email" class="form__input"
placeholder="Your email" required>
<label for="contact-email" class="form__label">Your email</label>
</div>
<div class="form__group">
<textarea id="contact-message" name="message" class="form__input"
placeholder="Your message" required
style="height:120px;resize:vertical;"></textarea>
<label for="contact-message" class="form__label">Your message</label>
</div>
<div class="form__group">
<button type="submit" class="btn btn--green">Send message</button>
</div>
</form>
<div id="contactMsg" class="u-margin-top-small"></div>
</div>
</div>
<div class="col-1-of-2">
<h3 class="heading-tertiary u-margin-bottom-small">Contact details</h3>
<p class="paragraph">
<strong>Natours Ltd.</strong><br>
Adventure Street 42<br>
London, EC1A 1BB, United Kingdom
</p>
<p class="paragraph">
✉ <a href="mailto:hello@natours.com" class="btn-text">hello@natours.com</a><br>
☎ +44 20 7946 0123
</p>
<h3 class="heading-tertiary u-margin-bottom-small">Opening hours</h3>
<p class="paragraph">
Monday – Friday: 9:00 – 18:00<br>
Saturday: 10:00 – 14:00<br>
Sunday: closed
</p>
<picture>
<source srcset="img/768x1024/nat-8-768x1024.webp" media="(min-width: 769px)">
<source srcset="img/320x480/nat-8-320x480.webp" media="(max-width: 768px)">
<img src="img/nat-8.jpg" alt="Our office" style="width:100%;max-width:400px;margin-top:2rem;">
</picture>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="footer__logo-box">
<picture class="footer__logo">
<source srcset="img/logo-green-small-1x.png 1x, /img/logo-green-2x.png 2x" media="(max-width: 37.5em)">
<img class="footer__logo" srcset="img/logo-green-1x.png 1x, /img/logo-green-2x.png 2x"
src="img/logo-green-2x.png" alt="Full logo">
</picture>
</div>
<div class="row">
<div class="col-1-of-2">
<p class="footer__copyright">
Built by <a href="#" class="footer__link">Jakub</a> while completing the <a href="#"
class="footer__link">Advanced CSS and Sass</a> course by Jonas Schmedtmann — successfully
finished. © 2026.
</p>
</div>
</div>
</footer>
<script src="main.js" defer></script>
</body>
</html>