-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathabout.html
154 lines (147 loc) · 5.78 KB
/
about.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
<title>About Us | Ubix Agency</title>
<meta name="description" content="We design and develop transformative user experiences across all platforms." />
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/menu.css">
<link rel="stylesheet" href="css/loader.css">
<link rel="stylesheet" href="css/home.css">
<link rel="stylesheet" href="css/about.css">
<link rel="stylesheet" href="css/services.css">
<link rel="stylesheet" href="css/team.css">
<link rel="stylesheet" href="css/contact.css">
<script src="js/pkgs/barba.umd.js"></script>
<script src="js/pkgs/lodash.min.js"></script>
<script src="js/pkgs/revealer.iife.js"></script>
<script src="js/pkgs/gsap.min.js"></script>
<script src="js/pkgs/TweenMax.min.js"></script>
<script src="js/pkgs/anime.min.js"></script>
<script src="js/pkgs/tailwindcss.min.js"></script>
</head>
<body data-barba="wrapper">
<div class="navbar">
<a href="/index.html" class="logo__btn">
<img src="/assets/logo.png" alt="">
</a>
<nav class="menu__itms">
<a href="index.html">home</a>
<a href="about.html">about</a>
<a href="services.html">services</a>
<a href="team.html">team</a>
<a href="contact.html">contact</a>
</nav>
<button class="menu__btn">menu</button>
</div>
<div id="loader-container"></div>
<div id="menu-container"></div>
<script>
function loadComponent(htmlFile, containerId, scriptFile) {
fetch(htmlFile)
.then(response => response.text())
.then(data => {
document.getElementById(containerId).innerHTML = data;
const script = document.createElement("script");
script.src = scriptFile;
document.body.appendChild(script);
})
.catch(error => console.error(`Error loading ${htmlFile}:`, error));
}
loadComponent("loader.html", "loader-container", "js/loader.js");
loadComponent("menu.html", "menu-container", "js/menu.js");
</script>
<main data-barba="container" data-barba-namespace="about">
<section id="section1">
<!-- <div id="tiles"></div> -->
<div class="hero">
<h3>Hey, we're <span>UBIX</span></h3>
<h1>
<span>Creative Design &</span><br />
<span>Development Agency</span>
</h1>
</div>
</section>
<div class="marquee">
<ul>
<li>
<span>Flexible Price</span>
</li>
<li>
<span>User Centric Design</span>
</li>
<li>
<span>AI-Driven Solutions</span>
</li>
<li>
<span>Dedicated Support 24/7</span>
</li>
</ul>
<ul aria-hidden="true">
<li>
<span>Flexible Price</span>
</li>
<li>
<span>User Centric Design</span>
</li>
<li>
<span>AI-Driven Solutions</span>
</li>
<li>
<span>Dedicated Support 24/7</span>
</li>
</ul>
</div>
<section id="section2">
<h2>
As a full-service digital agency, we work closely with our clients to define, design and develop
transformative user experiences across all platforms and brand's touchpoints.
</h2>
</section>
<section id="section3">
<h2>Our high-quality working processes</h2>
<p class="info">
We focus at every stage on effective communication and collaboration between the client and
ensuring that the final design meets the client's objectives and expectations.
</p>
<div class="process__container">
<div class="process__card">
<div class="process__step">
STEP 1
</div>
<h4>Strategic Approach</h4>
<p>
We begin by understanding your goals and crafting a plan to ensure every creative choice
supports your vision.
</p>
</div>
<div class="process__card">
<div class="process__step">
STEP 2
</div>
<h4>Collaboration is Key</h4>
<p>
We work hand-in-hand with you, combining your ideas and our expertise to create something
unique.
</p>
</div>
<div class="process__card">
<div class="process__step">
STEP 3
</div>
<h4>End to End Delivery</h4>
<p>
From start to finish, we handle every aspect to deliver a polished, high-quality result on time.
</p>
</div>
</div>
<p class="info">
*It is important to note that these are simplified steps, and the actual work process may vary
depending on the complexity of the project.
</p>
</section>
</main>
<script src="js/page.js"></script>
</body>
</html>