-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
219 lines (209 loc) · 11.4 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- linking the css -->
<link rel="stylesheet" href="./css/style.css">
<!-- linking fontawsome from local folder -->
<link rel="stylesheet" href="./fontawesome/css/all.css">
<!-- linking favicon -->
<link rel="shortcut icon" href="./image/building-construction-logo-vector-19164408.jpg" type="image/x-icon">
<!-- linking google font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600&family=Roboto:wght@300;400;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Antonio:wght@100;400;700&display=swap" rel="stylesheet">
<!-- end of font links -->
<title>zinkcons</title>
</head>
<body>
<div class="container">
<div class="nav-container" id="home">
<div class="brand-logo">
<img src="./image/building-construction-logo-vector-19164408.jpg" alt="company logo">
</div>
<div class="nav-icon">
<i class="fa-solid fa-bars icon-i"></i>
</div>
<nav class="nav">
<ul class="nav-items">
<li class="nav-item"><a href="#home" class="nav-links"> home</a></li>
<li class="nav-item"><a href="#features" class="nav-links"> features</a></li>
<li class="nav-item"><a href="#feedback" class="nav-links"> feedback</a></li>
<li class="nav-item"><a href="#about_us" class="nav-links"> about us</a></li>
<li class="nav-item"><a href="#contact_us" class="nav-links"> contact us</a></li>
</ul>
</nav>
</div>
<header class="header-img-tex">
<div class="header-imag"><img src="./image/png-transparent-construction-worker-hard-hats-gkb-construction-llp-architectural-engineering-construction-foreman-construction-worker-building-service-engineer-removebg-preview.png" alt="header image of staff">
</div>
<div class="header-text">
<h1>architecture,<br> Engineering & <br>design firm</h1>
<p> we are authority for completing construction projects in environmentally sensitive surroundings.</p>
<button class="header-button btn"> Read more</button>
</div>
</header>
<main>
<!-- section 1 start -->
<section class="box-1">
<div class="box-1-cards">
<div class=" box-1-card">
<i class="fa-solid fa-arrow-trend-up"></i>
<h2> analysis</h2>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime eos iure officia ad eum placeat voluptates ratione facere aperiam aspernatur</p>
<button class="box1-button btn"> more</button>
</div>
<div class=" box-1-card">
<i class="fa-solid fa-file-signature"></i>
<h2>planning</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime eos iure officia ad eum placeat voluptates ratione facere aperiam aspernatur</p>
<button class="box1-button btn"> more</button>
</div>
<div class=" box-1-card">
<i class="fa-solid fa-pen-ruler"></i>
<h2>design</h2>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime eos iure officia ad eum placeat voluptates ratione facere aperiam aspernatur</p>
<button class="box1-button btn"> more</button>
</div>
</div>
</section>
<!-- section 1 end hear -->
<!-- start of section 2 -->
<section class="box-2" id="feedback">
<div class="box-our-team">
<h2> Meet the <span>team</span> </h2>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam odio modi quas ipsa ipsam nemo sint qui dicta sequi rerum quod, minima maxime voluptate sed laboriosam facilis. Natus, amet.Veniam odio modi quas ipsa ipsam nemo sint qui dicta sequi rerum quod, minima</p>
</div>
</section>
<!-- end of section 2 -->
<section class="box-3">
<div class="box-our-team-img">
<div class="image-of-preson">
<img src="./image/our team image 1.jpeg" alt=""></div>
<div class="image-of-preson">
<img src="./image/our team image.jpg" alt="">
</div>
</div>
</section>
<section class="box-4">
<div class="box-welcome" id="features">
<div class="child-welcome-main">
<h2> wlcome to</h2>
<h3>zinkcons <br>
company</h3>
<p>we are the leader with 25 years of experience <br> in the construction market!</p>
</div>
<div class="child-welcome">
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam perspiciatis debitis veritatis assumenda, voluptate neque animi officia numquam laudantium esse dicta, consequatur tempora enim ipsa vitae, accusamus atque in impedit beatae totam! Optio esse reprehenderit aperiam vitae praesentium sequi quam tenetur ullam at. Tempora magnam aperiam, dolorum, cupiditate pariatur sint officiis recusandae rem reprehenderit enim ipsum earum cumque minima ipsa tenetur molestiae facilis! Omnis, laboriosam similique rem eligendi reiciendis perspiciatis minus numquam ea incidunt nam doloribus repellendus odit, dignissimos saepe. Architecto, magnam? Quibusdam sint, labore dolores corrupti aspernatur, exercitationem voluptatibus, voluptatem iure ea aperiam doloribus! Magnam perspiciatis iure eum voluptatem ea eius quaerat unde laudantium consectetur possimus voluptatibus nam maiores cum magni quidem sapiente atque, nostrum sed dolor voluptatum non.</p>
<p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum earum accusamus culpa quasi. Delectus, ipsum. Quod, nam distinctio officia fugiat laborum dicta cum perferendis provident aliquam similique sunt, maxime quas earum, voluptatum officiis labore ratione! Molestias vel aspernatur error suscipit corrupti eos ex, eius architecto quis placeat maiores, impedit magni!</p>
<button class="button-welcome-more btn">learn more</button>
</div>
</div>
</section>
<!-- end of welcome note -->
<section class="box-5" >
<div class="box-how-we-work">
<h2> how we work</h2>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem tempore cum, fuga excepturi, autem dolore iste rem atque quibusdam voluptate obcaecati quod sint corrupti cumque dicta aperiam temporibus! Ipsa possimus maxime rem tenetur commodi vitae quo iure voluptatibus. Dolorum officia assumenda eaque animi, debitis placeat tenetur optio asperiores nam non provident sapiente libero nesciunt ullam sequi veniam ea, nostrum quasi?</p>
</div>
</section>
<!-- end of the box-5 -->
<section class="box-6">
<div class="box-gallary">
<img src="./image/service-building-1024x550.jpg" alt="">
<img src="./image/Matrix-final(1).jpg" alt="">
<img src="./image/Jonava-Photo2.jpg" alt="">
<img src="./image/pexels-expect-best-323775.jpg" alt="">
<img src="./image/construction-workers-communication-worksite.jpg" alt="">
<img src="./image/stakeholders-construction-projects-featured.jpg" alt="">
</div>
</section>
<section class="box-7">
<div class="box-build-with-us">
<div class="box-build-with-us-img-1">
<img src="./image/grid-bg-01.png" alt="">
</div>
<div class="box-build-with-us-img-2">
<img src="./image/teamwork-building-construction-511991086-5b817ca5c9e77c00508ea57b.jpg" alt="">
</div>
<div class="box-build-with-us-text">
<h2>build with us</h2>
<p>our vision is to inspire an organization of professionals to complete hight-value, hight-quality projects that positively impact communities - and it is our approch and our culture that sets us apart </p>
<button class="button-build-with-us btn"> contact us</button>
</div>
</div>
</section>
<section class="box-8">
<div class="box-just-note" id="about_us">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident officia ab maxime distinctio, odio maiores quidem corrupti necessitatibus sed tempore nobis omnis, error, tenetur neque temporibus? Veritatis magni blanditiis enim.</p>
<button class="button-just-note btn">learn more</button>
</div>
</section>
<section class="box-9">
<div class="box-9-firstblock">
<div class="box-9-firstblock-text">
<h2>expert,efficient, <br>collabrative. <br>
build with <br>experince
</h2>
</div>
<div class="box-9-firstblock-image"> <img src="./image/iii.jpg" alt="">
</div>
</div>
<div class="box-9-second">
<div class="box-9-second-image"> <img src="./image/note-image.png" alt="">
</div>
<div class="box-9-second-note">
<h2> our vision </h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure mollitia excepturi nobis dicta libero praesen </p>
<button class="button-second-note btn">learn more</button>
</div>
</div>
</section>
<section class="box-10">
<div class="box-get-touch" id="contact_us">
<div class="box-get-touch-header">
<h2>get in touch</h2>
<p> we are looking forward to start a project with you!</p>
</div>
<div class="box-get-touch-contact-area">
<div class="box-get-touch-contact-direction">
<div class=" box-get-touch-contact-direction-map-mark">
<i class="fa-solid fa-location-dot"></i>
<p> 121 Rock Street, 21 Avenue, New York,<br>
NY 92103-9000 </p>
</div>
<div class=" box-get-touch-contact-direction-call">
<i class="fa fa-phone" aria-hidden="true"></i>
<p> 1 (234)567-891 <br> 1 (234)987-654 </p>
</div>
<div class="box-get-touch-contact-direction-clock">
<i class="far fa-clock"></i>
<p> mon - fri ..... 10 am - 8 pm <br> sat,sun....closed</p>
</div>
</div>
<div class="box-get-touch-contact-form">
<form action="">
<input type="text" name="" id="" placeholder="Enter your Name">
<input type="email" value="" placeholder="Enter a valid email address">
<textarea name="" id="" cols="30" rows="7" placeholder=" Enter your message"></textarea>
<button type="submit" class="btn">submit</button>
</form>
</div>
</div>
</div>
</section>
</main>
<footer>
<i class="fa-brands fa-facebook-f"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-linkedin-in"></i>
<i class="fa-brands fa-instagram"></i>
</footer>
</div>
<script src="./js/script.js"></script>
</body>
</html>