-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
311 lines (290 loc) · 10.7 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
311
<!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 href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.css">
<link rel="stylesheet" href="style.css">
<title>Ubunzo</title>
</head>
<body>
<div id="main">
<div id="page_1" class="bgpos">
<div class="nav">
<div class="elm1">
<img src="logo.svg" alt="">
<i class="ri-menu-line"></i>
</div>
<div class="elm2">
<i class="ri-linkedin-fill"></i>
<i class="ri-behance-fill"></i>
<i class="ri-twitter-fill"></i>
<i class="ri-instagram-line"></i>
</div>
</div>
<div class="center">
<div class="elem1">
<div class="video">
<video autoplay loop muted>
<source src="video1.mp4">
<source src="video2.mp4">
</video>
</div>
<p>Welcome to ubunzo! We’re a small but mighty digital design studio that’s passionate about creating engaging and meaningful design experiences.</p>
</div>
<div class="elem2">
<div class="text">
<h6 class="contact">Contact Us</h6>
<h3>
Elevate <div class="btncenter"><a href="">See</a>Through</div>
Design
</h3>
</div>
<div class="video2">
<video autoplay loop muted>
<source src="video3.webm">
<source src="video4.mp4">
</video>
</div>
</div>
</div>
</div>
<div id="page_2">
<div class="page2text">
<div class="div1"><p>Slant</p></div>
<div class="div2"> <p>We believe that design is more than just pretty pictures; it’s a powerful tool that can help businesses connect with their audience and build valuable relationships. Ubunzo helps you create, expand, and nurture your customer base - all with a little spark of design.</p>
</div>
</div>
<div class="box1">
<div class="content">
<div class="left">
<a href=""><img src="star.svg" alt="">01</a>
<h3>We Understand Your Budget</h3>
<p>It can be challenging to create a truly unique product while staying within your budget. But don't worry, we've got you covered! If your vision seems to be stretching the limits, our team is always ready to get creative and come up with workarounds that will make your idea possible without breaking the bank.
</p>
</div>
<div class="right">
<div class="cont">
<div class="elem1">
<img src="thunder.svg" alt="">
<img src="eye.svg" alt="">
<img class="eyes" src="eyecirlce.svg" alt="">
</div>
</div>
<div class="elem2">
<a href=""><img src="star.svg" alt="">04</a>
<h3>We Focus On You</h3>
<p>
When you work with us, you can expect our undivided commitment and 100% focus on your project. We believe that every project deserves the highest level of attention and care, and we're committed to making sure that yours is implemented to perfection.
</p> </div>
</div>
</div>
</div>
<div class="box2">
<div class="content">
<div class="left">
<a href=""><img src="star.svg" alt="">03</a>
<h3>We Deliver Promptly</h3>
<p>
We work closely with our clients to create realistic timelines, so you can rest assured that your project will be completed within the agreed-upon timeframe. We take pride in our ability to hit deadlines and deliver high-quality work, no matter what.
</p>
</div>
<div class="right">
<a href=""><img src="star.svg" alt="">04</a>
<h3>We Communicate</h3>
<p>
We believe that great communication is the key to a successful partnership, and we're committed to keeping you in the loop every step of the way. We'll follow up regularly, update you on progress, and make sure you're always in the know. </p>
<img class="stars" src="stars.svg" alt="">
</div>
</div>
</div>
<div class="page2text">
<div class="div1"><p>Work</p></div>
<div class="div2"> <p>Check out some of our amazing design masterpieces! We are passionate about rejuvenating brands and making them shine.</p>
</div>
</div>
</div>
<div id="page_3">
<div class="left">
<div class="bg">
<h1>OUR PACKAGES</h1>
<h3>VIEW ALL SERVICES </h3>
<img src="pg3bg.svg" alt="">
<p>At ubunzo, we understand how important it is to make a great first impression. Our team of skilled designers is here to help you showcase your brand in the best possible light. Whether you choose one of our design packages or opt for a custom service, we’ll work closely with you to create stunning designs that are tailored to your unique business needs.</p>
</div>
</div>
<div class="right">
<div class="contain">
<div class="img">
<img src="hanger.svg" alt="">
</div>
<div class="overflow">
<div class="contents transform1">
<div class="package">
<a href=""><img src="evil.webp" alt="">01</a>
<h1>
STARTER
</h1>
<h3>
includes:
</h3>
<p>
For businesses and startups that need to kick-start their online presence fast and efficiently. No hour-long exhausting calls to get your project going. Your project is already planned.
</p>
<h4>
ABOUT THIS PACKAGE
</h4>
<h5>
Book Now
</h5>
</div>
</div>
<div class="contents transform2">
<div class="package">
<a href=""><img src="evil2.webp" alt="">02</a>
<h1>
STARTER
</h1>
<h3>
includes:
</h3>
<p>
For businesses and startups that need to kick-start their online presence fast and efficiently. No hour-long exhausting calls to get your project going. Your project is already planned.
</p>
<h4>
ABOUT THIS PACKAGE
</h4>
<h5>
Book Now
</h5>
</div>
</div>
<div class="contents transform3">
<div class="package">
<a href=""><img src="evil3.webp" alt="">03</a>
<h1>
STARTER
</h1>
<h3>
includes:
</h3>
<p>
For businesses and startups that need to kick-start their online presence fast and efficiently. No hour-long exhausting calls to get your project going. Your project is already planned.
</p>
<h4>
ABOUT THIS PACKAGE
</h4>
<h5>
Get Now
</h5>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="page_4">
<div class="page2text">
<div class="div1"><p>Processes</p></div>
<div class="div3"> <p>
Welcome to ubunzo, where transparency and openness are at the heart of everything we do. That’s why we’ve created a detailed guide to our design development processes. It outlines each step of the way, so you can follow along and see how we bring your vision to reality. </p>
</div>
</div>
<div class="villans">
<div class="all">
<div class="vlleft hover1">
<h3>
Website Design
</h3>
<p>
We create intuitive and visually stunning interfaces that drive traffic and sales.
</p>
</div>
<div class="vlleft hover2">
<h3>
Motion Graphics
</h3>
<p>
We create spicy animations so your brand can stand out among the competitors.
</p>
</div>
<div class="vlleft hover3">
<h3>
Graphic Design
</h3>
<p>
We design branding assets that evoke emotions and connect with audiences through mutual values.
</p>
</div>
</div>
<div class="all">
<div class="vlright">
<img class="img1" src="vil.webp" alt="">
</div>
<div class="vlright">
<img class="img2" src="vil1.webp" alt="">
</div>
<div class="vlright">
<img class="img3" src="vil2.webp" alt="">
</div>
</div>
</div>
</div>
<div class="marquee">
<div class="left">
<h3><img src="marquee.svg" alt="">latest work</h3>
<h3><img src="marquee.svg" alt="">latest work</h3>
<h3><img src="marquee.svg" alt="">latest work</h3>
<h3><img src="marquee.svg" alt="">latest work</h3>
<h3><img src="marquee.svg" alt="">latest work</h3>
<h3><img src="marquee.svg" alt="">latest work</h3>
<h3><img src="marquee.svg" alt="">latest work</h3>
<h3><img src="marquee.svg" alt="">latest work</h3>
<h3><img src="marquee.svg" alt="">latest work</h3>
<h3><img src="marquee.svg" alt="">latest work</h3>
<h3><img src="marquee.svg" alt="">latest work</h3>
<h3><img src="marquee.svg" alt="">latest work</h3>
<h3><img src="marquee.svg" alt="">latest work</h3>
</div>
</div>
<div id="ftr">
<div class="elm1">
<div>
<ul>
<li>LATEST WORK
</li>
<li> ABOUT</li>
<li> SERVICES</li>
<li>LICENSE TRACKS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
<div class="elem2">
<div class="d1">
<h3>STUDIO</h3>
<p> Studios</p>
<p>1500 S Ogden Drive</p>
<p>LA, Ca, 9019</p>
</div>
<div class="d2">
<h3>Let's Connect
</h3>
<p>[email protected]</p>
</div>
<div class="d3">
<h3>SOCIALS</h3>
<p>Instagram</p>
<p>Vimeo</p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script>
<script src="script.js"></script>
</body>
</html>