-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
310 lines (287 loc) · 13.6 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
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
<!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">
<!-- link of google fonts -->
<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=Lato:ital,wght@0,300;0,400;0,700;0,900;1,400&display=swap"
rel="stylesheet">
<!-- link of css bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- link of custom css -->
<link rel="stylesheet" href="./css/style.css">
<title>Delani Studio</title>
</head>
<body>
<section id="home" class="h-100 d-flex justify-content-center position-relative align-items-center">
<div class="home-details text-center text-white container-fluid">
<div class="justify-content-center d-flex">
<div
class="logo d-flex rounded-circle border-3 border-white border justify-content-center align-items-center fw-medium fs-1">
D
</div>
</div>
<div class="welcome-title pt-3 text-uppercase">
<h1 class="fs-1">Welcome</h1>
<h1 class="fs-1 pt-4">To Delani Studio</h1>
<h6 class="pt-2">
Amazing people are making amazing decisions in a fun environment
</h6>
</div>
</div>
<div class="scroll-down text-center text-white">
<button class="scroll rounded-pill text-white fs-1" title="scroll down">
.
</button>
</div>
</section>
<section id="about-us" class="py-5">
<div class="container-fluid text-center">
<h1 class="text-center text-uppercase">About US</h1>
<div class="container fs-5">
<p class="pt-2">
When you work with us, you are part of a team of committed collaborators. All aspects of our software
development process are intergrated, interactive and agile.
</p>
<p>Our approach unifies design, development and product management to create exceptional products</p>
<p>We start each project by understanding your business goals, the user's needs and the product
requirements
</p>
<p>Then we help translate them into effective and elegant solutions. </p>
</div>
</div>
</section>
<section id="services" class="py-5">
<div class="container text-center text-white pt-5 mt-0 mt-md-5">
<div class="">
<h1 class="text-center text-uppercase fw-bold">Services</h1>
<div class="fs-5">
<p class="pt-2">
Before we sing a contract or write a line of code our team will spend the necessary time needed
to understand your product vision
</p>
<p>The outcome of this scoping session is proposal or high-level statement of work</p>
<p>Based on your requirements, we can provide a complete offering or just the pieces you need.</p>
</div>
</div>
</div>
</section>
<section class="py-5" id="what-we-do">
<div class="container">
<h1 class="text-center text-uppercase pb-3">What we do</h1>
<div class="row mt-3">
<div class="col-md-4 col-sm-6 d-flex justify-content-center service">
<div class="service-card text-center">
<img src="./images/services_icons/design_icon.png" alt="design"
class="img-thumbnail border-0 pb-2">
<p class="text-uppercase fs-6 text-center">Design</p>
</div>
<div class="service-details">
<h3 class="w-title">Design</h3>
<span class="text-center">
<p class="pt-1 fs-5 mb-2">
Our design practice offers a full range of services including brand strategy, interaction
and visual design and user experience testing.
</p>
<p class="pt-1 fs-5 mb-2">Throughout your project, our designers create and implement visual
design and workflows,
solicit user feedback and
work with you to make sure what gets built is what is needed.</p>
</span>
</div>
</div>
<div class="col-md-4 col-sm-6 d-flex justify-content-center service">
<div class="service-card text-center">
<img src="./images/services_icons/dev_icon.png" alt="design"
class="img-thumbnail border-0 pb-2">
<p class="text-uppercase fs-6 text-center">Development</p>
</div>
<div class="service-details">
<h3 class="w-title">Development</h3>
<span class="text-center">
<p class="pt-1 fs-5 mb-2">
All engineers are fluent in the latest enterprise, mobile and web development technologies.
</p>
<p class="pt-1 fs-5 mb-2">
They collaborate with your team to write, and improve code on a daily basis, using proven
practices such as test-driven development and pair programming.
</p>
</span>
</div>
</div>
<div class="col-md-4 col-sm-6 d-flex justify-content-center service">
<div class="service-card text-center">
<img src="./images/services_icons/product_icon.png" alt="design"
class="img-thumbnail border-0 pb-2">
<p class="text-uppercase fs-6 text-center">Product Management</p>
</div>
<div class="service-details">
<h3 class="w-title">Product Management</h3>
<span class="text-center">
<p class="pt-1 fs-5 mb-2">
Planning and development is iterative. Because we are constantly coding and testing, the
products we build are always ready to go live.
</p>
<p class="pt-1 fs-5 mb-2">
This iterative process allows for changes as
business requirements evolve.
</p>
</span>
</div>
</div>
</div>
</div>
</section>
<section class="py-5" id="portfolio">
<div class="container">
<h1 class="text-center text-uppercase pb-3">portfolio</h1>
<div class="row mt-3">
<div class="col-md-3 mb-3 col-sm-6">
<div class="position-relative project">
<img src="./images/portfolio/work4.jpg" alt="" class="img-fluid">
<div class="project-name position-absolute px-5">
<div class="border border-2 border-white py-5 fs-5">
Project
</div>
</div>
</div>
</div>
<div class="col-md-3 mb-3 col-sm-6">
<div class="position-relative project">
<img src="./images/portfolio/work3.jpg" alt="" class="img-fluid">
<div class="project-name position-absolute px-5">
<div class="border border-2 border-white py-5 fs-5">
Ontario
</div>
</div>
</div>
</div>
<div class="col-md-3 mb-3 col-sm-6">
<div class="position-relative project">
<img src="./images/portfolio/work2.jpg" alt="" class="img-fluid">
<div class="project-name position-absolute px-5">
<div class="border border-2 border-white py-5 fs-5">
Diamond
</div>
</div>
</div>
</div>
<div class="col-md-3 mb-3 col-sm-6">
<div class="position-relative project">
<img src="./images/portfolio/work1.jpg" alt="" class="img-fluid">
<div class="project-name position-absolute px-5">
<div class="border border-2 border-white py-5 fs-5">
Carrey
</div>
</div>
</div>
</div>
<div class="col-md-3 mb-3 col-sm-6">
<div class="position-relative project">
<img src="./images/portfolio/work5.jpg" alt="" class="img-fluid">
<div class="project-name position-absolute px-5">
<div class="border border-2 border-white py-5 fs-5">
Elera
</div>
</div>
</div>
</div>
<div class="col-md-3 mb-3 col-sm-6">
<div class="position-relative project">
<img src="./images/portfolio/work6.jpg" alt="" class="img-fluid">
<div class="project-name position-absolute px-5">
<div class="border border-2 border-white py-5 fs-5">
Selector
</div>
</div>
</div>
</div>
<div class="col-md-3 mb-3 col-sm-6">
<div class="position-relative project">
<img src="./images/portfolio/work7.jpg" alt="" class="img-fluid">
<div class="project-name position-absolute px-5">
<div class="border border-2 border-white py-5 fs-5">
Burned
</div>
</div>
</div>
</div>
<div class="col-md-3 mb-3 col-sm-6">
<div class="position-relative project">
<img src="./images/portfolio/work8.jpg" alt="" class="img-fluid">
<div class="project-name position-absolute px-5">
<div class="border border-2 border-white py-4 fs-5">
BAILEY WONGER
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="py-5" id="contact">
<div class="container">
<h1 class="text-center text-uppercase pb-3 text-white">Contact us</h1>
<div class="row mt-3 justify-content-center">
<form action="" class="col-md-8 col-lg-7" id="contact-form">
<div class="row">
<div class="col-md-6 mb-3">
<input type="text" class="form-control name" placeholder="Name...">
<div class="invalid-feedback">
Please provide your name.
</div>
</div>
<div class="col-md-6 mb-3">
<input type="email" class="form-control" id="email" placeholder="Email...">
<div class="invalid-feedback">
Please provide your email.
</div>
</div>
<div class="col-md-12 ps-0 ps-md-3">
<textarea name="message" id="message" rows="6" class="form-control"
placeholder="Your message here..."></textarea>
<div class="invalid-feedback">
Please provide a message.
</div>
</div>
</div>
<div class="mt-4 text-center">
<button class="btn border-1 border-white text-white">
Submit
</button>
</div>
</form>
</div>
</div>
</section>
<footer class="py-3">
<div class="row justify-content-center">
<div class="col-md-6 text-center">
<div class="d-flex mb-3 flex-wrap justify-content-center">
<img src="./images/social_icons/twitter.png" alt="" class="p-1">
<img src="./images/social_icons/dribble.png" alt="" class="p-1">
<img src="./images/social_icons/facebook.png" alt="" class="p-1">
<img src="./images/social_icons/g_plus.png" alt="" class="p-1">
<img src="./images/social_icons/dribble.png" alt="" class="p-1">
<img src="./images/social_icons/skype.png" alt="" class="p-1">
<img src="./images/social_icons/stumble_upon.png" alt="" class="p-1">
<img src="./images/social_icons/behance.png" alt="" class="p-1">
<img src="./images/social_icons/pinterest.png" alt="" class="p-1">
<img src="./images/social_icons/flickr.png" alt="" class="p-1">
</div>
<p class="text-uppercase mb-0">Delani Studio</p>
<p class="year">2022</p>
</div>
</div>
</footer>
<!-- link of jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- link of js bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- link of javascript -->
<script src="js/script.js"></script>
</body>
</html>