-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathservices.html
230 lines (193 loc) · 15.8 KB
/
services.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
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles/main-styles.css">
<link rel="stylesheet" href="/styles/services.css">
<link rel="shortcut icon" href="/icons/favicon.ico" type="image/x-icon">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dananz</title>
</head>
<body>
<header class="header-container wide-wrap">
<a href="index.html"><img style="cursor: pointer;" src="images/logo.svg" alt=""></a>
<nav class="header-nav">
<ul class="header-ul">
<li class="header__list"><a class="header-list__link" href="index.html">Home</a></li>
<li class="header__list"><a class="header-list__link" href="about.html">About Us</a></li>
<li class="header__list"><a class="header-list__link" href="services.html">Services</a></li>
<li class="header__list"><a class="header-list__link" href="teams.html">Our Teams</a></li>
</ul>
<button class="header__button">Contact Us</button>
</nav>
<div class="burger-w-menu">
<img style="cursor: pointer;" class="header__burger" src="icons/burger_icon.svg" alt="">
<ul class="burger-menu">
<li class="burger__li"><a href="index.html">Home</a></li>
<li class="burger__li"><a href="about.html">About Us</a></li>
<li class="burger__li"><a href="services.html">Services</a></li>
<li class="burger__li"><a href="teams.html">Our Teams</a></li>
</ul>
</div>
</header>
<main>
<section id="banner-section" class="wide-wrap">
<div class="banner-text">
<h1 class="banner__title">Services</h1>
<p class="banner__p">It is a long established fact that a reader will be distracted by <br>
the readable content of a page when looking at its layout.
</p>
</div>
<img class="banner__img" src="images/service_img_wide.png" alt="">
</section>
<section id="achievment-section" class="wide-wrap">
<div class="section-line">
<h4 class="section__h4">Achievment</h4>
<hr class="line">
</div>
<ul class="achievement-ul">
<li class="achievement-ul__item">
<img src="images/services_achievement_img1.png" alt="">
<div class="achievment-ul__text">
<h1 class="achievment-ul__h1">Interior design</h1>
<p class="achievment-ul__h4">Customize your interior design into a dream place with the best designers and quality furniture.
We try our best to fulfill your expectations.
</p>
</div>
</li>
<li class="achievement-ul__item">
<img src="images/services_achievement_img2.png" alt="">
<div class="achievment-ul__text">
<h1 class="achievment-ul__h1">Consultant</h1>
<p class="achievment-ul__h4">Customize your interior design into a dream place with the best designers and quality furniture.
We try our best to fulfill your expectations.
</p>
</div>
</li>
<li class="achievement-ul__item">
<img src="images/services_achievement_img3.png" alt="">
<div class="achievment-ul__text">
<h1 class="achievment-ul__h1">Construction consultant</h1>
<p class="achievment-ul__h4">Customize your interior design into a dream place with the best designers and quality furniture.
We try our best to fulfill your expectations.
</p>
</div>
</li>
</ul>
</section>
<section id="product-section" class="wide-wrap">
<div class="section-line">
<h4 class="section__h4">Product</h4>
<hr class="line">
</div>
<div class="product-text">
<h1>Choose your <br> product themes.</h1>
<p>Find the theme you want. If our choice of theme is <br>
not what you want, you can customize it as <br> you want.</p>
</div>
<ul class="product-ul">
<a href="#"><li>
<span class="ul__num">01</span>
<div class="product-ul__text">
<div class="div">
<h2>Vintage</h2>
<p>the use of simple and limited elements to get the <br> best effect or impression.</p>
</div>
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.66699 16H25.3337" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M16 6.66663L25.3333 16L16 25.3333" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</li></a>
<a href="#"><li>
<span class="ul__num">02</span>
<div class="product-ul__text">
<div class="div">
<h2>Minimalist</h2>
<p>the use of simple and limited elements to get the <br> best effect or impression.</p>
</div>
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.66699 16H25.3337" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M16 6.66663L25.3333 16L16 25.3333" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</li></a>
<a href="#"><li>
<span class="ul__num">03</span>
<div class="product-ul__text">
<div class="div">
<h2>Modern</h2>
<p>the use of simple and limited elements to get the <br> best effect or impression.</p>
</div>
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.66699 16H25.3337" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M16 6.66663L25.3333 16L16 25.3333" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</li></a>
<a href="#"><li>
<span class="ul__num">04</span>
<div class="product-ul__text">
<div class="div">
<h2>Transitional</h2>
<p>the use of simple and limited elements to get the <br> best effect or impression.</p>
</div>
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.66699 16H25.3337" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M16 6.66663L25.3333 16L16 25.3333" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</li></a>
</ul>
</section>
<section id="discuss-section">
<div class="discuss-container wide-wrap">
<h1 class="discuss__h1">Let's discuss making your interior like a dream place!</h1>
<div class="p-w-button">
<p class="discuss__p">Contact us below to work together to build your amazing interior</p>
<button class="discuss__button">Contact Us</button>
</div>
</div>
</section>
</main>
<footer class="footer wide-wrap">
<div class="footer-logo-w-h1">
<a href="#"><img src="images/logo.svg" alt=""></a>
<h1>One of the best furniture <br> agency.</h1>
</div>
<div class="footer-email">
<div class="al-end">
<div class="email-form">
<label class="email-label" for="email-input">
<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="7" cy="7.18237" rx="7" ry="7.00879" fill="#333333" />
</svg>
<p class="email-label__p">Enter your email to get the laterst news</p></label>
<input id="email-input" class="footer-input" type="text" placeholder="Email Address">
<a href="#"><svg class="footer-email__strelka" width="26" height="12" viewBox="0 0 26 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 10.2479H23.5L16 1.23633" stroke="#141414" stroke-width="2" />
</svg></a>
</div>
<div class="footer-socials">
<p>Follow us On</p>
<div class="footer-socials-icons">
<a href="#"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22 12.0607C22 6.504 17.5233 2 12 2C6.47667 2 2 6.504 2 12.0607C2 17.0833 5.656 21.2453 10.4373 22V14.9693H7.89867V12.06H10.4373V9.844C10.4373 7.32267 11.93 5.92933 14.2147 5.92933C15.308 5.92933 16.4533 6.126 16.4533 6.126V8.602H15.1913C13.9493 8.602 13.5627 9.378 13.5627 10.174V12.0607H16.336L15.8927 14.9687H13.5627V22C18.344 21.2453 22 17.0833 22 12.0607Z" fill="black" />
</svg></a>
<a href="#"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C9.5556 3 9.2496 3.0102 8.2896 3.054C7.3314 3.0978 6.6768 3.2502 6.1044 3.4728C5.5044 3.6984 4.9602 4.0524 4.5102 4.5108C4.05253 4.96028 3.69831 5.5041 3.4722 6.1044C3.2508 6.6768 3.0978 7.332 3.054 8.2902C3.0108 9.2496 3 9.555 3 12C3 14.445 3.0102 14.7504 3.054 15.7104C3.0978 16.6686 3.2502 17.3232 3.4728 17.8956C3.6984 18.4956 4.0524 19.0398 4.5108 19.4898C4.96029 19.9475 5.50411 20.3017 6.1044 20.5278C6.6768 20.7498 7.3314 20.9022 8.2896 20.946C9.2496 20.9898 9.5556 21 12 21C14.4444 21 14.7504 20.9898 15.7104 20.946C16.6686 20.9022 17.3232 20.7498 17.8956 20.5272C18.4956 20.3016 19.0398 19.9476 19.4898 19.4892C19.9475 19.0397 20.3017 18.4959 20.5278 17.8956C20.7498 17.3232 20.9022 16.6686 20.946 15.7104C20.9898 14.7504 21 14.4444 21 12C21 9.5556 20.9898 9.2496 20.946 8.2896C20.9022 7.3314 20.7498 6.6768 20.5272 6.1044C20.3012 5.50384 19.947 4.95979 19.4892 4.5102C19.0397 4.05253 18.4959 3.69831 17.8956 3.4722C17.3232 3.2508 16.668 3.0978 15.7098 3.054C14.7504 3.0108 14.445 3 12 3ZM12 4.6218C14.403 4.6218 14.688 4.6308 15.6372 4.674C16.5144 4.7142 16.9908 4.86 17.3082 4.9842C17.7282 5.1468 18.0282 5.3424 18.3432 5.6568C18.6582 5.9718 18.8532 6.2718 19.0158 6.6918C19.1394 7.0092 19.2858 7.4856 19.326 8.3628C19.3692 9.312 19.3782 9.597 19.3782 12C19.3782 14.403 19.3692 14.688 19.326 15.6372C19.2858 16.5144 19.14 16.9908 19.0158 17.3082C18.8718 17.6991 18.6419 18.0528 18.3432 18.3432C18.0528 18.642 17.6992 18.8718 17.3082 19.0158C16.9908 19.1394 16.5144 19.2858 15.6372 19.326C14.688 19.3692 14.4036 19.3782 12 19.3782C9.5964 19.3782 9.312 19.3692 8.3628 19.326C7.4856 19.2858 7.0092 19.14 6.6918 19.0158C6.30087 18.8718 5.9472 18.6419 5.6568 18.3432C5.35811 18.0528 5.12828 17.6991 4.9842 17.3082C4.8606 16.9908 4.7142 16.5144 4.674 15.6372C4.6308 14.688 4.6218 14.403 4.6218 12C4.6218 9.597 4.6308 9.312 4.674 8.3628C4.7142 7.4856 4.86 7.0092 4.9842 6.6918C5.1468 6.2718 5.3424 5.9718 5.6568 5.6568C5.94716 5.35803 6.30085 5.12819 6.6918 4.9842C7.0092 4.8606 7.4856 4.7142 8.3628 4.674C9.312 4.6308 9.597 4.6218 12 4.6218Z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 15.003C11.6057 15.003 11.2152 14.9254 10.8508 14.7744C10.4865 14.6235 10.1554 14.4023 9.87658 14.1235C9.59773 13.8446 9.37653 13.5136 9.22561 13.1492C9.0747 12.7849 8.99702 12.3944 8.99702 12C8.99702 11.6057 9.0747 11.2152 9.22561 10.8508C9.37653 10.4865 9.59773 10.1554 9.87658 9.87659C10.1554 9.59774 10.4865 9.37654 10.8508 9.22562C11.2152 9.07471 11.6057 8.99703 12 8.99703C12.7965 8.99703 13.5603 9.31342 14.1235 9.87659C14.6866 10.4398 15.003 11.2036 15.003 12C15.003 12.7965 14.6866 13.5603 14.1235 14.1235C13.5603 14.6866 12.7965 15.003 12 15.003ZM12 7.37403C10.7731 7.37403 9.59649 7.86141 8.72895 8.72896C7.8614 9.5965 7.37402 10.7731 7.37402 12C7.37402 13.2269 7.8614 14.4036 8.72895 15.2711C9.59649 16.1387 10.7731 16.626 12 16.626C13.2269 16.626 14.4036 16.1387 15.2711 15.2711C16.1386 14.4036 16.626 13.2269 16.626 12C16.626 10.7731 16.1386 9.5965 15.2711 8.72896C14.4036 7.86141 13.2269 7.37403 12 7.37403ZM17.9718 7.29003C17.9718 7.58005 17.8566 7.85818 17.6515 8.06325C17.4465 8.26833 17.1683 8.38353 16.8783 8.38353C16.5883 8.38353 16.3102 8.26833 16.1051 8.06325C15.9 7.85818 15.7848 7.58005 15.7848 7.29003C15.7848 7.00002 15.9 6.72188 16.1051 6.51681C16.3102 6.31174 16.5883 6.19653 16.8783 6.19653C17.1683 6.19653 17.4465 6.31174 17.6515 6.51681C17.8566 6.72188 17.9718 7.00002 17.9718 7.29003Z" fill="black" />
</svg></a>
<a href="#"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.1154 6.00894C17.0381 5.30651 16.2605 4.18262 16.018 2.87246C15.9656 2.5894 15.9368 2.29807 15.9368 2H12.4984L12.4929 15.78C12.435 17.3231 11.165 18.5616 9.60804 18.5616C9.12413 18.5616 8.66848 18.4406 8.26729 18.2295C7.3473 17.7454 6.71771 16.781 6.71771 15.6713C6.71771 14.0775 8.01437 12.7808 9.60804 12.7808C9.90553 12.7808 10.1909 12.8299 10.4609 12.9145V9.40424C10.1815 9.3662 9.89765 9.34242 9.60804 9.34242C6.11829 9.34242 3.2793 12.1816 3.2793 15.6713C3.2793 17.8124 4.34905 19.7072 5.98108 20.853C7.00906 21.5747 8.25948 22 9.60804 22C13.0978 22 15.9368 19.161 15.9368 15.6713V8.68367C17.2854 9.65161 18.9376 10.222 20.7205 10.222V6.7836C19.7601 6.7836 18.8656 6.49808 18.1154 6.00894Z" fill="black" />
</svg></a>
<a href="#"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.792 5.41483C20.6521 5.64589 21.3325 6.32626 21.5635 7.18633C21.9872 8.75244 22 12.0002 22 12.0002C22 12.0002 22 15.2608 21.5764 16.8141C21.3453 17.6741 20.665 18.3545 19.8049 18.5856C18.2516 19.0092 12 19.0092 12 19.0092C12 19.0092 5.74839 19.0092 4.19512 18.5856C3.33504 18.3545 2.65469 17.6741 2.42362 16.8141C2 15.248 2 12.0002 2 12.0002C2 12.0002 2 8.75244 2.41078 7.19917C2.64185 6.33909 3.32221 5.65873 4.18229 5.42767C5.73556 5.00404 11.9872 4.99121 11.9872 4.99121C11.9872 4.99121 18.2388 4.99121 19.792 5.41483ZM15.1836 12.0002L9.99743 15.004V8.99635L15.1836 12.0002Z" fill="black" />
</svg></a>
</div>
</div>
</div>
</footer>
<script src="indexscript.js"></script>
</body>
</html>