-
Notifications
You must be signed in to change notification settings - Fork 1
/
technology.html
348 lines (285 loc) · 13.9 KB
/
technology.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
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Technology Blog</title>
</head>
<body>
<!--Nav bar-->
<div class="container-fluid">
<div class="navbar navbar-expand-lg bg-body-tertiary">
<a href="#" class="navbar-brand">
<img src="img/logo.jpg" alt="logo" class="logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item"><a href="index.html#home" class="nav-link">Home</a></li>
<li class="nav-item"><a href="index.html#about" class="nav-link">About Us</a></li>
<li><a href="description.html">Services</a></li>
<li class="nav-item"><a href="index.html#portfolio" class="nav-link">Projects/Portfolio</a></li>
<li class="nav-item"><a href="index.html#blog" class="nav-link">Blog</a></li>
<li><a href="prometheusapm.html">PrometheusAPM</a></li>
<li class="nav-item"><a href="index.html#contact" class="nav-link">Contact Us</a></li>
</ul>
</div>
</div>
</div>
<div class="container py-5">
<div class="hero-bg">
<img class="background-image" src="img/techbg-transformed.png" alt="bgimg">
<h2 class="text-center mb-4">Technology</h2>
<div class="bubbles"></div>
</div>
</div>
<div class="container py-5">
<p class="text-center mb-4"><strong>The Transformative Power of Technology at AtonixCorp</strong></p>
<p>In the rapidly evolving landscape of technology, AtonixCorp stands as a beacon of innovation and excellence. Our commitment to leveraging cutting-edge technologies drives us to develop solutions that transform industries and improve lives. Here, we delve into the various technological domains where AtonixCorp is making a significant impact.</p>
<p><strong>Internet of Things (IoT)</strong></p>
<p>At AtonixCorp, we harness the power of the Internet of Things (IoT) to create smart, connected ecosystems. Our IoT solutions span across various industries, enabling seamless data exchange and actionable insights. From precision agriculture that boosts crop yield to industrial automation that enhances operational efficiency, our IoT technology is at the forefront of driving industry advancements.</p>
<p><strong>Agriculture Technology</strong></p>
<p>Sustainability and efficiency are at the heart of our agriculture technology solutions. We are dedicated to supporting small farmers by optimizing irrigation, fertigation, and solar power systems. Our innovative solutions not only enhance crop yield but also ensure resource efficiency, contributing to a sustainable agricultural future.</p>
<p><strong>Oil Technology Research</strong></p>
<p>In the realm of oil and energy, AtonixCorp employs a data-driven approach to improve operational efficiency and safety. Our research and analytics help oil companies streamline processes, enhance safety protocols, and maximize production output. Our commitment to advancing oil technology is underscored by our innovative methodologies and data-centric solutions.</p>
<p><strong>Artificial Intelligence (AI) Solutions</strong></p>
<p>Artificial Intelligence (AI) is revolutionizing how businesses operate. At AtonixCorp, our AI solutions automate processes, enhance decision-making, and provide deep insights from data. From predictive maintenance that reduces downtime to personalized recommendations that enhance user engagement, our AI technology addresses critical business needs and drives innovation.</p>
<p><strong>Machine Learning (ML) Solutions</strong></p>
<p>Machine Learning (ML) focuses on building systems that learn from data and improve over time. Our ML solutions at AtonixCorp handle complex data sets and provide actionable insights for various applications. From image and video analysis that automates quality control to predictive analytics that optimize operations, our ML technology is at the cutting edge of industry advancements.</p>
<p><strong>Media and Entertainment Technology</strong></p>
<p>Blending creativity with technology, our media and entertainment solutions at AtonixCorp deliver exceptional experiences. From immersive content delivery using VR and AR to personalized recommendations powered by AI, our technology ensures seamless and engaging experiences for users worldwide. Our advanced media analytics and content management systems empower creators to optimize their content strategies and enhance audience engagement.</p>
<p>At AtonixCorp, we are not just about providing services; we are about making a meaningful impact. Our comprehensive technology solutions are designed to address the diverse needs of industries and drive transformative change. Join us in exploring our innovative solutions and see how we can work together to achieve excellence and innovation.</p>
<div class="text-center"><b>
<p class="quote">"At AtonixCorp, we’re not just about providing services; we’re about making a meaningful impact. Join us in exploring our comprehensive solutions and see how we can work together to achieve excellence and innovation."</p>
</b></div>
</div>
<!--footer-->
<div class="footer">
<div class="footer-content container">
<div class="footer-section">
<h3>About Us</h3>
<p style="font-weight: bold;">
AtonixCorp </p>
<p>
<i>Pioneering data analytics and technology solutions.<br>
Explore our innovations in IoT, agriculture, oil, AI, and media.<br>
Join us in shaping the future of technology.</i>
</p>
</div>
<div class="footer-section">
<h3>Contact Us</h3>
<p style="font-weight: bold;">Email: contact@example.com</p>
<p style="font-weight: bold;">Phone: +123 456 7890</p><br>
<p style="font-weight: bold;">Office address: <a href="https://www.google.com/maps?q=70+W+Madison+St,+Chicago,+IL+60602,+United+States" target="_blank">70 W Madison St, Chicago, IL 60602, United States</a></p>
</div>
<div class="footer-section">
<h3>Follow Us</h3>
<div class="social-icons">
<a href="https://www.linkedin.com/company/atonixcorp/" aria-label="LinkedIn"><img src="animation/icons8-linkedin-circled.gif" alt="linkedin" class="gif-icon"></a>
<a href="https://twitter.com/ofidohub" aria-label="Twitter"><img src="animation/icons8-twitter.gif" alt="twitter" class="gif-icon">
</a>
<a href="https://www.instagram.com/ofidohub/" aria-label="Instagram"><img src="animation/icons8-instagram.gif" alt="instagram" class="gif-icon">
</a>
</div>
</div>
<div class="footer-section">
<h3>Quick Links</h3>
<ul>
<li><a href="index.html#home">Home</a></li>
<li><a href="index.html#about">About</a></li>
<li><a href="description.html">Services</a></li>
<li><a href="index.html#contact">Contact</a></li>
</ul>
</div>
</div>
<p>© 2024 AtonixCorp</p>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const bubbles = document.querySelector('.bubbles');
const bubbleCount = 100; // Number of bubbles
for (let i = 0; i < bubbleCount; i++) {
const bubble = document.createElement('span');
bubble.className = 'bubble';
bubble.style.left = `${Math.random() * 100}%`; // Random horizontal position
bubble.style.animationDuration = `${Math.random() * 5 + 5}s`; // Random duration between 5s and 10s
bubble.style.animationDelay = `${Math.random() * 5}s`; // Random delay between 0s and 5s
bubble.style.width = `${Math.random() * 20 + 10}px`; // Random size between 10px and 30px
bubble.style.height = bubble.style.width; // Ensure bubble is circular
bubbles.appendChild(bubble);
}
});
</script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Bubble effect */
.bubbles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 1; /* Ensure the bubbles are above the background image but below the text */
}
.bubble {
position: absolute;
bottom: -50px;
background: rgb(255, 195, 15);
border-radius: 50%;
opacity: 0;
animation: rise 10s infinite;
}
@keyframes rise {
0% {
transform: translateY(0);
opacity: 0;
}
20% {
opacity: 1;
}
100% {
transform: translateY(-100vh);
opacity: 0;
}
}
.hero-bg {
position: relative;
height: 100vh; /* Full viewport height */
display: flex;
align-items: center;
justify-content: center;
}
.hero-bg .background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* Ensure the image covers the container */
z-index: 0; /* Ensure the image is below the text */
}
.hero-bg {
position: relative;
height: 100vh; /* Full viewport height */
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.hero-bg h2 {
padding-bottom: 300px;
position: absolute; /* Absolute positioning to place it on top of the background */
top: 50%; /* Center vertically */
left: 50%; /* Center horizontally */
transform: translate(-50%, -50%); /* Center the element itself */
background-color: rgba(112, 8, 8, 0); /* Semi-transparent background color */
color: #ffffff;
font-size: 4rem;
font-weight: 900;
text-transform: capitalize;
text-align: center;
z-index: 2; /* Ensure text is above the background image */
cursor: default;
transition: color 0.3s ease, text-shadow 0.3s ease; /* Smooth transition */
}
/* Hover effect for the h2 element */
.hero-bg h2:hover {
color: #ffea00; /* Change text color on hover */
text-shadow: 0 0 10px rgba(247, 131, 14, 0.838), /* Red glow effect */
0 0 20px rgba(255, 166, 0, 0.781),
0 0 30px rgba(255, 151, 6, 0.3);
}
/* Footer container */
.footer {
background-image: url(img/footer.jpg); /* Dark background color */
color: #ffffff; /* black text color */
padding: 40px 0; /* Top and bottom padding */
text-align: center; /* Center text */
}
/* Footer content container */
.footer-content {
display: flex;
flex-wrap: wrap; /* Allows sections to wrap to the next line if needed */
justify-content: center; /* Center the footer sections horizontally */
gap: 20px; /* Space between sections */
}
/* Individual footer sections */
.footer-section {
flex: 1 1 200px; /* Grow and shrink with a base width of 200px */
padding: 0 15px; /* Horizontal padding for sections */
}
.footer-section h3 {
color: #ffffff;
margin-bottom: 15px; /* Space below the heading */
font-size: 30px; /* Font size for headings */
}
.footer-section p, .footer-section ul {
margin: 0; /* Remove default margin */
font-weight: 100;
color: #f6f4f4;
font-size: 20px; /* Font size for paragraphs and list items */
}
.footer-section ul {
list-style-type: none; /* Remove bullet points */
padding: 0; /* Remove default padding */
}
.footer-section ul li {
margin-bottom: 10px; /* Space between list items */
}
.footer-section ul li a {
color: #ffffff; /* White text color for links */
text-decoration: none; /* Remove underline from links */
}
.footer-section ul li a:hover {
text-decoration: underline; /* Underline on hover */
}
.social-icons a {
margin: 0 10px; /* Space between social icons */
display: inline-block; /* Align icons horizontally */
}
.social-icons img {
width: 30px; /* Size of social icons */
height: 30px; /* Size of social icons */
}
/* Responsive footer */
@media (max-width: 768px) {
.footer-section {
flex: 1 1 100%; /* Full width on smaller screens */
padding: 10px 0; /* Vertical padding for sections */
}}
/* Responsive adjustments */
@media (max-width: 768px) {
.hero-bg {
height: 50vh; /* Adjusted height for smaller screens */
}
.hero-bg h2 {
font-size: 3rem; /* Smaller font size on tablets */
padding: 0 15px; /* Reduce horizontal padding */
margin-top: 30px; /* Adjust the down position for tablets */
}
}
@media (max-width: 480px) {
.hero-bg {
height: 50vh; /* Adjusted height for very small screens */
}
.hero-bg h2 {
font-size: 2rem; /* Smaller font size on mobile devices */
padding: 0 10px; /* Further reduce horizontal padding */
margin-top: 20px; /* Adjust the down position for mobile devices */
}
}
</style>