-
Notifications
You must be signed in to change notification settings - Fork 2
/
talas.html
168 lines (166 loc) · 9.63 KB
/
talas.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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css"/>
</head>
<body>
<header class="header header__tours">
<div class="container header__container">
<div class="header__left-side">
<a href="index.html" class="logo">
<img src="./images/mount.svg" alt="">
</a>
</div>
<nav class="navbar">
<a href="index.html" class="navbar__link">HOME</a>
<a href="index.html" class="navbar__link">ABOUT</a>
<a href="tours.html" class="navbar__link">TOURS</a>
<a href="#" class="navbar__link">GALLERY</a>
<a href="#footer" class="navbar__link">CONTACTS</a>
</nav>
</div>
</header>
<section class="hero-card">
<div class="hero-card__container container">
<div class="card-inner">
<div class="card-logo">
<img src="./images/chui-m.svg" alt="">
<h1 class="card-title">TALAS <br>
REGION</h1>
</div>
<button class="card-btn">
BOOK IT
</button>
<div class="hero__wrapper">
<div class="hero__form">
<a href="#" class="hero__close">X</a>
<h2 class="hero__form_title">BOOK IT</h2>
<p class="hero__form_desc">Fill out the form and we will contact you</p>
<label for="hero-name"></label>
<input type="text" id="hero-name" placeholder="name" required/>
<label for="hero-email"></label>
<input type="email" id="hero-email" placeholder="email" required>
<label for="hero-phone"></label>
<input type="number" id="hero-phone" placeholder="+996(500)088077">
<button class="hero-btn">Send</button>
</div>
</div>
</div>
<div class="row ">
<div class="col-6">
<p class="card-desc">
The mysterious mausoleum of the great Manas, located at the confluence of two rivers, is one of
the great relics. The mausoleum was built by the son of Manas, and by order of his wife Kanykei
The mausoleum is shrouded in mysteries, during the construction of the mausoleum some
inscriptions in Arabic were found, that the mausoleum was built by a noble and influential woman.
</p>
<div class="tours__video">
<a data-fancybox="gallery" href="https://www.youtube.com/watch?v=G8AWaoLcdxA&feature=youtu.be">
<img src="./images/play%20button.svg" alt="" class="video__btn">
</a>
</div>
</div>
<div class="col-6">
<div class="tours__map">
<img src="./images/mapicon.svg" alt="" class="hero_img animate__animated animate__fadeInRight">
</div>
</div>
</div>
</div>
</section>
<footer class="footer" id="footer">
<div class="container footer__container">
<div class="footer__forms">
<h2 class="footer__forms_title">Let’s Get In Touch</h2>
<label for="name"></label>
<input type="text" placeholder="name" id="name" required>
<label for="mail"></label>
<input type="email" placeholder="mail" id="mail" required>
<label for="message"></label>
<textarea id="message" name="message" cols="30" rows="10" placeholder="message"></textarea>
</div>
<div class="footer__info">
<div class="footer__info_location footer__items">
<img src="./images/location%20icon.png" alt="">
<div>
<h3 class="footer__info_title">
Visit our Office:
</h3>
<p class="footer__info_desc">Kyrgyzstan, Bishkek. <br>
st. Isanova 100A</p>
</div>
</div>
<div class="footer__info_contacts footer__items">
<img src="./images/message%20icon.png" alt="">
<div>
<h3 class="footer__info_title">
Use Contact Form:
</h3>
<p class="footer__info_desc">Fill in the fields in Contact Form <br> and ask questions you are <br>
interested
in.</p>
</div>
</div>
<div class="footer__info_num footer__items">
<img src="./images/phone%20icon.png" alt="">
<div><h3 class="footer__info_title">
Call Us:
</h3>
<p class="footer__info_desc">Don’t hesitate to contact us via <br> phones:
<a href="tel:+996(500)088077">+996(500)088077</a>
</p></div>
</div>
</div>
<div class="footer__socials">
<a href="#" class="footer__social">
<svg width="37" height="29" viewBox="0 0 37 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M37 3.40119C35.6241 3.978 34.1579 4.36033 32.6294 4.54597C34.2019 3.64871 35.4021 2.23873 35.9663 0.53924C34.5002 1.37462 32.8814 1.96469 31.1563 2.29398C29.7642 0.87737 27.7801 0 25.6156 0C21.4161 0 18.0352 3.25754 18.0352 7.25101C18.0352 7.82561 18.0861 8.37811 18.2109 8.90409C11.9047 8.61016 6.32469 5.72169 2.57612 1.32158C1.92169 2.40669 1.53781 3.64871 1.53781 4.98576C1.53781 7.49632 2.89062 9.72179 4.90712 11.0102C3.68844 10.9881 2.49287 10.65 1.48 10.1174C1.48 10.1395 1.48 10.1682 1.48 10.1969C1.48 13.7197 4.10931 16.6457 7.55725 17.3198C6.93981 17.4811 6.26687 17.5584 5.5685 17.5584C5.08287 17.5584 4.59262 17.5319 4.13244 17.4347C5.11525 20.3055 7.90413 22.416 11.2203 22.4845C8.6395 24.4139 5.36269 25.5763 1.81531 25.5763C1.19325 25.5763 0.596625 25.5498 0 25.4769C3.36006 27.5476 7.34219 28.73 11.6365 28.73C25.5947 28.73 33.226 17.68 33.226 8.10186C33.226 7.78141 33.2144 7.47201 33.1982 7.16482C34.7037 6.1438 35.9686 4.86863 37 3.40119Z"
fill="white"/>
</svg>
</a>
<a href="#" class="footer__social">
<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.625 0.76709H9.375C4.19813 0.76709 0 4.92784 0 10.0586V21.2085C0 26.3393 4.19813 30.5 9.375 30.5H20.625C25.8019 30.5 30 26.3393 30 21.2085V10.0586C30 4.92784 25.8019 0.76709 20.625 0.76709ZM27.1875 21.2085C27.1875 24.795 24.2437 27.7125 20.625 27.7125H9.375C5.75625 27.7125 2.8125 24.795 2.8125 21.2085V10.0586C2.8125 6.47209 5.75625 3.55455 9.375 3.55455H20.625C24.2437 3.55455 27.1875 6.47209 27.1875 10.0586V21.2085Z"
fill="white"/>
<path d="M15 8.20068C10.8581 8.20068 7.5 11.5289 7.5 15.6338C7.5 19.7387 10.8581 23.0669 15 23.0669C19.1419 23.0669 22.5 19.7387 22.5 15.6338C22.5 11.5289 19.1419 8.20068 15 8.20068ZM15 20.2795C12.4162 20.2795 10.3125 18.1945 10.3125 15.6338C10.3125 13.0712 12.4162 10.9881 15 10.9881C17.5837 10.9881 19.6875 13.0712 19.6875 15.6338C19.6875 18.1945 17.5837 20.2795 15 20.2795Z"
fill="white"/>
<path d="M23.0625 8.63379C23.6144 8.63379 24.0619 8.19023 24.0619 7.64307C24.0619 7.09591 23.6144 6.65234 23.0625 6.65234C22.5106 6.65234 22.0631 7.09591 22.0631 7.64307C22.0631 8.19023 22.5106 8.63379 23.0625 8.63379Z"
fill="white"/>
</svg>
</a>
<a href="#" class="footer__social">
<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M26.25 0.76709H3.75C1.68187 0.76709 0 2.43399 0 4.4837V26.7834C0 28.8331 1.68187 30.5 3.75 30.5H15V20.2793H11.25V15.6335H15V11.9169C15 8.83772 17.5181 6.34201 20.625 6.34201H24.375V10.9878H22.5C21.465 10.9878 20.625 10.8911 20.625 11.9169V15.6335H25.3125L23.4375 20.2793H20.625V30.5H26.25C28.3181 30.5 30 28.8331 30 26.7834V4.4837C30 2.43399 28.3181 0.76709 26.25 0.76709Z"
fill="white"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="30" height="29.7329" fill="white" transform="translate(0 0.76709)"/>
</clipPath>
</defs>
</svg>
</a>
</div>
</div>
</footer>
<section class="copyright">
<div class="container copyright__container">
<div class="copyright__content">
<p>© All right reserved.</p>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<script src="./js/script.js"></script>
</body>
</html>